/* TO DO: Hacer refactor de las clases */

/* TO DO: Organizar los estilos de los botones y su ubicación */

/* inputs */

/* .hidden-scroll {
} */
.hidden-scroll::-webkit-scrollbar {
    -webkit-appearance: none;
}

.hidden-scroll::-webkit-scrollbar:vertical {
    width: 10px;
}

.hidden-scroll::-webkit-scrollbar-button:increment,
.hidden-scroll::-webkit-scrollbar-button {
    display: none;
}

.hidden-scroll::-webkit-scrollbar:horizontal {
    height: 5px;
}

.hidden-scroll::-webkit-scrollbar-thumb {
    background-color: #a2a2a298;
    border-radius: 20px;
}

.price-input {
    font-size: 18px;
    border: 1px solid black;
    border-radius: 35px !important;
}

#date {
    font-size: 18px;
    color: black;
}

.small-select {
    height: 27px;
}

.small-input {
    text-align: center;
    height: 24px;
    width: 77px;
    border-color: black;
    font-size: 18px;
}

.inputs-container input,
.inputs-container select {
    border-radius: 10px;
    border: 1px solid black;
}

.inputs-container label {
    padding: 0;
}

.dual-inputs input {
    width: 294px;
    background-color: red;
}

.big-select {
    font-size: 16px;
    height: 45px;
    border: 1px solid black;
    border-radius: 10px;
}

.big-input {
    font-size: 16px;
    height: 43px;
    border: 1px solid black;
    border-radius: 10px;
}

/* Buttons */

.light-purple-button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    height: 2.8rem;
    padding: 0 10px 0 10px;
    background-color: #797ea7;
    border-radius: 10px;
    border: 0;
}

.add-button {
    background-color: #008ffa;
    color: white;
}

.button-style {
    border: 0ch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-icon-spacer {
    margin-right: 5px;
}

.buttons {
    border: 0ch;
    border-radius: 5px;
    display: inherit;
    justify-content: flex-end;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
}

.button-popover {
    padding: 5px 10px 5px 10px;
    background-color: #b9e2fb;
}

.popover-content {
    color: #206fa1;
    font-weight: 600;
    font-size: 12px;
}

.popover-header {
    background-color: red;
}

.popover-body {
    color: purple;
}
/*
.show-button {
    margin-left: 2rem;
    border-radius: 5px;
    border: 0ch;
    display: flex;
    justify-content: center;
    align-self: center;
    background-color: #b9e2fb;
    color: #206fa1;
} */

.afirmative-button {
    background-color: #023e71;
    color: white;
    padding: 15px;
}

.back-buttons {
    padding-left: 20px;
    background-color: #457ba9;
    font-style: normal;
    font-weight: lighter;
    font-size: 16px;
    color: #ffffff;
}

.large-blue-button {
    border-radius: 5px;
    background-color: #92daf1;
    color: #137288;
    height: 38px;
}

.large-yellow-button {
    border-radius: 5px;
    background-color: #ffc700;
    color: #924f01;
    height: 38px;
}

.alert-entrega {
    background: #ff8a8a;
    border-radius: 5px;
    color: #c20000;
}

.export-select {
    text-align: center;
    width: 109px;
    color: white !important;
    background-color: #f4ab3c !important;
}

.upload-imagen-button {
    background-color: #205e85;
    color: white;
    font-size: 16px;
    font-weight: normal;
    width: 100%;
    height: 39px;
    border-radius: 5px;
}

/* alerts */

.table-general-alert-style {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 5px;
}

.large-red-alert,
.large-light-blue-alert,
.large-yellow-alert,
.large-orange-alert,
.large-green-alert {
    height: 36px;
    width: 111px;
}

.large-orange-alert {
    background-color: rgba(249, 137, 5, 0.6);
    color: #814a0b;
}

.large-green-alert {
    text-align: center;
    line-height: 18px;
    white-space: pre-line;
    background-color: #b7e9a5;
    color: #136959;
}

.badge-pendiente {
    background-color: rgb(249, 134, 136);
    color: #c20000;
}

.badge-aprobada {
    background: rgb(183, 233, 165);
    color: #286712;
}

.badge-enviada {
    background-color: rgb(255, 236, 171);
    color: #9e7c04;
}

.badge-enviada > span {
    font-size: 11px;
}

.br {
    display: block;
    height: 0.5px;
}

.medium-alert {
    width: 80%;
    height: 34px;
}

.medium-alert > span {
    padding: 0% !important;
}

.alert-ingresada {
    background-color: rgba(155, 250, 233, 0.7);
    color: #136959;
}

.alert-espera {
    background-color: #ffedab;
    color: #9e7c04;
}

.alert-despachada {
    background-color: #ffedab;
    color: #814a0b;
}
.alert-facturada {
    background-color: #b7e9a5;
    color: #286712;
}

.medium-red-alert {
    font-size: 12px;
    width: 111px;
    height: 30px;
}

.medium-green-alert {
    background: rgb(183, 233, 165);
    color: #286712;
}

.medium-yellow-alert {
    background-color: #ffedab;
    color: #9e7c04;
}

/* General classes */

.input-direction {
    display: flex;
}

.text-inputs {
    width: 1.4vw;
}

@media (max-width: 800px) {
    .input-direction {
        display: flex;
        flex-direction: column;
    }

    .select-container {
        margin-top: 10px;
        min-width: 58% !important;
    }

    .text-inputs {
        width: 4.4vw;
        margin-right: 10px;
    }

    .topbar {
        width: 100% !important;
    }

    #kt_quick_user {
        margin-top: 25px;
    }

    .input-search {
        margin-top: 15px;
    }

    .column {
        flex-direction: column !important;
    }
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 208px;
    height: 253px;
    border: 1px solid #175a93;
}

.image-container img {
    max-height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
}

label {
    margin-bottom: 0;
    padding: 0;
}

.create-title {
    font-weight: 500;
    font-size: 26px;
    color: #062947;
}

.create-container {
    padding: 1rem 2rem;
}

.alignment label {
    display: flex;
    align-items: center;
}

.select-text {
    white-space: nowrap;
}

.custom-border {
    border-bottom: 1px solid #596d7e;
}

.min-height {
    min-height: 100vh;
}

/* Header */

#kt_header {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
}

.welcome,
.username {
    font-size: 16px;
}

.welcome {
    color: rgba(0, 0, 0, 0.5);
}

.notification-container {
    display: flex;
}

.notification {
    height: 3rem;
    width: 2.5rem;
}

.notification-count {
    display: flex;
    margin: 0.2rem 1rem 0 -1rem;
    justify-content: center;
    align-items: center;
    font-size: 50%;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    background-color: red;
}

.notification-count div {
    color: white;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*width: 25%;*/
}

.topbar-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Menu */

#kt_brand {
    z-index: 1;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: #000000;
}

#latam {
    margin-top: 1rem;
}

.aside-menu,
#kt_aside_menu_wrapper,
#kt_header_mobile {
    background-color: #212121;
}

.menu-item :hover {
    background: #000000 !important;
}

.menu-arrow {
    font-size: 1rem !important;
    transition: unset;
}

/*
.aside-menu .menu-nav > .menu-item > .menu-link {
    padding: 15px 25px;
}
*/

/* Users Main */

.header-fixed.subheader-fixed.subheader-enabled .wrapper {
    padding-top: 10vh;
}

.content {
    padding: 0%;
}

.top-side {
    padding: 1rem 2rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.titles {
    margin-top: 1rem;
    width: 100%;
    display: inherit;
    flex-direction: column;
}

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

/* tables */

.pagination-table > div > nav > ul {
    margin: 0;
}

.selected {
    background-color: #bebfc2 !important;
}

.row-hover:hover {
    background-color: #e4e6ef;
}

.show {
    display: block !important;
}

.table span {
    padding-left: 10px;
}

.datatable-pager {
    padding: 1rem !important;
}

tr {
    border-bottom: 1px solid #dadada;
}

th {
    padding: 1rem 0 !important;
}

td {
    padding: 1rem 0 !important;
}

th span {
    color: #929292 !important;
}

.checkbox > span {
    display: flex;
    justify-content: center;
    align-self: center;
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50% !important;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: transparent !important;
    border: 1px solid #c2c9d1;
    display: inline-block;
    visibility: visible;
}

.checkbox > input:checked ~ span {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #3a8fc6 !important;
    content: "";
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}

.checkbox > input:checked ~ span::after {
    border: 0;
}

.table-container {
    margin-left: 2rem;
}

.icon-container {
    display: flex;
    justify-content: center;
}

.row-container {
    font-weight: 600;
}

.field-container-custom {
    height: 7rem;
}

.input-style {
    border: 1px solid #c2c9d1;
    border-radius: 6px;
    padding: 5px;
    height: 37.88px;
}

.input-style input:focus {
    outline: 0;
}

.input-style div {
    border-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.my-datatable {
    background-color: white;
}

.row-container {
    height: 4rem;
}

.table-bordered th,
.table-bordered td {
    border: 0ch;
}

.table th,
.table td {
    border: 0ch;
}

.down-arrow,
.arrows button img {
    fill: "red";
    width: 12px;
}

.button-gray {
    color: gray;
    fill: gray;
    border: 0;
    background: transparent;
}

.table-arrows {
    position: relative;
    right: 0%;
}

.table-icon-container {
    display: flex;
    justify-content: space-between;
}

.table-icon-container .icon {
    margin-right: 1.5rem;
}

.flex div {
    margin-left: 10px;
}

.scrollable {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

/* /////////////// LOGIN /////////////// */

#kt_login_signin_submit {
    padding: 0.5rem 2rem;
    background-color: #175a93;
    color: white;
    border: 0ch;
    font-weight: 600;
    /*font-size: 1.9vw;*/
    line-height: 42px;
    border-radius: 10px;
}

.button-margin {
    margin-top: 15%;
}

@media (max-height: 900px) {
    .button-margin {
        margin-top: 1.5rem;
    }
    #kt_login_signin_submit {
        font-size: 16px;
    }
}

.background-login {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    -webkit-backdrop-filter: brightness(10%);
            backdrop-filter: brightness(10%);
}

/* /////////////// Recovery password /////////////// */

.title {
    color: #596d7e;
    font-size: 2.5vw;
}

.app-bar {
    height: 12.6vh;
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.recovery-container {
    padding: 2rem;
    background: white;
    height: 60vh;
    width: 58vw;
    margin-top: 10.1vh;
}

.recovery-button {
    padding: 0.5rem 2rem;
    background-color: #175a93;
    color: white;
    border: 0ch;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
    border-radius: 10px;
}

.input-title {
    font-size: 2.5vw;
}

.go-back-text {
    font-style: normal;
    font-weight: bold;
    font-size: 1vw;
    line-height: 45px;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
}

.app-bar-logo {
    margin-left: 4vw;
}

.latam {
    margin-bottom: -0.5rem;
}

@media (max-width: 1350px) {
    .recovery-container {
        width: 38vw;
    }
    .input-title {
        font-size: 1.4vw;
    }
    .title {
        color: #596d7e;
        font-size: 1.8vw;
    }
}

@media (max-width: 900px) {
    .recovery-container {
        width: 100vw;
    }
}

@media (max-width: 991px) {
    .topbar {
        width: 100%;
    }

    .datatable.datatable-default > .datatable-pager > .datatable-pager-nav {
        margin: 0 auto;
    }
    .card-footer {
        justify-content: center;
        display: flex;
    }
    .show-991 {
        display: block;
    }
    .responsive-sin-margen {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/*
.inputs-container input, .inputs-container select {
    border-radius: 10px;
    border: 1px solid black;
}
*/

.show-991 {
    display: none;
}

.aside-menu .menu-nav > .menu-item.menu-item-active {
    transition: background-color 0.3s;
    background: #000000;
    color: #fff !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon {
    color: #fff;
}
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: #000000;
}
a:hover {
    color: #072947;
}

.datatable.datatable-default
    > .datatable-pager
    > .datatable-pager-nav
    > li
    > .datatable-pager-link.datatable-pager-link-active {
    background-color: #9bd5fa;
}
/*
.btn.btn-primary {
    color: #ffffff;
    background-color: #023e71;
    border-color: #023e71;
}
*/

.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-primary:focus:not(.btn-text),
.btn.btn-primary.focus:not(.btn-text) {
    color: #ffffff;
    background-color: #023e71;
    border-color: #023e71;
}

.btn.btn-light-primary {
    color: #fff;
    background-color: #92daf1;
    border-color: transparent;
}

.btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-primary:focus:not(.btn-text),
.btn.btn-light-primary.focus:not(.btn-text) {
    color: #ffffff;
    background-color: #92daf1;
    border-color: transparent;
}

.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-heading
    .menu-icon.svg-icon
    svg
    g
    [fill],
.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-link
    .menu-icon.svg-icon
    svg
    g
    [fill] {
    transition: fill 0.3s ease;
    fill: #a7a295;
}

.aside-menu
    .menu-nav
    > .menu-item
    > .menu-heading
    .menu-icon.svg-icon
    svg
    g
    [fill],
.aside-menu
    .menu-nav
    > .menu-item
    > .menu-link
    .menu-icon.svg-icon
    svg
    g
    [fill] {
    transition: fill 0.3s ease;
    fill: #868686;
}

.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
    color: #868686;
}

.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-heading,
.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-link {
    background-color: #000000;
}

.aside-menu
    .menu-nav
    > .menu-item.menu-item-active
    > .menu-heading
    .menu-icon.svg-icon
    svg
    g
    [fill],
.aside-menu
    .menu-nav
    > .menu-item.menu-item-active
    > .menu-link
    .menu-icon.svg-icon
    svg
    g
    [fill] {
    transition: fill 0.3s ease;
    fill: #ffc423;
}

.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-heading
    .menu-icon,
.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-link
    .menu-icon {
    color: #ffc423;
}

.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-heading
    .menu-icon.svg-icon
    svg
    g
    [fill],
.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover
    > .menu-link
    .menu-icon.svg-icon
    svg
    g
    [fill] {
    transition: fill 0.3s ease;
    fill: #ffc423;
}
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: #ffc423;
}
@media (min-width: 992px) {
    .brand .btn.active .svg-icon svg g [fill],
    .brand .btn:hover .svg-icon svg g [fill] {
        transition: fill 0.3s ease;
        fill: #fff;
    }
}
@media (min-width: 992px) {
    .brand .btn .svg-icon svg g [fill] {
        transition: fill 0.3s ease;
        fill: #fff;
    }
    .svg-icon svg g [fill] {
        transition: fill 0.3s ease;
        fill: #fff;
    }
}

.svg-icon.svg-icon-primary-notification svg g [fill] {
    transition: fill 0.3s ease;
    fill: #ffc423 !important;
}

/* checkpoint */
.progress.progress-xs {
    height: 1rem;
}

.bg-datostecnicos {
    background-color: #ff8a83 !important;
}
.bg-datostecnicos {
    background-color: #16dad0 !important;
}
.bg-medidasymontos {
    background-color: #52b5ff !important;
}
.bg-datosobra {
    background-color: #c3afff !important;
}

.btn.btn-warning {
    color: #ffffff;
    background-color: #f7c92b;
    border-color: #f7c92b;
}
.fsize08 {
    font-size: 0.8rem;
}

@media (max-height: 900px) {
    #kt_login_signin_submit {
        font-size: 16px;
    }
}
#kt_login_signin_submit {
    padding: 0.5rem 2rem;
    background-color: #175a93;
    color: white;
    border: 0;
    font-weight: 600;
    line-height: 18px;
    border-radius: 10px;
}

.nav.nav-pills.nav-danger .nav-link.active .nav-text {
    color: black;
}

.nav.nav-pills.nav-danger .nav-link.active {
    background: #f7c92b;
}

#reportTabsId1 > li > a.active {
    background: #f7c92b;
}

#reportTabsId4 > li > a.active {
    background: #E85B5B;
}

#reportTabsId2 > li > a.active {
    background: #008ffa;
}

#reportTabsId3 > li > a.active {
    background: #00bdb4;
}

#reportTabsId2 > li > a.active > .nav-text,
#reportTabsId3 > li > a.active > .nav-text {
    color: white;
}

.nav.nav-pills.nav-danger .show > .nav-link .nav-text,
.nav.nav-pills.nav-danger .nav-link:hover:not(.active) .nav-text {
    color: black;
}

.icon-1 {
    fill: red;
}

table.not-border-tr tr {
    border-bottom: 0px !important;
}

.notbg {
    background-color: transparent;
}

.own-invalid {
    border-color: #f64e60;
    padding-right: calc(1.5em + 1.3rem);
}

.checkbox-pointer-event {
    padding: 0.1rem 0 0.5rem 0;
    pointer-events: all;
    color: black;
}

.checkbox-pointer-event-hover {
    padding: 0.2rem 0 0.5rem 0;
    pointer-events: all;
    color: black;
    cursor: pointer;
}

.checkbox-pointer-event-hover:hover {
    color: rgb(44, 44, 255);
    font-weight: 400;
}

.title-p {
    color: #797979;
}