/*=============================================
ESTILO DEL BOTON DE AÑADIR FOTO
=============================================*/
.btn-file {
  position: relative;
  overflow: hidden;
  }
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}


/*=============================================
== COLORES DE ALERTAS VALIDACIÓN
=============================================*/
.my-error-class {
  color:#FF0000;
  font-style: italic;
}

/*=============================================
ESTILOS DE MODAL FULLSCREEM
=============================================*/
.fullscreen-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .fullscreen-modal .modal-dialog {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .fullscreen-modal .modal-dialog {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .fullscreen-modal .modal-dialog {
     width: 100%;
  }
}


/*=============================================
ESTILOS DE MODAL GRANDE
=============================================*/
.grande-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 75%;
}
@media (max-width: 768px) {
  .grande-modal .modal-dialog {
    width: 96%;
  }
}
@media (min-width: 992px) {
  .grande-modal .modal-dialog {
    width: 85%;
  }
}
@media (min-width: 1200px) {
  .grande-modal .modal-dialog {
     width: 75%;
  }
}


/*=============================================
ESTILOS DE MODAL MEDIANO
=============================================*/
.mediano-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 75%;
}
@media (max-width: 768px) {
  .mediano-modal .modal-dialog {
    width: 96%;
  }
}
@media (min-width: 992px) {
  .mediano-modal .modal-dialog {
    width: 80%;
  }
}
@media (min-width: 1200px) {
  .mediano-modal .modal-dialog {
     width: 55%;
  }
}


/*=============================================
ESTILOS DE TEXTO DE LOS PERMISOS
=============================================*/
.texto-permisos{
  font-size: 18px;
  list-style: none;
  border-left: 1px dotted #D0D3D0;
  padding-left: 5px;
}


/*=============================================
ESTILOS DE LOS TITULOS AL PASAR EL MOUSE
=============================================*/
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.2s ease 0.5s;
    visibility: visible;
    font-family: 'Verdana';
}

[data-title]:after {
    content: attr(data-title);
    background-color: #333;
    color: #fff;
    font-size: 12px;
    font-family: Raleway;
    position: absolute;
    padding: 3px 4px;
    top: -2.5em;
    right: 0%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    border-radius: 6px;
    
}
[data-title] {
    position: relative;
}


/*=============================================
ESTILOS DE LOS TITULOS AL PASAR EL MOUSE EN TR
=============================================*/
[data-title-tr]:hover:after {
    opacity: 1;
    transition: all 0.2s ease 0.5s;
    visibility: visible;
    font-family: 'Verdana';
}

[data-title-tr]:after {
    content: attr(data-title-tr);
    background-color: #333;
    color: #fff;
    font-size: 12px;
    font-family: Raleway;
    position: absolute;
    padding: 3px 4px;
    top: 0em;
    right: 0%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    border-radius: 6px;
    
}
[data-title-tr] {
    position: relative;
}


/*=============================================
ESTILOS DE LOS MODALES
=============================================*/
.skin-modal {
  background: #dd4b39;
  color: #fff;
}


/*=============================================
ESTILOS DE LOS BOTONES DE EXPORTAR
=============================================*/
.bt-export-dt {
  padding: 2.5px 8px !important;
  border: none;
  font-size: 11px;
}
.buttons-pdf, .buttons-excel, .buttons-print {
    padding: 0px 2.5px 2.5px 2.5px;
    
    background: transparent;
}
.buttons-pdf, .buttons-excel, .buttons-print:hover {
    background: transparent !important;
    
}


/*=============================================
ESTILOS DE LOS CHECKS RUTAS PERFIL
=============================================*/
.container-rutas-perfil {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}

.container-rutas-perfil input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 3px;
}

.container-rutas-perfil:hover input ~ .checkmark {
  background-color: #A8EEA9;
}

.container-rutas-perfil input:checked ~ .checkmark {
  background-color: #09AF0B;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container-rutas-perfil input:checked ~ .checkmark:after {
  display: block;
}

.container-rutas-perfil .checkmark:after {
  left: 7px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/*=============================================
RADIOS
=============================================*/
input[type="radio"] {
  background-position: 0 -21px;
  width: 16px;
  height: 16px;
  display: inline;
}

.radio-azul:checked:before{
  content: '';
  border: 2px solid #fff;
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #3c8dbc;
  border-radius: 15px;
  cursor: pointer;
}

.radio-rosado:checked:before{
  content: '';
  border: 2px solid #fff;
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #E13AA6;
  border-radius: 15px;
  cursor: pointer;
}


/*=============================================
ESTILOS DE LOS CHECKS DE COLORES
=============================================*/
.container-chek {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}

.container-chek input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* VERDE */
.checkmark-verde {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 3px;
  border: solid 0.5px #958C8C;
}

.container-chek:hover input ~ .checkmark-verde {
  background-color: #A8EEA9;
}

.container-chek input:checked ~ .checkmark-verde {
  background-color: #09AF0B;
}

.checkmark-verde:after {
  content: "";
  position: absolute;
  display: none;
}

.container-chek input:checked ~ .checkmark-verde:after {
  display: block;
}

.container-chek .checkmark-verde:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/*=============================================
ESTILOS DE ACTUALIZAR CV
=============================================*/
.table-cv, .table-cv td {
  /*border: 0.5px solid #F3B3AE;*/
}

.table-cv {
  border-collapse: collapse;
  /*background: #F9F6F6;*/
  margin-bottom: 25px;
}

.table-cv td {
  padding: 10px 15px;
}

/*.table-cv tr:hover {
  background: #e5e5e5;
}*/


/*=============================================
ESTILOS DE VISUALIZAR CV
=============================================*/
.table-cv-ver, .table-cv-ver td {
  /*border-radius: 10px;*/
}

.table-cv-ver {
  border-collapse: collapse;
  /*background: #FCF0F0;*/
  margin-bottom: 25px;
}

.table-cv-ver td {
  padding: 10px 15px;
}


@media (max-width: 768px) {
  .email-text {
    font-size: 12px;
  }
}