/*RESET*/
@charset "utf-8";a{text-decoration:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}



/*GENERALES*/
body { margin:0px; background-color:#f5f5f5; overflow-x: hidden; background-image: url(../img/fondo.jpg); background-repeat: repeat;}
p, b, a, i, u, h1, h2, h3, h4, h5, h6, ul ,li, input, textarea, select, span, label {font-family: 'Montserrat', sans-serif;}
b { font-weight:700}
.clear0 { clear:both; height:0px}
.clear10 { clear:both; height:10px}
.clear20 { clear:both; height:20px}
.clear30 { clear:both; height:30px}
.clear40 { clear:both; height:40px}
.clear50 { clear:both; height:50px}
::selection {color:#CCC;background:#444;}
::-moz-selection {color:#EEE;background:#444;}
*:focus { outline:none}
body.loginColor { background-color: #FFF;}



.africa { width: 100%; height: auto; background-color: #222; text-align: center; padding: 10px 0px; position: fixed; bottom: 0px; left: 0px;}
.africa p { color: #CCC; font-size: 10px; line-height: 12px; text-transform: uppercase}
.africa p a { color: #CCC; }
.africa p a:hover { color: #FFF; text-decoration: underline}



textarea {border: 1px solid #CCC; margin-top: 6px;    width: 100%;    box-sizing: border-box;    height: 180px;    resize: none;}

.fotoInt { width: 95%;}


.login { width: 250px; margin: auto; text-align: center;  margin-top: 60px; padding: 60px; border: 1px solid #888;}
.login  h1 { color: #7d7d7d;}
.login .logoAdmin { margin-bottom: 30px; width: 100%;}
.login .cu { width: auto; height: auto; padding-bottom: 20px;}
.login .cu p { margin-bottom: 7px; width: 100%; color: #3c3c3c;}
.login .cu .campoAdmin { border: 1px solid #e0e0e0; width: 100%; padding: 10px 0px; text-align: center; font-size: 14px; background-color: #f1f1f1; color: #222;}
.login .campoIngresar { width: 100%; border: none; background-color: #2977bf;color: #FFF; padding: 14px 0px; }




header { width: 100%; display: flex; align-items: center; justify-content: space-between; height: 80px; background-color: #FFF;}
header .logo { height: 60px; margin-left: 30px;}
header div { display: flex; align-items: center;}
header div p { font-size: 16px; padding-right: 20px;}
header div a { background-color: #e33735; color: #FFF; font-size: 14px; line-height: 22px; padding: 6px 20px; margin-right: 30px; }
header div a:hover {background-color: #b82220;}



.opcionesMenu { display: flex; align-items: center; justify-content: center; margin-top: 60px; width: 90%; margin: 60px auto; flex-direction: column;}
.opcionesMenu .btnArriba { width: 100%; height: auto; margin-bottom: 25px; padding-bottom: 25px;  border-bottom: 1px solid #EEE;     display: flex;    align-items: center;    justify-content: flex-start;}
.opcionesMenu .btnArriba a { width: 250px; background-color: #2876bd;  color: #FFF; font-size: 16px; line-height: 22px; padding: 10px 0px; text-align: center;  margin-right: 10px; }
.opcionesMenu .informes { width: 100%; height: auto;}
.opcionesMenu .informes h4 { color: #2876bd; font-size: 40px; line-height: 50px; margin-bottom: 20px;}
.opcionesMenu .btnArriba a:hover {background-color: #16548c; }


.opcionesMenu .col2 { width: 100%; display: flex; justify-content: space-between;}
.opcionesMenu .col2 ul.usuarios {  width: 48%; border-right: 1px solid #CCC; }
.opcionesMenu .col2 ul.usuarios li { padding: 12px 20px; margin: 10px; margin-left: 0px; margin-bottom: 4px; color: #2876bd; font-size: 20px; border: 1px solid #2876bd; display: inline-block;}
.opcionesMenu .col2 ul.usuarios li:hover { background-color: #2876bd; color: #FFF; }
.opcionesMenu .col2 ul.usuarios li:hover a { color: #FFF;}

.opcionesMenu .col2 .nuevoUser { width: 48%;}
.opcionesMenu .col2 .nuevoUser h6 { color: #333; font-size: 28px; line-height: 36px; margin-bottom: 30px;}

.opcionesMenu .col2 .nuevoUser input { font-size: 18px; padding: 14px 12px; width: 92%; margin-top: 5px; margin-bottom: 25px;border: 1px solid #CCC;}
.opcionesMenu .col2 .nuevoUser .sendButn { font-size: 18px; padding: 14px 12px; width: 200px; margin-top: 10px; border: 1px solid #CCC; background-color: #2876bd; color: #FFF;}
.opcionesMenu .col2 .nuevoUser .sendButn:hover { background-color: #16548c; }
.opcionesMenu .col2 .nuevoUser .eraseButn { font-size: 18px; padding: 14px 12px; width: 200px; margin-top: 10px; border: 1px solid #888; background-color: #888; color: #FFF;}
.opcionesMenu .col2 .nuevoUser .eraseButn:hover { background-color: #666;}
.opcionesMenu .col2 .nuevoUser label { margin-bottom: 6px; font-size: 12px;}



#example td { text-align: center !important;}

.editIcon { width: 18px;}


.dataTables_wrapper .dataTables_filter {  margin-bottom: 20px;}
.dataTables_length button, .dataTables_length input, .dataTables_length select, .dataTables_length textarea {    padding: 4px;    margin: 0px 7px;}
.dataTables_wrapper .dataTables_filter input {   padding: 5px;}
.dataTables_wrapper .dataTables_paginate {   margin-top: 10px;}
#example_previous {  background-color: #EEE; padding: 6px 12px; margin: 0px 6px; font-size: 12px; cursor: pointer;}
#example_next {  background-color: #EEE; padding: 6px 12px; margin: 0px 6px; font-size: 12px; cursor: pointer;}
#example_previous:hover, #example_next:hover { background-color: #666; color: #FFF;}
.dataTables_info { font-size: 14px;}


.porcentajeComision { opacity: 0.8; font-size: 12px;}




.editarInforme { width: 100%;}
.editarInforme h6 { color: #333; font-size: 28px; line-height: 36px; margin-bottom: 30px;}
.editarInforme form { display: flex; flex-wrap: wrap;}
.editarInforme form>div { width: 33%; display: flex; flex-direction: column;}
.editarInforme input { font-size: 18px; padding: 14px 12px; width: 92%; margin-top: 5px; margin-bottom: 25px;border: 1px solid #CCC; width: 90%; box-sizing: border-box;}
.editarInforme select { font-size: 18px; padding: 14px 12px; width: 92%; margin-top: 5px; margin-bottom: 25px;border: 1px solid #CCC; width: 90%; box-sizing: border-box;}
.editarInforme .sendButn { font-size: 18px; padding: 14px 12px; width: 200px; margin-top: 10px; border: 1px solid #CCC; background-color: #2876bd; color: #FFF;}
.editarInforme .eraseButn { font-size: 18px; padding: 14px 12px; width: 200px; margin-top: 10px; border: 1px solid #888; background-color: #c1c1c1; color: #FFF;}
.editarInforme label { margin-bottom: 6px; font-size: 12px;}
.editarInforme .btns { width: 100%; flex-direction: row;}
.editarInforme .btns input { margin-right: 14px;}
.editarInforme .sendButn:hover { background-color: #16548c; }
.editarInforme .eraseButn:hover { background-color: #666;}





.dt-buttons.ui-buttonset {     width: 460px;}
.dt-buttons.ui-buttonset::before { content: "DESCAGAR"; font-size: 20px; font-weight: bold;; margin-right: 20px;  }
.dt-buttons.ui-buttonset button {background-color: #2876bd; color: #FFF; padding: 10px 30px; border: none; margin-right: 15px;}

.dataTables_filter#example_filter {margin-top: -38px;  margin-bottom: 31px;}


.puntaje { font-size: 20px; line-height: 28px; margin-left: 20px; font-weight: bold;}





@media screen and (max-width: 1400px) {
    .editarInforme form>div {   width: 30%; margin-right: 3%;  }
}


@media screen and (max-width: 840px) {
    .dataTables_filter#example_filter {
        margin-top: 35px;
        margin-bottom: 30px;
        float: left;
    }

    .editarInforme form>div {           width: 48%;        margin-right: 2%;  }

}

@media screen and (max-width: 640px) {
    .login .logoAdmin {   width: 75%; }

    .opcionesMenu .col2 {  flex-direction: column; }
    .opcionesMenu .col2 ul.usuarios { width: 100%; border: none; margin-bottom: 60px;  }
    .opcionesMenu .col2 .nuevoUser { width: 100%; }

    .editarInforme h6 {   font-size: 20px;    line-height: 30px;  }
    .editarInforme form>div {   width: 100%;  margin-right: 0%; }

    .editarInforme input {        width: 100%;        box-sizing: border-box;    }


}