@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Space Mono', monospace;
}

.Oswald {
    font-family: 'Oswald', sans-serif;
}

h1:focus {
    outline: none;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.cursor-pointer:hover{
    cursor: pointer;
}

:root {
    --color-1: #327ED0;
    --colorHeadersPrincipal: #69A7EB;
    --color-3: #88A8E7;
    --color-4: #517CD2;
    --color-5: #EBEBEB;
    --color-6: #FFFFFF;
    --color-7: #FFFFFF;
    --color-8: #B9B9B9;
    --color-9: #F3F3F3;
    --elementSelected: #517CD2;
    --colorGreyBackground: #EBEBEB;
    --colorText: #3F3F3F;
    --colorWhite: #FFFFFF;
    --colorGreyPlaceHolder: #A7A7A7;
    --colorGreenCircle: #6ED021;
    --colorRedSGS: #AE4957;
    --h-title-buque: 50px;
}

.divMainLayout.versionNegro {
    --color-1: #5B616D;
    --colorHeadersPrincipal: #72767C;
    --color-3: #AEAEAE;
    --color-4: #424447;
    --color-5: #54575E;
    --color-6: #5F6369;
    --color-7: #3F434B;
    --color-8: #B9B9B9;
    --color-9: #F3F3F3;
    --elementSelected: #424447;
    --colorGreyBackground: #EBEBEB;
    --colorText: #3F3F3F;
    --colorWhite: #FFFFFF;
    --colorGreyPlaceHolder: #A7A7A7;
    --colorGreenCircle: #6ED021;
    --colorRedSGS: #AE4957;
}

/*Property*/

.elementSelected {
    background-color: var(--elementSelected) !important;
}

.background-rojo {
    background-color: #FF0F0080 !important
}

.background-1 {
    background-color: var(--color-1) !important;
}

.background-2:not(.elementSelected) {
    background-color: var(--colorHeadersPrincipal) !important;
}

.borderbackground-2-5px {
    border: solid 5px var(--colorHeadersPrincipal);
}

.background-3 {
    background-color: var(--color-3) !important;
}

.background-4 {
    background-color: var(--color-4) !important;
}

.background-5 {
    background-color: var(--color-5) !important;
}

.background-6 {
    background-color: var(--color-6) !important;
}

.background-7 {
    background-color: var(--color-7) !important;
}

.background-8 {
    background-color: var(--color-8) !important;
}

.background-9 {
    background-color: var(--color-9) !important;
}

.text-1 {
    color: var(--color-1) !important;
}

.text-2 {
    color: var(--color-2) !important;
}

.text-3 {
    color: var(--color-3) !important;
}

.text-4 {
    color: var(--color-4) !important;
}

.text-5 {
    color: var(--color-5) !important;
}

.text-6 {
    color: var(--color-6) !important;
}

.text-7 {
    color: var(--color-7) !important;
}

.text-8 {
    color: var(--color-8) !important;
}

.text-9 {
    color: var(--color-9) !important;
}

.backgroundInputBlue {
    background-color: #DAE3EC !important;
}

.backgroundInputGray {
    background-color: #E7E7E7 !important;
}

.backgroundRedSGS {
    background-color: var(--colorRedSGS) !important;
}

.textWhite, .textWhiteImportant {
    color: var(--colorWhite);
}

.textWhiteImportant .mud-input-root-text{
    color: var(--colorWhite) !important;
}

.backgroundWhite {
    background-color: var(--colorWhite) !important;
}

.placeholder-white::placeholder, .placeholder-white input::placeholder{
    color: white!important;
}

.textColorGreyPlaceHolder {
    color: var(--colorGreyPlaceHolder);
}

.fs-32px {
    font-size: 32px;
}

.fs-24px {
    font-size: 24px;
}

.fs-20px {
    font-size: 20px;
}

.fs-18px {
    font-size: 18px;
}

.fs-17px {
    font-size: 17px;
}

.fs-16px {
    font-size: 16px;
}

.fs-14px {
    font-size: 14px;
}

.fs-12px {
    font-size: 12px;
}

.max-width-30 {
    max-width: 30%;
}

.max-width-35 {
    max-width: 35%;
}

.bottom-16 {
    bottom: 16%;
}

.end-13 {
    right: 13%;
}

.placeholder_fs-32px::placeholder {
    font-size: 32px;
}

.placeholder_fs-24px::placeholder {
    font-size: 24px;
}

.placeholder_fs-20px::placeholder {
    font-size: 20px;
}

.placeholder_fs-16px::placeholder {
    font-size: 16px;
}

.placeholder_fs-14px::placeholder {
    font-size: 14px;
}

.h-20 {
    height: 20%;
}

.h-40 {
    height: 40%;
}

.h-80 {
    height: 80%;
}

.h-85 {
    height: 85%;
}

.h-90 {
    height: 90%;
}

.w-35 {
    width: 45%;
}

.w-20 {
    width: 20%;
}

.w-15 {
    width: 15%;
}

.w-10 {
    width: 10%;
}

.w-0 {
    width: 0;
}

@media (max-width: 576px) {

    .h-md-80 {
        height: 80% !important;
    }
}

/*Quitar propiedades*/
.btn-no-hover-white:hover {
    color: var(--colorWhite);
}

.btn:focus, btn:focus-visible, .form-control:focus, input:focus-visible, input:focus {
    box-shadow: none;
    outline: none;
}


/*Components*/


/*Navbar*/
.navbarHeader {
    width: 100%;
    height: 60px;
    background-color: var(--color-1);
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.divPrincipal {
    padding: 4rem 1rem 1rem;
}

.overflow-y-scroll {
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento */
    scrollbar-color: var(--colorHeadersPrincipal) transparent; /* Color de la barra de desplazamiento y fondo */
}

::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento en navegadores WebKit */
}

::-webkit-scrollbar-track {
    background-color: transparent; /* Color de fondo de la pista de la barra de desplazamiento */
}

::-webkit-scrollbar-thumb {
    background-color: var(--colorHeadersPrincipal); /* Color de la barra de desplazamiento */
    border-radius: 8px;
}

.min-height-101 {
    min-height: calc(100% + 1px);
}

.h-100-50px{
    height: calc(100% - 50px);
}
/*Circle btn*/
.circleGreen {
    font-size: 13px;
    background-color: var(--colorGreenCircle);
    border-radius: 50%;
    justify-content: space-around;
}

.circleRed {
    font-size: 13px;
    background-color: #FF0F00;
    border-radius: 50%;
    justify-content: space-around;
}

.circleGray {
    font-size: 13px;
    background-color: #D2D2D2;
    border-radius: 50%;
    justify-content: space-around;
}

/*SWITCH_COLOR*/
#colorSwitch {
    width: 56px;
    height: 26px;
}


.finalBtnRed {
    border-right: 5px solid #FF0F0080;
    border-radius: 0px, 5px, 5px, 0px;
}


.finalBtnBlue {
    border-right: 5px solid #00B2FF80;
    border-radius: 0px, 5px, 5px, 0px;
}

.finalBtnGreen {
    border-right: 5px solid #05ff0080;
    border-radius: 0px, 5px, 5px, 0px;
}


.cancelDivToBtn {
    background-color: #EA6F7E;
    height: 31px;
    width: 31px;
}

.editDivToBtn {
    background-color: #72767C;
    height: 31px;
    width: 31px;
}

.disabledDivToBtn .editDivToBtn, .disabledDivToBtn .cancelDivToBtn {
    opacity: 0.1;
    cursor: not-allowed;
    pointer-events: none;
}

.height-25px {
    height: 25px;
}
.height-35px {
    height: 35px;
}
.backgroundAdminContainer {
    background-color: var(--color-5);
}

.border-backgroundAdminContainer {
    border-color: #54575E;
}


.backgroundGestionHeaders {
    background-color: #69A7EB;
}

.backgroundGestionDesplegables {
    background-color: #9FCDFE;
}

.backgroundGestionHeaders2 {
    background-color: #88A8E7;
}

.backgroundGestionDesplegables2 {
    background-color: #E4F1FF;
}

.backgroundGestionBotones {
    background-color: #527CD2;
}

.backgroundGestionBotones2 {
    background-color: #5489F1;
}



/* custom checkbox */
.checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* hide the browser's default checkbox */
    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* create custom checkbox */
.check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
}

/* on mouse-over, add border color */
.checkbox:hover input ~ .check {
    border: 2px solid gray;
}

/* add background color when the checkbox is checked */
.checkbox input:checked ~ .check {
    background-color: white;
    border: none;
}

/* create the checkmark and hide when not checked */
.check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the checkmark when checked */
.checkbox input:checked ~ .check:after {
    display: block;
}

/* checkmark style */
.checkbox .check:after {
    left: 9px;
    top: 2px;
    width: 8px;
    height: 16px;
    border: solid gray;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


select:disabled {
    cursor: default;
    background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)) !important;
    color: -internal-light-dark(rgb(84, 84, 84), rgb(170, 170, 170)) !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
    opacity: 0.4 !important;
}

.btn-no-hover-white.border-bottom:last-child {
    border-bottom-width: 0 !important;
}

/* -------------------------------------------------------------------------------------------------- */
/* ------------------------------ COMPONENTE DE ASIGNACIONES DE BUQUES ------------------------------ */
/* -------------------------------------------------------------------------------------------------- */

.lista-menu-asignaciones-buques .mud-list-item-text {
    margin: 0;
}

.lista-menu-asignaciones-buques .mud-list-item .btn-no-hover-white.border-bottom {
    border-bottom-width: 1px !important;
}

.lista-menu-asignaciones-buques .mud-list-item:last-child .btn-no-hover-white.border-bottom {
    border-bottom-width: 0 !important;
}

.acordeon-buques-sgs .mud-expand-panel .mud-expand-panel-header {
    padding: 8px 12px;
}

.mud-panel-expanded .mud-expand-panel-header {
    background-color: #EEE;
    border-bottom: solid 1px rgba(0,0,0,0.1);
}

.acordeon-buques-sgs .mud-list.mud-list-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.acordeon-buques-sgs .mud-list-item-text {
    margin-top: 0;
    margin-bottom: 0;
}

.acordeon-buques-sgs .mud-button {
    text-transform: none;
}

.acordeon-buques-sgs .mud-button-label {
    justify-content: start;
}

.acordeon-buques-sgs .elemento-lista-asignaciones:nth-child(even) {
    background-color: var(--color-9) !important;
}

.acordeon-buques-sgs .elemento-lista-asignaciones:nth-child(odd) {
    background-color: var(--colorWhite) !important;
}

.acordeon-buques-sgs .elemento-lista-asignaciones.active {
    background-color: var(--color-8) !important;
}

.acordeon-buques-sgs .elemento-lista-asignaciones.active .mud-button {
    color: white !important;
}

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

.h-fit-content {
    height: fit-content;
}

.h-title-buque {
    height: var(--h-title-buque);
}

.h-componente-asignaciones {
    height: calc(100% - var(--h-title-buque));
}

/* INPUTS */
.formulario-equipar-buque .mud-picker .mud-input-control.mud-input-input-control {
    margin-top: 0;
}

.formulario-equipar-buque .mud-picker .mud-input.mud-input-text {
    margin: 0 !important;
}

.formulario-equipar-buque .mud-picker .mud-input-slot {
    text-align: center;
}

.formulario-equipar-buque .mud-input.mud-input-underline:after,
.formulario-equipar-buque .mud-input.mud-input-underline:before,
.formulario-equipar-buque .mud-input.mud-input-underline:after {
    border: 0 !important;
}

.formulario-equipar-buque .mud-input-adornment.mud-input-adornment-end {
    position: absolute;
    right: 0;
}

.mud-theme-primary,
.mud-button-outlined.mud-button-outlined-primary,
.mud-primary-text {
    --mud-palette-primary: var(--color-4);
}

.modal-eliminar-asignacion.mud-dialog .mud-dialog-actions {
    justify-content: space-evenly;
    margin-bottom: 16px;
    padding: 8px 24px;
}

.boton-menu-asignaciones.active {
    background-color: var(--color-4) !important;
}

.custom-dropdown {
    position: relative;
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: 1000;
    background-color: var(--colorHeadersPrincipal) !important;
    border: 1px solid var(--colorHeadersPrincipal);
    border-radius: .25rem;
    margin-top: 4px;
}

.custom-dropdown-item {
    padding: 8px;
    cursor: pointer;
}

.custom-dropdown-item:hover {
    background-color: var(--color-4);
}

.custom-dropdown-toggle {
    min-width: 320px;
}

.h-contenido-columna-asignaciones {
    height: calc(100% - 44px);
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0;
}

/* Ocultar los seleccionables sin hijos */
.acordeon-buques-sgs .mud-expand-panel:not(:has(.mud-list-item)) {
    display: none;
}

/* PROCEDIMIENTOS */
.base-procedimientos-columna-derecha form {
    height: 100%;
}

.tabla-procedimientos table {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

.tabla-procedimientos tr td:first-child,
.tabla-procedimientos th:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.tabla-procedimientos tr td:last-child,
.tabla-procedimientos th:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.tabla-procedimientos td,
.tabla-procedimientos th {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.tabla-procedimientos.mud-table-dense * .mud-table-row .mud-table-cell {
    padding-top: 4px;
    padding-bottom: 4px;
}

.tabla-procedimientos .py-botones-lista-procedimientos {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.tabla-procedimientos .cancelDivToBtn {
    height: 27px;
    width: 27px;
}

.gestionDesplegables .mud-expand-panel-header {
    padding: 0 0.75rem;
    background-color: #9FCDFE;
}

.gestionDesplegables .mud-panel-expanded .mud-expand-panel-header {
    border-bottom: 0;
}

.gestionDesplegables .mud-icon-root.mud-svg-icon {
    fill: white;
}

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root,
.mud-input > textarea.mud-input-root {
    padding: 0 0 6px 0 !important;
    font-size: 0.875rem;
}

.modal-firmar-procedimiento .mud-dialog-title {
    background-color: var(--color-3);
    padding: 16px;
}

.modal-firmar-procedimiento .mud-dialog-title h6 {
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    font-family: 'Oswald';
    font-size: 24px;
}

.modal-firmar-procedimiento .mud-dialog-actions {
    justify-content: space-evenly;
    padding: 10px 50px 30px 50px;
}

.background-cancelar-firma {
    background-color: #EA6F7E !important;
}

.circuloVerde, .circuloRojo {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.circuloVerde{
    background-color: #6ED021;
}


.circuloRojo{
    background-color: #FF0F00;
}

.base-procedimientos-columna-derecha .mud-input > input.mud-input-root,
.base-procedimientos-columna-derecha div.mud-input-slot.mud-input-root,
.base-procedimientos-columna-derecha .mud-input > textarea.mud-input-root,
.input-procedimientos {
    background-color: #E3E3E3;
    margin: 0;
    padding: 6px 6px 6px 6px !important;
    border-radius: 5px;
}

.base-procedimientos-columna-derecha .mud-input.mud-input-underline:before,
.base-procedimientos-columna-derecha .mud-input.mud-input-underline:hover:not(.mud-disabled):before,
.input-procedimientos .mud-input-underline:before,
.input-procedimientos .mud-input-underline:hover:not(.mud-disabled):before {
    border-bottom: 0;
}

.base-procedimientos-columna-derecha .mud-divider {
    border-color: #DBDBDB;
}

/* MUD SELECT Y MUD DATE */
.mud-select-sin-bordes .mud-input.mud-input-underline:before,
.mud-select-sin-bordes .mud-input.mud-input-underline:after,
.mud-select-sin-bordes .mud-input.mud-input-underline:hover:not(.mud-disabled):before,
.mud-date-sin-borde .mud-input.mud-input-underline:before,
.mud-date-sin-borde .mud-input.mud-input-underline:after,
.mud-date-sin-borde .mud-input.mud-input-underline:hover:not(.mud-disabled):before {
    border-bottom-width: 0;
}

.mud-date-sin-margen .mud-input-control.mud-input-input-control {
    margin-top: 0;
}

.mud-date-text-center .mud-input > input.mud-input-root,
.mud-date-text-center div.mud-input-slot.mud-input-root{
    text-align: center;
    padding-left: 31px; /* Tamaño del contenedor del icono del calendario de la derecha */
}

/* TABLA CICLOS */
.scroll-tabla-ciclos .mud-tabs-scroll-button .mud-icon-root.mud-svg-icon {
    fill: white;
}

.checkbox-tabla-ciclos .mud-checkbox {
    justify-content: center;
    margin: 0;
}

.color-slider-tabla-ciclos .mud-tab-slider {
    background-color: transparent;
}

.color-slider-tabla-ciclos .mud-tab.mud-tab-active {
    background-color: rgba(0,0,0,0.2);
}

.border-tabla-ciclos {
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.color-usuarios {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.fondo-naranja{
    background-color: orange;
}

.fondo-amarillo {
    background-color: #ecf532;
}

.fondo-verde {
    background-color: #8be784;
}

.fondo-rojo {
    background-color: #ff8f8f;
}

.h-33{
    height: 33%;
}

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

#TabTablaCiclos div:not(.backgroundGestionHeaders2,.mud-table) {
    height: 100%;
}

#TabTablaCiclos .mud-table {
    width: 100%;
}

#TabTablaCiclos .mud-table-root {
    border-collapse: separate;
}

#TabTablaCiclos .mud-tabs-panels {
    display: flex;
    overflow: hidden;
}

#TabTablaCiclos th{
    position: sticky;
    top: 0;
    background-color: white;
}

#TabTablaCiclos .mud-table-head{
    z-index: 1;
    position: relative;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ocultarTexto .mud-input-slot{
    visibility: hidden;
}

.buttonSubir {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #424242ff;
    color: white;
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 7px 20px;
    border-radius: 4px;
    column-gap: 5px;
}
    .buttonSubir:disabled {
        background-color: #979797;
    }

.archivoContainer {
    background: white;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: #5d5d5d;
    display: flex;
    width: 100%;
}

    .archivoContainer.archivoLightTheme {
        border-color: #5976cb;
    }

        .archivoContainer.archivoLightTheme .archivo {
            color: #5976cb;
        }

        .archivoContainer.archivoLightTheme .archivoDeleteBt {
            color: #5976cb;
            border-color: #5976cb;
        }

.archivo {
    padding: 10px;
    display: flex;
    color: #424242ff;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    width: 100%;
}

.archivoDeleteBt {
    border-style: solid;
    border-width: 0 0 0 1px;
    border-color: #5d5d5d;
    color: #424242ff;
    padding: 10px;
}

.campoTextArea {

    background-color: #E3E3E3;
    margin: 0;
    padding: 6px 6px 6px 6px !important;
}
    .campoTextArea:disabled {
        color: #00000060;
    }