/******************
    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 {
    /** Base colors */
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;
    --clr-primary: #4C8DFF;
    --clr-secondary: #7A5CFF;
    --clr-tertiary: #ffd2b7;
    
    --clr-chr-A: #c3edce;
    --clr-chr-B: #ff9d52;
    --clr-chr-C: #ff6b6e;
    --clr-chr-D: #ffeda5;
    --clr-chr-E: #9af26a;
    --clr-chr-F: #41efff;
    
    /** Theme primary colors */
    --clr-primary-a0: #fd8082;
    --clr-primary-a10: #ff8f8f;
    --clr-primary-a20: #ff9e9c;
    --clr-primary-a30: #ffacaa;
    --clr-primary-a40: #ffbab8;
    --clr-primary-a50: #ffc8c6;
    
    /** Theme surface colors */
    --clr-surface-a0: #121212;
    --clr-surface-a10: #282828;
    --clr-surface-a20: #3f3f3f;
    --clr-surface-a30: #575757;
    --clr-surface-a40: #717171;
    --clr-surface-a50: #8b8b8b;
    
    /** Theme tonal surface colors */
    --clr-surface-tonal-a0: #261d1c;
    --clr-surface-tonal-a10: #3b3231;
    --clr-surface-tonal-a20: #504847;
    --clr-surface-tonal-a30: #67605f;
    --clr-surface-tonal-a40: #7f7877;
    --clr-surface-tonal-a50: #979291;
    
    /** Success colors */
    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;
    
    /** Warning colors */
    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;
    
    /** Danger colors */
    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;
    
    /** Info colors */
    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
    
    --bs-root-font-size: 16px;
    --bs-body-font-family: "Cactus Classical Serif", serif, system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.cactus-classical-serif-regular {
  font-family: "Cactus Classical Serif", serif;
  font-weight: 400;
  font-style: normal;
}

html {
    height: 100%;
}

/*html {*/
/*  font-size: 100%;*/
/*}*/

body {
    background: linear-gradient(180deg,#071029 0%, #0b1220 100%);
    padding: 0 !important;
}


.asterisk {display: none;}


/*-----NAVBAR-----*/
#survey-nav {display: none;}
/*.fruity .navbar {*/
/*    background-color: #000000 !important;*/
/*    border-bottom: 0px !important;*/
/*}*/

/*.navbar-brand {*/
/*    display: none;*/
/*}*/

/*.navbar-light .navbar-nav .nav-link {color: #A7ABB3;}*/


/*-----WELCOM-----*/
#welcome-container {
    max-width: 900px;
    margin: auto;
    border-radius: 14px;
    padding: 10px 20px 10px 20px;
}

.privacy {
    max-width: 900px;
    margin: auto;
    padding: 10px 20px 10px 10px;
}


/*-----CONTENTS-----*/
.question-container {
    max-width: 900px;
    margin: 10px auto 10px;
    border-radius: 14px;
    padding: 10px 20px 10px 20px;
}

#navigator-container {
    position: sticky;
    max-width: 900px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    margin: 0 auto 0;
}

@media only screen and (max-device-width: 760px){
    #navigator-container {
        position: sticky;
        max-width: 900px;
        bottom: 0px;
        left: 10px;
        right: 10px;
        margin: 0;
    }
}


.fruity .modal-content {
    background-color: #0f1724;
}

.fruity .modal-header {
    border-bottom: 1px solid #3C4250;
}

.fruity .modal-footer {
    border-top: 1px solid #3C4250;
}


/*-----BUTTON-----*/
.btn {
    border-radius: .5rem;
}

.fruity .btn-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--clr-surface-a10);
    color: var(--clr-surface-a20);
}

.fruity .btn-outline-secondary:hover{
    background-color: transparent;
    border: 1px solid var(--clr-surface-a50);
    color: var(--clr-light-a0);
}

.fruity .btn-primary {
    background-color: transparent;
    border: 1px solid var(--clr-primary);
    color: var(--clr-primary);
}

.fruity .btn-primary:hover {
    background-color: transparent;
    border: 1px solid var(--clr-primary);
    color: var(--clr-primary);
    box-shadow: 0 0 20px var(--clr-primary);
}

.fruity .btn-check:active+.btn-primary, .fruity .btn-primary:focus {
    background-color: var(--clr-tertiary);
    border: 1px solid var(--clr-tertiary);
    box-shadow: 0 0 20px var(--clr-tertiary);
    color: var(--clr-dark-a0);
}

.fruity .btn-check:checked+.btn-primary {
    background-color: transparent;
    border: 1px solid var(--clr-tertiary);
    color: var(--clr-tertiary);
    box-shadow: 0 0 20px var(--clr-tertiary);
}


/*-----TEXT-----*/
.fruity .alert-danger {
    background-color: transparent;
    border: 1px solid #FF5A63;
    color: #FF5A63;
}

.fruity .alert-info {
    background-color: transparent;
    border: 1px solid #A7ABB3;
    color: #A7ABB3;
}

.fruity .text-info, .fruity .text-primary, .fruity .text-success {
    color: #ECECEC !important;
}

.fruity a {
    color: var(--clr-primary);
}

.form-check {
    padding-left: 0;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.survey-name {
    color: #41efff;
    text-shadow: 0 0 10px #ffc71f;
}

.label, label {
    font-size: 1.25rem;
}

.qtext p{
    color: #d9d9d9;
}

.qtext {
    position: absolute;
    margin: 30px;
    bottom: 0px;
}

.pc {
    display: inline !important;
}

.pcw {
    display: block !important;
}

.hp {
    display: none !important;
}

@media only screen and (max-device-width: 760px){
    .qtext {
        position: absolute;
        margin: 0;
        bottom: 0px;
    }
    
    .pc, .pcw {
        display: none !important;
    }
    
    .hp {
        display: inline !important;
    }
    
    p{
        margin-bottom: 0;
    }
    .chr {
        max-width: 100%;
        border-radius: .5rem;
        border: 1px solid #2f2f2f;
        /* box-shadow: 0 0 10px var(--clr-tertiary); */
        margin: 15px auto 0 auto;
    }
}

.chr {
    max-width: 100%;
    border-radius: .5rem;
    border: 1px solid #2f2f2f;
    /* box-shadow: 0 0 10px var(--clr-tertiary); */
    margin: 30px auto 0 auto;
}

th, td {
    padding: 5px;
}