/******************
    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
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&family=Nunito:wght@400;600;700&display=swap');
@import url('https://cdn.bwelz.org/libraries/icons/twinkle-v2.0/style.css');

body {
    font-family: 'Nunito Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}
.h1, h1 {
    font-size: calc(1.425rem + .9vw);
}
#outerframeContainer {
    hyphens: none;
}
.navbar-toggler {
    display: none;
}
.bg-light {
     background-color: #F1F3FF !important;
}
.hidden {
    display: none;
}
body {
    background: #fff;
    padding-bottom: 20px;
    padding-top: 70px;
}
body .top-container {
    margin-top: 16px !important;
}
.row {
    --bs-gutter-x: 0;
}
ul#language-dropdown {
    overflow: auto;
    max-height: 60vh;
}
.card {
    border: none;
    border-radius: 16px;
    padding: 24px;
}
.btn {
    border-width: 1.5px;
}

.fa-asterisk:before {
    margin-right: 4px;
}
.form-control {
    border-width: 1.5px;
    border-color: rgba(0,0,0,.075);
}
.form-control, button, .btn {
    border-radius: 12px;
    font-size: 16px;
}
.form-control {
    min-height: 50px;
}
button:focus, .btn:focus {
    border-color: rgba(0,130,255,.0);
}
.form-control:focus {
    border-color: rgba(0,130,255,.0);
    box-shadow: 0 0 0 0.25rem rgba(0,130,255,.5);
}
.btn-outline-secondary:active {
    background-color: rgba(0,130,255,.75);
    border-color: rgba(0,130,255,.0) ;
}
#navbar {
    max-width: 960px;
    padding: 0 !important;
    margin: 0 auto !important;
}
.logo-container>img {
    padding: 12px 16px 12px 0;
    max-height: 70px;
}
#survey-nav {
    background-color: white !important;
    max-width: 680px;
    margin: 0 auto;
    border: none !important;
}
#survey-nav .container-fluid {
    padding: 0 16px;
}

#navbar .navbar-nav .nav-link {
    height: 60px;
    line-height: 60px;
    font-weight: 500;
    padding-top: 0;
    padding-bottom: 0;
    color: #010101;
}
.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.95);
    border-color: transparent;
}

#outerframeContainer, #surveys-list-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 16px;
}
button.navbar-toggler:focus {
    box-shadow: none;
}
button.navbar-toggler:focus .navbar-toggler-icon, button.navbar-toggler:hover .navbar-toggler-icon {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(0, 130, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
.surveytitle.btn.btn-primary {
    background: #F1F3FF;
    padding: 16px;
    font-size: 20px;
    color: #1A1D41;
    border: 2px solid transparent;
    border-radius: 10px;
    font-weight: 600;
}
.surveytitle.btn.btn-primary:hover {
    /*box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.1);*/
    /*background: rgba(255, 255, 255, 0.4);*/
    border-color: #FF367F;
    box-shadow: none;
}
.surveytitle.btn.btn-primary:focus {
    border-color: #0082FF;
    box-shadow: none;
}
#surveys-list-jumbotron {
    padding-bottom: 24px;
}
.surveys-list li {
    padding: 0.75em;
    width: 100% !important;
}
.surveys-list li a {
background-color: #fff;
   
}
.survey-contact {
    padding-top: 24px;
}

/******************
    Survey Welcome Page
    ---------------
*/
.survey-name {
    margin-top: 24px;
    text-align: left !important;
}
.survey-welcome {
    /*max-width: 600px;*/
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin: 0 auto;
}
.question-count-text {
    display: none;
}
#surveys-list-jumbotron {
    margin-top: 32px;
}
/******************
    Survey Inner Pages
    ---------------
*/
@media (max-width: 767px) {
    .group-title {
        margin-top: 0;
        font-size: 24px;
    }
}

/******************
    Token Page
    ---------------
*/

.token-page {
    max-width: 480px;
    margin: 0 auto;
   
}
.token-page .h3 {
    text-align: center;
   
}

.captcha-question {
    gap: 12px;
}
#form-token input {
    height: 50px;
}
label.control-label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}
.asterisk {
    font-size: 12px !important;
}
.card {
    padding: 36px;
    border: none;
    border-radius: 24px;
}
.btn-outline-primary {
    color: rgba(0,130,255,1);
    border-color: rgba(0,130,255,1);
}
.btn-outline-primary:hover {
    width: 100%;
    color: #fff;
    background-color: #0082FF;
    border-color: #0082FF;
}
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(0,130,255,.5);
}
.btn-outline-primary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(0,130,255,.5);
}



.flex1 { flex: 1 1 120px; }
.flex2 { flex: 2 2 20em; } 
.btn-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.btn-100 {
    width: 100%;
    height: 50px;
}
.load-survey-submit {
    margin-top: 32px;
}

/******************
    Captcha Page
    ---------------
*/
.captcha-page {
    max-width: 480px;
    margin: 48px auto;
   
}
/******************
    Surveys List Page
    ---------------
*/

.surveys-list li a {
     margin-left: 0;
}
/******************
    Survey
    ---------------
*/
.question-valid-container {
    background: transparent !important;
    color: #444444 !important;
    text-align: left;
    padding: 0;
}
/******************
    Questions
    ---------------
*/ 
.group-outer-container {
    
    margin: 0 auto;
}
 .ls-label-question {
     font-size: 18px;
 }
.ls-answers {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
}
.ls-answers .list-unstyled {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
}

.bootstrap-buttons-div {
    width: 100%;
}
.btn-check {
    background: white;
}
.ls-answers label, .ls-answers th {
    font-weight: 400;
    cursor: pointer;
    background: #f1f1f1;
    background: #F1F3FF;
    border: solid 2px transparent;
    transition: background .2s ease-in-out;
    padding: 20px;
    display: block;
    color: #1A1D41;
    text-align: left;
    padding-left: 52px;
    position: relative;
}
.ls-answers label:after {
    display: block;
    position: absolute;
    height: 24px;
    width: 24px;
    content: "";
    background: white;
    border-radius: 4px;
    top: 20px;
    left: 16px;
}
.checkbox-list.ls-answers label:after {
    border-radius: 4px;
}
.radio-list.ls-answers label:after {
    border-radius: 24px;
}
.ls-answers .btn-check:checked+.btn-primary:before {
    content: "";
    position: absolute;
    height: 20px;
    z-index: 1;
    left: 18px;
    top: 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    background-image: url(https://tds.bwelz.org/twinkle-icons/v1.1.0/SVG/tw-icon-checkmark.svg?Expires=1896359734&Signature=NQOOCLRhljwyrnTWTnBgf~T0r0LXEdjJXul7l2xtM3hG1e0xzGbFS98Eb8tbAtXihdmiVjs-ceTDe5vhi7BxegCXvpKTqiV0aHA4Z44iR2BL5bxlRYcVt0OVhQe5HHoy5PGL4DYwWTeNG~lEKv0VOIyi-LF3faSlGWhR9qPRavejkcx~p6BLFRhl2~94gBo6g5tb5reSs1BjrfhCHTxQey5QCQyqHPH~y9cyMgcluDJMcJrDZHCdLowEfHQMZ5~zIyBzCQ-OKhS~lw1vdxRoWZwC18tYSwj5RRwig9zXWAxyarb7L9Wfktf7xzH5h2PpIZggvLVw77y1UMHYcaD6Yg__&Key-Pair-Id=K1PPZDIOWN47R1);
}
.btn-primary:hover {
    color: #1A1D41;
    background-color: #F1F3FF;
    border-color: #0082FF;
}

.btn-check:focus+.btn-primary, .btn-primary:focus {
    background-color: #0082FF;
    box-shadow: 0 0 0 0.25rem rgba(0,130,255,.5);
}
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0082FF;
    border-color: #0082FF;
}
.btn-check:active+.btn-primary lottie-player, .btn-check:checked+.btn-primary lottie-player, .btn-primary.active lottie-player, .btn-primary:active lottie-player, .show>.btn-primary.dropdown-toggle lottie-player {
    filter: invert(55%) brightness(180%);
    mix-blend-mode: screen;
}
.flatly .btn-check .btn-primary:focus, .flatly .btn-check:focus + .btn-primary {
    background-color: #F1F3FF;
    border: 2px solid #0082FF;
    box-shadow: none;
    color: #1A1D41;
}
.flatly .btn-check:focus:checked + .btn-primary, .flatly .btn-check .btn-primary:focus:checked {
    background-color: #0082FF;
    border-color: #0082FF;
    color: #ffffff;
}
.answer-container {
    border: none;
    padding: 12px 0;
    padding-bottom: 0;
}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 0;
    margin-bottom: 0;
}
.question-title-container {
    padding: 0;
}
.answer-container .container-fluid {
    padding: 0;
}
.question-container {
    border-bottom: none;
    margin-bottom: 32px;
}

/******************
    Navigator
    ---------------
*/ 
.navigator {
    max-width: 650px;
    margin: 0 auto;
}

.progress-bar {
    background-color: #FF367F;
}
button#ls-button-submit {
    background: #acfcd3;
    border-color: #1be181;
    color: #003b25;
    padding: 12px 28px;
}
button#ls-button-submit:hover {
    background: #1be181;
    border-color: #1be181;
    color: #003b25;
}
/*NUMBERS ANSWER*/
.numbers-answer .ls-answers {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    
}
.numbers-answer .bootstrap-buttons-div {
    width: 100%;
}
.numbers-answer .ls-answers label {
    text-align: center;
    padding: 0;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    justify-content: center;
}
/*ICON ANSWER*/
.icon-answer .ls-answers {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}
.icon-answer .bootstrap-buttons-div {
    width: 30%;
}
.icon-answer .ls-answers label {
    text-align: center;
    padding: 0;
}
.icon-answer .btn label {
    display: none;
}
.ls-answers {
    padding-bottom: 0;
}
.group-container {
    margin-bottom: 1em;
}

/* Overlay Spin */

.overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 1); /* White overlay with opacity */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* Ensure the overlay is above other content */
        opacity: 1;
        transition: opacity 0.5s; /* Add a fade transition */
    }

    

    .loading-icon {
        border: 4px solid #FF367F; /* Set border color for the loading spinner */
        border-top: 4px solid transparent;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1.25s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


    .overlay.loaded {
        transition: opacity 1s, visibility 0s 1s; /* Delay visibility to avoid clicks during fade */
        opacity: 0;
        pointer-events: none; /* Make sure clicks don't interact with the hidden overlay */
    }
    
.group-title {
    margin-top: 0;
    font-size: 24px;
}
.group-description {
    background: white;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
}
.question-help-container {
    color: #000 !important;
    border: none;
}
.ls-questionhelp {
    margin-top: .5em;
    margin-left: 0 !important;
    margin-bottom: .5em;
}
.ls-questionhelp:before {
    display: none;
}

.question-valid-container {
    color: #444444 !important;
}
.ls-label-question {
    color: #000;
    font-size: 20px;
    font-weight: 600;
}
.detail-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    margin: 4px 0;
}
.detail-with-icon [class^="icon-"]  {
    font-size: 20px;
}


.add-character-bottom {
    position: relative;
}
.add-character-bottom:after {
    content: "";
    background-image: url(https://tds.bwelz.org/logos/prek_club/characters/k-greeting.svg?Expires=1896359676&Signature=JTpFEhSUfuv6NVsTUOgXcKIZMZM0b9k1MdBw2MZ832~Ie3tSx0eymrLXyG~szmXBg9eJTHB-8jZP7KKryvOspaehAAFKSDOs5--QU0ADiPcs7KYYDyxuiN-9nViwNqWSxcOW6GXYm152mtt8PyY3OFeC8BcIrn74tVmXpCP8YzQU00HmUHU~T-lwYp1yIJQH45b7hPjmPwkmqTpCDZI5Z9RvaWUAs7AEpttVSDZXgtWgLqKDklVGFv9OeugMZXkS7YAQTCJU6Xn8ykgJzuOxbt5jIf3heSlKIiWqW76v5gvlCJ0SDLriZJTBPBYgo39EGhvQWI5RyHlu1v7m4~r1Mg__&Key-Pair-Id=K1PPZDIOWN47R1);
    height: 180px;
    width: 180px;
    display: block;
    position: absolute;
    bottom: -200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.add-character-bottom.pkc-k:after {
    background-image: url(https://tds.bwelz.org/logos/prek_club/characters/k-greeting.svg?Expires=1896359676&Signature=JTpFEhSUfuv6NVsTUOgXcKIZMZM0b9k1MdBw2MZ832~Ie3tSx0eymrLXyG~szmXBg9eJTHB-8jZP7KKryvOspaehAAFKSDOs5--QU0ADiPcs7KYYDyxuiN-9nViwNqWSxcOW6GXYm152mtt8PyY3OFeC8BcIrn74tVmXpCP8YzQU00HmUHU~T-lwYp1yIJQH45b7hPjmPwkmqTpCDZI5Z9RvaWUAs7AEpttVSDZXgtWgLqKDklVGFv9OeugMZXkS7YAQTCJU6Xn8ykgJzuOxbt5jIf3heSlKIiWqW76v5gvlCJ0SDLriZJTBPBYgo39EGhvQWI5RyHlu1v7m4~r1Mg__&Key-Pair-Id=K1PPZDIOWN47R1);
}
.add-character-bottom.pkc-p:after {
    background-image: url(https://tds.bwelz.org/logos/prek_club/characters/p-greeting.svg?Expires=1896359676&Signature=SrAhnNXQRrmIQpFhz1KwTKu1exSeG3ZZk-ltjJtRhOFtlAQ5AOEegmhegVhqZyjO-8e7TpwfSjEuAtfaekBdKxurax5b4PmtJw5mcGXxI5~8SI6FvOZX4USabgMBfpGZbKUhqwd3ntXJt-pJzam~5eF-TRGwozd55nlBeVDe-BSSDcnVCOb5nDMt9LJ5btJE7Oo0yJipYI4UW3cTYzknCF2Mu96VNtEhg2WrPLR4GpP8UUWnjYENUOAiiBl0lWDi1~WWZyHZ9xbOxUZvSNzLn83AbBAPVOm8wv~hmhhg84DTAK1nmUwi6XIhcoASFH76MYIqLuBDNvyGzbIqratUbQ__&Key-Pair-Id=K1PPZDIOWN47R1);
}
.add-character-bottom.pkc-c:after {
    background-image: url(https://tds.bwelz.org/logos/prek_club/characters/c-greeting.svg?Expires=1896359676&Signature=g-IajJ3PivTw0LNoOgx1a7v2Bj7giW~wPlBCZGRiRCLzkU~Y9bqqocmpsBnccgoh9bGitQ-uCjyP281DBIxT9fMWZVeIoCXL73uoZlzk4UCVZrOpCTBGdZ42qHg9IDyliGrAwDBaghI1Q4qxq195u-dddIHHfdb6ZDKOM1xaxjTxzeB3qIHax~2-c85K~ufcWDrb5W8RsB4YSkKmEvPj7r-vDEhyzK67WmCIroW21vnY9c7BQv-U2kbn-EhOTLSrV48RrUVIWzZ46E6DpOPEOp7YzW1SQmrQ20hnmWrxXgcSc8W14eUo6tE3sR7ErpCGfiQ6DMXy1aF8~LgU00S1vw__&Key-Pair-Id=K1PPZDIOWN47R1);
}

#navigator-container {
    padding-bottom: 120px;
}

.bootstrap-buttons-div {
    margin-bottom: 0 !important;
}