html { font-size: 100%; height:100% } 

body { font-size:1.1em; font-family:'IBM Plex Sans',sans-serif; color:#333; background:#f6f6f6;height: 100%;
    display: flex;
    flex-direction: column; } 
    body > .header { background-color:#3f4242; padding:0; margin:0; height:76px;display: flex;
    align-items: center;
    min-height: 76px; } 
        body > .header .logo {width: 240px;
    height: 52px; margin-left: 15px;
    background: url(/_Images/desktop/logo.png) no-repeat;
    background-size: contain; }   

div.top-bar { padding:12px 20px; font-family:'IBM Plex Sans',sans-serif; font-weight:300; font-size:22px; margin:0; color:#444; }

div.content { position:relative; width:100%; background:#fff;  } 
div.main { display: flex;
    width: 100%;
    height: 100%;flex-direction: column;
    min-height: 82vh; }
div.footer { font-size:11px; text-align:center; padding:15px; border-top: 1px solid #f4f4f4; } 

.main-login { display:none; 
    align-items: center;
    justify-content: center;
    flex-direction:column;
    width: 100%;
    height: 100%; }
    #intro-login { display:none; }
    #caption-login { display:none; }
    #form-login { position:relative; border-radius:0; padding:25px 35px 15px; background:#f6f6f6;width: 100%; max-width: 370px; }
    .main-login .panel-ayuda { border:1px solid #ddd; text-align:center; padding-bottom:5px }
.main-estudio { display:none; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; max-width:890px; padding:50px 0 40px 0 !important; margin:0 auto; }
    .card{position:relative;width:420px;overflow:hidden;margin:0 10px 25px 10px;border-radius:3px;font-weight:400;text-align:left;word-wrap:break-word;
          background-color:#fff;border:1px solid #eee;display:block;box-sizing:border-box}
    .card>a{display:flex;text-decoration:none;padding:10px 0 10px 20px;}
    .card>a .card-header{position:absolute;top:10px;right:10px;max-width:70px;max-height:40px;border:0;}
    .card>a .card-content{position:relative;width:290px} 
    .card h3{font-size:1.2rem;line-height:1.4rem;font-weight:600;margin:3px 0 5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .card h4{font-size:.9rem;font-weight:500;margin:3px 0 12px 0;color:#b7b7b7}
    .card p{font-size:.7rem;font-weight:300;margin:0;color:#b7b7b7}
    .card p span{margin-right:8px;display:inline-block} 
    .card-dummy{position:relative;width:420px;overflow:hidden;margin:0 10px 25px 10px;border-radius:3px;background-color:#fff;border:1px solid #eee;display:block;box-sizing:border-box}
.main-registro{display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 25px 10px;}
.panel-registro { margin:20px auto 20px auto; width:50%; background: #f0f0f0; border-radius: 0; padding:15px 25px 20px 25px }
.panel-registro .form-button { padding-top:25px; margin-top:25px; border-top:1px solid #ddd; }
.lnk-registro { position:absolute; top:-45px; right:-225px; width:208px; height:198px; padding-top:10px; background:url(/_Images/desktop/lnk-registro.png) no-repeat; font-size:16px; text-align:center }
.lnk-registro p { margin:0 0 8px 0; }
.lnk-registro a { color:#333; text-decoration:none; border-bottom:1px solid #c2b493; font-weight:bold; }
.btn-registro { width:200px }
.panel-ayuda { font-size:0.8em; padding-bottom:10px; background:#f4f4f4 }
.main-login .alert { width: 100%; max-width: 370px; border-radius:0 }
.main-registro .alert { width: 100%; border-radius:0 }


.form-control-options { display: block; width: 100%; padding: 6px 12px; border: 1px solid #ccc; border-radius:4px; }
.login-options { padding:0 0 0 10px; font-size: .8em; }
.form-button { text-align:center; margin:5px 0 0 0 }
.form-button-line { padding:10px 0 0 0; border-top:1px solid #ddd; }
label { font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:1.4em; }
.label-line { display:block; padding:5px; margin-bottom:10px; border-bottom:1px solid #ddd; }
.label-box { display:block; padding:5px; margin-bottom:10px; border:1px solid #ddd; border-radius:4px; background:#f4f4f4 }
.label-form { font-size:1em; } 
.form-error-control { float:left; display:inline-block; width:93%; } 
.form-error-resalt { border:1px solid red; }
.form-error-icon { color:red; font-size:1.5em; padding-left:5px; text-decoration:none !important }
.form-error-icon:hover { color:red; }
.form-error-content { min-width:180px; color:red; font-size:11px; line-height:14px; text-align:center; }
.form-help { text-decoration:none !important }
.form-help-content { min-width:180px; font-size:11px; font-weight:normal; line-height:14px; text-align:center } 
.form-control { font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:1.1em; height:auto } 
.form-select { padding:3px 8px; } 
.form-icon { text-align:left; padding:5px 0; cursor:pointer; }  
.form-icon i { width:20px; height:30px; padding-top:3px; font-size:1.1em; display:block; float:left }  
.form-icon a { color:#333; text-decoration:none }  
.form-control-file { overflow: hidden; position: relative; width:90%; max-height:40px; } 
.form-control-file .file-input { margin: 0; padding: 0;outline:0; font-size: 100px; opacity: 0; filter: alpha(opacity=0); z-index:1000; position: absolute;
                                 left:-1200px; top:0; cursor: pointer; }
input#captcha { max-width:200px; text-align:center; margin:0 auto }
.btn { font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:1em; padding:10px 25px }
.btn i { font-weight:normal; font-size:1.05em; }
.btn-upload { font-size:1.2em; }

h2 { font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:1.5em; color:#707070; margin:0 0 15px 0 }
h2.line { padding-bottom:10px; border-bottom:1px solid #ddd; margin:0 0 20px 0 }
h3 { font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:1.2em; color:#707070; margin:0 0 10px 0 }
h4 { font-family:'IBM Plex Sans',sans-serif; }
h3.line { padding-bottom:10px; border-bottom:1px solid #ddd; margin:0 0 15px 0 }
p { margin:0 0 15px 0 }
.clear:after { content:""; display:table; clear:both; }
a, a:hover, a:active { color:#118dc7 }
.btn:hover, .btn:focus {
    background-color: #707070; 
}
.w-h-26 { width:26px; height:26px }
.w-h-46 { width:46px; height:46px }
.w-120 { width:120px }
.w-140 { width:140px }
.hide { display:none }
 
@media (max-width:515px) 
{
    .panel-registro { width:100%; } 
    .form-error-control { width:85% }
    .form-control { font-size:1em; }  
    .btn-upload { font-size:1em; } 
    h2 { font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:1.2em; color:#111; margin:0 0 10px 0 }
    h2.line { padding-bottom:8px; border-bottom:1px solid #ddd; margin:0 0 15px 0 }
    h3 { font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:1em; color:#111; margin:0 0 8px 0 }
    h3.line { padding-bottom:8px; border-bottom:1px solid #ddd; margin:0 0 8px 0 }
    /*p { font-size:0.8em; margin:0 0 10px 0 }*/
    label { font-size:1.1em; } 
    .label-form { font-size:1em; }
}
 
@media (min-width: 516px) and (max-width: 740px) 
{
    .panel-registro { width:75%; } 
    .form-error-control { width:89% } 
}
 
@media (min-height: 740px) 
{
    
}
 
@media (min-height: 840px) 
{
     
     
}
 
@media (min-height: 940px) 
{
     
}
 
@media (min-width: 940px) 
{ 
    .main-estudio { justify-content:space-between; }
}
 
@media (min-height: 1140px) 
{
     
}

/*Material spinner*/
.loader.l-centered {display: flex;width: 100%;height: 100%;align-items: center;justify-content: center; align-self:center}
.loader>svg>circle {
  box-sizing: border-box;
  stroke: #3f4242;
  stroke-width: 3px;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
  animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
}
.btn .loader { display:none; }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

@-webkit-keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}