/******************
    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
*/
@font-face {
    font-family: 'Tommy';
    font-weight: 100;
    src: url('./fonts/TommyLight.otf');
}
@font-face {
    font-family: 'Tommy';
    font-weight: 300;
    src: url('./fonts/TommyRegular.otf');
}
@font-face {
    font-family: 'Tommy';
    font-weight: 600;
    src: url('./fonts/TommyBold.otf');
}

:root {
    --primary-color: #ffdf00;
    --primary-color-hover: #ffe434;
    --primary-color-shadow: #ffdf0033;
    --text-color: #1E1E1E;
    --text-color-important: #ff5500;
    --bg-color: #f9f9f9;
}

body {
    background-color: var(--bg-color);
}

a {
    color: var(--text-color);
    border-bottom: solid 2px var(--text-color);
    font-weight: inherit;
    font-size: inherit;
}
a:hover {
    color: #6e748c;
    border-color: #6e748c;
}
.surveyListFooter a {
    border-bottom: none;
}

.navbar {
    background-color: var(--bg-color) !important;
}

.header-add-info {
    font-size: 13px;
}

.large-heading, .group-title {
    font-family: "Tommy";
    font-weight: 600;
}

.btn-primary, .btn-check:checked + .btn-primary, .btn-check:checked + .btn-primary:focus, .btn-check:focus:checked + .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-color);
}
.btn-check + .btn-primary:hover {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    color: var(--text-color);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary.dropdown-toggle.show, .btn-primary.dropdown-toggle.show:focus {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    color: var(--text-color);
    box-shadow: 0px 0px 0px 3px var(--primary-color-shadow);
}

.progress-bar {
    color: #ffffff;
    background-color: var(--primary-color);
    box-shadow: none;
}
.question-container {
    margin-bottom: 1.5em;
    border-left: 4px solid #6e748c;
    padding: 1rem;
    background: #fff;
    border-radius: 6px;
    transition: border .5s ease-in-out;
}
.question-container:hover {
    border-left: 4px solid var(--text-color);
}

.question-container .question-title-container {    
    display: flex;
}

.question-container .question-title-container .asterisk {
    margin-right: 10px;
}
.question-text {
    font-family: "Tommy";
}

.space-col {
    margin-bottom: 0;
    margin-top: 0;
}

.ls-answers .ls-heading th, .ls-answers th {
    font-size: 1rem;
}

.ls-answers tr {
    word-break: auto-phrase;
}

.question-container .asterisk {
    color: var(--text-color-important);
}

.dropdown-menu > .active > a {
    background-color: var(--primary-color) !important;
    color: var(--text-color) !important;
}
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: var(--primary-color-hover) !important;
    color: var(--text-color);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: var(--primary-color-hover) !important;
    color: var(--text-color) !important;
}

.group-container .group-title {
    margin-bottom: 30px;
    font-size: 1.9em;
    line-height: 34px;
}

.btn-outline-secondary:hover {
    box-shadow: 0px 0px 0px 3px var(--primary-color-shadow);
}

.form-control:focus, .form-select:focus {
    box-shadow: 4px 4px 0 var(--primary-color-shadow);
    border-color: var(--text-color);
}

@media only screen and (max-device-width: 760px) {
    .ls-answers > tbody > tr > td.radio-item, .ls-answers > tbody > tr > td.checkbox-item {
        min-height: 32px;
        padding-left: 28px;
    }
}

.question-container .ls-label-question {
    font-size: 22px;
    line-height: 26px;
}

.ls-answers label, .answer-item label, .control-label {
    font-size: 0.9rem;
}

.checkbox-item.mb-1 {
    margin-bottom: 8px !important;
}
.checkbox-item input[type=checkbox]:checked + label, .radio-item input[type=radio]:checked + label {
    color: var(--text-color);
}
.checkbox-item input[type=checkbox]:checked + label::before, .radio-item input[type=radio]:checked + label::before {
    border-color: var(--text-color);
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: var(--text-color);
}
li.radio-item {
    margin-bottom: 0.2em;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: var(--text-color);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
    border: 1px solid var(--text-color);
}

.alert-info {
    background-color: var(--primary-color);
    color: var(--text-color);
}

#surveyListFooter a {
    border-bottom: none;
}