:root {
    --viewport-height: 100dvh;
    --web-ui_button-border-radius: 16px;
    --rtl-sign: 1;
    --color-snow: 255,255,255;
    --color-snow-always-light: 255,255,255;
    --color-snow-always-dark: 19,31,36;
    --color-polar: 247,247,247;
    --color-swan: 229,229,229;
    --color-swan-always-light: 229,229,229;
    --color-swan-always-dark: 55,70,79;
    --color-hare: 175,175,175;
    --color-hare-always-light: 175,175,175;
    --color-wolf: 119,119,119;
    --color-eel: 75,75,75;
    --color-squid: 235,227,227;
    --color-walking-fish: 255,223,224;
    --color-flamingo: 255,178,178;
    --color-pig: 245,164,164;
    --color-crab: 255,120,120;
    --color-cardinal: 255,75,75;
    --color-fire-ant: 234,43,43;
    --color-canary: 255,245,211;
    --color-duck: 251,229,109;
    --color-bee: 255,200,0;
    --color-bee-always-dark: 255,199,0;
    --color-lion: 255,177,0;
    --color-fox: 255,150,0;
    --color-cheetah: 255,206,142;
    --color-monkey: 229,162,89;
    --color-camel: 231,166,1;
    --color-guinea-pig: 205,121,0;
    --color-grizzly: 187,113,73;
    --color-sea-sponge: 215,255,184;
    --color-turtle: 165,237,110;
    --color-owl: 88,204,2;
    --color-tree-frog: 88,167,0;
    --color-peacock: 0,205,156;
    --color-iguana: 221,244,255;
    --color-anchovy: 210,228,232;
    --color-beluga: 187,242,255;
    --color-moon-jelly: 122,240,242;
    --color-blue-jay: 132,216,255;
    --color-macaw: 28,176,246;
    --color-whale: 24,153,214;
    --color-humpback: 43,112,201;
    --color-narwhal: 20,83,163;
    --color-manta-ray: 4,44,96;
    --color-starfish: 255,134,208;
    --color-beetle: 206,130,255;
    --color-betta: 144,105,205;
    --color-butterfly: 111,78,161;
    --color-dragon: 204,52,141;
    --color-starling: 92,108,252;
    --color-martin: 71,85,223;
    --color-grackle: 167,160,255;
    --color-honeycreeper: 193,187,255;
    --color-deep-starling: 34,33,81;
    --color-deep-martin: 16,15,62;
    --color-legendary-foreground: 140,65,3;
    --color-stardust: 199,255,254;
    --color-cosmos: 60,77,255;
    --color-nebula: 63,34,236;
    --color-nova: 207,23,200;
    --color-gamma: 38,246,99;
    --color-starlight: 38,138,255;
    --color-quasar: 252,85,255;
    --color-celestia: 255,255,255;
    --color-eclipse: 0,4,55;
    --color-black: 0,0,0;
    --color-aqua: 56,238,255;
    --color-aqua-always-light: 56,238,255;
    --color-ocean: 0,124,143;
    --color-seafoam: 158,224,233;
    --color-ice: 225,253,255;
    --color-max-shadow: 20,208,225;
    --color-black-white: 0,0,0;
    --color-diamond-stat: 86,219,226;
    --color-mask-green: 137,226,25;
    --color-pearl-stat: 255,170,222;
    --color-snow-dark-swan: 255,255,255;
    --color-black-text: 60,60,60;
    --color-blue-space: 11,62,113;
    --color-juicy-blue-space: 10,74,130;
    --color-juicy-blue-space-light: 35,83,144;
    --color-gold: 250,169,25;
    --color-gray-text: 153,153,153;
    --color-orange: 255,157,0;
    --color-diamond-highlight: 231,251,251;
    --color-diamond: 56,208,208;
    --color-banana: 255,176,32;
    --color-cloud: 207,207,207;
    --color-cloud-light: 221,221,221;
    --color-cloud-lightest: 240,240,240;
    --color-kiwi: 122,199,12;
    --color-kiwi-dark: 93,151,9;
    --color-kiwi-light: 142,224,0;
    --color-facebook: 59,89,152;
    --color-facebook-dark: 45,67,115;
    --color-google: 66,133,244;
    --color-twitter: 29,161,242;
    --color-hv-light-peach: 241,218,179;
    --color-hv-peach: 219,186,131;
    --color-hv-light-orange: 255,177,64;
    --color-hv-orange: 204,121,0;
    --color-hv-brown: 140,90,17;
}


span.correct{
    font-weight: bold;
    color:green;
}
span.incorrect{
    font-weight:bold;
    color:rgb(var(--color-cardinal));
}
.score-progress-bar {
    display:flex;
    height:10px;
}
.score-indicator {
    width:10px;
    height:100%;
    display: block;
    margin:1px;
}

.score-indicator span{
    height:100%;
    width:100%;
    display: block;
    border-radius:50px;
}

.score-indicator .correct{
    background:rgb(var(--color-owl));
}
.score-indicator .incorrect{
    background-color: rgb(var(--color-cardinal));
}
.score-indicator .clean {
    background-color: grey;
}

div.lesson-container{
    align-items: center;
    max-width:400px;
    margin:auto;
}

div.lesson-container #lesson-1,
div.lesson-container #lesson-5,
div.lesson-container #lesson-9
{
    left:100px;
}

div.lesson-container #lesson-3,
div.lesson-container #lesson-7,
div.lesson-container #lesson-10
{
    left:-100px;
}

/* Lesson Component Styles */
div.lesson{
    position:relative;
    margin:5px;
}

div.lesson button{
    background: grey; /*var(--green);*/
    width:70px;
    height:65px;
    position:relative;
    border-radius: 50px;
    border:none;
    font-size:35px;
    color: lightgrey; /*white;*/
    font-weight: bold;
    pointer-events: none;
    user-select: none;
}

div.lesson.active button{
    background:rgb(var(--color-owl));
    color:white;
    pointer-events: visible;
}

div.lesson button:active:after{
    box-shadow: none;
    content:none;
}

div.lesson button:active{
    top:8px;
    transition:.2s;
}

/*modal -> header */
.modal .modal-header{
    justify-content: space-between;
    align-items: center;
}

.modal .lives{
    color:rgb(221, 77, 77);
}

.modal .progress{
    width:90%;
}

.modal .progress .progress-bar{
    background-color: rgb(var(--color-owl));
}

.modal button{
    margin:0 !important;
}

div.lesson button::after {
    content: "";
    left: 0;
    position: absolute;
    width: 100%;
    border-radius: 50%;
    content: "";
    box-shadow: 0 8px 0 rgba(0,0,0,.2), 0 8px 0 grey; /*var(--green);*/
    height: 57px;
    top: 5px;
}

div.lesson.active button::after{
    box-shadow: 0 8px 0 rgba(0,0,0,.2), 0 8px 0 rgb(var(--color-owl));
}



div.answers {
    margin-top:50px;
    display:flex;
    flex-direction: column;
    position: relative;
}

div.answer {
    display:flex;
    position: relative;
    margin-top:5px;
    padding:10px;
    border:2px solid rgb(var(--color-swan));
    border-radius:12px;
}

/* Picked answer color */
div.answers.disabled {
    /*background:rgba(0,0,0,.4);*/
    pointer-events: none;
    cursor: not-allowed;
}

div.answer.selected {
    background-color:aliceblue !important;
    border-color: rgba(var(--color-macaw), .6);
}

div.answer.bad{
    background-color: rgb(var(--color-cardinal)) !important;
    color:white !important;
    border-color: rgba(var(--color-cardinal));
}

div.answer.bad span.text,
div.answer.bad span.order,
div.answer.correct span.text,
div.answer.correct span.order
{ 
    color:white !important
}

div.answer.correct {
    background-color:rgb(var(--color-owl)) !important;
    color:rgb(var(--color-snow));
    border-color:rgb(var(--color-owl));
}

div.answer:before{
    content:"";
    position:absolute;
    display: block;
    box-shadow:0 2px 0 rgb(var(--color-swan));
}

div.answer:hover{
    background:rgb(255,255,255);
    cursor: pointer;
}

div.answer span.order{
    height:28px;
    width:28px;
    text-align: center;
    margin-right:10px;
    border:2px solid rgb(var(--color-swan));
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color:rgba(0,0,0,.2);
    border-radius: 5px;
}

div.answer span.text {
    flex:1 1 auto;
    text-align: center;
    font-weight: bold;
    color:rgb(60,60,60);
}

/* Buttons in Lesson -> Check, Next */
.modal-footer button {
    font-weight: bold;
    text-transform: uppercase;
    color:rgb(var(--color-wolf)) !important;
}

button#check.btn-confirm-active,
button#next.btn-next-active{
    background-color: rgb(var(--color-macaw));
    border-color: rgb(var(--color-macaw));
    color: rgb(var(--color-snow)) !important;
}

button#check.btn-confirm-inactive,
button#next.btn-next-inactive{
    background-color: rgb(var(--color-swan));
    border:1px solid rgb(var(--color-swan));
}