@import url("coloresITJM.css");

.alerta-configuracion {
        margin: 0 50px 0 50px;
}

.alerta {
        border: 2px solid rgb(255, 255, 255);
        box-shadow: #3d3d3d 0px 0px 10px;
        border-radius: 5px;
}

/* icono de gira */
.fa-spin {
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear
}

.fa-pulse {
        -webkit-animation: fa-spin 1s infinite steps(8);
        animation: fa-spin 1s infinite steps(8)
}

@-webkit-keyframes fa-spin {
        0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
        }

        100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg)
        }
}

@keyframes fa-spin {
        0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
        }

        100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg)
        }
}

/* check */
.checkmark__circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 2;
        stroke-miterlimit: 10;
        stroke: #2ca7a7;
        fill: none;
        animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        /* display: block; */
        stroke-width: 2;
        stroke: rgb(0, 0, 0);
        stroke-miterlimit: 10;
        /* margin: 10% auto; */
        box-shadow: inset 0px 0px 0px #353535;
        animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
        100% {
                stroke-dashoffset: 0;
        }
}

@keyframes scale {

        0%,
        100% {
                transform: none;
        }

        50% {
                transform: scale3d(1.1, 1.1, 1);
        }
}

@keyframes fill {
        100% {
                box-shadow: inset 0px 0px 0px 30px #ffffff;
        }
}

/*checkbox color y tamaño*/
input[type="checkbox"]+label {
        font-weight: bold;
        line-height: .5em;
        color: rgb(235, 2, 2);
        cursor: pointer;


}

input[type="checkbox"]:checked+label {
        color: #0fbf12;
}

input[type="checkbox"] {
        transform: scale(1.5);
}

.checkbox-size {
        transform: scale(1.2);
        margin: 4px;
}

.checkbox-size:checked {
        transform: scale(1.2);
}
/**btn pdf*/

.btn-pdf {
        width: 40px;
        height: 28px;
        background-color: #682b2b;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
}

.btn-pdf:hover {
        background-color: #313131;
        color: #ffffff;
        width: 40px;
        height: 28px;
        z-index: -1;
        transform: scale(1.2);
}
/*botón de pdf */
.btn-btn {
     
        background-color: #242323;
        color: #ffffff;
        
}

.btn-btn:hover {
        background: #682b2b;
        color: #ffffff;
        transform: scale(1.1);
}

/*hacer zoom icon*/
@-webkit-keyframes hvr-icon-pulse {
        50% {
          -webkit-transform: scale(1.4);
          transform: scale(1.4);
        }
        50% {
          -webkit-transform: scale(0.9);
          transform: scale(0.9);
        }
      }
      @keyframes hvr-icon-pulse {
        50% {
          -webkit-transform: scale(1.4);
          transform: scale(1.4);
        }
        50% {
          -webkit-transform: scale(0.8);
          transform: scale(0.9);
        }
      }
      .hvr-icon-pulse {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      }
      .hvr-icon-pulse .hvr-icon {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
      .hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
        -webkit-animation-name: hvr-icon-pulse;
        animation-name: hvr-icon-pulse;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
      }

      /**botón de aportes */
      .btn-zoom {
      background: var(--colorITJM--primario);
      color: rgb(53 53 53);
      }
      .btn-zoom:hover {
        background:rgb(53 53 53);
        color: #ffffff;
        transform: scale(1.1);
      }
   /*******************  BOTONES **************************/
.btn-store {
        width: auto;
        height: auto;
        background-color: var(--colorITJM--primario);
        cursor: pointer;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(0, 0, 0, 0.35) 0px -2px 6px 0px inset;
    }
    .btn-store:hover {
        background-color: var(--colorITJM--primario);
        color: rgb(53, 53, 54);
        animation: AnimHome 1s ease 0s 1 normal forwards;
    }
    
    .bg-pri-3d {
        background-color: var(--colorITJM--primario);
        cursor: pointer;
        align-items: center;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(0, 0, 0, 0.35) 0px -2px 6px 0px inset;
    }
    /*BTN EXCEL*/
.btn-excel{
        color: #ffffff;
        border: 2px solid #20744b00;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 0 1px rgb(0, 0, 0);
    }
        .btn-excel:hover{
                background-color: #20744b;
                color: #ffffff;
                transform: scale(1.05);
        }

      /* btn flotante*/
.img-wsp {
        text-decoration: none;
        position: fixed;
        width:100px;
        height: 40px;
        line-height: 40px;
        bottom: 25px;
        right: 25px;
        background: var(--colorITJM--segundario);
        color: var(--colorITJM--blanco);
        border-radius:50px;
        text-align: center;
        font-size: 20px;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
        transition: all 300ms ease;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: ripple 2s linear infinite;
    }
    
    
    .img-wsp:hover {
        background: var(--colorITJM--primario);
        color: var(--colorITJM--blanco);
        width: 110px;
        height: 50px;
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
    
    }
    @keyframes ripple {
        0% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .1rem rgb(135, 245, 245),
                        0 0 0 .4rem rgb(97, 161, 161);
        }
    
        100% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .4rem rgba(130, 202, 216, 0.973),
                        0 0 0 .6rem rgb(154, 255, 247);
        }
    }
/**********************/  
  .btn-pri{
        background-color: var(--colorITJM--primario);
        color: var(--colorITJM--blanco);
  }
  .btn-pri:hover{
        background-color: var(--colorITJM--segundario);
        color: var(--colorITJM--blanco);
        transform: scale(1.1);
    

  }
  /* boton seleciionar curso */
  .btn-curso{
        background-color: var(--colorITJM--primario);
        color: var(--colorITJM--blanco);
  }
  .btn-curso:hover{
        background-color: var(--colorITJM--segundario);
        color: var(--colorITJM--blanco);

  }
        /* boton de  detalles de aportes */
  .btn-show:hover{
        background-color: var(--colorITJM--primario);
        
  }
  /* btn info */
  .btn-info {
        text-decoration: none;
        position: fixed;
        width:40px;
        height: 40px;
        line-height: 40px;
        bottom: 25px;
        right: 25px;
        background: var(--colorITJM--segundario);
        color: var(--colorITJM--blanco);
        border-radius:50px;
        text-align: center;
        font-size: 20px;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
        transition: all 300ms ease;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: ripple 2s linear infinite;
    }
    
    
    .btn-info:hover {
        background: var(--colorITJM--primario);
        color: var(--colorITJM--blanco);
        width: 50px;
        height: 50px;
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
    
    }
    @keyframes ripple {
        0% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .1rem rgb(135, 245, 245),
                        0 0 0 .4rem rgb(97, 161, 161);
        }
    
        100% {
                box-shadow: 0 0 0 .2rem rgb(145, 202, 216),
                        0 0 0 .4rem rgba(130, 202, 216, 0.973),
                        0 0 0 .6rem rgb(154, 255, 247);
        }
}

/* btn whatsapp*/
.wsp {
        position: fixed;
        width: 55px;
        height: 55px;
        line-height: 63px;
        bottom: 25px;
        right: 25px;
        background: #20B038;
        border-radius: 50px;
        text-align: center;
        font-size: 35px;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
        transition: all 300ms ease;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: ripple 2s linear infinite;
}

.wsp:hover {
        background: #20B038;

}

@keyframes ripple {
        0% {
                box-shadow: 0 0 0 0 rgb(29, 146, 58),
                        0 0 0 .1rem rgba(0, 255, 0, 0.2),
                        0 0 0 .5rem rgba(0, 255, 13, 0.315);
        }

        100% {
                box-shadow: 0 0 0 .2rem rgba(72, 255, 0, 0.39),
                        0 0 0 .4rem rgba(55, 201, 19, 0.973),
                        0 0 0 .8rem rgba(4, 252, 78, 0.158);
        }
}