@font-face {



    font-family: 'Montserrat', sans-serif;



    src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap') format("opentype");



}



@keyframes back {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



::-webkit-scrollbar {

    width: 5px;

}



body {

    background: linear-gradient(45deg, rgba(34, 21, 24, 1) 0%, rgba(93, 27, 37, 1) 50%, rgba(157, 13, 40, 1) 100%);

    font-family: 'Montserrat', sans-serif;

    margin: 0;

}



td {

    padding: 0.2rem !important;

}



.select2-dropdown {

    z-index: 9999 !important;

}



table tr {

    font-size: 0.85rem !important;

}



table td {

    font-size: 0.75rem !important;

}



input {

    font-size: 0.75rem !important;

}



select {

    font-size: 0.75rem !important;

}



label {

    font-size: 0.75rem !important;

}



.dataTables_info {

    font-size: 0.75rem !important;

}



.dataTables_paginate {

    font-size: 0.75rem !important;

}



.navbar {

    width: 100%;

    height: 8%;

    background: transparent;

    animation-duration: 3s;

    animation-name: title;

    animation-timing-function: ease;

    animation-delay: 0s;

}



.nav-container {

    grid-template-columns: auto auto auto auto;

    column-gap: 3vw;

    display: grid;

    align-items: center;

    font-family: 'Montserrat', sans-serif;

    margin-right: 5vw;

    float: right;

    border-width: 0px;

    font-size: 1rem;

    cursor: pointer;

    color: white;

}



#drop-lang {

    position: absolute;

    display: none;

    width: 5vw;

    top: 7vh;

    border-top: 1px solid white;

    right: 5vw;



}



#drop-lang input {

    font-size: 1rem;

    color: white;

    text-decoration: none;

    display: block;

    background: transparent;

    border: none;

    margin: 1vh 0;

}



.show {

    display: block !important;

}



.base-btn-container {

    margin: 10vh 0;

}



.base-drink-title {

    display: inline-block;

}



.base-title-mobile {

    font-size: calc(2.7rem + 4.5vw);

    font-weight: 300;

    line-height: 1.2;

}



.title-menu {

    font-size: 1.125rem;

    color: #6c757d;

}



.top-div-menu {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.form-control-light {

    width: auto !important;

    flex: unset !important;

    background-color: #f1f3fa !important;

    border-color: #f1f3fa !important;

}



.form-control:focus {

    color: #212529;

    background-color: #fff;

    border-color: var(--bs-analytically);

    outline: 0;

    box-shadow: 0 0 0 0.25rem rgb(187 49 67 / 25%);

}



.div-list-menu {

    color: #6c757d !important;

    font-size: 0.9rem;

}



.dataTables_lenght {

    margin-bottom: 1rem !important;

}



.dataTables_filter {

    margin-bottom: 1rem !important;

}



.table>tbody {

    vertical-align: middle;

}



.btn-primary {

    box-shadow: 0 2px 6px 0 rgb(13 110 253 / 50%);

}



.btn-danger {

    box-shadow: 0 2px 6px 0 rgb(220 53 69 / 50%);

}



.btn-warning {

    box-shadow: 0 2px 6px 0 rgb(255 202 44 / 50%);

}



.paginate_button.current {

    color: white !important;

    border-color: var(--bs-analytically);

    border-radius: 50%;

    box-shadow: 0 2px 6px 0 rgb(187 49 67 / 50%);

    background-color: var(--bs-analytically);

}



@keyframes comp {



    from {



        opacity: 0;



    }



    to {



        opacity: 1;



    }



}



.modal-open {

    overflow: hidden;

}



.modal-open .modal {

    overflow-x: hidden;

    overflow-y: auto;

}



.modal {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1050;

    display: none;

    width: 100%;

    height: 100%;

    overflow: hidden;

    outline: 0;

}



.modal-dialog {

    position: relative;

    width: auto;

    margin: 0.5rem;

    pointer-events: none;

}



.modal.fade .modal-dialog {

    transition: -webkit-transform 0.3s ease-out;

    transition: transform 0.3s ease-out;

    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;

    -webkit-transform: translate(0, -50px);

    transform: translate(0, -50px);

}



@media (prefers-reduced-motion: reduce) {

    .modal.fade .modal-dialog {

        transition: none;

    }

}



.modal.show .modal-dialog {

    -webkit-transform: none;

    transform: none;

}



.modal.modal-static .modal-dialog {

    -webkit-transform: scale(1.02);

    transform: scale(1.02);

}



.modal-dialog-scrollable {

    display: -ms-flexbox;

    display: flex;

    max-height: calc(100% - 1rem);

}



.modal-dialog-scrollable .modal-content {

    max-height: calc(100vh - 1rem);

    overflow: hidden;

}



.modal-dialog-scrollable .modal-header,

.modal-dialog-scrollable .modal-footer {

    -ms-flex-negative: 0;

    flex-shrink: 0;

}



.modal-dialog-scrollable .modal-body {

    overflow-y: auto;

}



.modal-dialog-centered {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    min-height: calc(100% - 1rem);

}



.modal-dialog-centered::before {

    display: block;

    height: calc(100vh - 1rem);

    content: "";

}



.modal-dialog-centered.modal-dialog-scrollable {

    -ms-flex-direction: column;

    flex-direction: column;

    -ms-flex-pack: center;

    justify-content: center;

    height: 100%;

}



.modal-dialog-centered.modal-dialog-scrollable .modal-content {

    max-height: none;

}



.modal-dialog-centered.modal-dialog-scrollable::before {

    content: none;

}



.modal-content {

    position: relative;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    width: 100%;

    pointer-events: auto;

    background-color: #ffffff;

    background-clip: padding-box;

    border: 1px solid rgba(0, 0, 0, 0.2);

    border-radius: 0.3rem;

    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);

    outline: 0;

}



.modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1040;

    width: 100vw;

    height: 100vh;

    background-color: #000;

}



.modal-backdrop.fade {

    opacity: 0;

}



.modal-backdrop.show {

    opacity: 0.5;

}



.modal-header {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: start;

    align-items: flex-start;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding: 1rem;

    border-bottom: 1px solid #e9ecef;

    border-top-left-radius: calc(0.3rem - 1px);

    border-top-right-radius: calc(0.3rem - 1px);

}



.modal-header .close,

.modal-header .mailbox-attachment-close {

    padding: 1rem;

    margin: -1rem -1rem -1rem auto;

}



.modal-title {

    margin-bottom: 0;

    line-height: 1.5;

}



.modal-body {

    position: relative;

    -ms-flex: 1 1 auto;

    flex: 1 1 auto;

    padding: 1rem;

}



.modal-footer {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-pack: end;

    justify-content: flex-end;

    padding: 0.75rem;

    border-top: 1px solid #e9ecef;

    border-bottom-right-radius: calc(0.3rem - 1px);

    border-bottom-left-radius: calc(0.3rem - 1px);

}



.modal-footer>* {

    margin: 0.25rem;

}



.modal-scrollbar-measure {

    position: absolute;

    top: -9999px;

    width: 50px;

    height: 50px;

    overflow: scroll;

}



@media (min-width: 576px) {

    .modal-dialog {

        max-width: 500px;

        margin: 1.75rem auto;

    }



    .modal-dialog-scrollable {

        max-height: calc(100% - 3.5rem);

    }



    .modal-dialog-scrollable .modal-content {

        max-height: calc(100vh - 3.5rem);

    }



    .modal-dialog-centered {

        min-height: calc(100% - 3.5rem);

    }



    .modal-dialog-centered::before {

        height: calc(100vh - 3.5rem);

    }



    .modal-content {

        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);

    }



    .modal-sm {

        max-width: 300px;

    }



    .modal-md {

        max-width: 50%;

    }

}



@media (min-width: 992px) {



    .modal-lg,

    .modal-xl {

        max-width: 90%;

    }

}



@media (min-width: 1200px) {

    .modal-xl {

        max-width: 90%;

    }

}



.modal-dialog .overlay {

    background-color: #000;

    display: block;

    height: 100%;

    left: 0;

    opacity: .7;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 1052;

}



.modal-content.bg-warning .modal-header,

.modal-content.bg-warning .modal-footer {

    border-color: #343a40;

}



.modal-content.bg-primary .close,

.modal-content.bg-primary .mailbox-attachment-close,

.modal-content.bg-secondary .close,

.modal-content.bg-secondary .mailbox-attachment-close,

.modal-content.bg-info .close,

.modal-content.bg-info .mailbox-attachment-close,

.modal-content.bg-danger .close,

.modal-content.bg-danger .mailbox-attachment-close,

.modal-content.bg-success .close,

.modal-content.bg-success .mailbox-attachment-close {

    color: #ffffff;

    text-shadow: 0 1px 0 #000;

}



button {

    border-radius: 0;

}



.close,

.mailbox-attachment-close {

    float: right;

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1;

    color: #000;

    text-shadow: 0 1px 0 #ffffff;

    opacity: .5;

}



.close:hover,

.mailbox-attachment-close:hover {

    color: #000;

    text-decoration: none;

}



.close:not(:disabled):not(.disabled):hover,

.mailbox-attachment-close:not(:disabled):not(.disabled):hover,

.close:not(:disabled):not(.disabled):focus,

.mailbox-attachment-close:not(:disabled):not(.disabled):focus {

    opacity: .75;

}



button.close,

button.mailbox-attachment-close {

    padding: 0;

    background-color: transparent;

    border: 0;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}



a.close.disabled,

a.disabled.mailbox-attachment-close {

    pointer-events: none;

}



.alert .close,

.alert .mailbox-attachment-close {

    color: #000;

    opacity: .2;

}



.alert .close:hover,

.alert .mailbox-attachment-close:hover {

    opacity: .5;

}



.form-control-sm {

    height: 1.5rem;

    font-size: 0.8rem;

    line-height: 1.5;

    border-radius: 0.2rem;

}



div.dataTables_wrapper div.dataTables_length div {

    display: inline-block;

}