@import url("colores.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;
width: 70%;
margin: 10% 0 0 0;
padding: 5%;
}

.btn-close-alerta {
position: absolute;
top: 0;
right: 0;
background-color: #ff0000;
font-size: 18px;
border-radius: 50px;
margin: 2px;

}


/* 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)
}
}
/* rebote */
.fa-bounce {
animation: fa-bounce 1s infinite;
}

@keyframes fa-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
60% {
transform: translateY(-4px);
}
}
/* sacude */
.fa-shake {
animation: fa-shake 1.5s infinite;
}

@keyframes fa-shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-2px);
}
20%, 40%, 60%, 80% {
transform: translateX(4px);
}
}
/* parpadeo */
.parpa {
animation: blink 1s linear infinite;
}

@keyframes blink {
0% {
opacity: 0;
}
20% {
opacity: 0.2;
}
40% {
opacity: 0.4;
}
60% {
opacity: 0.6;
}
80% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
/* 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);
}


/*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: -21px 0px 32px -16px rgba(48, 47, 47, 0.64) inset;
-webkit-box-shadow: -21px 0px 32px -16px rgba(58, 57, 57, 0.64) inset;
-moz-box-shadow: -21px 0px 32px -16px rgba(49, 49, 49, 0.64) 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: #525252;
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(104, 105, 104),
0 0 0 .1rem rgba(94, 95, 94, 0.2),
0 0 0 .5rem rgba(89, 90, 89, 0.315);
}

100% {
box-shadow: 0 0 0 .2rem rgba(104, 104, 104, 0.39),
0 0 0 .4rem rgba(108, 110, 107, 0.973),
0 0 0 .8rem rgba(145, 151, 147, 0.158);
}
}

/* boton enviar solicitud */
.btn-enviar-solicitud {
width: 50%;
height: 40px;
background-color: var(--colorITJM--primario);
color: var(--colorITJM--blanco);
border-radius: 25px;
}

.btn-enviar-solicitud:hover {
background-color: var(--colorITJM--primario);
color: var(--colorITJM--blanco);
transform: scale(1.1);
}

/* boton cerrar */
.btnClose {
background-color: #ff0000;
border-radius: 50px;
padding: 10px;
color: #ffffff;

}

.btnClose2 {
background-color: #3E518C;
border-radius: 60%;
color: #ffffff;
border-style: none;
border-width: 15px;

}

@media (max-width: 768px) {

.alerta {
width: 90%;
margin: 50% 0 0 0;
}

.btn-home {

padding: 0 0 80px 0;

}

}
/* NUMERO OFICIO */
.redondo {
border-radius: 25%;
background-color: #088C37;
padding: 4px 6px;
color: #ffffff;
border: #088C37 solid 2px;
/* sombra */
box-shadow: 0px 1px 10px rgba(30, 121, 60, 0.3);
}
/* CIRCULO */
.circulo {
display: flex;
justify-content: center;
align-items: center;
height: 3em;
width: 3em;
border-radius: 50%;
/* centrar icono */
text-decoration: none;
cursor: pointer;
}
.circulo:hover {
transform: scale(1.1);
color: #fff;
}
/**btn pdf*/

.btn-pdf {
background-color: #dc3545;
color: #ffffff;
}
.btn-whatsapp {
background-color: #00a884;
color: #ffffff;
}
.btn-eye {
background-color: #3b3d3d;
color: #ffffff;
}
.btn-send{
background-color: rgb(0, 218, 96);
color: #ffffff;
}
.btn-off{
background-color: rgba(78, 80, 79, 0.075);
color: #303030;
}
.btn-off:hover{
color: #303030;
background-color: rgb(149, 122, 180);
}

.ping{
color:rgb(255, 255, 255);
display: flex;
justify-content: center;
height: 1.5em;
width: 1.5em;
border-radius: 50%;
position: absolute;
top: -10px;
}
.btn-style-pdf{
        border-radius: 15px;
        color: white;
}
.btn-style-pdf:hover{
        color: white;
}
/* HOVER */
.btn-hover:hover{
        background-color: #5f5f5f;
        border: 1px solid #5f5f5f;
        color: white;
}