/******************
    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
*/
:root {
    --primarycolor: #19753F;
    --primarycolorlight: #1E8449;
    --bglogo: #1E8449;
    --white: #ffffff; 
    --inputborder: #999;
    --bgcolor: #2E9E5C;
    --bgquestion: #f7f7f7;
    --bgquestiontitle: #e6e6e6;
    --bgtextcolor: #777;
    --screenwidth: 80%;
    --hometopspace: 60px;
    --endtopspace: 60px;
}

body {
    background-color: var(--bgcolor) !important;
    font-family: 'Poppins', sans-serif;
    padding-top: 0px;
}
#dynamicReloadContainer {
    background: #fff;
} 
.question-title-container {
    background-color: var(--bgquestiontitle);
}
.question-help-container, .question-valid-container {
    background-color: var(--bgquestiontitle);
    padding-left: 15px;
    padding-bottom: 8px;
}
.top-container {
    margin-bottom: 0px;
}
.question-text {
    font-size: 18px;
}
.fruity .text-info, .fruity .text-primary, .fruity .text-success {
    color: var(--primarycolorlight) !important;
}
.radio-item label::before, .checkbox-item label::before {
    width: 20px;
    height: 20px;
    border: 2px solid var(--inputborder);
}
.radio-item .ls-label-xs-visibility, .checkbox-item .ls-label-xs-visibility {
    width: 20px;
    height: 20px;
}
.radio-item label::after {
    width: 12px;
    height: 12px;
    left: 4px;
    top: 4px;
    background-color: var(--primarycolor) !important;
}
.checkbox-item input[type="checkbox"]:checked+label::after {
    color:  var(--primarycolor);
    font-size: 12px;
}
.checkbox-item label::after { 
    width: 20px;
    height: 20px;
    border: 2px solid #666;
    background-color: transparent !important; 
}
.btn-group-lg>.btn, .btn-lg {
    padding: 0.5rem 2rem;
}
.fruity .btn-primary:hover, .fruity .btn-primary:focus {
    background-color: var(--primarycolorlight);
    border: 1px solid var(--primarycolorlight);
}
.fruity .btn-outline-secondary {
    border: 1px solid var(--primarycolor);
    color: var(--primarycolor);
}
.fruity .btn-check:active+.btn-outline-secondary, .fruity .btn-check:checked+.btn-outline-secondary, .fruity .btn-check:focus+.btn-outline-secondary, .fruity .btn-outline-secondary.active, .fruity .btn-outline-secondary:active, .fruity .btn-outline-secondary:focus, .fruity .btn-outline-secondary:hover, .fruity .open .dropdown-toggle.btn-outline-secondary, .fruity .show>.btn-outline-secondary.dropdown-toggle {
    border: 1px solid var(--primarycolor);
    color: var(--primarycolor);
}
.fruity .btn-primary, .fruity .btn-primary.disabled, .fruity .btn-primary.disabled.active, .fruity .btn-primary.disabled:active, .fruity .btn-primary.disabled:focus, .fruity .btn-primary.disabled:hover {
    background-color: var(--primarycolor);;
    border: 1px solid var(--primarycolor);
}
.fruity .btn-primary[disabled],.fruity .btn-primary[disabled].active,.fruity .btn-primary[disabled]:active,.fruity .btn-primary[disabled]:focus,.fruity .btn-primary[disabled]:hover,.fruity .btn-success {
    background-color: var(--primarycolor);;
    border: 1px solid var(--primarycolor);
}
.fruity .btn-success.disabled,.fruity .btn-success.disabled.active,.fruity .btn-success.disabled:active,.fruity .btn-success.disabled:focus,.fruity .btn-success.disabled:hover {
    background-color: var(--primarycolor);
    border: 1px solid var(--primarycolor);
}
.top-container .progress {
    margin-top: 15px;
}
.fruity .progress-bar {
    background-color: var(--primarycolor);;;
}

.form-control {
    border: 2px solid var(--inputborder) !important;
}
select {
    height: 40px !important;
    min-width: 300px;
}
.ls-answers {
    padding-top: 10px;
    padding-bottom: 5px;
}

.radio-item label, .checkbox-item label {
    padding-left: 12px;
}
.group-outer-container {
    margin-bottom: 0em;
}
.question-title-container {
    padding: 15px 15px 5px 15px;
}
.group-title {
    margin-top: 8px;
    margin-bottom: 20px;
}
.group-container {
    margin-bottom: 0px;
}
.question-container {
    border-radius: 5px;
}
.req-message {
    background-color: #ccc;
    padding: 3px 7px;
    font-size: 10px;
    border-radius: 3px;
    font-weight: bold;
    margin-left: 0px;
    margin-top: -4px;
    margin-bottom: 3px;
    width: 61px;
}
.input-error .asterisk {
    font-size: 10px;
    margin-top: -4px;
    color: #FF515F;
}
.survey-name {
    margin-top: 1rem;
    font-size: 30px;
}

.fruity .navbar a {
    font-size: 13px;
}
.completed-wrapper {
    margin-top: 100px;
}

.fruity .text-muted {
    text-align: center;
}
.bglogo {
    padding: 20px 30px;
    background-color: var(--primarycolor);
}
.bglogo img {
    width: auto;
    height: 39px;
}
.logo-container>img {
    padding-left: 0px;
}
#survey-nav {
    background-color: var(--primarycolor) !important;
}
.navbar-light .navbar-toggler {
    border-color: rgba(255,255,255,.4);
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 480px;
        margin-left: -15px;
    }
}
@media (min-width: 769px) {
    .fruity .navbar .navbar-nav .nav-item::after {
        background-color: var(--primarycolor);

    }
}
.question-container {
    border: 2px solid var(--bgquestiontitle) !important;

}

@media (min-width: 481px) {
    .ls-input-group-extra {
        padding: 0.1rem 1.2rem;
    }
}

@media (min-width: 768px) {
    body {
        padding-top: 15px;
    }
    #dynamicReloadContainer {
        width: var(--screenwidth);
        margin: 0 auto;
        border: 1px solid #ccc;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px;
    } 
    #outerframeContainer {
        padding-left: 15px;
        padding-right: 15px;
    }
    #navigator-container {
        padding-right: 15px;
        padding-left: 15px;
    }
    #main-row {
        padding-left: 10px;
        padding-right: 10px;
    }
    #survey-nav {
        width:var(--screenwidth);
        margin: 0 auto;
    }
    .page-firstpage #survey-nav, .page-firstpage #dynamicReloadContainer{
        margin-top: var(--hometopspace);
    }

    .page-submit #survey-nav, .page-submit #dynamicReloadContainer{
        margin-top: var(--endtopspace);
    }
}

@media (max-width: 767px) {
    body {
        background: #fff !important;
    }
    #outerframeContainer {
        padding-left: 20px;
        padding-right: 20px;
    }
    .req-message {
        margin-top: 0px;

    }
    .fruity .navbar {
        box-shadow: none;
        padding-bottom: 15px;
        padding-top: 15px;
    }
    .logo-container>img {
        max-height: 60px;
    }
    body .top-container {
        margin-top: 90px !important;
    }

}