form{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow-x:hidden;}
.main{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-width: 100%; padding: 0px; margin: 0px; background-color: #fff;}
.container{position:relative; top: 0px; left: 0px; width: 1200px; height:auto; max-width: 100%; padding: 0px 15px; margin: 0px auto;}
.banner{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border-bottom: 2px solid #d71921; background-color: #ffeeaa; background-image: url(../images/banner-bg.png); background-repeat: no-repeat; background-size:cover; background-position:center;}
.banner .container{ display:grid; grid-template-columns: 100px 1fr; height: 100%; align-items:center;}
.banner .logo{position:relative; top: 0px; left: 0px; width: 100%; height: auto; aspect-ratio: 1; background-image: url(../images/logo-1.png); background-repeat: no-repeat; background-size: auto calc(100% - 20px); background-position: center;}
.banner .banner-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; text-align:left;}
.banner .banner-title > div{position:relative; top: 0px; left: 0px; width: max-content; height:auto; white-space:nowrap; overflow:hidden; pointer-events:none;}
.banner .banner-title span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:block; color: #444; font-size: 18px; text-transform: uppercase; font-weight: 400;}
.banner .banner-title span:last-child{font-weight: bold; letter-spacing: 2px; font-size: 28px; line-height: 36px; color: #d71921;}

.customer-info{position:absolute; top: 10px; left:auto; right: 15px; bottom: auto; width: max-content; height:auto; color: #d71921;}
.customer-info span { position:relative; top: 0px; left: 0px; width:max-content; height:auto; white-space:nowrap; display:grid; grid-template-columns: 20px 1fr; grid-column-gap: 0px; cursor:pointer;}
.customer-info span:before{content: ""; position:relative; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.customer-info span:first-child:before{content: "\f090";}
.customer-info span:last-child:before{content: "\f08b";}
.customer-info span:last-child{display:none; color: #444;}
.customer-info.logined{display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 20px;}
.customer-info.logined span:first-child{font-weight: bold;}
.customer-info.logined span:first-child:before{content: "\f2bd"; font-weight: 900;}
.customer-info.logined span:last-child{display:grid;}

.top-bar{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px 0px; line-height: 20px; background-color: #f1f1f1; border-bottom: 1px solid #ababab;}
.top-bar .container{display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 10px;}
.top-bar .container .name{font-weight: 400;}

.main-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: calc(100vh - 207px);}

.competition{min-height: calc(100vh - 207px); padding-top: 15px; padding-bottom: 15px;}
.competition .login-message{position:absolute; top: 50%; left: 50%; width:auto; height:auto; transform:translate(-50%, -50%); display:grid; grid-template-columns: 1fr; grid-row-gap: 15px; text-align:center; padding: 15px; border: 1px solid #ddd; border-radius: 5px;}
.competition .login-message:before{content: "\f501"; position:relative; top: 0px; left: 0px; width:auto; height:auto; font-size: 64px; color: #ddd; line-height: 64px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.competition:has(.exam-container){padding-left: 0px; padding-right: 0px;}

.customer-review .title label{position:relative; top: 0px; left: 0px; width:auto; height:auto; display:block; font-weight: bold;}
.customer-review .title span{position:relative; top: 0px; left: 0px; width: auto; height:auto; display:block; font-style: italic;}
.customer-review{border: 1px solid #ddd; border-radius: 5px; padding: 10px;}
.customer-review span[data-field]{margin-left: 5px; font-weight: 400;}
.customer-review .item{position:relative; top: 0px; left: 0px; width:max-content; height:auto; padding: 10px; margin: 5px; display:inline-block; vertical-align:middle; border: 1px solid #ddd; border-radius: 5px; cursor:pointer; transition: 0.3s;}
.customer-review .item span:before{content: "\f15c"; position:relative; top: 0px; left: 0px; width:auto; height:auto; font-size: 24px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.customer-review .item span{position:relative; top: 0px; left: 0px; display:grid; grid-template-columns: max-content 1fr; grid-column-gap: 10px; align-items:center; pointer-events:none;}
.customer-review .item:hover{background-color: #f1f1f1;}
.customer-review .item.selected{background-color: #d71921; color: #fff;}
.btn-start{position:relative; top: 0px; left: 0px; background-color: var(--success); color: #fff; padding: 10px 10px 10px 30px;  display: block; margin: 0px auto; text-transform: uppercase;}
.btn-start:before{content: "\f04b"; left: 10px; font-size: 14px; font-weight: 900;}

.exam-container{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow:auto;}
.exam-container > div{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow:auto; z-index: 2;}
.exam-container .exam-content{position:relative; top: 0px; left: 0px; width: 100%; height: auto; max-height: 100%; overflow:auto; padding: 0px; margin: 0px; display:block;}
.exam-container .exam-content .container{padding: 25px 15px;}
.exam-container .exam-content .container > img:first-child{border-top-left-radius: 15px; border-top-right-radius: 15px;}
.exam-container .exam-content .container > .info{border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.exam-container .exam-content .title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; background-color: #A00; color: #fff; font-size: 20px; line-height: 30px; letter-spacing: 1px; font-weight: 400; text-transform:uppercase;}
.exam-container .exam-content img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 4.75; display:block; margin: 0px; padding: 0px; pointer-events:none;}
.exam-container .exam-content .exam-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding-bottom: 35px; background-color: #fff; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.exam-container .exam-content .step{position:relative; top: 0px; left: 0px; width: 100%; height:auto; background-color: #fff; padding: 15px;}
.exam-container .exam-content .step span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block;}
.exam-container .exam-content .step > span:first-child{height: 6px; overflow:hidden;}
.exam-container .exam-content .step > span:first-child > span{position:absolute; top: 0px; left: 0px; width:auto; height: 100%; border-radius: 3px; background-color: var(--success); transition: 0.5s;}
.exam-container .exam-content .step > span:last-of-type{padding: 15px 0px; font-size: 18px; font-weight: 400; text-transform: uppercase; color: #000;}
.exam-container .exam-content .step .time{position:absolute; top: 0px; left:auto; right:15px; width: 80px; height: 80px; transform:translateY(-20px);}
.exam-container .exam-content .content{position:relative; top: 0px; left: 0px; width: 100%; height:auto; background-color: #fff; padding: 0px 15px;}
.exam-container .exam-content .question{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; margin: 0px; background-color: #fff; border: 1px solid #ababab; border-radius: 10px; font-size: 16px; font-weight: 400;}
.exam-container .exam-content .question:empty{border-color: transparent;}
.exam-container .exam-content .question .img-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px; margin: 0px; text-align:center;}
.exam-container .exam-content .question .img-list img{position:relative; top: 0px; left: 0px; width:auto; height:auto; max-width: 100%; display:inline-block; vertical-align: middle; pointer-events:none; aspect-ratio: unset; max-height: 100px;}
.exam-container .exam-content .question .img-list img:not(:last-child){margin-right: 15px;}
.exam-container .exam-content .answer{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px; display:grid; grid-template-columns:repeat(4, 1fr); grid-column-gap: 15px; grid-row-gap: 15px; grid-template-rows: max-content;}
.exam-container .exam-content .answer .item{position:relative; top: 0px; left: 0px; width:auto; height:auto; border: 1px solid #ababab; border-radius: 5px; padding-left: 40px; background-color: #fff; overflow:hidden; cursor:pointer; font-size: 16px;}
.exam-container .exam-content .answer .item:not(.selected):hover{border-color: #C00;}
.exam-container .exam-content .answer .item > *{pointer-events:none;}
.exam-container .exam-content .answer .item > span:first-child{position:absolute; top: 0px; left: 0px; width: 40px; height:100%; display:grid; align-content:center; align-items:center; font-size: 20px; font-weight: bold; text-align:center; background-color: #ccc; transition: 0.3s;}
.exam-container .exam-content .answer .item.selected > span:first-child{background-color: #A00;}
.exam-container .exam-content .answer .item > span:first-child:before{content: ""; position:absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform:translate(-50%, -50%); border-radius: 50%; background-color: #FFF; filter:opacity(0); -webkit-filter:opacity(0); transition: inherit;}
.exam-container .exam-content .answer .item > span:first-child:after{content: "\f00c"; position:absolute; top: 50%; left: 50%; width: auto; height: auto; transform:translate(-50%, -50%); color: #A00; font-weight: 300; font-family: "Font Awesome 5 Pro"; filter:opacity(0); -webkit-filter:opacity(0); transition: inherit;}
.exam-container .exam-content .answer .item.selected > span:first-child:before,
.exam-container .exam-content .answer .item.selected > span:first-child:after{filter:opacity(1); -webkit-filter: opacity(1);}
.exam-container .exam-content .answer .item > span:not(:first-child){position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; display:block; text-align:justify;}
.exam-container .exam-content .answer .item > img{position:relative; top: 0px; left: 0px; width: auto; height:auto; max-width: 100%; max-height: 100px; display:block; border-radius: 5px; aspect-ratio: unset; object-fit:contain; padding: 0px; margin: 0px auto;}
.exam-container .exam-content .btn-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; background-color: #fff; text-align: right;}
.exam-container .exam-content .btn-list button{margin-left: 15px; display:none;}
.exam-container .exam-content .btn-list button:first-child{margin-left: 0px;}
.exam-container .exam-content .btn-list:empty{display:none;}
.exam-container .exam-content:has(.question:empty) .exam-body .btn-list button{display:none !important;}

.exam-container .exam-content .guess{position:absolute; top: 15px; right: 15px; width: max-content; height:auto;}
.exam-container .exam-content .guess:before{content: attr(data-title) ':'; position:relative; top: 0px; left: 0px; width:max-content; height:auto; line-height: 35px; color: #666; display:inline-block; vertical-align: middle; margin-right: 5px;}
.exam-container .exam-content .guess input{position:relative; top: 0px; left: 0px; width: 100px; height:auto; display:inline-block; vertical-align:middle;}

.exam-container .exam-content .q-index{position: relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; margin-top: 15px; text-align:center;}
.exam-container .exam-content .q-index:before{content: ""; position:absolute; top: 0px; left: 50%; width: 50%; height: 1px; background-color: #800; transform:translateX(-50%);}
.exam-container .exam-content .q-index:empty{display:none;}
.exam-container .exam-content .q-index .item{position:relative; top: 0px; left: 0px; width: auto; height: auto; padding: 3px 10px; margin: 5px; border: 1px solid #ababab; border-radius: 5px; font-size: 14px; display:inline-block; vertical-align: middle; cursor:pointer;}
.exam-container .exam-content .q-index .item:hover{background-color: #ccc;}
.exam-container .exam-content .q-index .item[data-current='1']{background-color: #ccc; cursor:default;}
.exam-container .exam-content .q-index .item[data-answered='1']{background-color: #800; border-color: #800; color: #fff;}
.exam-container .exam-content .q-index .item *{pointer-events:none;}
.exam-container .exam-content .manual-guid{font-style: italic; color: #666;}

.exam-container .exam-content .exam-overview{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding-bottom: 35px; background-color: #fff;}
.exam-container .exam-content .exam-overview .s-info{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; line-height: 28px; border: 1px solid #DDD; border-radius: 15px;}
.exam-container .exam-content .exam-overview .s-info > span{position:relative; top: 0px; left: 0px; width: auto; height:auto; max-width: max-content; padding-left: 15px; display:block;}
.exam-container .exam-content .exam-overview .s-info > span:first-child{padding-left: 0px; text-transform:uppercase; font-weight: 500; font-size: 18px;}
.exam-container .exam-content .exam-overview .s-info > span:not(:first-child):before{content: "\f105"; position:absolute; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.exam-container .exam-content .exam-overview .q-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin-top: 20px; border: 1px solid #DDD; border-radius: 15px;}
.exam-container .exam-content .exam-overview .q-list .item{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; padding: 15px; border-bottom: 1px solid #ddd;}
.exam-container .exam-content .exam-overview .q-list .item:last-child{border-bottom: 0px;}
.exam-container .exam-content .exam-overview .q-list .item:nth-child(even){background-color: #f1f1f1;}
.exam-container .exam-content .exam-overview .q-list .item .q-content > span{position:relative; top: 0px; left: 0px; width: auto; height:auto; max-width:max-content; display:block;}
.exam-container .exam-content .exam-overview .q-list .item .q-content span:first-of-type{font-weight: 500; text-decoration:underline;}
.exam-container .exam-content .exam-overview .q-list .item .q-content .img-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px; margin: 0px; text-align:center;}
.exam-container .exam-content .exam-overview .q-list .item .q-content .img-list img{position:relative; top: 0px; left: 0px; width:auto; height:auto; max-width: 100%; display:inline-block; vertical-align: middle; pointer-events:none;}
.exam-container .exam-content .exam-overview .q-list .item .q-content .img-list img:not(:last-child){margin-right: 15px;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:grid; grid-template-columns:repeat(4, 1fr); grid-column-gap: 15px; grid-row-gap: 15px; padding: 5px 0px;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item{position:relative; top: 0px; left: 0px; display:grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr; grid-column-gap: 5px; align-content:center; align-items:center; text-align:left; border: 1px solid #ababab; border-radius: 5px; overflow:hidden;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item.selected > div:first-child{background-color: #A00; font-size: 0px;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item.selected > div:first-child:before{content: ""; position:absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform:translate(-50%, -50%); border-radius: 50%; background-color: #FFF;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item.selected > div:first-child:after{content: "\f00c"; position:absolute; top: 50%; left: 50%; width: auto; height: auto; transform:translate(-50%, -50%); color: #A00; font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item.correct{border-color: var(--success);}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item.correct > div:first-child{background-color: var(--success); color: #fff;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item.correct > div:first-child:after{color: var(--success);}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item > div{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; display:grid; align-content:center; align-items:center;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item > div:first-child{text-align:center; font-weight: 400; font-size: 24px; background-color: #ababab; color: #000;}
.exam-container .exam-content .exam-overview .q-list .item .q-answer .q-answer-item img{aspect-ratio: 4/3; object-fit:contain;}
.exam-container .exam-content .exam-overview .q-list:empty{display:none;}
.exam-container .exam-content .exam-overview .btn-list{text-align:center;}
.exam-container .exam-content .exam-overview .btn-list button{display:inline-block;}

.exam-container .exam-content .info{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; margin: 0px; background-color: #A00; border-top: 5px solid #800; color: #fff;}
.exam-container .exam-content .info span{position:relative; top: 0px; left: 0px; width: auto; height:auto; max-width: max-content; display:block;}
.exam-container .exam-content .info span:first-child{text-transform:uppercase; font-weight: 400; margin-bottom: 10px;}
.exam-container .exam-content .info span:first-child:after{content: ""; position:absolute; top:auto; left: 0px; bottom: 0px; width:100%; height: 1px; background-color: #fff;}

.circle-progress{ --progress: 0deg; position:absolute; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#D00 var(--progress), #CCC 0deg); font-weight: 400; font-size: 22px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.circle-progress:after{content: attr(data-progress); position:absolute; top: 50%; left: 50%; width: calc(100% - 6px); height: auto; aspect-ratio: 1; transform:translate(-50%, -50%); display:grid; align-content:center; align-items:center; text-align:center; border-radius: 50%; background-color: #fff; color: inherit; font-size:inherit; font-family:inherit; overflow:hidden;}


.footer{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; background-color: #be1e2d; color: #fff;}

@media (max-width: 950px) {
    
}

@media (max-width: 750px) {
    .banner .banner-title span:last-child{font-size: 24px;}
}

@media (max-width: 600px) {
    .banner .container{padding: 0px;}
    .banner .banner-title span:last-child{font-size: 20px;}
    .exam-container .exam-content .answer{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 450px) {
    .banner .container{padding-top: 25px; grid-template-columns: 90px 1fr;}
    .banner .banner-title span:last-child{font-size: 18px; line-height: 24px; letter-spacing: 1px;}
    .top-bar .container{grid-template-columns: 1fr;}
    .top-bar .container .date{display:none;}
    .top-bar .container:has(.name:empty) .date{display:block;}
    .exam-container .exam-content .answer{grid-template-columns: 1fr;}
}