:root{
    --main-color: #FF6400;
    --secondary-color: #070537;
    --secondary-color-trasparent: #070537aa;
    --color1: #fff;
    --color2:#dedede;
    --color3:#b0b0b0;
    --color4:#636363;
    --color5: #ff0000;
    --color6: #ffa368;
    --color7: #07053796;
    --color8:#292929;
    --transparente: #00000000;
}


@font-face{
    font-family: 'Copperplate Bold';
    src:url('../font/Copperplate/otf/CopperplateCC-Bold.OTF') format("opentype");
}

@font-face{
    font-family: 'Copperplate Heavy';
    src:url('../font/Copperplate/otf/CopperplateCC-Heavy.otf') format("opentype");
}

@font-face{
    font-family: 'OpticCopperplate Heavy';
    src:url('../font/Copperplate/otf/OPTICopperplate-Heavy.OTF') format("opentype");
}

@font-face{
    font-family: 'OpticCopperplate Light';
    src:url('../font/Copperplate/otf/OPTICopperplate-Light.otf') format("opentype");
}

@font-face{
    font-family: 'OpticCopperplate';
    src:url('../font/Copperplate/otf/OPTICopperplate.otf') format("opentype");
}

@font-face {
    font-family: Couture;
    src: url('../font/Couture/couture-bld.otf') format(opentype);
}

@font-face {
    font-family: Couture regular;
    src: url('../font/Couture/couture-bldit.otf') format(opentype);
}

@font-face {
    font-family: Berlin sans;
    src: url('../font/Berlin/Berlin_Sans_FB_Demi_Bold.ttf') format(truetype);
}

@font-face {
    font-family: 'Cairo light';
    src: url('../font/Cairo/Cairo-Light.ttf') format(truetype);
}

@font-face {
    font-family: Cairo;
    src: url('../font/Cairo/Cairo-Bold.ttf')format(opentype);
}

@font-face {
    font-family: Cairo Regular;
    src: url('../font/Cairo/Cairo-Regular.ttf')format(opentype);
}

.bg-black{
    background-color: black!important;
}

.color-main{
    color: var(--main-color);
}

.bg-color-main{
    background-color: var(--main-color);
    color:white;
}

.border-color-main{
    border-color: var(--main-color);
}

/* .form-control:focus{
    box-shadow: 0px 0px 3px 1px var(--main-color)!important;
    border:1px solid var(--main-color)!important;
} */

.sidebar-black-primary{
    background-color: black!important;
}

.nav-link:hover{
    color: var(--main-color);
}

.w-80{
    width: 80%;
}

@media screen and (max-width:1200px) {
    .dataTables_filter label input{
        width: 100%;
    }   
}

/* input number*/
.number-input input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
    
.number-input input[type=number]::-webkit-inner-spin-button,
.number-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
    
.number-input {
    margin-bottom: 0rem;
    margin-left: 25px;
}
    
.number-input button {
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    position: relative;
}
    
.number-input button:before,
.number-input button:after {
    display: inline-block;
    height: 2px;
}
    
.number-input input[type=number] {
    text-align: center;
}
    
.number-input.number-input {
    border: 1px solid #000;
    width: 11rem;
    border-radius:0;
}
    
.number-input.number-input button {
    width: 2.6rem;
    height: .7rem;
}
    
.number-input.number-input button.minus {
    padding-left: 10px;
}

.number-input.number-input button.plus {
    padding-left: 10px;
}
    
.number-input.number-input button:before,
.number-input.number-input button:after {
    width: .7rem;
    background-color: #000;
}

.number-input.number-input input[type=number] {
    max-width: 4rem;
    padding: .5rem;
    border: 1px solid #000;
    border-width: 0 1px;
    font-size: 1rem;
    height: 1rem;
    color: #000;
}

.hideSpace{
    display: block;
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color:transparent) {
        .number-input.def-number-input.safari_only button:before,
        .number-input.def-number-input.safari_only button:after {
            margin-top: -.3rem;
        }
    }
}
/* login card*/
.body-login {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-image: url('../img/bg-login.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    
}

.section-login {
    background-color: #070537a7;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-login {
    background: rgba(255, 255, 255, 0.38);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12.3px);
    -webkit-backdrop-filter: blur(12.3px);
    border: 1px solid rgba(255, 255, 255, 1);
    max-width: 780px;
    width: 100%;
    padding: 4rem;
}

.card-login .logotipo img{
    width: 120px;
}

.card-login .logotipo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem 3rem 2rem 0;
}

.card-login .logotipo h1 {
    font-family: Berlin sans;
    font-size: 2.5rem;
    color: var(--color1);
}

.card-login label {
    font-family: Cairo Regular;
    color: var(--color1);
    margin-bottom: 0;
    font-size: 1.5rem;
    letter-spacing: 1px;
    font-weight: 400;
}

.card-login label i {
    font: normal normal normal 28px / 1 FontAwesome;
    width: 30px;
    height: 30px;
    margin-right: 0.2rem;
}

.card-login input.form-control {
    height: 45px;
    padding: 2px 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--color1);
    background-color: transparent;
}

.card-login input.form-control:-webkit-autofill,
.card-login input.form-control:-webkit-autofill:hover, 
.card-login input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 800px rgba(34, 34, 34, 0.428) inset;
    -webkit-text-fill-color: #fff;
}

.card-login input.form-control::placeholder {
    color: var(--color3);
}

.card-login input.form-control:focus {
    box-shadow: 0px 8px 11px -9px var(--main-color);
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--main-color);
}

.card-login .caja-inputs {
    width: 100%;
    margin-bottom: 2rem;
}

.card-login button {
    background-color: var(--main-color);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Cairo Regular;
    font-size: 22px;
    color: var(--color1);
    width: 100%;
    border: none;
    margin-top: 2rem;
}

.card-login button:hover {
    background-color: var(--secondary-color);
    color: var(--color1);
    transition: background-color 1s;
}

.card-login button:focus {
    box-shadow: 0px 0px 5px 1px var(--main-color);
    background-color: var(--secondary-color);
    color: var(--color1);
    transition: background-color 1s;
}

.card-login button:active {
    box-shadow: 0px 0px 5px 1px var(--secondary-color);
    background-color: var(--main-color);
    color: var(--color1);
    transition: background-color 1s;
}


@media screen and (max-width: 767px) {
    .card-login .logotipo {
        padding: 2rem 0;
    }

    .card-login {
        max-width: 320px;
        width: 100%;
        padding: 1rem;
    }

    .card-login .logotipo img {
        width: 100px;
    }

    .card-login .logotipo h1 {
        font-size: 2rem;
    }

    .card-login label {
        font-size: 1.3rem;
    }

    .card-login input.form-control {
        font-size: 1.2rem;
        line-height: 1.3rem;
        height: 40px;
    }

    .card-login button {
        margin-top: 0.8rem;
        margin-bottom: 1.5rem;
        font-size: 20px;
    }

}