@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');

body {font-family: 'Open Sans', sans-serif !important;height: 100vh;}

@-ms-viewport {width: device-width;}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {display: block;}
form {width: 100%;}
.left {float:left;}
.right {float: right;}
audio {outline: none;}

.btn-primary {background-color: transparent;color: #c60001;text-transform: uppercase;font-weight: 600;text-shadow: none;font-size: 15px;border: 3px solid #c60001 !important;width: auto;margin-left: auto;margin-right: auto;cursor: pointer;}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:active,
.btn-primary:hover {background-color: #c60001;color: #fff;}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary.focus,
.btn-primary:focus {box-shadow: none !important;}
.btn-primary .far,
.btn-primary .fas {margin-right: 10px;}
.btn-secondary {line-height: 26px;cursor: pointer;}
.btn-secondary .fas {margin-right: 10px;}
.btn-secondary.mRight {margin-right: 10px;}
.btn-invert {background-color: #c60001;color: #fff;text-transform: uppercase;font-weight: 600;text-shadow: none;font-size: 15px;border: 3px solid #fff !important;width: auto;margin-left: auto;margin-right: auto;cursor: pointer;}
.btn-invert:not(:disabled):not(.disabled):active,
.btn-invert:active,
.btn-invert:hover {background-color: #fff;color: #c60001;}
.wauto {width: auto;display: inline-block;}
.redLink {color: #c60001;width: auto;}
.redLink:hover {text-decoration: underline;color: #c60001;cursor: pointer;}
.center {margin-left: auto;margin-right: auto;}
.txtcenter {text-align: center;}
.textC {text-align: center;}
.textL {text-align: left;}
.textR {text-align: right;}
.rowNoWm {margin-bottom: 15px;}
.rowBtn {margin-bottom: 15px;}
.noPdL {padding-left: 0;}
.cpointer {cursor: pointer;}
.form-control:focus {border: 1px solid #ced4da;box-shadow: none;}

/********* HEADER **********/

.header {width: 100%;background-color: #fff;}
.header .container.bar {padding-top: 5px;padding-bottom: 5px;}
.header .cont-logo {display: inline-block;}
.header .sloganHeader {color: #a1a1a1;font-size: 19px;display: inline-block;margin-left: 30px;vertical-align: middle;height: 100%;font-weight: 300;line-height: 80px;margin-top: 10px;}
.header .info-header {float: right;font-size: 14px;margin-top: 6px;}
.header .email {padding-bottom: 6px;padding-top: 25px;float: left;}
.header a {color: #a1a1a1;}
.header a:hover {text-decoration: underline;}
.header .telefon {text-align: right;padding-top: 25px;color: #a1a1a1;}
.header .menu-bar {width: 100%;display: inline-block;height: 65px;font-size: 14px;background: rgba(0, 0, 0, 0.8)!important;border-bottom: 1px solid rgba(0,0,0,0.15);}
.header .menu-bar ul {margin: 0;padding: 0;list-style: none;}
.header .menu-bar ul li {height: 65px;line-height: 65px;position: relative;white-space: nowrap;float: left;padding-left: 25px;padding-right: 25px;}
.header .menu-bar ul li:first-child {padding-left: 0px;}
.header .menu-bar a {line-height: 65px;color: #fff;font-size: 14px;}
.header .menu-bar a span {display: inline-block;line-height: 1;padding: 0.5em 0;border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;line-height: 20px;}
.header .menu-bar .fas {font-size: 20px;margin-right: 10px;}
.header .menu-bar ul li.active a span {border-bottom: 3px solid #c60001;}
.header .menu-bar .menu.logout.right .fas {float: left;}

@media all and (max-width: 991px){
  .header .main-logo img {max-width: 200px;}
  .header .sloganHeader {margin-left: 10px;}
}

@media all and (max-width: 767px){
  .header .cont-logo img {width: 118px;}
  .header .sloganHeader {display:none;}
  .header .info-header {font-size: 11px;}
  .header .email {padding-top: 0px;padding-bottom: 0px;}
  .header .telefon {padding-top: 17px;}

}

/************ WORK AREA ************/
.body {height: 100%;width: 100%;}
.body .workarea {width: 100%;max-width: 1140px;padding: 15px;background-color: #fff;border-radius: 8px 8px 8px 8px;-webkit-border-radius: 8px 8px 8px 8px;-moz-border-radius: 8px 8px 8px 8px;margin: 50px auto;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);border: 1px solid #c6000136;}
.body .workarea .red {color: #c60001;}
.body .workarea .bold {font-weight: 600;}
.body .workarea.maxWidth {max-width:1400px;}
.body .workarea .card-title {font-weight: 600;border-bottom: none;height: auto;margin: 0 0 20px;color: #222;font-size: 23px;-webkit-font-smoothing: antialiased;}
.body .workarea .card-title span {padding: 3px 15px;background: #fff;}
.body .workarea .card-title span .fab,
.body .workarea .card-title span .fas {margin-right: 10px;}
.body .workarea span.subtitle {font-weight: 600;color: #222;font-size: 18px;margin-bottom: 15px;width: 100%;display: inline-block;}
.body .workarea .btns-bar {margin-bottom: 20px;}
.body .workarea .bold-efb {font-weight: 600;color: #c60001;}
.body .workarea .form-footer {margin-bottom: 20px;}

/********* TABLES ******/
.body table {border: 1px solid #dee2e6;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
.body table thead tr {color: #c60001;}
.body table tbody tr:nth-child(odd) {background: #E2E2E2;}
.body table tbody .fas,
.body table tbody .far {color: #333;font-size: 20px;}
.body table tbody .fa-trash-alt:hover,
.body table tbody a:hover .fas,
.body table tbody a:hover .far {color: #c60001;}

/*********** MSG **************/
.body .workarea .contmsg {border: 2px solid #c60001;background-color: #EFEFEF;padding: 15px;border-radius: 8px 8px 8px 8px;-webkit-border-radius: 8px 8px 8px 8px;-moz-border-radius: 8px 8px 8px 8px;margin-bottom: 15px;}

/*********** TEST AREA **************/
.header .menu-bar .contPart {line-height: 65px;color: #fff;text-transform: uppercase;font-weight: 600;font-size: 22px;}
.body .testArea {margin-top: 20px;}
.body .testArea .tituloContent {margin-bottom: 10px;font-size: 18px;font-weight: 600;}
.body .testArea .contExample {margin-top: 15px;margin-bottom: 15px;display: inline-block;}
.body .testArea .infoBox {border: 2px solid #c60001;border-radius: 8px;padding: 10px 20px;margin: 0 auto;background-color: #EFEFEF;width: 100%;max-width: 700px;font-size: 15px;}
.body .testArea .infoBox.img {background-color: #FFF;padding: 10px 0px;}
.body .testArea .playerExample {margin-bottom: 15px;}
.body .testArea .questions {border: 1px solid #dee2e6;padding: 12px 27px;margin-bottom: 15px;}
.body .testArea .questions .noPdL .form-check.form-check-inline {height: auto;}
.body .testArea .questions .colQuestin .titulo {font-size: 18px; text-transform: uppercase;color: #c60001;width: 100%;display: table;margin-bottom: 20px;font-weight: 600;}
.body .testArea .questions .colQuestin .txtRespuesta {width: 100%;display: table;margin-bottom: 10px;}
.body .testArea .questions .colQuestin .txtRespuesta .answer {font-weight: 600;color: #c60001;text-transform: uppercase;}
.body .testArea .questions .colQuestin ul {list-style: none;margin: 0;}
.body .testArea .questions .colQuestin ul .question {font-weight: 600;margin-bottom: 5px;}
.body .testArea .questions .colQuestin ul .correcta {font-weight: 600;color: #c60001;}
.body .testArea .questions .colQuestin ul .form-check-input {width: 20px;height: 20px;}
.body .testArea .questions .colQuestin ul .form-check-label {margin-left: 10px;width: calc(100% - 25px);}
.body .testArea .questions .colImage {display: flex;justify-content: center;align-items: center;}
.body .testArea .questions .colImage img {max-height: 234px;}
.body .testArea .questions .contmultimedia {margin-bottom: 10px;}
.body .testArea .questions .oRespuesta {display: inline-flex;margin-right: 12px;}
.body .testArea .questions label .oRespuesta {margin-right: 5px;}
.body .testArea .questions .form-check-inline {height: 22px;}
.body .testArea .testBTN {margin-top: 15px;}
.body .testArea .textDescription {height: 150px;}

/******** TAPAR LAS PREGUNTAS ***********/
.body .testArea .contCober {position: relative;}
.body .testArea .cober {position: absolute;height: 100%;width: 100%;visibility: visible;z-index: 1;background-color: rgba(255, 255, 255, .8);}
.body .testArea .unfocused {filter: blur(3px);}

/************ BARRA DE TIEMPO TEST AREA ************/
.topBarTest {position: fixed;top: 0px;left: 0px;z-index: 1000;width: 100%;height: 40px;background-color: #8F8F8F;padding: 6px 0 0 0;text-align: center;}
.topBarTest .countdown {color: #c60001;font-family: Verdana, Arial, sans-serif;font-size: 18px;font-weight: 600;text-align: left;text-decoration: none;display: inline-block;}

.topBarTest { background-color: #c60001; height: 80px; }
.topBarTest .countdown.activo {
  position: fixed;
	line-height: 40px;
	transform: translate(-50%, -50%);
  left: 50%;
  animation-name: timetotop;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: 1s;
  top: 50%;
  font-size: 60px;
  border-radius: 8px;
  padding: 50px;
  background-color: #c60001;
	color: white;
}
  
@keyframes timetotop {
  from {
    top: 50%;
    font-size: 60px;
    padding: 50px;
  }

  to {
    top: 40px;
    font-size: 45px;
    padding: 0px;
  }
}

@media all and (max-width: 767px){
    .header .menu-bar .contPart {line-height: 30px;color: #fff;text-transform: uppercase;font-weight: 600;font-size: 16px;}
    .body .testArea .questions {padding: 12px 15px 0px 15px;}
    .body .testArea .questions .contmultimedia audio {width: 100%;}
    .body .rowxs {margin: 0 -15px;}
    .body .testArea .questions .colQuestin {margin-bottom: 15px;}
    .body .testArea .questions .colImage img {max-height: unset;max-width: 100%;}
    .body .rowNoWm {margin-bottom: 0px;}
    .body .testArea .questions .colQuestin ul li {margin-bottom: 10px;}
}