/* Vars Declaration */
.test-panel{
    --left-relative-padding-panel: 10px;
}

body{
    margin: 0;
    /*    min-width:1130px; */
    /*max-width: 1130px;*/
}

label:not(.error-checkbox-label){
    /*margin: -20px 10px 5px;*/
    /*display: inline-block !important;*/
}

.border.border-dashed{
    border-style: dashed !Important;
}

label:hover{
    text-decoration: underline;
}

.hidden{
    display: none;
}

.cawi .form-check label:before,
.cati .form-check label:before{
    border: 1px solid black !Important;
}

.cati .badge.page-name{
    color: #fff;
    background-color: #337ab7;
    font-size:16px;
}

#head {
    height: 60px;
    background: #F8F8F8;
}
#head .project-title p.lead{
    margin:0;
}
/*#head .project-title p.lead{
    margin-top:4px;
}*/

/* Styles for project title if test buttons are hidden */
#head .project-title.test-panel-buttons-hidden p.lead{
    margin-top:15px;
}

#head .progress-top{
    margin-top:17px;
}

/*#footer {
    left: 65%;
    bottom: 10px;
    height: 27px;
    width: 344px;
    background: #F8F8F8;
    padding-top: 5px;
    margin: 0;
    border: 1px solid grey;
    border-radius: 10px;
}*/

.copy{
    font-family: Calibri, sans-serif;
    color:#6a6a6a;
    font-size: 12px;
}

#logo{
    padding: 21px 0;
}

#progressbar{
    padding:20px 0 5px 0;
    text-align: right;
    /*    background: url('../img/logo.png') left 25px no-repeat;*/
}

.send{
    /*    text-align: center;
        padding-top: 60px;*/
}

.send input[type=submit]{
    padding-top: 6px;
    height: 40px;
    width: 145px;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    font-size: 16px;
    bottom:40px;
    position: relative;
}

/* Bootstrap bs'ses from  documentation page'*/
.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.bs-callout p:last-child {
    margin-bottom: 0;
}

.bs-callout code {
    border-radius: 3px;
}

.bs-callout+.bs-callout {
    margin-top: -5px;
}

.bs-callout-default {
    border-left-color: #777;
}

.bs-callout-default h4 {
    color: #777;
}

.bs-callout-primary {
    border-left-color: #007bff;
}

.bs-callout-primary h4 {
    color: #428bca;
}

.bs-callout-success {
    border-left-color: #5cb85c;
}

.bs-callout-success h4 {
    color: #5cb85c;
}

.bs-callout-danger {
    border-left-color: #d9534f;
}

.bs-callout-danger h4 {
    color: #d9534f;
}

.bs-callout-warning {
    border-left-color: #f0ad4e;
}

.bs-callout-warning h4 {
    color: #f0ad4e;
}

.bs-callout-info {
    border-left-color: #17a2b8;
}

.bs-callout-info h4 {
    color: #5bc0de;
}

/* Styles for test-info block*/
.test-panel{
    display:block;
    z-index:1000;
    position:absolute;
    top:80px;
    left:24%;
    width:325px;
    height: 160px;
    font-size:18px;
    -webkit-box-shadow: 0px 0px 46px 17px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 46px 17px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 35px 6px rgba(0,0,0,0.75);
    border-radius: 15px;
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 43%, #d1d1d1 57%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(43%,#dbdbdb), color-stop(57%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 43%,#d1d1d1 57%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 43%,#d1d1d1 57%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 43%,#d1d1d1 57%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 43%,#d1d1d1 57%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}

.test-panel .text-test{
    position: relative;
    top: 1px;
    left: 45px;
}

.test-panel .test.close{
    position: relative;
    left: 50px;
    top: 0px;
}

.test-panel  .test-size{
    position: relative;
    left: var(--left-relative-padding-panel);
    font-size: 12px;
    text-shadow: -1px -1px 1px rgba(146, 144, 146, 1);
}

.test-panel .test-page-name,
.test-panel .test-page-rowid,
.test-panel .test-page-browser-name,
.test-panel .test-page-browser-version{
    position:relative;
    left: var(--left-relative-padding-panel);
}

.test-panel .test-group{
    margin-top: 4px;
    min-width:228px;
}

.test-panel .test-row-height-min{
    line-height: 0.10;
}

.test-panel .pos-line{
    margin-top: 16px;
}

.test-panel .test-zero-padd{
    margin-left:-25px;
    width:150px !important;
    position:relative;
    top:-16px;
    right:-180px;
}

.test-panel .b-status{
    font-size: 10px !Important;
    cursor: pointer;
    height: 50%;
}

.test-panel .s-pos{
    margin-top:-16px;
}

.test-panel .extend-b-info{
    display: none;
}

.login-page .login-block{
    width:300px;
    margin: 50px auto;
}

.login-page .title{
    border-radius: 10px;
    width:450px;
    margin:0 auto;
}

.file-not-found pre{
    color:black !Important;
    font-size: 16px;
    font-weight: bold;
}

/* Styles for maxdiff questions */
.maxdiff-table tbody tr td {
    border-top: 0 !important;
}

.maxdiff-table thead tr th {
    width: 33%;
    text-align: center;
    border-bottom: 0 !important;
}

.bestMD,
.bestMD:hover{
    background-color: #19771F !Important;
    color: white;
}

.worstMD,
.worstMD:hover {
    background-color: #A51E1A !Important;
    color: white;
}

.md-td .abc-radio-primary input[type="radio"] + label::before {
    top:9px;
}

.md-td .abc-radio-primary input[type="radio"] + label::after {
    top:12px;
}

.md-td-best .abc-radio-primary input[type="radio"]:checked + label::before {
    border-color: #19771F;
}

.md-td-best .abc-radio-primary input[type="radio"]:checked + label::after {
    background-color: #19771F;
}

.md-td-worst .abc-radio-primary input[type="radio"]:checked + label::before {
    border-color: #A51E1A;
}

.md-td-worst .abc-radio-primary input[type="radio"]:checked + label::after {
    background-color: #A51E1A;
}

/* Styles for block questions */
.table-question-block td.table-inner-header{
    font-weight: bold;
    height: 50px;
}

.table-question-block .table > thead > tr > th {
    background-color: #FFF;
    text-align: center;
    vertical-align: middle;
}

.table-question-block tr{
    vertical-align: middle;
}

.table-question-block .falling-head{
    border-top:1px dashed grey;
    margin-top: 5px;
    padding-top: 3px;
    /*font-weight: bold;*/
    /*font-style: italic;*/
}

/* Styles for open questions */
.noresizable-textarea{
    resize: none;
}

.open-question-block textarea
/*.open-num-question-block input[type=number]*/
{
    margin-bottom: 20px;
}

.open-block-question-block textarea {
    margin-bottom: 10px;
}

.openblock-question-checkbox-group {
    margin-top:25px;
    margin-left:-15px
}

/* Styles for slider questions */
.noUIslider{
    /*    display: inline-block;*/
    margin-bottom: 60px;
    margin-top: 30px;
}

.slider{
    width: 90%;
    margin-left:7%;
    min-width:195px;
}

.sliderblock-main-row{
    border-bottom:1px solid grey;
}

.slider-varlab-col{
    font-size: 15px;
    margin-top: 10px;
}

.badge.center{
    margin-left: 15%;
    margin-bottom:10px;
}

.slider-label-col{
    /*position: relative;*/
    height: 100px;
}

.slider-row>.left-label-col>.slider-scale-label {
    right:0;
}

.slider-row>.right-label-col>.slider-scale-label {
    left:5px;
}

.slider-scale-label {
    font-size: 11px;
    position: relative;
    text-transform: uppercase;
    top: 7%;
    transform: translateY(-50%);
}

.noUi-connect.slider-coloured-as-active {
    background-color: rgb(13, 110, 253);
}

.noUi-pips .coloured-as-active{
    color: rgb(13, 110, 253);
}

.noUi-marker.coloured-as-active{
    background-color: rgb(13, 110, 253);
}

.noUi-touch-area.slider-coloured-as-active{
    background-color: rgb(13, 110, 253);
}

.balance-left-value {
    position: absolute;
    right:0;
}

.balance-right-value {
    position: absolute;
    left:0;
}

.noUi-connect.c-1-color {
    background: #0774B9
}

.noUi-connect.c-2-color {
    background: #00abff
}

/* Styles for ranking questions */
.ranking-place{
    display:block;
}
.ranking-visible-hint{
    font-size:smaller;
    font-style:italic;
}

.ranking-tooltip {
    color: #0774B9;
    cursor: pointer;
}

/* Some other styles */
.nps-question-block .btn-group .btn {
    border-left-color: white !Important;
    border-right-color: white !Important;
}

.nps-question-block .nps-incompatible-option{
    margin-top: 15px;
}

.codificator-question-block #show-hide-buttons-div {
    margin-bottom: 10px;
}

.codificator-question-block .show-hide-buttons {
    background-color: #0774B9;
    color: white;
}

/* Some other styles */
span.show-pos{
    font-size: smaller;
    vertical-align: top;
}

.decorated {
    color:#0774B9;
    font-weight: bold;
}

.cati .abc-radio label:before,
.cati .abc-checkbox label:before{
    border: 1px solid black !Important;
}

.table-question-block td.vn label {
    padding: 5px !Important;
}

.question-block table.table {
    table-layout: fixed !Important;
}

/* Some responsive styles */
@media all and (max-width:1296px){
    .test_group{
        margin-top: -40px;
        margin-left:-150px;
        min-width:228px;
        float:left;
    }
}

.question-type-block {
    width:0;
    height: 0;
    visibility: hidden;
}

.video-question-block #custom-video{
    width:1100px;
    height:600px;
}

.video-question-block #video-wrapper{
    width:1102px;
    height:605px;
}

.ranking-question-block .sortable-ghost{
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.ranking-question-block .grid{
    display: grid;
    grid-template-columns: 0.4fr 0.4fr;
    grid-gap: 1vw;
    grid-auto-rows: 0.3fr;
}

.ranking-question-block .col-1-sm{
    flex: 0 0 5.333333%;
    max-width: 8.333333%;
}

.ranking-question-block .shadow-m{
    -webkit-box-shadow: 0px 4px 8px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 8px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 8px -1px rgba(0,0,0,0.75);
}

.ranking-question-block .grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.ranking-question-block #positions,
.ranking-question-block #items,
.ranking-question-block #items-parent {
    padding-left: 0px;
}

.ranking-question-block .rounded-m{
    border-radius: 10px;
}

.ranking-question-block .bordered-item {
    border: 1px dashed grey;
    border-radius: 10px;
}

.ranking-question-block #positions li,
.ranking-question-block #items li,
.ranking-question-block #baskets li{
    display: block;
    margin-top: 10px;
    padding-left: 5px;
}

.ranking-question-block #items{
    min-width: 600px;
    min-height: 308px;
}

/* ====================================  info-bar styles =================================== */



.info-panel-row .alert{
    border-radius: initial !Important;
}
/* ====================================  info-bar styles end =================================== */

body{
    font-size: 0.9rem !Important;
}

.question-block .chosen-container-single .chosen-single {
    height: 37px;
    border-radius: 4px;
    border:1px solid rgb(217,217,217);
    padding: 7px 2px 0 12px;
    background: white;
    box-shadow:none;
}

.question-block .chosen-container-single .chosen-single div {
    top:9px;
    right: 5px;
}

.question-block .chosen-container-active.chosen-with-drop .chosen-single {
    border-radius: 4px;
    border:1px solid rgb(217,217,217);
    box-shadow:none;
    background-image: none;
}
.question-block .chosen-container-single .chosen-default {
    color:black;
}


.question-block .chosen-container-single .chosen-search input[type="text"]{
    border: 1px solid rgb(217,217,217);
    background: url("search.png") no-repeat 100%;
    background-position: right;
    background-size: 8%;
}

.question-block .chosen-container .chosen-drop{
    border: 1px solid rgb(217,217,217);
}

.question-block .chosen-container-single.chosen-with-drop .chosen-drop {
    /*    -webkit-animation: 0.5s ease show_selector_drop_down;
        -moz-animation: 0.5s ease show_selector_drop_down;
        -o-animation: 0.5s ease show_selector_drop_down;
        animation: 0.5s ease show_selector_drop_down;*/
}

@-webkit-keyframes show_selector_drop_down {
    from {
        height: 0%;
    }
    to {
        height: 100%;
    }
}
@-moz-keyframes show_selector_drop_down {
    from {
        height: 0%;
    }
    to {
        height: 100%;
    }
}
@-o-keyframes show_selector_drop_down {
    from {
        height: 0%;
    }
    to {
        height: 100%;
    }
}
@keyframes show_selector_drop_down {
    from {
        height: 0%;
    }
    to {
        height: 100%;
    }
}

.question-block .chosen-container .chosen-results{
    padding-left:0;
}

.question-block .chosen-container .chosen-results li{
    padding: 12px 0 12px 7px;
}

.question-block .chosen-container .chosen-results li.highlighted {
    background-color: rgb(242,242,242) !Important;
    background-image: none;
    color: black;
}

.popover-anchor{
    position: relative;
}

.percs-popover{
    display: none;
    min-width:145px;
    min-height: 42px;
    top: -12px;
    left:15px;
    position: absolute;
    background-color: white;
    cursor: pointer;
}

.data-cell:hover .percs-popover{
    display: block !important;
}

.status-table .quota-input{
    min-width: 110px !Important;
}

a, button {
    touch-action: manipulation;
}

#interview-duration-timer{
    width: 150px;
}

.table-question-block .abc-checkbox label::before{
    width: 27px !Important;
    height: 27px  !Important;
}

.table-question-block .abc-checkbox label::after{
    font-size: 16px;
    top: 2px;
    left: 2px;
}

.noUi-connect{
    background: grey;
}

.noUi-handle.noUi-handle-lower.slider-coloured-as-active{
    background: #0774B9;
    box-shadow: none;
}

/* Here are @ new design styles - until its approved its disabled @ */

/*body{
    background-color: #f3f3f3 !Important;
}

.single-question-block .form-check.abc-radio,
.multiple-question-block .form-check.abc-checkbox{
    padding: 15px 15px;
    background: white !Important;
    max-width: 50%;
    margin-top: 10px;
    border-radius: 5px;
}

.single-question-block .form-check.abc-radio.checked,
.multiple-question-block .form-check.abc-checkbox.checked{
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}*/


@media (max-width: 768px) {
    div.row.header h4{
        /*    padding: calc(1.325rem + 0.9vw);*/
        font-size: 1.1rem !Important; /* 1.125rem is small enough, so RFS won't rescale this */
    }

    .bs-callout{
        padding: 10px;
    }
}