/******************
    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
*/
.fruity_twentythree_custom {
    background-color: #fff;
    padding-bottom: 0px;
}

.fruity_twentythree_custom .col-centered { 
    padding: 0px !important;
}

.fruity_twentythree_custom #main-col {
    margin-top: 0px;
}

#survey-nav.navbar,
#navigator-container,
#navigator-container #ls-button-previous {
    display: none !important;
}
#question62 .question-valid-container,
#question62 .answer-container .answer-item,
#question47 .question-valid-container,
#question47 .answer-container .answer-item {
    display: none !important;
}
.navigator .text-end {
    display: none;
}
.space-col {
    margin-bottom: 0px;
}

.group-title {
    margin-top: 10px !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    font-weight: normal !important;
    margin-left: 90px;
}
.group-container {
    background: url(https://kaipara.de/lime/assets/images/kaipara-frank-selter.png) no-repeat 0 0;
    background-size: 75px 75px;
    background-position: 5px 5px;
}
.group-outer-container,
.group-container,
.question-container {
    margin: 0px;
}
.question-title-container {
    padding: 0px;
    margin-bottom: 15px;
}
.ls-label-question {
    font-size: 1.25rem !important;
    margin-left: 90px;
}
.answer-container {
    padding: 0px;
}
#navigator-container {
    margin: 10px 0 0 0;
}
.btn-check:checked + .btn-primary, 
.btn-check:checked + .btn-primary:focus, 
.btn-check:focus:checked + .btn-primary,
.btn-check + .btn-primary:hover {
    background-color: transparent;
    border: none;
    color: #6E748C;
}
/*.btn-check:checked + .btn-primary .kq-image, */
.btn-check:checked + .btn-primary:focus .kq-image,
.btn-check:focus:checked + .btn-primary .kq-image,
.btn-check + .btn-primary:hover .kq-image {
    background-color: #c6d2ba;
}
.btn-check + .btn {
    min-height: 190px;
    border: none;
    background-color: transparent;
}
.kq-selected-values {
    font-size: 1rem;
    color: #6E748C;
    margin-left: 20px;
}
.kq-image {
    text-align: center;
    margin-bottom: 15px;
    padding: 20px 0px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0.625rem rgba(34, 34, 34, 0.3);
}
.kq-text {
    text-align: center;
    margin-bottom: 0px;
}
.question-help-container {
    padding: 0px !important;
}
.question-valid-container {
    font-size: 0.8rem !important;
    padding: 0px !important;
    margin: 5px 0px 10px !important;
    display: none;
}
.ls-answers label.btn {
    font-size: 16px !important;
    font-weight: normal;
}

.ls-answers .bootstrap-buttons-div .form-check {
    padding-left: 0px;
}

.ls-answers .slick-slide {
    max-width: 250px !important;
    width: 250px !important;
}

.ls-answers .slick-slide img {
    display: unset;
}

/* Tooltip container styling */
.info-icon-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
    top: -1px;
}
.info-icon-container .info-icon {
    width: 22px;
}
.kq-text .info-icon-container .info-icon {
    width: 14px;
}


/* Tooltip styling */
.info-tooltip {
    display: none;
    position: absolute;
    bottom: 100%; /* Position the tooltip above the icon */
    left: 0;
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 300px; /* Adjust based on content */
}

.info-tooltip.below {
    bottom: unset;
    top: 100%; /* Position the tooltip below the icon */
}

/* Tooltip arrow */
.info-tooltip::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* Tooltip content container */
.tooltip-content {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 18px;
}

/* Close icon inside tooltip */
.info-tooltip .close-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 5px;
    cursor: pointer;
    display: none;
}

/* Show tooltip on hover or active state */
.info-tooltip.active {
    display: block !important;
}

.onlymobile {
    display: none;
}

@media (pointer: coarse) {
    .info-tooltip .close-icon {
        display: block; /* Show close button on touch devices */
    }
    
    .kq-selected-values {
        /*display: flex; 
        overflow-x: auto;
        white-space: nowrap; */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
        cursor: grab; /* Indicate draggable behavior */
        /* gap: 3px;
        padding-right: 20px; */
    }
    .kq-selected-values::-webkit-scrollbar {
        display: none; /* Hide scrollbar for WebKit (Chrome, Safari) */
    }
    
    /*.btn-check:checked + .btn-primary .kq-image, */
    .btn-check:checked + .btn-primary:focus .kq-image,
    .btn-check:focus:checked + .btn-primary .kq-image,
    .btn-check + .btn-primary:hover .kq-image {
        background-color: unset;
    }
}

@media screen and (max-width: 600px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .info-icon-container {
        position: initial;
    }
    
    .kq-selected-values {
        font-size: 0.8rem;
    }
    
    .kq-text .info-icon-container {
        position: relative;
    }
    
    .question-container .ls-label-question {
        font-size: .9rem !important;
        line-height: 24px;
        position: relative;
        margin-left: 60px;
    }
    
    .group-container .group-title {
        font-size: 0.8rem !important;
        margin-left: 60px;
        margin-bottom: 5px;
    }
    
    .info-tooltip {
        left: -60px;
        transform: unset;
        padding: 12px 15px 12px 12px;
        width: 280px;
    }
    
    .kq-text .info-tooltip {
        left: 0;
        transform: translateX(-50%);
        width: 220px;
    }
    
    .ls-answers {
        display: flex;
        overflow-x: auto; 
        flex-wrap: nowrap;
        cursor: grab;
        gap: 0; 
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    }
    
    .ls-answers::-webkit-scrollbar {
        display: none; /* Hide scrollbar for WebKit (Chrome, Safari) */
    }
    
    .ls-answers > .bootstrap-buttons-div {
        width: 200px;
        max-width: 200px;
        padding-right: 0px;
    }
    
    .ls-answers .bootstrap-buttons-div:last-of-type .kq-text .info-tooltip {
        left: 0;
        transform: translateX(-100%);
        width: 220px;
    }
    
    .ls-answers .slick-slide {
        max-width: 200px !important;
        width: 200px !important;
    }
    
    .group-container {
        background-size: 50px 50px;
        background-position: 2px 0px;
    }
    
    .ls-answers label.btn {
        font-size: 14px !important;
    }
    
    .info-icon-container .info-icon {
        width: 18px;
    }
    
    .onlymobile {
        display: initial;
    }
    
    .btn-check + .btn {
        padding: 5px 10px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .ls-answers .col-md-2 {
        width: 20%;
    }
}