/*
Theme Name:     NBA Klirosi
Description:    Fage Project
Author:         toolbox

*/

:root {    
  --main-color: #034ea1;  
  --main-background-color: #b08abe;
    
  --checkbox-border-color: #ffffff;
  --checkbox-fill-color: #ffffff;
    
  --popup-background-color: #b08abe;
  --popup-color: #ffffff;    
}

@font-face {
    font-family: 'CeraPro';
    src: url('./fonts/CeraProRegular.otf')  format('opentype');    
}

@font-face {
    font-family: 'MarletBlack';
    src: url('./fonts/PFMarletBlack.otf')  format('opentype');    
}

@font-face {
    font-family: 'MarletBoldItalic';
    src: url('./fonts/PFMarletBoldItalic.otf')  format('opentype');    
}

@font-face {
    font-family: 'MarletItalic';
    src: url('./fonts/PFMarletItalic.otf')  format('opentype');    
}

html{
    font-size: 16px;        
    
}

body{
    font-family: 'PFMarletBoldItalic', sans-serif;
    color: var(--main-color);
    background-color: var(--main-background-color); 
    
    height: 100vh; /* Για να καλύπτει ολόκληρη την οθόνη */
    
    width: 100%; 
    position: relative;    
    border-color: transparent;    
    text-shadow: none;    
}

.fullimage img{
    width: 100%;
    height: auto;
}

.background {
    position: absolute;
    width: 100vw;
    height: 40vh;
    object-fit: fill;
    left: 0;
}

.body-area{
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 10;
}

.main-area{
    width: 100%;
    height: 80vh;
    position: absolute;
    top: 0;
    z-index: 14;
}

button{
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.slide{
    display: none;
}

.slide.active{
    display: block;
    height: 80vh;    
}

.refresh{
    position: absolute;
    font-size: 2rem;
    z-index: 30;
    color: #ffffff;
    top: 1rem;
}

#question-area .refresh,
#thankyou .refresh,
#form .refresh{
    left: 20px;
}

#home .refresh{
    right: 20px;        
}

/* Question */

.clock-area{
    width: 95vw;
    margin-top: 3vh;    
    margin-bottom: 3vh;
    height: 15vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    color: #ffffff;
    position: relative;
}

.clock-area img{
    width: auto;
    height: 100%;
    position: absolute;
    right: 0;    
    
}

.clock{
    display: flex;
}

.small-clock, .big-clock{
    height: 15vh;    
    position: relative;
    text-align: center;
}

.big-clock img{
    height: 100%;    
    bottom: 0;    
}

.small-clock img{
    height: 80%;    
    bottom: 0;    
}

.clock-timer{
    font-family: 'MarletBlack', sans-serif;    
    position: absolute;    
    
}

.clock-timer.small{
    font-size: 4.5rem;
    
}

.clock-timer.big{
    font-size: 6.3rem;
    bottom: 1.5rem;
    right: 8.2rem;
}

.clock-timer.red-color{
    color: #ec1a3b;
    
}

.question{
    width:90vw;
    margin-left: 5vw;
    margin-right: 5vw;
    height: 45vh;
    position: relative;
    display: none;
        
}

.question.active{
    display: block;    
    
}

.question-label{
    display: flex;
    flex-wrap: wrap;
    height: 13vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 6rem;
    line-height: 6.2rem;
    font-family: 'MarletBoldItalic', sans-serif;    
}

.question button{
    display: flex;
    flex-wrap: wrap;    
    align-items: center;    
    width: 100%; 
    height: 8vh;    
}

.answer-body{
    display: flex;
    flex-wrap: wrap;    
    align-items: center;    
    justify-content: center;    
    width: 68vw;        
    margin: 0 auto;    
    position: relative;
}

.answer-label{
    font-family: 'MarletBoldItalic', sans-serif;    
    display: flex;
    flex-wrap: wrap;    
    align-items: center;    
    justify-content: center;
    font-size: 3.5rem;    
    background-color: #ffffff;
    height: 5vh;        
    width: 50vw;    
    margin: 0 auto;
    border-radius: 50px;
}

.error-badge, .correct-badge{
    width: auto;
    position: absolute;
    right: 0;
    opacity: 0;
}

.error-badge{
    height: 5vh;
}

.correct-badge{
    height: 4vh;
}

.question button.correct .answer-label, .question button.correct-show .answer-label{
    background-color: #034ea1;
    color: #ffffff;    
}

.question button.error .answer-label{
    background-color: #ec1a3b;
    color: #ffffff;    
}

.question button.error .error-badge, .question button.correct-show .correct-badge{
    opacity: 1;
}

/* Form */

.result-badge {
    height: 23vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.result-content {
    display: block;
}

.line-end, .line-one, .box-line {
    display: none;
}

.box-line.active,
.line-end.active,
.line-one.active {
    display: block;
    width: 100%;
    font-family: 'MarletBlack', sans-serif;    
}

.box-line{
    font-size: 4.8rem;
}

.simple-line{
    font-size: 3.5rem;    
    line-height: 3.9rem;
}

.result-content.fiveoneight .simple-line, .result-content.sixoneight .simple-line{
    font-size: 3.3rem;    
    line-height: 3.7rem;    
}

.result-content.sevenoneight .simple-line{
    font-size: 3.3rem;    
    line-height: 3.7rem;    
}

.form-message{
    text-align: center;
    font-family: 'MarletItalic', sans-serif;
    font-size: 2.7rem;
    line-height: 3rem;
    color: #ffffff;
    width: 89%;
    margin-left: 11%;
}

.cell{
    width: 80vw;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 10vw;
    margin-right: 10vw;    
    font-family: 'CeraPro', sans-serif;    
    
    display: flex;
    flex-wrap: wrap;
    align-items: center;    
}

.cell label{
    color: #ffffff;  
    width: 13vw;
    text-align: right;
    margin-right: 2vw;
    font-size: 2.2rem;
}

.cell input{    
    width: calc(65vw - 2rem);    
    border: 0;
    padding: 0.2rem 1rem;
    color: var(--main-color);
    font-size: 3rem;    
    border-radius: 30px;
}

input:hover,
input:focus,
input:active {
  box-shadow: none;
  outline: none;
}

#simmetoxi{
    width: 28vw;
    margin: 1rem 36vw;
}

.form-control{
    border: 0;    
    width: 70vw;
    margin: 0 0 1rem 20vw;
    
    display: grid;
    grid-template-columns: 2em auto;
    gap: 1em;    
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.form-control input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;
    
    font: inherit;
    color: transparent;
    width: 2em;
    height: 2em;
    border: 0.15em solid var(--checkbox-border-color);
    border-radius: 0.15em;
    transform: translateY(-0.075em);    
    
    display: grid;
    place-content: center;    
}

.form-control .checkbox-text{
    font-size: 2.3rem;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.form-control .checkbox-text a{
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

input[type="checkbox"]::before {
  content: "";
  width: 1.8em;
  height: 1.8em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1.8em 1.8em var(--checkbox-fill-color);
  
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);  
  
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
  
}

/* Thankyou */

#thankyou.active{
    display: flex;    
}

#thankyou{
    position: relative;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.thankyou-badge{
    height: 53vh;
}

.thankyou-badge img{
    height: 100%;
    width: auto;
}

/* End of Game */

#end-of-game.active{
    display: flex;
}

#end-of-game{
    background-color: #31113f;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    opacity: 90%;
    position: absolute;
    z-index: 50;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;    
}

.end-of-game-badge{
    height: 65vh;
}

.end-of-game-badge img{
    height: 100%;
    width: auto;
}


/* Home */

#home{
    position: relative;
}

.fuel{
    position: absolute;    
    width: 50vw;
    height: 27%;
    top: 2%;
    left: 4vw;
    z-index: 15;
}

.player{
    top: 26%;
    width: 50vw;
    height: 63%;
    position: absolute;
    right: 0;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    z-index: 16;    
}

.player img{
    margin-right: 2vw;
}

.fuel img, .player img{
    display: block;
    width: auto;
    height: 100%;
}

#start{
    width: 44vw;
    position: absolute;
    z-index: 17;
    left: 28vw;
    top: 55%;
}

/* Footer */

.footer-area{
    width: 100%;
    height: 20vh;    
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    align-items: center;
    top: 80vh;
    position: absolute;
    z-index: 13;    
}

.col-50{
    width: 50%;
    height: 20vh;
    display: flex;
    align-items: end;
}

.col-50 img{
    display: block;
    width: auto;
}

.col-50.left img{
    margin-left: 7%;
    margin-bottom: 3vh;
    height: 15vh;    
}

.col-50.right img{
    margin-right: 10%;    
    margin-bottom: 1vh;    
}

.col-50.right img{
    height: 18vh;
}

.col-50.right{
    justify-content: end;
}

/* -------------------------------------------------------------------------- */

.jconfirm .jconfirm-holder{
    width: 80%;
    margin: 0 auto;
}

.jconfirm-box{
    text-align: center;
}

.jconfirm.jconfirm-light .jconfirm-box{
    background-color: var(--popup-background-color) !important; 
    border: 1px solid var(--popup-color);
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content, .jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll{
    min-height: 20px;
}

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{
    color: var(--popup-color) !important; 
    background-color: transparent !important;
    font-size: 1.5rem;
    
}

.jconfirm .jconfirm-box div.jconfirm-title-c{
    display: none!important;
    font-family: 'PFMarletBoldItalic', sans-serif; 
    font-size: 6rem !important;
    line-height: 6.5rem !important; 
    font-weight: 400; 
    color: var(--popup-color);
    
}

.jconfirm .jconfirm-box .jconfirm-content{
    font-family: 'PFMarletBoldItalic', sans-serif; 
    font-weight: 400; 
    color: var(--popup-color);
    font-size: 1rem !important;
    line-height: 1.2rem !important;     
    
}

.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons{
    float: none !important;
    
}

/*
 * Fancy Box Area
*/

.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content{
    width  : 70%!important;
    height : 70%!important;
    max-width  : 70%!important;
    max-height : 70%!important;
    margin: 0;
    
}

.fancybox__iframe html,
.fancybox__iframe body{
    background-color: #ffffff; 
    
}

body.simple{ 
    background-color: #ffffff;
    color: #000000; 
    font-family: 'PFMarletBoldItalic', sans-serif;
    font-size: 1.2rem;       
    width: 96%; 
    top: 0px;
    height: auto;
    padding: 2%;
    overflow: auto;
}

.simple p{
    padding-bottom: 1rem;
    text-align: justify;
}

.simple strong{
    font-weight: bold;
}

.simple a{
    font-weight: bold;    
    color: #000000;    
    
}

/*
 * Fancy Box Area
*/