* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    overflow-x: hidden;
}

@font-face {
    font-family: "icomoon";
    src: url("../fonts/icomoon.eot?3ot2jt");
    src: url("../fonts/icomoon.eot?3ot2jt#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?3ot2jt") format("truetype"), url("../fonts/icomoon.woff?3ot2jt") format("woff"), url("../fonts/icomoon.svg?3ot2jt#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-login {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 35px max-content;
    justify-content: center;
}

.main-login .contenedor {
    padding: 10px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--colorPrimary);
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    grid-row: 2 / 3;
}

@media (min-width: 720px) {
    .main-login {
        grid-template-columns: 500px;
    }
}

.headband-menu-container {
    border-bottom: 1px solid gray;
    display: flex;
    width: 100%;
    align-items: center;
    background: white;
}

.headband-title {
    font-family: "Amatic SC", cursive;
    margin: 0 30px;
}

.login-btn {
    display: flex;
    justify-content: center;
    padding: 10px 20px;
}

input[type="text"],
input[type="password"] {
    border-radius: 8px;
    background-color: #eaeaea;
    padding: 6px 10px;
    border: 0.6px solid gray;
    transition: 0.3s;
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    padding: 8px 12px;
    border: 1px solid rgb(4, 90, 129);
    transition: 0.3s;
}

input[type="submit"],
button {
    padding: 5px 15px;
    border-radius: 9px;
    background: #0f4c75;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.85em;
    letter-spacing: 1px;
    font-weight: 900;
    transition: 0.5s;
}

input[type="submit"]:hover,
button:hover {
    padding: 6px 20px;
    background: #0c81cf;
    transition: 0.5s;
}

.login-btn>input:focus {
    outline: none;
}

.login-input {
    width: 100%;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 0.6fr;
}

.column2>label {
    margin: 10px;
}

.inside {
    display: flex;
    justify-content: space-around;
}

.inside-date {
    margin: 10px 5px;
}

.img-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-container>img {
    width: 150px;
}

.date-cargo {
    margin: 10px 5px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-center {
    text-align: center;
}

.field-error,
.required_mark {
    color: #c32e2e !important;
    font-size: 15px;
}


/*Styles for views /usuario/empleados*/

#ct-container {
    grid-column: 1 / 13;
    align-items: center;
    transition: 300ms;
    opacity: 0;
    transform: translateX(-50%);
    z-index: -1;
}

#ct-carnet {
    grid-column: 1 / 13;
    background: #313131;
    transition: 300ms ease-in;
    z-index: 50;
    grid-row-gap: 30px;
    display: grid;
    opacity: 0;
    max-height: 0;
    transition: 400ms ease-in-out;
    overflow: hidden;
}

#elconfig {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #483d35;
    padding: 5px;
    border-radius: 3px;
}

#elconfig .obvia {
    display: grid;
    grid-template-columns: max-content 60px;
    justify-content: center;
    align-items: center;
    grid-column-gap: 10px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    letter-spacing: -0.9px;
}

#elconfig .obvia input[type='number'] {
    height: 100%;
    border-radius: 60px;
    border: solid 1px #999;
    outline: none;
    text-align: center;
    padding: 0 0 0 10px;
    color: var(--azulObscuro);
    font-weight: bold;
}

#elconfig .obvia #generar,
#elconfig .obvia #regresar,
#recargar {
    width: 90px;
    border-radius: 90px;
    border: solid 2px #fff;
    background: transparent;
    color: #fff;
    padding: 5px 0;
    cursor: pointer;
    transition: 350ms ease-in-out;
    padding: 5px 8px;
}

#elconfig .obvia #regresar,
#recargar {
    background: #313131;
    border-color: transparent;
    width: auto;
}

#elconfig .obvia #regresar:hover,
#elconfig .obvia #recargar:hover {
    box-shadow: 6px 0px 10px -1px #696563;
}

#elconfig .obvia input#generar:hover {
    background: #fff;
    color: #333;
    border-color: #fff;
}

#oculto {
    display: grid;
    justify-items: center;
}

.translate-anim {
    animation: mtranslate .3s linear;
    animation-fill-mode: forwards;
}

@keyframes mtranslate {
    from {
        opacity: 0;
        transform: translateX(-50%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        z-index: 3;
    }
}

#ct-container .user-profiles,
.box-form-register {
    display: grid;
}

@media (min-width: 280px) {
    #ct-container .user-profiles {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
}

@media (min-width: 720px) {
    #ct-container .user-profiles {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 10px;
    }
}

#ct-container .user-profiles #user-photo {
    overflow: hidden;
    min-height: 250px;
    display: grid;
    place-items: center;
    max-width: 250px;
    min-width: 250px;
    max-height: 250px;
    border-radius: 50%;
    border: solid 5px #235179;
    text-align: center;
}

#ct-container .user-profiles #user-qr {
    max-width: 210px;
    align-self: center;
    justify-self: center;
}

@media (min-width: 280px) {
    #ct-container .table-responsive,
    #ct-container .user-profiles {
        grid-column: 1 / 13;
    }
    .box-form-register {
        grid-column-gap: 20px;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    #ct-container .table-responsive {
        grid-column: 7 / 13;
    }
    #ct-container .user-profiles {
        grid-column: 1 / 6;
    }
    .box-form-register {
        grid-column-gap: 30px;
        grid-template-columns: repeat(2, 1fr);
    }
}


/*Styles for view Visitante*/

.ct-fecha-hora {
    grid-column: 1/ 13;
    justify-content: flex-end;
    display: grid;
    padding: 20px 0 0 0;
}

.ct-fecha-hora div {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-column-gap: 10px;
    font-weight: bold;
}

.ct-fecha-hora div label {
    color: #444;
}

.ct-fecha-hora div span {
    color: var(--azulObscuro);
}

/* + */
#cross{
    width: 20px;
    height: 20px;
}
#cross2 {
    width: 20px;
    height: 20px;
    background: linear-gradient(to bottom,  transparent 35%, 
     #555 35%, 
     #555 65%,  
     transparent 65%),
      linear-gradient(to right, transparent 35%, #555 35%, #555 65%, transparent 65%);
  }
  .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../img/Spinner-0.8s-244px.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}