/*
Theme Name: TE-Exams-io
Theme URI: https://topenglish.io/
Author: Top English
Author URI: https://topenglish.io/
Description: Exams website.
Version: 1.0
License: Private
License URI: https://topenglish.io/
Tags: Top English, Exams
Text Domain: exams-te-io
*/

:root{
    /* Header variables */
    --header-height: 80px;
    /* --header-padding-top: 0.3em; */
    /* --header-padding-bottom: 0.33em; */
  
    /* Page style variables */
    --page-max-width: 1140px;
  
    /* ************************* */
    /* Shadows */
    /* ************************* */
    --dark-text-shadow: 0px 0px 2px #00000088;
  
    /* ************************* */
    /* Colors */
    /* ************************* */
  
    /*Blue color styles*/
    --main-color:  rgb(0, 102, 204); /* #06c; */
    --main-color-dark: rgb(0, 50, 100); /*rgb(0,50,100)*/
  
    --main-color-medium-bg: rgb(124, 189, 255);
    
    --main-color-light-bg:     rgba(231, 247, 247, 1);
    --main-color-light-border: rgba(197, 247, 247, 1);
  
    --yellow-bg:   #ffffbb;
    --yellow-border: #fff999;
  
  
    /*Green color styles*/
    --focus-color:      rgb(50, 180, 70);
    --focus-color-dark: rgb(20, 90, 30);
    --focus-color-light:  rgb(200 255 190);
    --green-color:      rgb(50, 180, 70);
    --green-color-dark: rgb(20, 90, 30);
    --green-color-light:  rgb(200 255 190);
  
    /*Red color styles*/
    --red-color:        rgb(175, 20, 20); /*  */
    --red-color-dark:   rgb(139, 0, 0);   /* darkred */
    --red-color-darker: rgb(100, 0, 0);   /*  */
    --red-color-light:  rgb(255, 190, 190);
  
    /*Black color styles*/
    --black-color: rgb(51, 51, 51); /* #333 */
    --black-color-dark: rgb(20, 20, 20);
  
    /*White color*/
    --full-white:       rgb(255, 255, 255); /* #fff */
    --full-white-trans:  rgb(255, 255, 255, 0.9); /* #fff */
    --full-white-trans-glass:  rgb(255, 255, 255, 0.5); /* #fff */
    --white-color-light: rgb(242, 242, 242); /* #f2f2f2 */
    --white-color:      rgb(238, 238, 238); /* #eee */
    --white-color-dark: rgb(220, 220, 220); /* #dcdcdc */
    
    /*Grey color*/
    --grey-color-lighter: rgb(204, 204, 204); /* #ccc */
    --grey-color-light:   rgb(190, 190, 190); /* #bebebe */
    --grey-color:         rgb(170, 170, 170); /* #aaa */
    --grey-color-dark:    rgb(136, 136, 136); /* #888 */
    --grey-color-darker:  rgb(85,  85,  85);  /* #555 */
  
    /*glass background*/
    --glass-background: saturate(900%) blur(6px);
  }


*{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1{
    text-align:center;
}
a{
    color: #0066cc;
}
img{
    max-width:650px; /* For avoiding images to show bigger than the content wrap */
}

/*Header*/
#standard-header{
    position:sticky;
    top:0;
    z-index: 1;
    width:100%;
    text-align: center;
    background-color: #ffffffee;
    border-bottom:1px #ededed solid;
}
.header-widget{
    display: inline-block;
    line-height:1.25em;
    vertical-align:middle;
}
/*Override header dashicons*/
.dashicons{
    font-size: unset !important;
    text-decoration: none !important;
}

/*Exam Detailed results*/
/*wysiwyg editor*/
#acf-editor-83_ifr{
    height:auto !important;
}
/*Text format dropdown*/
#mceu_56-open{
    width:8em !important;
}
/*fields: Read more, Fullscreen*/
#exam-detailed-results #mceu_67,
#exam-detailed-results #mceu_66{
    display:none;
}

/*Styling specific*/
.text_align_center{
    text-align:center;
}
.box_style{
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 18px 24px;
    text-align: center;
}
.highlight_border{
    border: 1px #0fe solid;
}
.inline_box_style{ /* apply this to inline tags, like "span" */
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 4px 24px;
}
.inline_margin{
    margin: 0 2px 2px 0;
}
.display_none{
    display:none !important;
}
.card_one_third_width{
    width: 27%; /* 31.75% */
    min-height: 2em;
    margin:0.75%;
    vertical-align: middle;
    line-height: 1.1em;
    font-size: 0.9em;
    font-weight: 500;
}
.card_one_third_width > span{
    display: table-cell !important;
    height: 2em;
    vertical-align: inherit;
    line-height: inherit;
}

/*post and article styles*/
#primary{
    width:100%;
}
#content{
    width:95%;
    max-width:650px;
    margin:0 auto;
}
article{
    max-width: 600px;
    margin: 0 auto 24px;
}

/*Warnings and Notifications*/
#message{
    padding:18px 32px;
    text-align: center;
    background-color:green;
    color:#fefefe;
    }
.inline-notice{
    background-color: lightyellow;
    margin: 12px 0;
    padding: 24px;
    border-radius: 8px;
    border: 1px #ee0 solid;
    text-align:center;
}

/*Navigation*/
.breadcrumbs{
    font-size: 0.75em;
}
#te-main-nav{
    width:100%;
    /* text-align:center; */
    padding:0;
    margin-bottom:24px;
}
#te-main-nav > li{
    display: inline;
    list-style-type: none;
}
#te-main-nav > li > a{
    padding: 6px 12px;
    border-radius:8px;
    text-decoration:auto;
}
#te-main-nav > li > a:hover{
    -webkit-transition: background 0.3s;
       -moz-transition: background 0.3s;
        -ms-transition: background 0.3s;
         -o-transition: background 0.3s;
            transition: background 0.3s;
      background-color: #0066cc;
                 color: #ededed;
}
#te-main-nav > li > a.current-menu-item{
    background-color:#ddd;
}
#te-main-nav > li > a.current-menu-item:hover{
    background-color:#0066cc;
}

/**
/* Buttons -- All button styles should be here
*/

a.button, .af-submit > button{
    padding:8px 12px;
    background-color:#0066cc;
    color:#ffffff !important;
    border: 1px solid #0066cc;
    border-radius:5px;
    display: inline-table;
    text-align: center;
    text-decoration:none;
}
a.button-secondary, .acf-actions > .acf-button.button.button-primary{
    padding:8px 12px;
    background-color:aliceblue !important;
    color:#0066cc !important; /*added important for acf-button*/
    border: 1px solid #0066cc;
    border-radius:5px;
    display: inline-table;
    text-decoration:none;
}
.acf-actions > .acf-button{
    font-size:0.8em;
}
a.button-secondary:hover, .acf-actions > .acf-button.button.button-primary:hover{
    background-color:#0066ccee !important;
    color:#ffffff !important;
}
a.button:hover,  .af-submit > button:hover{
    background-color:#0066ccee;
    cursor:pointer; /*added this for AF Form button*/
}
/*ACF tooltip when editing on the Front End -- ex. "Remove?"*/
.acf-tooltip{
    color:unset;
}
/*WP Login Form Logout button*/
#login-form > a:nth-child(3){
    padding:8px 12px !important;
    background-color:#0066cc !important;
    color:#ffffff !important;
    border: 1px solid #0066cc !important;
    border-radius:5px !important;
    display: inline-block !important;
    text-decoration:none !important;
}


/*Tables*/
table{
    border:#0fe 2px solid;
    border-radius: 8px;
    border-spacing: 0;
}
tr{
    font-size:0.9em;
}
tr:nth-child(even) {
    background: #eee;
}
tr:nth-child(odd) {
    background: aliceblue
}
th{
    background:#0fe;
    padding: 8px;
}
td{
    padding: 8px;
}
tr:hover{
    opacity:0.8;
}
/*zebra table hover*/
.zebra-table tr:hover{
    background-color:#ccc !important;
}

/*Results*/
#result-container{
    text-align: center;
    border-radius: 8px;
  }
#result-container > .result-row:nth-child(even){
background-color: #ededed;
}
.result-row{
padding:15px;
}
.result-row:hover{
opacity: 0.8;
background: #ccc !important;
border-radius: 8px;
}
.result-cell{
display: inline-block;
position: unset;
/* border: red 1px solid; */
height: 1em;
line-height: 1em;
}
.result-cell--text{
width: 20%;
}
.result-cell--circles{
width: 60%;
}
.circle-container{
display: inline-block;
position: absolute;
}
.result-circle{
display: inline-block;
border-radius: 50%;
width: 1em;
height: 1em;
margin:0 2px;
}
.result-circle--grey{
background: #aaa;
}
.result-circle--green{
background: limegreen;
}

/*Advanced Form Styles*/
/*For the button style, go to the "Buttons" section of this file*/
.af-form{
    width:550px;
    margin:0 auto;
}
input[readonly="readonly"]{
    border: 1px solid #ccc !important;
    color: #999;
}

/*Certificate Verification Results*/
#cert-verify-form > div > label:hover{
    cursor:pointer;
}
#theTermField{
    padding: 8px 4px !important;
    width: 18em !important;
    margin: 4px 0;
}

/*TE Exam Folder Styles*/
#content.archive-te-exam > div > article > p{
    margin: 0;
}

#register-exam-button-wrap{
    width:100%;
    text-align:center;
}
#exam-buttons{
    /* width:100%; */
    text-align:center;
}

/* Hide exam links with no URL */
body.postid-1318 #exam-buttons a.exam-button[href=""]{
    display: none;
}

/*Register exam button →  REMOVE THIS*/
.exam-button{
    display: inline-block;
    background-color:#ccc;
    margin:2px;
    padding: 8px 16px;
    border:1px #999 solid;
    border-radius:8px;
}
#register-exam-button{
    max-width: 200px;
    /* text-align:center; */
    margin:0 auto;
    display: block;
}

/*Login form*/

.login-overlay{
    display:none;
}
.login-overlay--active{
    display:block !important;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 12%;
    width:100%;
    height:100%;
    background: #eeffffaa;
}
#login-overlay > #login-form{
    width:95%;
    max-width:350px;
    margin:2.4% auto;
    background: #eeffff;
    padding: 20px;
    border: 1px #0fe solid;
    border-radius: 8px;
}
#login-overlay__close-wrap{
    position:absolute;
    right:0;
    top:0;
}

#login-form > a:nth-child(3),/* → login form "Salir" button*/

#login-form > a:nth-child(3):hover,/* → login form "Salir" button*/

/*Main logo*/
#main-logo{
    text-align:center;
}
#main-logo > a > img{
    width:75%;
    height:75%;
}

/* ============================================== */
/* Quiz Single styles
/* ============================================== */

.qsm-quiz-container{
    max-width:550px;
    margin: 0 auto;
}
div.qsm-pagination.qmn_pagination.border.margin-bottom{
    flex-direction:column !important;
}
.qsm-progress-bar{
    line-height:2;
}
div.qsm-progress-bar > svg{
    background-color:#eeeeee;
    height:15px !important;
}
div.qsm-progress-bar > .progressbar-text{
    color:#333;
    top:0px !important;
}

input.qmn_fill_blank.lwRequiredText,
div.qmn_radio_answers > span{
    display:inline-flex;
    background:#ddd;
    line-height:unset !important;
    padding:0;
    margin:0 3px 0 0 !important;
    border-radius:8px;
}
div.qmn_radio_answers > span > input{
    margin:8px -8px 0px 0px !important;
}

div.qmn_radio_answers > span > input[type='checkbox'],
div.qmn_radio_answers > span > input[type='radio'] {
    background-color: #ddd;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    height: 30px; /*15px*/
    margin-right: 0; /*15px*/
    position: relative;
    width: 30px; /*15px*/
    -webkit-appearance: none;
    outline: none;
}
div.qmn_radio_answers > span > input[type='checkbox']:after,
div.qmn_radio_answers > span > input[type='radio']:after {
    background-color: #444;
    border-radius: 25px;
    content: '';
    display: block;
    height: 17px; /*7px*/
    left: 4px; /*4px*/
    position: relative;
    top: 0; /*4px*/
    width: 17px; /*7px*/
}
div.qmn_radio_answers > span > input[type='checkbox']:checked:after,
div.qmn_radio_answers > span > input[type='radio']:checked:after {
    background-color: #0066cc;
}

div.qmn_radio_answers > span > label{
    padding:8px !important;
    margin:0px !important;
    border-radius:8px 8px 0px 0px;
}
/*****Embedded Audios*****/
/*container*/
.wp-audio-shortcode{
    max-width:220px;
}

/*audio progress bar*/
div.mejs-controls > div.mejs-time-rail{
    display:none;
}
/*Mute button*/
.mejs-button.mejs-volume-button{
    pointer-events: none;
}
.qsm-quiz-container blockquote{
    background: url('https://storage.googleapis.com/exams-te/2020/11/f2142375-attention-icon.png') no-repeat top 18px left 5px;
    background-color:antiquewhite;
    border:#ccc solid 0.5px;
    border-radius:5px;
    margin:0;
    padding:20px 36px;
}
/*Tables in quizzes*/
/*override general table styles*/
.qsm-quiz-container > .qsm-quiz-form > section > div.quiz_section > table > tbody > tr:hover{
    opacity:1 !important;
}

/****************************/
/* Text to copy to clipboard*/
/****************************/
.text-to-copy{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee;
    border-radius: 5px;
    opacity: 1;
  }
  .text-to-copy.copied::before,
  .text-to-copy:hover::before{
    content: 'Click to copy';
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: max-content;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #ccc;
    border-radius: 5px;
    opacity: 0.9;
    transition: opacity 2s cubic-bezier(0.99, 0, 1.0, 1.0);
  }
  .text-to-copy.copied::before{
    content: 'Copied!';
    background: lightyellow;
  }
  
  .text-to-copy.inline{
    display: inline-flex;
    padding: .1rem .25rem .25rem;
  }

  
  /*Paste text button*/
  .paste-text-button{
    display: block;
    max-width: max-content;
    padding: 0.3rem 0.6rem;
    margin-left:0.1rem;
    background: #ccc;
    text-align: left;
    border-radius: .3rem .3rem 0 0;
  }
  .paste-text-button:hover{
    cursor: pointer;
    opacity: 0.9;
  }

/*************************/
/* Add options to inputs */
/*************************/

.te-options{
    display: none;
}
.te-options.visible{
    display: flex;
}

.te-options{
    position: absolute;
    /* display: flex; */
    justify-content: center;
    background-color: #ddd;
    padding: 0;
    border-radius: 0.5rem;
}
.te-options span {
    border-radius: .5rem;
    padding: 0.5rem;
}
.te-options span:hover {
    background-color: #999;
    cursor: pointer;
}