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

    Event Medical Services tilpasning til LimeSurvey/Fruity.
    Filen er samlet, så mobilfixes og layoutregler ikke ligger spredt nederst.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --ems-blue: #1F3A5E;
    --ems-blue-dark: #162c47;
    --ems-focus: rgba(31, 58, 94, 0.15);
    --ems-focus-strong: rgba(31, 58, 94, 0.25);
    --ems-bg: #FCFCFC;
    --ems-mobile-padding: 15px;
}

/* --------------------------------------------------
   Generelt
-------------------------------------------------- */

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

body,
input,
select,
textarea,
button,
label,
p,
span,
li,
td,
th,
div,
a {
    font-family: 'Montserrat', sans-serif;
}

h3 {
    margin-top: 0;
}

/* --------------------------------------------------
   Links og tekstfarver
-------------------------------------------------- */

.fruity a {
    color: var(--ems-blue);
}

.fruity a:hover,
.fruity a:focus {
    color: var(--ems-blue-dark);
}

.fruity .text-info,
.fruity .text-primary,
.fruity .text-success {
    color: var(--ems-blue) !important;
}

/* --------------------------------------------------
   Survey titel og beskrivelser
-------------------------------------------------- */

.survey-name {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.survey-description {
    font-size: 1.1rem !important;
    line-height: 1.6;
}

.group-description {
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Spørgsmålstekst */
.ls-label-question {
    font-size: 120%;
    font-weight: 700;
}

/* --------------------------------------------------
   Input group og dropdown
-------------------------------------------------- */

.fruity .input-group-addon,
.fruity .input-group-text,
.fruity .dropdown-menu > .active > a,
.fruity .dropdown-menu > .active > a:focus,
.fruity .dropdown-menu > .active > a:hover,
.fruity .dropdown-menu > li > a:focus,
.fruity .dropdown-menu > li > a:hover {
    background-color: var(--ems-blue) !important;
}

/* --------------------------------------------------
   Knapper
-------------------------------------------------- */

.btn-primary {
    background: var(--ems-blue) !important;
    border-color: var(--ems-blue) !important;
}

.fruity .btn-success {
    background: var(--ems-blue) !important;
    border-color: var(--ems-blue) !important;
}

label.btn {
    background-color: var(--ems-blue) !important;
    border-color: var(--ems-blue) !important;
}

label.btn:hover {
    background-color: var(--ems-blue-dark) !important;
}

.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-success:hover,
.fruity .btn-success:focus {
    background: var(--ems-blue-dark) !important;
    border-color: var(--ems-blue-dark) !important;
    box-shadow: 0 0 0 .2rem var(--ems-focus-strong) !important;
}

.fruity .btn-outline-secondary {
    background: #fff !important;
    color: var(--ems-blue-dark) !important;
    border-color: var(--ems-blue-dark) !important;
}

/* --------------------------------------------------
   Progress bar
-------------------------------------------------- */

.fruity .progress-bar {
    background-color: var(--ems-blue) !important;
}

/* --------------------------------------------------
   Formularfelter
-------------------------------------------------- */

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--ems-blue) !important;
}

.form-check-input:checked {
    background-color: var(--ems-blue) !important;
    border-color: var(--ems-blue) !important;
}

.fruity .form-control:focus,
.fruity input:focus,
.fruity select:focus,
.fruity textarea:focus {
    border-color: var(--ems-blue) !important;
    box-shadow: 0 0 0 .2rem var(--ems-focus) !important;
}

.fruity .asterisk,
.fruity .mandatory {
    color: var(--ems-blue) !important;
}

/* --------------------------------------------------
   Navigation/header
-------------------------------------------------- */

.fruity .navbar {
    background-color: var(--ems-blue) !important;
}

.fruity .navbar a {
    font-size: 0.8rem;
}

.fruity .navbar-collapse {
    box-shadow: none;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover {
    color: #fff;
}

.logo-container > img {
    max-height: 70px;
}

/* --------------------------------------------------
   Radioknapper - LimeSurvey/Fruity custom markup
-------------------------------------------------- */

.radio-item input[type="radio"] + label::before,
.radio-item input[type="radio"]:checked + label::before {
    border-color: var(--ems-blue) !important;
}

.radio-item input[type="radio"] + label::after,
.radio-item input[type="radio"]:checked + label::after {
    background-color: var(--ems-blue) !important;
    color: var(--ems-blue) !important;
}

.radio-item input[type="radio"]:focus + label::before {
    border-color: var(--ems-blue) !important;
    box-shadow: 0 0 0 .2rem var(--ems-focus) !important;
}

/* --------------------------------------------------
   Checkbokse - LimeSurvey/Fruity custom markup
-------------------------------------------------- */

.checkbox-item input[type="checkbox"] + label::before,
.checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: var(--ems-blue) !important;
}

.checkbox-item input[type="checkbox"] + label::after,
.checkbox-item input[type="checkbox"]:checked + label::after {
    background-color: var(--ems-blue) !important;
    color: #fff !important;
}

.checkbox-item input[type="checkbox"]:focus + label::before {
    border-color: var(--ems-blue) !important;
    box-shadow: 0 0 0 .2rem var(--ems-focus) !important;
}

/* --------------------------------------------------
   Mobil
-------------------------------------------------- */

@media (max-width: 767px) {

    /* Header/logo skal være synlig på mobil */
    .fruity .navbar,
    .fruity .navbar-header,
    .fruity .navbar-collapse,
    .fruity .logo-container,
    .fruity .logo-container img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .logo-container > img {
        max-height: 55px;
        max-width: 100%;
        height: auto;
    }

    /* Survey titel og tekst på mobil */
    .survey-name {
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        line-height: 1.25;
    }

    .survey-description {
        font-size: 1rem !important;
        line-height: 1.5;
    }

    .group-description {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Ens indvendig bredde på survey, grupper og spørgsmål */
    .fruity .container,
    .fruity .container-fluid,
    .fruity .survey-container,
    .fruity .group-container,
    .fruity .group-description,
    .fruity .question-container,
    .fruity .answer-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--ems-mobile-padding) !important;
        padding-right: var(--ems-mobile-padding) !important;
        box-sizing: border-box;
    }

    .fruity .group-description,
    .fruity .question-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .fruity .group-description > *,
    .fruity .question-container > * {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Navigationsknapper skal flugte med spørgsmålskasser */
    .fruity .survey-nav,
    .fruity .question-nav,
    .fruity .navigator,
    .fruity .submit-buttons,
    .fruity .ls-move-buttons,
    .fruity .row.navigator {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--ems-mobile-padding) !important;
        padding-right: var(--ems-mobile-padding) !important;
        box-sizing: border-box;
    }

    /* Bootstrap rows kan have negative margins, som presser knapperne ud til kanten */
    .fruity .row.navigator {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .fruity .navigator .pull-right,
    .fruity .navigator .float-end,
    .fruity .navigator .text-right,
    .fruity .ls-move-buttons .pull-right,
    .fruity .ls-move-buttons .float-end,
    .fruity .ls-move-buttons .text-right {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    .fruity .survey-nav .btn,
    .fruity .question-nav .btn,
    .fruity .navigator .btn,
    .fruity .ls-move-buttons .btn {
        max-width: 100%;
    }

    /* Forhindrer brede felter/tabeller i at presse siden ud */
    .fruity table,
    .fruity .table,
    .fruity input,
    .fruity select,
    .fruity textarea {
        max-width: 100% !important;
    }
}