/*------------------------------------------------------------------------------
FILTERS
------------------------------------------------------------------------------*/

.xfilters {
    margin-bottom: 20px;
}

/*------------------------------------------------------------------------------
XDEBUG
------------------------------------------------------------------------------*/

.xdebug {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 10px;
    background-color: #c0c0c0;
    border: 5px solid #808080;
    line-height: 20px;
    font-size: 14px;
}

.xdebug h1 {
    font-size: 22px;
    color: black;
}

.xdebug h2 {
    color: red;
    font-size: 17px;
    font-weight: normal;
    margin: 0 0 5px 0;
}

.xdebug label {
    display: inline-block;
    width: 80px;
    line-height: 20px;
    font-size: 14px;
}

.xdebug .xmsg {
    padding: 10px;
}

.xdebug .xmsg.xerror {
    background-color: #fadada;
    border: 2px solid red;
}
.xdebug .xmsg.xerror h2 {
    color: red;
}

.xdebug .xmsg.xwarning {
    background-color: #fff4db;
    border: 2px solid #ca9006;
}
.xdebug .xmsg.xwarning h2 {
    color: #ca9006;
}

.xdebug .xmsg.xinfo {
    background-color: #e7ffd9;
    border: 2px solid #3e9807;
}
.xdebug .xmsg.xinfo h2 {
    color: #3e9807;
}

/*------------------------------------------------------------------------------
XPROGRESSBAR
------------------------------------------------------------------------------*/

.xprogressbar {
    position: relative;
    width: 100%;
    height: 100%;
}

.xprogressbar .xbarouter {
    position: absolute;
    top: 30px;
    height: 8px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
}

.xprogressbar .xpart {
    background-color: white;
    flex-basis: calc(20% - 5px);
}

.xprogressbar .xfill {
    height: 100%;
    background-color: #fe8633;
}

.xprogressbar .xarrow  {
    position: absolute;
    top: 44px;
    left: calc(0% - 10px);
    width: 19px;
    height: 19px;
    background-image: url(../images/arrow_up.png);
    background-size: 19px 19px;
    background-repeat: no-repeat;
    background-position: center center;
}

.xprogressbar .xlabel  {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 11px;
    color: white;
}

.xprogressbar .xlabel1 {
    left: 0;
}

.xprogressbar .xlabel2 {
    left: calc(20% - 20px);
}

.xprogressbar .xlabel3 {
    left: calc(100% - 36px);
}

@media (max-width: 768px) {
    .xprogressbar .xlabel {
        font-size: 10px;
        top: 6px;
    }
    .xprogressbar .xarrow {
        background-size: 13px 13px;
        top: 38px;
    }
    .xprogressbar .xpart {
        flex-basis: calc(20% - 4px);
    }
}

/*!*------------------------------------------------------------------------------*/
/*XQUESTION*/
/*------------------------------------------------------------------------------*!*/

/*.xquestion {*/
/*    padding-right: 100px;*/
/*}*/

/*.xquestion table {*/
/*    table-layout: fixed;*/
/*    width: 100%;*/
/*}*/

/*.xquestion table td {*/
/*    height: 120px;*/
/*    !*vertical-align: top;*!*/
/*    !*border: 1px solid white;*!*/
/*    vertical-align: middle;*/
/*}*/
/*.xquestion table td:first-child {*/
/*    width: 64px;*/
/*    text-align: center;*/
/*}*/

/*.xquestion .xcircle {*/
/*    display: inline-block;*/
/*    width: 64px;*/
/*    height: 64px;*/
/*    border-radius: 32px;*/
/*    background-color: #fe8633;*/
/*    text-align: center;*/
/*    color: white;*/
/*    font-size: 40px;*/
/*    line-height: 64px;*/
/*    font-weight: bold;*/
/*    letter-spacing: -4px;*/
/*    padding-right: 4px;*/
/*    flex: 0 0;*/
/*    user-select:none;*/
/*    -moz-user-select: none;*/
/*    -webkit-user-select: none;*/
/*    -ms-user-select: none;*/
/*}*/

/*.xquestion table td:nth-child(2) {*/
/*    font-family: "Barlow Condensed", sans-serif;*/
/*    font-size: 40px;*/
/*    color: white;*/
/*    line-height: 40px;*/
/*    font-weight: 600;*/
/*    width: calc(100% - 64px);*/
/*    vertical-align: middle;*/
/*    padding-left: 30px;*/
/*    -webkit-touch-callout: none;*/
/*    -webkit-user-select: none;*/
/*    -khtml-user-select: none;*/
/*    -moz-user-select: none;*/
/*    -ms-user-select: none;*/
/*    user-select: none;*/
/*    !*padding-top: 7px;*!*/
/*}*/

/*.xquestion .xoptions {*/
/*    width: 100%;*/
/*    display: flex;*/
/*    flex-direction: row-reverse;*/
/*    flex-wrap: nowrap;*/
/*    justify-content: space-between;*/
/*    align-items: stretch;*/
/*    padding-left: 98px;*/
/*    margin-top: 50px;*/
/*}*/

/*.xquestion .xoptions .xoption {*/
/*    display: inline-block;*/
/*    width: 115px;*/
/*    height: 115px;*/
/*    border-radius: 20px;*/
/*    background-color: white;*/
/*    cursor: pointer;*/
/*    overflow: hidden;*/
/*    white-space: nowrap;*/
/*}*/

/*.xquestion .xoptions input {*/
/*    display: none;*/
/*}*/

/*.xquestion .xoptions .xoption label {*/
/*    display: inline-block;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    cursor: pointer;*/
/*}*/

/*.xquestion .xoptions .xoption .xlabel {*/
/*    height: 58px;*/
/*    line-height: 58px;*/
/*    padding-left: 80px;*/
/*    font-family: "Barlow Condensed", sans-serif;*/
/*    font-size: 16px;*/
/*    color: #009fe3;*/
/*    display: none;*/
/*}*/

/*.xquestion .xoptions .xoption .xlabel.xlabel2 { color: #bcbdbd; }*/
/*.xquestion .xoptions .xoption .xlabel.xlabel1 { color: #fe8633; }*/
/*.xquestion .xoptions .xoption .xlabel.xlabel0 { color: #fe8633; }*/

/*.xquestion .xoptions .xoption {*/
/*    position: relative;*/
/*    background-size: 85% 85%;*/
/*    background-repeat: no-repeat;*/
/*    background-position: center center;*/
/*    overflow: visible;*/
/*}*/

/*.xquestion .xoptions .xoption .xborder {*/
/*    position: absolute;*/
/*    width: calc(100% + 10px);*/
/*    height:  calc(100% + 10px);*/
/*    border: 5px solid #009fe3;*/
/*    border-radius: 25px;*/
/*    top: -5px;*/
/*    left: -5px;*/
/*    display: none;*/
/*}*/

/*.xquestion .xoptions .xoption.xselected .xborder {*/
/*    display: block;*/
/*}*/

/*.xquestion .xoptions .xoption.xselected {*/
/*    background-size: 95% 95%;*/
/*}*/

/*.xquestion .xoptions .xoption0 { background-image: url(../images/option0.png); }*/
/*.xquestion .xoptions .xoption1 { background-image: url(../images/option1.png); }*/
/*.xquestion .xoptions .xoption2 { background-image: url(../images/option2.png); }*/
/*.xquestion .xoptions .xoption3 { background-image: url(../images/option3.png); }*/
/*.xquestion .xoptions .xoption4 { background-image: url(../images/option4.png); }*/

/*.xquestion .xoptions .xoption.xselected {*/
/*    !*animation-timing-function: ease-out;*!*/
/*    -webkit-animation: fadein 0.3s forwards;*/
/*    -moz-animation: fadein 0.3s forwards;*/
/*    -o-animation: fadein 0.3s forwards;*/
/*    -ms-animation: fadein 0.3s forwards;*/
/*    animation: fadein 0.3s forwards;*/
/*}*/

/*.xquestion .xoptions .xoption.xdeselected {*/
/*    animation-timing-function: ease-out;*/
/*    -webkit-animation: fadeout 0.4s forwards;*/
/*    -moz-animation: fadeout 0.4s forwards;*/
/*    -o-animation: fadeout 0.4s forwards;*/
/*    -ms-animation: fadeout 0.4s forwards;*/
/*    animation: fadeout 0.4s forwards;*/
/*}*/

/*@keyframes fadeout {*/
/*    0%   { opacity: 1; }*/
/*    100% { opacity: 0.3; }*/
/*}*/

/*@keyframes fadein {*/
/*    !*0%   { background-size: 85px 85px; }*!*/
/*    !*100% { background-size: 95px 95px; }*!*/
/*}*/

/*@media (max-width: 1000px) {*/
/*    .xquestion .xoptions .xoption {*/
/*        width: 11vw;*/
/*        height: 11vw;*/
/*    }*/
/*    .xquestion table td:nth-child(2) {*/
/*        font-size: 4vw;*/
/*        line-height: 4vw;*/
/*    }*/
/*}*/

/*@media (max-width: 768px) {*/
/*    .xquestion table td:nth-child(2) {*/
/*        !*padding-top: 2vw;*!*/
/*    }*/
/*    .xquestion .xcircle {*/
/*        width: 8vw;*/
/*        height: 8vw;*/
/*        font-size: 5vw;*/
/*        line-height: 8vw;*/
/*    }*/
/*    .xquestion .xoptions {*/
/*        flex-direction: column;*/
/*        flex-wrap: wrap;*/
/*        justify-content: normal;*/
/*        align-items: stretch;*/
/*        margin-top: 10vw;*/
/*    }*/
/*    .xquestion .xoptions .xoption {*/
/*        display: block;*/
/*        width: 100%;*/
/*        height: 58px;*/
/*        background-size: 45px 45px;*/
/*        background-position: left 20px center;*/
/*        margin-bottom: 12px;*/
/*    }*/
/*    .xquestion .xoptions .xoption .xlabel {*/
/*        display: block;*/
/*    }*/
/*    @keyframes fadein {*/
/*        !*0%   { background-size: 45px 45px; }*!*/
/*        !*100% { background-size: 51px 51px; background-position: left 17px center; }*!*/
/*    }*/
/*    .xquestion .xoptions .xoption.xselected {*/
/*        background-size: 55px 55px;*/
/*        background-position: left 15px center;*/
/*    }*/
/*    .xquestion .xoptions .xoption.xdeselected {*/
/*        background-size: 45px 45px;*/
/*    }*/
/*}*/

/*------------------------------------------------------------------------------
XQUESTION
------------------------------------------------------------------------------*/

.xquestion {
    padding-right: 100px;
}

.xquestion table {
    /*table-layout: fixed;*/
    width: 100%;
}

.xquestion table td {
    height: 120px;
    vertical-align: middle;
}
.xquestion table td:first-child {
    width: 64px;
    /*text-align: center;*/
}

.xquestion .xcircle {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background-color: #fe8633;
    text-align: center;
    color: white;
    font-size: 40px;
    line-height: 64px;
    font-weight: bold;
    user-select:none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    letter-spacing: -1px;
    padding-right: 1px;
    flex: 0 0;
}

.xquestion table td:nth-child(2) {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 40px;
    color: white;
    line-height: 40px;
    font-weight: 600;
    width: calc(100% - 64px);
    vertical-align: middle;
    padding-left: 30px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.xquestion .xoptions {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    padding-left: 98px;
    margin-top: 50px;
}

.xquestion .xoptions .xoption {
    display: inline-block;
    width: 115px;
    height: 115px;
    border-radius: 20px;
    background-color: white;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

.xquestion .xoptions input {
    display: none;
}

.xquestion .xoptions .xoption label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.xquestion .xoptions .xoption .xlabel {
    height: 58px;
    line-height: 58px;
    padding-left: 80px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 16px;
    color: #009fe3;
    display: none;
}

.xquestion .xoptions .xoption .xlabel.xlabel2 { color: #bcbdbd; }
.xquestion .xoptions .xoption .xlabel.xlabel1 { color: #fe8633; }
.xquestion .xoptions .xoption .xlabel.xlabel0 { color: #fe8633; }

.xquestion .xoptions .xoption {
    position: relative;
    background-size: 85% 85%;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: visible;
}

.xquestion .xoptions .xoption .xborder {
    position: absolute;
    width: calc(100% + 10px);
    height:  calc(100% + 10px);
    border: 5px solid #009fe3;
    border-radius: 25px;
    top: -5px;
    left: -5px;
    display: none;
}

.xquestion .xoptions .xoption.xselected .xborder {
    display: block;
}

.xquestion .xoptions .xoption.xselected {
    background-size: 95% 95%;
}

.xquestion .xoptions .xoption0 { background-image: url(../images/option0.png); }
.xquestion .xoptions .xoption1 { background-image: url(../images/option1.png); }
.xquestion .xoptions .xoption2 { background-image: url(../images/option2.png); }
.xquestion .xoptions .xoption3 { background-image: url(../images/option3.png); }
.xquestion .xoptions .xoption4 { background-image: url(../images/option4.png); }

.xquestion .xoptions .xoption.xselected {
    /*animation-timing-function: ease-out;*/
    -webkit-animation: fadein 0.3s forwards;
    -moz-animation: fadein 0.3s forwards;
    -o-animation: fadein 0.3s forwards;
    -ms-animation: fadein 0.3s forwards;
    animation: fadein 0.3s forwards;
}

.xquestion .xoptions .xoption.xdeselected {
    animation-timing-function: ease-out;
    -webkit-animation: fadeout 0.4s forwards;
    -moz-animation: fadeout 0.4s forwards;
    -o-animation: fadeout 0.4s forwards;
    -ms-animation: fadeout 0.4s forwards;
    animation: fadeout 0.4s forwards;
}

@keyframes fadeout {
    0%   { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes fadein {
    /*0%   { background-size: 85px 85px; }*/
    /*100% { background-size: 95px 95px; }*/
}

@media (max-width: 1000px) {
    .xquestion .xoptions .xoption {
        width: 11vw;
        height: 11vw;
    }
    .xquestion table td:nth-child(2) {
        font-size: 4vw;
        line-height: 4vw;
    }
}

@media (max-width: 768px) {
    /*.xquestion table td:nth-child(2) {*/
    /*    !*padding-top: 2vw;*!*/
    /*}*/
    .xquestion {
        padding-right: 0;
    }
    .xquestion .xcircle {
        display: inline-block;
        width: 52px;
        height: 52px;
        border-radius: 26px;
        font-size: 26px;
        line-height: 52px;
    }
    .xquestion table td:nth-child(2) {
        font-size: 22px !important;
        line-height: 24px;
        padding-left: 5px;
    }
    .xquestion .xoptions {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: normal;
        align-items: stretch;
        padding-left: 0;
        margin-top: 20px;
    }
    .xquestion .xoptions .xoption {
        display: block;
        width: 100%;
        height: 58px;
        background-size: 45px 45px;
        background-position: left 25px center;
        margin-bottom: 12px;
    }
    .xquestion .xoptions .xoption .xlabel {
        display: block;
    }
    @keyframes fadein {
        /*0%   { background-size: 45px 45px; }*/
        /*100% { background-size: 51px 51px; background-position: left 17px center; }*/
    }
    .xquestion .xoptions .xoption.xselected {
        background-size: 55px 55px;
        background-position: left 15px center;
    }
    .xquestion .xoptions .xoption.xdeselected {
        background-size: 45px 45px;
    }
}