/* Content */
.block{
    padding: 10px;
    border-radius: 4px;
    background: #fff;
    border:3px solid transparent;
}
.block.block-border{
    border:3px solid #F8F9FA;
}

/** formulario de cliente fijo**/
.fixed-form {
    position:fixed;
    top:0;
    right:0;
    transform: translateX(100%);
    width:50%;
    min-width:300px;
    height:100%;
    background: #1c7430;
}
.fixed-form.appear {
    transform: translateX(0);
    transition: transform 0.2s ease-in;
}
.fixed-layer-background {
    position:fixed;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
}

/*Globo de notificación del número de elementos pendientes*/
.badge-danger {
    position: absolute;
    bottom: 20px;
    margin-left: 1px;
}

/*Esta clase es una alternativa a la clase/pseudoclase btn-outline-secondary:focus de bootstrap.
Con ella quitamos la sobra que pone por defecto en los botones y pintamos su background.
*/
.remove-default-shadow:focus, .remove-default-shadow.focus {
    box-shadow: 0 0 0 0.0rem  rgb(255, 255, 255);
    background-color: #CED4DA;
    color: #212529
}

/* modificación datePicker para que ocupe col-12 y el icono del calendario quede cuadrado*/
.react-datepicker-wrapper{
    margin-left: 35px !important;
    width: -webkit-fill-available !important;
}

.react-datepicker-wrapper-modals{
    z-index: 1 !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    margin-left: 4px !important;
    width: -webkit-fill-available !important;
}
.style-calendar-div-input-datepicker{
    position: absolute;
    height: 37.5px;
    z-index: 0;
}
.datepicker-order-form {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/* clases para tener el el icono calendar en el datepicker del formulario de edición de la WO*/
.aux-datepicker-div{
    position: absolute;
    width: 38px;
    height: 38px;
    z-index: 0;
    border: solid 1px #ced4da;
    background-color: #fff;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.aux-datepicker-icon{
    font-size: 1rem;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.react-datepicker__close-icon::after {
    background-color: #495057;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


.customClass {
    display: flex;
    align-items: center;
    transition: 0.5s;
}


.customClass-input {
    background-color: #fff!important;
    color: #576267!important;
    height: 50px!important;;
    display: flex!important;;
    align-items: center!important;;
    border: none!important;;
    font-size: 12px!important;
}

.customClass-input:focus {
    border: none!important;
    box-shadow: none!important;
}

.customClass:hover {
    border-radius: 5px;
    width: 100%;
    background-color: #EDEDED;
}

.customClass:nth-child(3) {
    animation-delay: 0ms;
    animation-duration: 250ms;
    pointer-events: all;
}

.mt-tenant-selector  {
    margin-top: 19px!important;
}

/*Globos notificaciones*/

.badge {
    font-size: 70% !important;
}

.position-badges {
    position: absolute;
    top: -2.5px;
    right: -12px;
}

/*datepicker con hora*/
.react-datepicker {
    display: flex !important;
}
.react-datepicker__month {
    margin: 0!important;
}

/*clase para dar estilos a la celda A:1 dell calendario*/
.table-header-schedulebytechnical {
    height: 25px;
    display: flex;
    align-items: center;
}

/*clase para dar estilo a nuestro componente de tooltips*/
.customReactTooltip {
    border-radius: 4px;
    opacity: 1!important;
}

.gql-errors-main-css {
    z-index: 1000!important;
    right: 5px;
    width: 99% !important;
}

@media (min-width: 992px) {
    .style-calendar-div-input-datepicker{
        height: 38px!important;
    }
}

@media (max-width: 1180px) {
    .form-control{
        //width: auto!important;
    }
}

/*Modal de preventivas*/
.clientPreventModal {
    margin-top: 0!important;
    padding-top: 0.9rem!important;
    padding-bottom: 0.9rem!important;
    display: flex!important;
    align-items: center!important;
    border: none!important;
}

.flexible-modal-drag-area {
    background-color: transparent!important;
}

.wo-buttons {
    width: 78px!important;
}

.duration {
    width: 78px!important;
}

.wo-technical-name {
    width: 260px!important;
}

@media (max-width: 1024px) {
    .scheduledTime {
        width: 78px!important;
    }

    .wo-width-date {
        width: 140px!important;
    }

    .wo-matched {
        width: 135px!important;
    }
}

@media (min-width: 1024px) {
    .modal-push {
        max-width: none!important;
    }

    .ReactModal__Content {
        width: 900px!important;
    }

    .ReactModal__Content.right-to-left {
        max-width: none!important;
    }

    .wo-width-date {
        width: 220px!important;
    }

    .modal-push .wo-date-lock-icon {
        margin-left: 34px!important;
        margin-bottom: 8px!important;
    }

    .wo-matched {
        width: 132px!important;
    }

    table .react-datepicker__input-container {
        width: 168px!important;
    }
}

/*botón refresh Calendario*/
.c-spinner-rotate:hover {
    background-position: 0 0!important;
}

.c-spinner-rotate:focus {
    outline: none!important;
}

/*Componente snackbar*/
.MuiSnackbarContent-root {
    display: flex!important;
    justify-content: center!important;
    background-color: #3E3E3E!important;
    width: 100%!important;
}

/*Planificación cliente*/
.width-text-edit-client {
    width: 149px!important;
    margin-top: 2.5rem!important;
}

.height-text-edit-client {
    height: 68px!important;
}


/*página de error 404*/
.error404 {
    height: 100%;
    background-color: #eee;
    background-image: url(../img/error404-desktop.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.error404 div h3 {
    background-color: #BC212C;
    width: fit-content;
    border-radius: 4px;
    margin: 70px auto auto auto;
}

.error404 div h3 a {
    top: 0!important;
    color: #fff!important;
    padding: 10px 15px!important;
}

.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive {
    width: 25px!important;
    height: 41px!important;
    margin-top: -42px!important;
    margin-left: -17px!important;
}