/******************
    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
*/

.custom-top-navbar {
    padding-right: 15px;
    background-color: #328637;
    border-bottom: 1px solid #328637;
    display: inline-flex;
    width: 100%;  
}

span.navbar-toggler-icon {
    margin-bottom: 3px;
    background-color: #FFFFFF;
    display: block;
    height: 4px;
    transition: all 0.3s ease;    
}

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

.navbar-nav-scroll {
    overflow-y: hidden;
}

#navbar .index-menu-full ul.dropdown-menu {
    position: relative !important;
    transform: translate(0px, 0px) !important;
}

.custom-top-navbar a {
    color:  #FFFFFF;
}

.font-size-container {
    position: absolute;
    right: 0px;
}

.font-size-container a {
    color: #FFFFFF;
}

.logo-flex-container {
    display: flex;
    flex-direction: column;
}

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

footer {
    display: none;
}

/*

    ---------------
    User velthuis CSS
    ---------------
    
*/

/*****************************************************************/
/*                        Start General CSS                      */
/*****************************************************************/

:root {
    --primaryColor: #204680;
    --borderColor: #DBDBDB;
    --whiteColor: #FFFFFF;
    --blackColor: #222222;
    --lightgrey: #F2F4F6;
    --focusColor: #92518B;
    --transparentColor: transparent;
    --logoFile: url('../files/empty.png');
}

@font-face {
    font-family: "proxima-nova";
    src: url("./fonts/proxima-nova.eot");
    src: url("./fonts/proxima-nova.otf?#iefix")format("embedded-opentype"),
         url("./fonts/proxima-nova.woff2")format("woff2"),
         url("./fonts/proxima-nova.woff")format("woff"),
         url("./fonts/proxima-nova.ttf")format("truetype"),
         url("./fonts/proxima-nova.svg#proxima-nova")format("svg");
}

@font-face {
    font-family: "meta-serif-pro";
    src: url("./fonts/meta-serif-pro-11.ttf")format("truetype");
}

h1,
h2 {
    font-family: "meta-serif-pro";
    letter-spacing: -0.01em;
}

h1 {
    font-size: 35px;
    line-height: 37px;
}

h2 {
    font-size: 26px;
    line-height: 31px;
}

h3,
h4,
h5 {
    font-family: "proxima-nova";
}

h3 {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.005em;
}

h4 {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.005em;
}

h5 {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5em;
}

.font-proxima-nova {
    font-family: "proxima-nova";
    line-height: 20px;
    letter-spacing: 0.01em;
}

body .top-container {
    margin-bottom: 0;
    padding: 0;
}

.privacy.row {
    margin-top: 15px;
    padding: 15px 0;
    background-color: #f8f3f1;
}

.fa-asterisk:before {
    color: #BF002F;
}

.fruity .input-error input {
    border-color: #BF002F;
}

.fruity .text-info, 
.fruity .text-primary {
    color: #222222 !important;
    font-weight: 700;
}

.fruity .dropdown-menu>li>a {
    color: #000000;
}

.ls-even {
    background-color: var(--transparentColor);
}

.fruity a {
    color: #666666;
}

.fruity a:hover {
    text-decoration: underline;
}

.btn {
    padding: .5rem 2.1rem;
}

.form-check-input:checked {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.form-check-input:focus {
    box-shadow: none; 
    border: none;
}

span.navbar-toggler-icon {
    margin-bottom: 3px;    
    background-color: var(--whiteColor);
    display: block;
    height: 4px;
    transition: all 0.3s ease;
}

span.navbar-toggler-icon:last-child {
   margin-bottom: 0px;   
}

#navbar ul.navbar-right .nav-item {
    padding: 8px 8px 0px 8px;
}

/*****************************************************************/
/*                        End General CSS                        */
/*****************************************************************/

/*****************************************************************/
/*                        Start First Page CSS                   */
/*****************************************************************/

#firstpage-changelang {
    display: none;
}

.privacy.row {
    background-color: #f8f3f1;
}

.limit-text-window {
    color: #666666;
}

/*****************************************************************/
/*                        End First Page CSS                     */
/*****************************************************************/

/*****************************************************************/
/*                       Start Top Navbar                        */
/*****************************************************************/

.navbar-brand.logo-container {
    background-image: var(--logoFile);
    background-repeat: no-repeat;
    background-position-x: 15px;
    background-position-y: 10px;
}

.logo-flex-container {
    display: flex;
    flex-direction: column;
}

.logo-container>img {
    display: none;
}

.logo-flex-container  .survey-title {
    padding-left: 15px;
    padding-top: 40px;
}

.logo-container {
    padding: .3125rem 0;
}

.custom-top-navbar {
    height: auto;
    padding: 4px;
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    display: inline-flex;
    width: 100%;
}

.burger-content-container {
    text-align: left;
}

.navbar-nav-scroll {
    overflow-y: hidden;
}

.custom-top-navbar a {
    padding-right: 12px;
    color: var(--whiteColor);
    font-size: 16px;
    font-weight: bold;    
}

.custom-top-navbar a:hover,
.custom-top-navbar a:active,
.custom-top-navbar a:focus {
    color: var(--whiteColor);   
    text-decoration: none;
}

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

.fruity #survey-nav a {
    padding: 0;
    color: #666666;
}

#survey-nav li.list-group-itemindex-item a {
    padding-bottom: 8px;
}

.list-dropdown .list-question-select {
    border-radius: 1px;
}

.dropdown-menu[data-bs-popper] {
    padding: 6px 20px;
    left: auto;
    right: -10px;
}

/*****************************************************************/
/*                        End Top Navbar                         */
/*****************************************************************/

/*****************************************************************/
/*                   Start Progress Bar                          */
/*****************************************************************/

.brand-logo .top-container .top-content {
    margin-bottom: 0;
    padding: 0 12px;
}

.fruity .progress-bar {
    background-color: var(--primaryColor);
}

/*****************************************************************/
/*                    End Progress Bar                           */
/*****************************************************************/

/*****************************************************************/
/* Start Group Container / Group Title / Group Description       */
/*****************************************************************/

.group-title  {
    margin-bottom: 1em;
}

.group-outer-container,
.group-outer-container .group-container {
    margin: 0;
}

/*****************************************************************/
/* End Group Container / Group Title / Group Description         */
/*****************************************************************/

/*****************************************************************/
/*                  Start Question Container                     */
/*****************************************************************/

#outerframeContainer {
    background-color: #EAEDF0;
    padding-top: 2.5rem;
}

.question-container {
    margin-left: 0;
    margin-right: 0;
    background-color: var(--whiteColor);
    border:  none !important;
    box-shadow: 0px 1px 0px 0px #2222221A !important;
}

.question-title-container {
    color: #222222;
}

.ls-questionhelp {
    margin-top: 5px;
    color: #FFAA00;
}

.fruity .form-control,
.fruity .form-select {
    background-color: var(--lightgrey);
    color: #222222BF;
    border: 1px solid #22222233;
    box-shadow: none;
}

.fruity .form-control:focus,
.fruity .form-select:focus {
    border: 1px solid #22222233;
    box-shadow: inset 0 0px 1px #22222233, 0 0 8px #22222233;
}

.fruity .ui-autocomplete-input, 
.fruity .uneditable-input, 
.fruity input[type=password], 
.fruity input[type=text], 
.fruity textarea {
    color: #222222BF;
}

.radio-item label::after {
    top: 4px;
    width: 9px;
    height: 9px;
    left: 4px;    
}

.checkbox-item label::before {
    border-radius: 2px !important;
}

.checkbox-item label.ls-label-xs-visibility::after {
    width: 16px;
}

body .answer-item label:after {
    background-color: var(--primaryColor);
}

.radio-item input[type="radio"]:checked+label::before {
    border-color: var(--primaryColor);
    
}

.checkbox-item input[type=checkbox]:checked+label:after, 
.checkbox-item input[type=radio]:checked+label:after {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-radius: 2px;    
}
    
.btn-group>.btn-group:not(:last-child)>.btn, 
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
}

.btn-group>.btn-group:not(:first-child)>.btn, 
.btn-group>.btn:nth-child(n+3), 
.btn-group>:not(.btn-check)+.btn {
    border-bottom-left-radius: 100px;
    border-top-left-radius: 100px;
}

.table-hover>tbody>tr:hover,
tr.answers-list:hover,
.array-flexible-column tr.answers-list:hover {
    background-color: var(--lightgrey);
    color: #000000;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--lightgrey);
    color: #000000;
}

.table-col-hover col:hover, 
.table-col-hover col.hover {
    background-color: var(--transparentColor);
}

.table>:not(:first-child) {
    border-top: none;
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked+label,
li.imageselect-listitem .imageselect-container .imageselect-label {
    border: none;
}

.list-with-comment textarea.form-control,
.text-short .form-control,
.text-long .form-control,
.text-huge .form-control {
    border-radius: 14px; 
}

.equation .answer-container,
.boilerplate .answer-container {
   padding: 0; 
}

.yesno-button, 
.gender-button {
    column-gap: 15px;
}

.yesno-button label.mb-3, 
.gender-button  label.mb-3 {
    margin-bottom: 0px !important;
}

.fruity .bootstrap-select.form-control {
    border:none;
}

.language .languagesurvey {
    width: 250px;
    border-radius: 1px;
}

/*****************************************************************/
/*                 End Question Container                        */
/*****************************************************************/

/*****************************************************************/
/*             Start Specified Question Container                */
/*****************************************************************/

.choice-5-pt-radio .radio-item label::before,
.list-radio .radio-item label::before,
.list-with-comment .radio-item label::before {
    top: 2px;
}

.choice-5-pt-radio .radio-item label::after,
.list-radio .radio-item label::after,
.list-with-comment .radio-item label::after {
    top: 6px;
}

.multiple-opt .checkbox-item label::before,
.multiple-opt .checkbox-item label::after {
    top: 2px;
}

.multiple-opt .checkbox-item label::after,
.multiple-opt-comments .checkbox-item label::after {
    line-height: 16px;
}

.multiple-opt-comments .form-horizontal .checkbox-item label::after {
    top: 6px;
}

/*****************************************************************/
/*            End Specified Question Container                   */
/*****************************************************************/

/*****************************************************************/
/*                     Start All Buttons                         */
/*****************************************************************/

/* Remove the default border-radius on all buttons */
.btn,
.checkbox-item label::before, 
.checkbox-item label::after, 
.form-control, 
.form-select {
    border-radius: 100px;
}

/* Improve button focus and hover effects */
.btn, 
.progress, 
.dropdown-menu, 
.checkbox-item label::before, 
.checkbox-item label::after, 
.form-control, 
.modal-content, 
.question-container {
    outline: none;
}

.btn.active.focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn:active:focus, 
.btn:focus {
    outline: none;
}

input[type=checkbox]:focus,
input[type=file]:focus,
input[type=radio]:focus {
    outline: none;
}

/* Improve radio and checkbox button focus effects */
.radio-item input[type="radio"]:focus+label::before, 
.checkbox-item input[type="checkbox"]:focus+label::before,
.radio-item input[type="radio"]:focus+label::after, 
.checkbox-item input[type="checkbox"]:focus+label::after {
    outline: none;
}

.fruity .btn-check:active+.btn-outline-secondary:focus, 
.fruity .btn-check:active+.btn-primary:focus, 
.fruity .btn-check:active+.btn-success:focus, 
.fruity .btn-check:checked+.btn-outline-secondary:focus,
.fruity .btn-check:checked+.btn-primary:focus, 
.fruity .btn-check:checked+.btn-success:focus, 
.fruity .btn-check:focus+.btn-outline-secondary, 
.fruity .btn-check:focus+.btn-primary, 
.fruity .btn-check:focus+.btn-success, 
.fruity .btn-outline-secondary.active:focus, 
.fruity .btn-outline-secondary:active:focus, 
.fruity .btn-success.active:focus, 
.fruity .btn-success:active:focus, 
.fruity .show>.btn-outline-secondary.dropdown-toggle:focus, 
.fruity .show>.btn-success.dropdown-toggle:focus {
    box-shadow: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.btn-check:active+.btn-outline-secondary:focus, 
.btn-check:checked+.btn-outline-secondary:focus, 
.btn-outline-secondary.active:focus, 
.btn-outline-secondary.dropdown-toggle.show:focus, 
.btn-outline-secondary:active:focus {
    box-shadow: none;
}

.fruity .input-group-addon, 
.fruity .input-group-text {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.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(--transparentColor) !important;
    color: #858585;
}

/* Customize Next/Submit buttons */
.selector--inputondemand-addlinebutton,
.fruity .btn-primary,
.ls-move-submit-btn, 
.ls-move-next-btn {
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.selector--inputondemand-addlinebutton:hover,
.fruity .ls-move-submit-btn.btn-primary[disabled],
.ls-move-submit-btn:hover,
.ls-move-submit-btn:active:hover,
.ls-move-submit-btn.active:hover,
.ls-move-next-btn:hover,
.ls-move-next-btn:active:hover,
.ls-move-next-btn.active:hover {
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor);  
    box-shadow: 0 0 30px #0003;
}

.fruity .btn-primary:focus {
    background-color: var(--focusColor);    
    color: var(--whiteColor);
    border-color: var(--focusColor);  
}

.selector--inputondemand-addlinebutton:focus,
.ls-move-submit-btn:focus,
.ls-move-submit-btn.focus,
.ls-move-next-btn:focus,
.ls-move-next-btn.focus {
    background-color: var(--focusColor);    
    color: var(--whiteColor);
    border-color: var(--focusColor);  
    box-shadow: 0 0 30px #0003;
    transition: all 2.2s .25s cubic-bezier(.165,.84,.44,1);    
    transition-duration: .35s;
}

.selector--inputondemand-addlinebutton:active,
.ls-move-next-btn:active,
.ls-move-next-btn.active,
.ls-move-submit-btn:active,
.ls-move-submit-btn.active,
.ls-move-next-btn:active:focus,
.ls-move-next-btn.active:focus,
.ls-move-next-btn:active.focus,
.ls-move-next-btn.active.focus,
.ls-move-submit-btn:active:focus,
.ls-move-submit-btn.active:focus,
.ls-move-submit-btn:active.focus,
.ls-move-submit-btn.active.focus { 
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor);  
    box-shadow: 0 0 0 2px #88b8ff;
    transition: all 2.2s .25s cubic-bezier(.165,.84,.44,1);
}

.fruity .btn-check:active+.btn-primary, 
.fruity .btn-check:checked+.btn-primary, 
.fruity .btn-check:focus+.btn-primary, 
.fruity .btn-primary.active, 
.fruity .btn-primary.active.active, 
.fruity .btn-primary.active:focus, 
.fruity .btn-primary:active,
.fruity .btn-primary:hover, 
.fruity .open .dropdown-toggle.btn-primary {
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor);  
}

/* Customize gender/yes-no buttons */
.gender-button .btn-primary, 
.yes-no .btn-primary, 
.bootstrap-buttons-div .button-item {
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border-color: var(--borderColor);
}

.btn-check:active+.btn-primary, 
.btn-check:checked+.btn-primary, 
.show>.btn-primary.dropdown-toggle {
    background-color: var(--primaryColor) !important;   
    color: var(--whiteColor) !important;
    border-color: var(--primaryColor) !important;  
}

.gender-button .btn-primary:hover, 
.yes-no .btn-primary:hover, 
.bootstrap-buttons-div .button-item:hover,
.gender-button .btn-primary.active:hover,
.yes-no .btn-primary.active:hover {
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor);   
    box-shadow: 0 0 30px #0003;
}

.gender-button .btn-primary:focus,
.yes-no .btn-primary:focus,
.bootstrap-buttons-div .button-item:focus{
    background-color: var(--focusColor);    
    color: var(--whiteColor);
    border-color: var(--focusColor);  
    box-shadow: 0 0 30px #0003;
    transition: all 2.2s .25s cubic-bezier(.165,.84,.44,1);    
    transition-duration: .35s;
}

.gender-button .btn-primary:active,
.yes-no .btn-primary.active,
.bootstrap-buttons-div .button-item.active,
.gender-button .btn-primary.active:focus,
.yes-no .btn-primary.active:focus {
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor); 
    box-shadow: 0 0 0 2px #88b8ff;
    transition: all 2.2s .25s cubic-bezier(.165,.84,.44,1);
}

/* Customize Date Picker button */
.date-timepicker-group .btn-primary,
.date-timepicker-group .btn-primary:hover,
.date-timepicker-group .btn-primary:active,
.date-timepicker-group .btn-primary:focus,
.date-timepicker-group .btn-primary:active:hover,
.date-timepicker-group .btn-primary:active:focus,
.date-timepicker-group .btn-primary:active.focus,
.date-timepicker-group .btn-primary.hover,
.date-timepicker-group .btn-primary.active,
.date-timepicker-group .btn-primary.focus,
.date-timepicker-group .btn-primary.active:hover,
.date-timepicker-group .btn-primary.active:focus,
.date-timepicker-group .btn-primary.active.focus {
    padding: .375rem .75rem;    
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor); 
}

/* Customize Previous buttons */
.fruity .btn-outline-secondary,
.ls-move-previous-btn {
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border-color: var(--borderColor);
}

.fruity .btn-outline-secondary:hover,
.ls-move-previous-btn:hover,
.ls-move-previous-btn:active:hover,
.ls-move-previous-btn.active:hover,
.fruity .btn-outline-secondary:focus,
.ls-move-previous-btn:focus,
.ls-move-previous-btn.focus {
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border-color: var(--borderColor);
    box-shadow: 0 1px 5px #00000030;
}


.fruity .btn-outline-secondary:active,
.ls-move-previous-btn:active,
.ls-move-previous-btn.active,
.ls-move-previous-btn:active:focus,
.ls-move-previous-btn.active:focus,
.ls-move-previous-btn:active.focus,
.ls-move-previous-btn.active.focus {
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border-color: var(--borderColor);
    box-shadow: 0 0 0 2px #88b8ff;    
    transition: all 2.2s .25s cubic-bezier(.165,.84,.44,1);
}

.fruity .selector--inputondemand-addlinebutton.btn-outline-secondary,
.selector--inputondemand-addlinebutton {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.selector--inputondemand-addlinebutton:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);  
    box-shadow: 0 0 30px #0003;
}

.selector--inputondemand-addlinebutton:focus {
    background-color: var(--focusColor);    
    color: var(--whiteColor);
    border-color: var(--focusColor);  
    box-shadow: 0 0 30px #0003;
    transition: all 2.2s .25s cubic-bezier(.165,.84,.44,1);    
    transition-duration: .35s;
}

.selector--inputondemand-addlinebutton:active { 
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 2px #88b8ff;
    transition: all 2.2s .25s cubic-bezier(.165,.84,.44,1);
}

/* Customize Upload buttons */
.upload.btn-primary {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.upload.btn-primary:hover, 
.upload.btn-primary:active:hover, 
.upload.btn-primary.active:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
    text-decoration: none;    
}

.upload.btn-primary:active,
.upload.btn-primary.active,
.upload.btn-primary:focus,
.upload.btn-primary.focus,
.upload.btn-primary:active:focus,
.upload.btn-primary.active:focus,
.upload.btn-primary:active.focus,
.upload.btn-primary.active.focus {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
}

.upload-div .btn {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.upload-div .btn:active,
.upload-div .btn.active,
.upload-div .btn:focus,
.upload-div .btn.focus,
.upload-div .btn:focus,
.upload-div .btn:focus,
.upload-div .btn.focus,
.upload-div .btn.focus {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
}

.upload-div .btn:hover,
.upload-div .btn:active:hover,
.upload-div .btn.active:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
}

.uploader .alert-info {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.file-upload-modal-footer .btn {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.file-upload-modal-footer .btn:active,
.file-upload-modal-footer .btn.active,
.file-upload-modal-footer .btn:focus,
.file-upload-modal-footer .btn.focus,
.file-upload-modal-footer .btn:active:focus,
.file-upload-modal-footer .btn.active:focus,
.file-upload-modal-footer .btn:active.focus,
.file-upload-modal-footer .btn.active.focus {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
}

.file-upload-modal-footer .btn:hover,
.file-upload-modal-footer .btn:active:hover,
.file-upload-modal-footer .btn.active:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
}

/* Improve hover effect on uploaded files buttons */
.upload-files .uploadedfiles td a.btn-primary {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.upload-files .uploadedfiles td a.btn-primary:hover, 
.upload-files .uploadedfiles td a.btn-primary:active,
.upload-files .uploadedfiles td a.btn-primary:focus {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
    text-decoration: none;    
}

/* Customize the delete button for uploaded files */
.upload-files ul.files-list fieldset div:nth-child(3) a.btn-danger {
    background-color: #d9534f;
    color: var(--whiteColor);
    border-color: #d43f3a;
}

.upload-files ul.files-list fieldset div:nth-child(3) a.btn-danger:hover {
    background-color: #c9302c;
    color: var(--whiteColor);
    border-color: #ac2925;
    box-shadow: 0 0 30px #0003;    
}

.save-survey-input .btn,
.modal-dialog .btn {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.save-survey-input .btn:hover,
.save-survey-input .btn:active:hover,
.save-survey-input .btn.active:hover,
.modal-dialog .btn:hover,
.modal-dialog .btn:active:hover,
.modal-dialog .btn.active:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;   
    text-decoration: none;
}

.btn-info {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
}

.btn-info:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
}

/* Customize bootstrap buttons */
.bootstrap-buttons-div .btn-primary {
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border-color: var(--borderColor);   
    border-radius: 100px;    
}

.multiple-opt .bootstrap-buttons-div .btn-primary {
   border-radius: 25px;   
}

.bootstrap-buttons-div .btn-primary:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    box-shadow: 0 0 30px #0003;    
}

.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    background-color: var(--lightgrey);
    color: #222222BF;
    border: 1px solid #22222233;
    border-radius: 1px;
}

.dropdown.bootstrap-select .dropdown-menu.show {
    width: 250px;
}

.btn-check:active+.btn-outline-secondary,
.btn-check:checked+.btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active {
    color: #6c757d;
}

.bootstrap-select .btn-check:active+.btn-outline-secondary,
.bootstrap-select .btn-check:checked+.btn-outline-secondary,
.bootstrap-select .btn-outline-secondary.active,
.bootstrap-select .btn-outline-secondary.dropdown-toggle.show,
.bootstrap-select .btn-outline-secondary:active {
    background-color: var(--lightgrey);
    border-radius: 1px;
    border-color: #22222233;
}

.bootstrap-select .btn {
    background-color: var(--lightgrey);    
    border-radius: 1px;
}

.bootstrap-select .btn-outline-secondary.dropdown-toggle.show {
    color: #222222BF;
}

.bootstrap-select .btn-outline-secondary:hover,
.bootstrap-select .btn-outline-secondary:focus{
    background-color: var(--lightgrey);
    border-color: #22222233;    
    border-radius: 1px;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
}

/*****************************************************************/
/*                        End All Buttons                        */
/*****************************************************************/

/*****************************************************************/
/*                       Start Sortables                         */
/*****************************************************************/

/*unsorted*/
.sortable-choice .ls-choice.sortable-item {
    background-color: var(--lightgrey); 
    color: #000000;
    border-color: var(--lightgrey);
    margin-bottom: 6px;
}

/*sorted*/
.sortable-rank .ls-choice.sortable-item {
    background-color: var(--primaryColor);  
    color: var(--whiteColor);
    border-color: var(--primaryColor);
    margin-bottom: 6px;
}

/*****************************************************************/
/*                      End Sortables                            */
/*****************************************************************/

/*****************************************************************/
/*                       Start Slider                            */
/*****************************************************************/

.fruity .tooltip-inner {
    background-color: var(--primaryColor);
}

.slider-list .slider.slider-untouched .slider-handle {
    background-color: var(--primaryColor);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before, 
.bs-tooltip-top .tooltip-arrow:before {
    border-top-color: var(--primaryColor);
}

.fruity .slider-touched .tooltip-inner,
.fruity .slider-touched .slider-handle {
    background-color: var(--primaryColor);
}

.fruity .slider-touched .tooltip.top .tooltip-arrow {
    border-top-color: var(--primaryColor);
}

.fruity .slider-handle {
    background-color: var(--primaryColor);
    background-image: linear-gradient(to bottom, var(--primaryColor) 0%, var(--primaryColor) 100%);
}

.fruity .slider-selection {
    background-image: linear-gradient(to bottom, var(--primaryColor) 0%, var(--primaryColor) 100%);
}


/*****************************************************************/
/*                       End Slider                              */
/*****************************************************************/

/*****************************************************************/
/*                       Start Footer                            */
/*****************************************************************/

/* Removed the classess background color in the question index */ 
#navbar li.index-menu-full ul li.index-item-current {
    background-color: var(--transparentColor);
}

/* Removed the classess background color in the question index */
#navbar li.index-menu-full ul li a.bg-warning,
#navbar li.index-menu-full ul li a.bg-danger {
    background-color: var(--transparentColor) !important;
}

#navigator-container {
    margin-left: 0;
    margin-right: 0;
}

footer {
    padding: 15px 0px;
    background-color: #39394b;
    color: #fff9;
}

.footer-content {
    display: flex;    
    align-items: center; 
    justify-content: space-between;
}

footer p {
    margin: 0;
}

/*****************************************************************/
/*                       End Footer                              */
/*****************************************************************/

/*****************************************************************/
/*                       Start Responsive                        */
/*****************************************************************/

@media only screen and (max-width: 768px) {
    .yesno-button, 
    .gender-button {
        width: 100%;
    }
    
    .fruity .form-control, 
    .fruity .form-select {
        background-color: var(--transparentColor);
    }
    
    .gender-button .btn-primary:active,
    .yes-no .btn-primary.active,
    .bootstrap-buttons-div .button-item.active,
    .gender-button .btn-primary.active:focus,
    .yes-no .btn-primary.active:focus {
        transition: none;
    }
    
    .sortable-choice li img, 
    .sortable-rank li img { 
        height : auto !important;
    }
    
    .navbar-brand {
        min-height: auto;
    }
}

@media only screen and (max-width: 1028px) {
    tbody, 
    td, 
    tfoot, 
    th, 
    thead, 
    tr {
        border: none;
    }
    
    .fruity .table-bordered, 
    .fruity .table-bordered>tbody>tr>td, 
    .fruity .table-bordered>tbody>tr>th, 
    .fruity .table-bordered>tfoot>tr>td, 
    .fruity .table-bordered>tfoot>tr>th, 
    .fruity .table-bordered>thead>tr>td, 
    .fruity .table-bordered>thead>tr>th {
        border: none;
    }
    
    .array-multi-flexi table.checkbox-array .checkbox-list .answertext {
        position: absolute;
        padding-left: 30px;
        padding-top: 9px;
    }
    
    .array-multi-flexi .ls-answers.checkbox-array>tbody>tr.ls-even:hover,
    .array-multi-flexi .table-hover.checkbox-array>tbody>tr:hover>td, 
    .array-multi-flexi .table-hover.checkbox-array>tbody>tr:hover>th {
        background-color: transparent;
    }

    .array-multi-flexi table.checkbox-array.table-hover>tbody>tr:hover>* {
        --bs-table-accent-bg: transparent;
    }
    
    .array-multi-flexi .ls-answers > tbody > tr > td.radio-item, 
    .array-multi-flexi .ls-answers > tbody > tr > td.checkbox-item {
        min-height: 44px;
        padding-top: 10px;
    }
}

@media only screen and (min-width: 768px) {
    .fruity .navbar .navbar-nav .nav-item:after {
        background-color: #828282;
    }
}

/*****************************************************************/
/*                       End Responsive                          */
/*****************************************************************/