/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

#survey-nav {
    background-color: #00599d;
    background-image: radial-gradient(circle farthest-corner, #006dc0 0%, #00599d 100%);
    padding: 2rem 0;
    color: #fff;
}

body {
    padding-bottom: 10px;
    padding-top: 0px !important; /* now is redefine in JS to fit any title length */
    /*background-image: url('./files/background.png');*/
    background-color: #EEEFF7;
}




/**
 * Navigator
 */

#navigator-container {
    padding-bottom: 1em;
}

#navigator-container > hr {
    margin-top: 0px;
    margin-bottom: 0px;
}

/**
 * Question part
 */
/** Question Design **/

.question-container {
    border: 0px;
    background-color: #fff;
}

.question-container-printanswers {
    margin-top: 2em;
    margin-bottom: 2em;
    padding-bottom: 2em;
}

.question-title-container {
    padding-top: 1em;
    padding-bottom: 1em;
}

.question-number, .question-code {
    float: left;
    margin: 0 0.3em
}

.question-number:empty, .question-code:empty {
    display: none
}

.question-valid-container {
    position: relative;
}

.ls-questionhelp {
    margin-bottom: 5px;
}

.question-valid-container .text-danger {
    font-weight: bold;
}

.question-valid-container .text-info {
    font-weight: bold;
}

.ls-answers {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0;
}


/*#outerframeContainer {
    height: 100%;
}*/

#surveyListFooter {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 80px;
    padding-top: 10px;
    margin-top: 10px;

    bottom: 0px;
    height: 60px;
}

@media (max-width: 768px) {
    #surveyListFooter {
        padding-bottom: 40px;
        padding-top: 5px;
        margin-top: 5px;
        height: 40px;
    }
}

/**
 * Specific question part
 */
.radio-item label, .checkbox-item label {
    cursor: pointer;
}

.radio-item [type='radio'], .checkbox-item [type='checkbox'] { /* Why we must positionning at same place */
    cursor: pointer;
}

.js td.radio-item, .js td.checkbox-item {
    cursor: pointer;
}

.slider-item {
    margin-bottom: 20px;
    min-height: 50px;
}

.slider-container {
    min-height: 15px;
}

/* Show more the heading in table */
.ls-answers .ls-heading th {
    font-weight: 700
}

@media only screen and (max-width: 767px) {
    .ls-answers > tbody > tr.ls-even:hover {
    }
}

/**
 * Gender buttons
 */

/* General */
.button-item .ls-icon, .ls-button-label .ls-icon {
    display: block;
}

.button-item .ls-icon, .ls-button-label .ls-icon {
    font-size: 1.4em;
    line-height: 1.4em;
}

html body .navbar.navbar-default.navbar-fixed-top {
    z-index: 2000;
}

.file-upload-modal, .modal {
    z-index: 2001;
}

/* Title of survey can be big, allow multiline, but leave the minimum */
.navbar-brand {
    height: auto;
    min-height: 60px;
}


/**********************************
Responsive navbar-brand image CSS
- Remove navbar-brand padding for firefox bug workaround
- add 100% height and width auto ... similar to how bootstrap img-responsive class works
***********************************/

.logo-container {
    padding: 0px;
    float: left;

    font-size: 18px;
    line-height: 20px;
}

.logo-container > img {
    max-height: 90px;
    padding: 15px;
    width: auto;
}

.brand-logo .top-container .top-content {
    padding-top: 2em;
}

@media only screen and (max-width: 761px) {

    .logo-container {
        padding: 0px;
    }
    
    .logo-container.d-none {
        display: block !important;
    }

    .logo-container > img {
        padding: 0px;
    }

}


/* Wrap text in e.g. gender button "No answer */
.wrap-normal {
    white-space: normal;
}

/* Center modal vertically, used by file-upload modal */
.modal {
    text-align: center;
    padding: 0 !important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

#yii-flash-message {
    margin-top: 3em;
}

.prefix-text-right {
    text-align: right;
}

.align-middle {
    vertical-align: middle !important;
}


/* Used for date-picker icon within input */
.form-control-feedback {
    right: 1em;
    left: auto;
}

body .navbar-default .navbar-brand:hover {

}

/* Only use <label> to get vertical align easy. Don't want boldness. */
.no-label {
    font-weight: normal;
}

table > tbody > tr > td.ddprefix {
    padding-right: 1em;
    vertical-align: middle;
}


/**
 * On big screen only, iPad and up
 */
@media only screen and (min-width: 761px) {

    .table-dual-scale .separator {
        width: 6%;
    }

    table > tbody > tr > td.ddsuffix {
        padding-left: 1em;
        vertical-align: middle;
    }

}

/**
 * No more tables
 * OBS: Media specific CSS must be last in this file.
 * iPad has width 768px (according to Chrome dev tool)
 * Google Nexus 10 has width 800px.
 * (Both in portrait mode.)
 * We don't have to collapse tables on pads.
 */
@media only screen and (max-width: 767px) {
    table.ls-answers tbody {
        padding: 0 1em 0 1em;
    }

    table.ls-answers tr {
        padding: 1em;
    }

    table.ls-answers tr th {
        font-size: 1.1em;
        text-align: center;
    }

    /* Add some margin for Multiple short text */
    .form-group.row {
        margin-bottom: 15px;
    }

    table.ls-answers tbody {
        padding: 0;
    }

    table.ls-answers tr {
        padding: 0;
        margin-bottom: 1em;
    }

    /* Line header ; color is h4 color */
    table.ls-answers tr th {
        font-size: 1.1em;
        text-align: left;
    }

    .array-by-columns .answertext {
        padding: 8px;
        padding-left: 0;
        text-align: left;
        font-weight: bold;
    }

    .array-by-columns .radio-item {
        padding-bottom: 8px;
    }

    table.ls-answers td {
        /* Behave  like a "row" */
        min-height: 2em;
        position: relative;
        /*padding-left: 95%;*/
        padding-bottom: 1em;
        white-space: normal;
        text-align: left;
    }

    /* Hide the first column in array-by-column */
    .array-by-columns-table tr > *:nth-child(1) {
        display: none;
    }

    /* Need some more space on phone */
    .array-multi-flexi .answertext {
        padding-bottom: 0.5em;
    }

    .array-multi-flexi .answer-item label {
        padding-bottom: 0.5em;
    }

    /* On phone, left and right slider text is above and below slider */
    .slider-left-span {
        text-align: left;
    }

    /* As above, collapse prefix/suffix to above/below input */
    .prefix-text-right {
        text-align: left;
    }

    /* Used for date-picker icon within input */
    .form-control-feedback {
        right: 0.5em;
    }

    .col-12.question-container {
        padding-right: 0;
        padding-left: 0;
    }

}

/** On small phones, leave some more space */
@media only screen and (max-width: 400px) {

    .array-by-columns-div .radio-list {
        padding: 1em;
        margin: 1em;
    }

    /*
    .col-12.answer {
        padding-left: 0;
        padding-right: 0;
    }
    */
    .no-more-tables tbody {
        padding-left: 0;
        padding-right: 0;
    }

    /* For yes-no question, shrink the buttons a bit on phone screens */
    .btn-lg, .btn-group-lg label {
        padding: 10px 15px;
    }

    .slider.slider-horizontal {
        /* Slider can be full width on phones */
        width: 100%;
    }

    /* Center label under radio button on phones */
    .five-point-choice label {
        margin-left: 5px;
    }

    /* Make file-upload pop-up shorter on phones */
    .file-upload-modal-body {
        padding: 0;
        height: 300px;
    }

    /* Modal should be in front of navbar, so the close icon is visible */
    .modal {
        z-index: 3000;
    }

    /* Less margin on phones */
    .slider.slider-horizontal {
        margin-bottom: 0.4em;
    }

}

/**
 * Display adjust, question type by question type
 */


.table > tbody > tr > th {
    vertical-align: middle;
}

.othertext-label-checkox-container {
    padding-top: 5px;
    margin-right: 5px;
}

.geoname_search {
    margin-bottom: 10px;
}


/* Give help text some space */
.questionhelp {
    padding-bottom: 0.5em;
}


/* Asterix */
.input-error .asterisk {
    font-size: 1.2em;
    margin-top: -0.2em;
}

#surveys-list-container {
    margin-top: 50px;
}

/* text overflows, ellipsis and hyphens */
.navbar-brand {
    overflow: hidden;
    text-overflow: ellipsis;
}

#outerframeContainer {
    min-height: 100%;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

.xdebug-var-dump {
    z-index: 10000;
    position: relative;
    top: 10px;
}


div.yes-no .btn-group label {
    white-space: normal;
}

.privacy-header {
    font-weight: bold;
    font-style: italic;
}


@media only screen and (max-device-width: 760px) {

    h1, .h3 {
        font-size: 18px;
    }

    .h4 {
        font-size: 16px;
    }

    .question-container {
        margin-bottom: 1em;
    }

    .question-title-container {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .answer-container {
    / / padding-top: 0.5 em;
    / / padding-bottom: 0.5 em;
    }

    .ls-questionhelp {
        font-size: 14px;
    }

    .ls-answers tbody:last-child tr:last-child {
        margin-bottom: 0;
    }

    .ls-answers {
        padding-top: 0;
        padding-bottom: 0;
    }

    .ls-answers > tbody > tr > td.radio-item,
    .ls-answers > tbody > tr > td.checkbox-item {
        min-height: 44px; /*minimal height for touching with finger */
        padding-top: 10px;
        padding-left: 28px;
    }


    .help-block:last-child {
        margin-bottom: 0;
    }

    .ls-questionhelp,
    .help-block {
        font-size: 90%;
    }
}

p.return-to-survey {
    clear: left;
}

/* Make sure question index menu is not too long. */
#index-menu ul.dropdown-menu {
    max-height: 50vh;
    overflow-y: scroll;
}

.text-break-pre {
    white-space: pre-line;
}

.child-row-spacing > .row {
    padding-bottom: 8px;
}

.child-row-border-bottom > .row:last-child {
    padding-bottom: 0;
}

.superset {
    font-size: 50%;
    vertical-align: top;
}

.limit-text-window {
    max-height: 33vh;
    padding: 15px 5px;
    overflow: auto;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-left: none;
    border-right: none;
    outline: none;
}

/* Define the color for Awesome Bootsrap Checkboxes ; based on bg-primary background-color*/
label::after {
    background-color: #337ab7
}

#survey-nav .nav-link {
    color: #fff;
}
#survey-nav .nav-link:hover {
    color: #eee;
}
#survey-nav .nav-link:focus {
    color: #eee;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #e9ecef !important;
}

label {
    font-weight: bold;
}

/* Multiplechoice bootstrap buttons unchecked focus*/
.btn-check .btn-primary:focus, .btn-check:focus+.btn-primary {
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    box-shadow: none;
    color: #fff;
}
.btn-check:focus:checked + .btn-primary, .btn-check .btn-primary:focus:checked {
    background-color: #0a58ca;
    border-color: #0a53be;
    color: #fff;
 }