:root{
    --w_color: #fff;
    --t_color: #333;
    --h_color: #282a3c;
    --h_color_dashed: rgba(40, 42, 60, 0.5);
}
a:hover,a:focus{
    text-decoration: none;
    outline: none;
}
.hidden{
    visibility: hidden;
}
.vertical-tab{
    font-family: 'Varela Round', sans-serif;
    display: table;
    width: 100%;
}
.nav-tabs{
   display: table-cell;
   border: none;
   vertical-align: top;
   position: relative;
}
.nav-tabs li{
   display: inline-block;
   min-width: 60px;
}
.nav-tabs li a{
    color: var(--t_color);
    background-color: var(--w_color);
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    padding: 8px 15px;
    margin:0 5px 10px 0;
    border-radius: 15px;
    border: 3px dashed var(--h_color_dashed);
    display: block;
    position: relative;
    z-index: 1;
    transition: all 0.20s ease 0s;
}
.nav-tabs li a:hover,
.nav-tabs li.active a,
.nav-tabs li.active a:hover,.nav-tabs li a.active{
    color: var(--w_color);
    background-color: var(--w_color);
    border: 3px solid var(--h_color);
    border-radius: 15px;

}
.nav-tabs li a:before,
.nav-tabs li a:after{
    content: "";
    background-color: var(--h_color);
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transform: scale(0);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all 0.3s ease 0s;
}
.nav-tabs li a:after{
    height: 15px;
    width: 15px;
    border-radius: 0;
    opacity: 1;
    transform: translateY(-50%) scale(0) rotate(45deg);
    top: 50%;
    right: -6px;
}
.nav-tabs li.active a:before,
.nav-tabs li a:hover:before, .nav-tabs li a.active:before{
    transform: scale(1);
}
.nav-tabs li.active a:after,
.nav-tabs li a:hover:after, .nav-tabs li a.active:after{
    opacity: 1;
    /*transform: translateY(-50%) scale(1) rotate(45deg);*/
}
.tab-content{
    color: var(--t_color);
    /*background-color: rgba(0,0,0,0.05);*/
    background-color: #fff;
    font-size: 14px;
    line-height: 25px;
    padding: 15px;
    margin: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
    border-radius: 10px;
}
.tab-content h3{
    color: var(--h_color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 7px 0;
}
.tab-content.tabs{
    width: 100%;
}
.nav.nav-tabs{
    display: inline-block;
    padding: 15px;

}
.total-score-wrapper {
    padding: 10px;
}
@media only screen and (max-width: 479px){
    .nav-tabs{
        display: block;
        width: 100%;
        border-right: none;
    }
    .tab-content{
        display: block;
        padding: 20px 15px 5px;
    }
    .nav-tabs li a:after{
        right: 50%;
        top: auto;
        bottom: 0;
        transform: translateY(50%) scale(0) rotate(45deg);
    }
    .nav-tabs li.active a:after,
    .nav-tabs li a:hover:after{
        opacity: 1;
        transform: translateY(50%) scale(1) rotate(45deg);
    }
    .tab-content h3{ font-size: 18px; }
}

.m-footer-employee {
    padding: 7px 30px;
    height: 60px;
    min-height: 60px;
    background: #fff;
    -webkit-box-shadow: -2px -8px 41px -14px rgba(202,210,222,0.61);
    box-shadow: -2px -8px 41px -14px rgba(202,210,222,0.61);
}
.m-footer-employee .m-footer__copyright {
    font-size: .9rem;
    font-weight: 400;
    color: #a9a9aa;
}

@media (min-width: 1025px){
    .m-aside-left--fixed .m-body {
        -webkit-transition: width 0.2s ease;
        transition: width 0.2s ease;
        padding-left: 0px !important;
    }
}
.nav-tabs li a.solid-border{
    border-radius: 15px;
    border: 3px solid var(--h_color);
}
.m-portlet.m-portlet--primary.m-portlet--head-solid-bg .m-portlet__head {
    background-color: #282a3c;
    border-color: #282a3c;
}

.m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text_questions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 500;
    font-family: Roboto;
    margin: 0;
    padding: 0;
}

.m-portlet.m-portlet--primary.m-portlet--head-solid-bg .m-portlet__head .m-portlet__head-text_questions {
    color: #fff;
    margin: 10px;
}

.m-portlet.m-portlet--head-sm .m-portlet__head {
    height: auto;
}

.correct-icon{
    color: #34bfa3;
    margin-right: 20px;
    font-weight: bold;
}
.m-option{
    border: none;
}
.wrong-icon{
    color: #f12143;
    margin-right: 20px;
    font-weight: bold;
}
.border-wrong{
    border: 1px solid #f12143;
}
.border-correct{
    border: 1px solid #34bfa3;
}
.countdown {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 30px;
}
.countdown .timeel {
    display: inline-block;
    padding: 10px;
    background: #151515;
    margin: 0;
    color: white;
    min-width: 2.6rem;
    margin-left: 13px;
    border-radius: 10px 0 0 10px;
}
.countdown span[class*="timeRef"] {
    border-radius: 0 10px 10px 0;
    margin-left: 0;
    background: #e8c152;
    color: black;
}

.alert-warning{
    display: none;
}
.m-option__title.description{
    margin-top: 20px;
    font-size: 10px;
}
.float-left{
    float: left;
    margin-top: 10px;
}
@media (max-width: 1401px) {
    .total-score-wrapper {
        max-width: 300px;
        width: 100%;
    }
    .result-text {
        max-width: 200px;
        width: 100%;
        margin: 0 auto;
        white-space: normal;
    }
}
@media (max-width: 1531px) {
    .total-score-wrapper {
        font-size: 1.2rem;
        padding: 5px;
    }
}
@media (max-width: 1651px){
    .float-left {
        text-align: left;
        float: left !important;
        width: 100%;
    }
    .result-appeal {
        margin-left: 0px;
    }
    .countdown .timeel {
        margin-left: 0px;
    }
}
.result-appeal{
    position: fixed;
    margin-top: 0px;
}

.example-results{
    margin-top: 20px;
    display: none;
}
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7); /* Black background with opacity */
  z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
}