﻿body {
    font-family: Arial !important;
}
.contenerdor {
    display: grid;
    place-items: center;
}
colorprincipal {
    --main-bg-color: #2167AE;
}
/*Login*/
.logincard {
    width: 304px;
    height: 400px;
    display: grid;
    place-items: center;
    background-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
}
.textbox {
    width: 264px;
    height: 29px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border-left:4px;
}
.textlogin {
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
}

.btnlogin {
    width: 264px;
    height: 32px;
    background: #2167AE;
    border-radius: 24px;
    color: white;
    font-size: 13px;
    line-height: 15px;
}

/*Botones Ajustes*/
.btnAjustes {
    background: linear-gradient(60.95deg, #2167AE 6.65%, rgba(33, 103, 174, 0.73714) 53.37%, rgba(33, 103, 174, 0) 133.4%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 33px;
    border: none;
    width: 200px;
    height: 200px;
    text-align: center;
}
.txtbtnajustes {
    margin-top: 16%;
   
    font-family: Arial;
    color: white;
    font-size: 18px;
    font-weight: 500;
   
    padding-left:15px;
    padding-right:15px;
}
.imgAjustes {
    margin-top:12%;
    width: 60px;
    height: 60px;
    stroke:blue;  
}
.btnAjustes:hover { 
    border: none;   
    background-color: black;
}
    .btnAjustes:hover .imgAjustes {
        width: 80px;
        height: 80px;
    }
    .btnAjustes:hover .txtbtnajustes {
        font-weight: 500!important;
    }


/*Index Botones accesos directos*/
.btnmenu {
    box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.09);
    border-radius: 10%;
    width: 150px;
    height: 140px;
    display: grid;   
    place-items:center;
    padding:6px;
}
.bordeIco {
    border-radius: 50%;
    background-color: #ECEEEF;
    width: 70px;
    height: 70px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: grid;  
    place-items: center;
}
.imgMenu {    
    width: 30px;
    height: 30px;

}
.quick-access-row {
    justify-content: center;
}

.quick-access-column {
    padding-left: 2.4rem !important;
    padding-right: 2.4rem !important;
}

.txtbtnmenu {
    margin-top: 16%;
    font-family: Arial;
    color: dimgrey;
    font-size: 14px;
    font-weight: 700;   
    padding-left: 5px;
    padding-right: 5px;
}
.subbutton {
    background: #DDE4E3;
    border-radius: 25px;
    font-weight: 400;
    width: 120px;
    height: 20px;
    margin-top: 3px;
    font-size: 12px;
    text-align: center;
    color: #2167AE;
}
#btnmenuhover:hover {
    background-color: #91BFE3;
    border: 3px solid #ECEEEF;
    place-items: start;
    transition: background-color 0.5s ease-in;
}

    #btnmenuhover:hover #bordemenuhover {
        background-color: transparent;
        width: 24px;
        height: 24px;
        place-items: start;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
        position: absolute;
    }
    #btnmenuhover:hover #imgmenuhover {
        height: 20px;
        width: 20px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        transition: 1.5s ease-in-out;
        -webkit-transition: 0.5s ease-in-out;
    }
    #btnmenuhover:hover #txtmenuhover {
        padding: 0px 0px 0px 24px;
        margin: 0px 0px 0px 0px;
       
        transition: 1.5s ease-in-out;
        -webkit-transition: 0.5s ease-in-out;
    }
#subbutones {
    width:100%;
    display:none;
    
}
#btnmenuhover:hover #subbutones {
    display:grid;
    place-content:center;
    /*display: inline;*/
    transition: display 1.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
}
.subbutton:hover {
    background-color: #2167AE;
    color: white;
}

/*Index Carta de Solicitudes*/
.Avatar {
    background: #6D6BCF;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: grid;
    text-align: center;
    place-items: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.imgAvatar {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 14px;
    height: 14px;
}
.txtcard {
    font-family: Arial;
    font-size: 14px;
    font-weight: 100;
    margin-top: 5%;
    color: #2167AE;
    text-decoration: none;
    line-height: 24px;
    font-style: normal;
}



h3 {
    text-decoration: none;
}
.Titulo {
    color: #2167AE;
    font-family: Arial;
    font-size:20px;
    padding-top:5px;
}
.Titulo2 {
    color: white;
    font-family: Arial;
    font-size: 20px;
    padding-top: 5px;
}
.imgTitulo {
    color: #2167AE;
    height:24px;
    width:24px;
}
.copyright {
    font-weight: 600;
    font-size: 8px;
    line-height: 10px;
}
.piedepaglogin {
    font-weight: 400;
    font-size: 8px;
    line-height: 10px;
}

.tbodytext {
    padding-top: 15px;
    margin-top:15px;
    text-align: center;
    font-size: 10px;
    color:gray;
}
.theadtext {
    text-align: center;
    border-bottom: inset;
    font-size: 12px;
}

/*Index Carrusel*/
.tituloCarrusel {
   /* font-style: italic;*/
   padding-top:10px;
   padding-bottom:10px;
    font-family:Arial;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}
.btnCarrusel {
   min-width: 200px;
    height: 40px;
    background: #FF7569;
    border-radius: 50px;
    font-size: 1.0em;
    color: #FFFFFF;
}
.textbtnCarrusel {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 35px;
}
.parrafoCarrusel{
    color:#ffffff;
    font-size:11px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 16px;
    
}
/*Btn GUARDAR CREAR MODIFICAR*/
.btn-primary {
    font-family: Arial;
    font-size: 14px;
    width: 160px;
    height: 30px;
    border-radius: 50px;
    padding: 0px 0px 0px 0px;
}
.btn-modificar {
    width: 160px;
    height: 30px;
    border-radius: 50px;
    padding: 0px 0px 0px 0px;
    background-color: #19BAB6;
}
/*Btn Exportar*/
.btn-exportar {

    width: 160px;
    height: 30px;
    border-radius: 50px;
    padding: 0px 0px 0px 0px;
    background-color: #77A984;
    
}
.btn-rechazar {
    width: 160px;
    height: 30px;
    border-radius: 50px;
    padding: 0px 0px 0px 0px;
    background-color: #FF7569;
}
.btn-descarga {
    width: 160px;
    height: 30px;
    border-radius: 50px;
    padding: 0px 0px 0px 0px;
}
/*Btn VOLVER CANCELAR*/
.btn-volver {
    width: 160px;
    height: 30px;
    border-radius: 50px;
    padding: 0px 0px 0px 0px;
    background-color: #8C8484;
}
.txtbotonesinterfaz {
    font-family: Arial;
    font-size: 14px;
    color: white;
    padding: 0px 0px 0px 0px;
}
.imagenbtn {
    color: white;
    width: 18px;
    height: 18px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}


.txt14{
    font-family:Arial;
    font-size:14px;
    font-weight:600 !important;
}
.txt12 {
    font-family:Arial;
    font-size: 12px;
    color:gray;
    height:30px;
    padding-top:0px;
    padding-bottom:0px;
}
.clprimario {
    color: #2167AE;
    height:24px;
    width:20px;
}
.txtSwitch {
    color: #2167AE;
    font-family:Arial;
    font-size:16px;
}

/*Btn INPUTFILE*/
.btnfile {
    background-color: #6D6BCF;
    color: white;
}
.cerrarsesion:hover {
    font-weight: 600;
    box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.25);
}

/*Btn TAB SOLICITUDES*/
.mud-tab.mud-tab-active {
    filter: brightness(0) saturate(100%) invert(34%) sepia(32%) saturate(2119%) hue-rotate(180deg) brightness(91%) contrast(89%);
}
.IcoAppPerfil {
    background-image: url("../Resource/IcoSolicitudes/AppPerfil.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(51%) sepia(9%) saturate(176%) hue-rotate(314deg) brightness(101%) contrast(90%);
}
.AppPerfil {
    direction: rtl;
    justify-content: end;
}
    .AppPerfil:before {
        text-decoration:none!important;
        display: inline-block;
        content: "Aplicaciones\A con Perfil";
        white-space: pre-line;
        justify-content: end;
        font-size: 14px;
        width:100%;
        color: #8C8484;
    }

.IcoAppSoftware {
    background-image: url("../Resource/IcoSolicitudes/AppSoftware.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(51%) sepia(9%) saturate(176%) hue-rotate(314deg) brightness(101%) contrast(90%);
}
.AppSoftware {
    direction: rtl;
    justify-content: end;
}

    .AppSoftware:before {
        text-decoration: none !important;
        display: inline-block;
        content: "Aplicaciones\A sin Perfil";
        white-space: pre-line;
        justify-content: end;
        font-size: 14px;
        width: 100%;
        color: #8C8484;
    }
.IcoAppAcceso {
    background-image: url("../Resource/IcoSolicitudes/AppAcceso.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(51%) sepia(9%) saturate(176%) hue-rotate(314deg) brightness(101%) contrast(90%);
}
.AppAcceso {
    direction: rtl;
    justify-content: end;
}

    .AppAcceso:before {
        text-decoration: none !important;
        display: inline-block;
        content: "Aplicaciones\A de Acceso";
        white-space: pre-line;
        justify-content: end;
        font-size: 14px;
        width: 100%;
        color: #8C8484;
    }
.IcoEquipamiento {
    background-image: url("../Resource/IcoSolicitudes/monitor-mobbile.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(51%) sepia(9%) saturate(176%) hue-rotate(314deg) brightness(101%) contrast(90%);
}
.Equipos {
    direction: rtl;
    justify-content: end;
}

    .Equipos:before {
        text-decoration: none !important;
        display: inline-block;
        content: "Equipos";
        white-space: pre-line;
        justify-content: end;
        font-size: 14px;
        width: 100%;
        color: #8C8484;
    }
.ColorPrimario {
    color: #2167AE;
}



.mensaje {
    text-decoration: none;
    display:none;
    position: absolute;
    background-color: gray;
    color: white;
    font-size: 12px;
    padding: 4px;
    text-align: center;
    left: -120px;
    top: -12px;
    transform: translate(0, 10px);
    width: 110px;
    opacity:0.6;
    
}
    .mensaje:before {
        position: absolute;
        z-index: 2;
        content: "";
        right: calc(0% - 15px);
        top: 5px;
        border-style: solid;
        border-width: 8px;
        border-color: transparent transparent transparent gray;
        transition-duration: 0.3s;
        transition-property: transform;
    }
.msjhover:hover .mensaje
{
    display:inline;
}


.mensajeapp{
    text-decoration: none;
  display: none;
    position: absolute;
    background-color: gray;
    color: white;
    font-size: 12px;
    padding: 4px;
    text-align: center;
    left: -120px;
    top: -12px;
    transform: translate(0, 10px);
    width: 110px;
   z-index:2;
   
}

    .mensaje:before {
        position: absolute;
        z-index: 2;
        content: "";
        right: calc(0% - 15px);
        top: 5px;
        border-style: solid;
        border-width: 8px;
        border-color: transparent transparent transparent gray;
        transition-duration: 0.3s;
        transition-property: transform;
    }

.mud-tab.mud-tab-hover:hover .mensajeapp {
    background-color: red;
    display: inline
}

.icotabs {
    font-size: 60px;
    color: #2167AE;
 
    margin:4px;
    padding:0px;

}
:root {
    --mud-palette-black: #272c34ff;
    --mud-palette-white: #ffffffff;
    --mud-palette-primary: #2167AE !important;
    --mud-palette-text-primary: #2167AE !important;
}
.mud-picker-toolbar{
    height:0px !important;

}
.mud-picker-content{
    justify-content:start;
    min-height:290px;
}
.mud-picker-calendar-content {
    height: 200px;
}
.mud-button-date{
    display:none;
}
.mud-button-year{
    display:none;
}
.alturaPagina {
    min-height: 600px;
    width: 100%;
}
.mud-picker-calendar-header-switch {
    padding: 0px !important;
    margin: 0px;
}
.mud-picker-calendar-transition{
    margin:0px;
}
    /*


.popover__content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: -35px;
    transform: translate(0, 10px);
    background-color: #bfbfbf;
    padding: 0px 0px 0px 0px;
    margin: 1px 1px 1px 1px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    min-width: 200px;
}

    .popover__content:before {
        
        position: absolute;
        z-index: -1;
        content: "";
        right: calc(90% - 10px);
        left: -8px;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #bfbfbf transparent;
        transition-duration: 0.3s;
        transition-property: transform;
    }

.popover_wrapper:hover .popover_content {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transform: translate(0, -20px);
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.popover__message {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
}*/
#ItilNumber {
    height: 40px !important;
    border: 3px solid gray !important;
}

.iti {
    box-sizing:border-box;
    margin-top:13px;
    height: 40px !important;
    width:100%!important;
   /* border: 1px solid gray !important;*/
    border-radius:5px;
    /*background-color: red;*/
    display:grid;
    place-content:center;
}
    .iti input {
        /*background-color:red;*/
        display: flex;
        height: 100%;
        width: 100% !important;
        border: 1px solid gray !important;
        border-radius: 5px;
    }
/*.iti--allow-dropdown {
    height: 40px !important;
    border: 3px solid gray !important;
    background-color: red;
    display:;
}*/
.mud-input-control {
    text-decoration: none !important;
    margin-top: 0px;
}
.mud-button-label {
    text-decoration: none !important;
}
.mud-input-control-input-container {
    text-decoration: none !important;
}
.mud-file-upload {
    text-decoration: none !important;
}
/*.mud-chip-text.mud-chip-color-success {
    color: black;
    background-color: var(--mud-palette-success-hover);
}

.mud-chip-filled.mud-chip-color-success {
    color: white !important;
    background-color: var(--mud-palette-success);
}

.mud-chip-text.mud-chip-color-error {
    color: grey;
    background-color: var(--mud-palette-Error-hover);
}

.mud-chip-filled.mud-chip-color-error {
    color: white !important;
    background-color: red;
}*/
.mud-panel-expanded .mud-expand-panel-header {
    color: white;
    background-color: #2167AE;
    padding-bottom: 8px;
    padding-top: 8px;
    border-radius: 5px 5px 0px 0px;
    margin-bottom:8px;
}
.mud-picker-calendar .mud-day.mud-range.mud-range-between {
    border-radius: 0;
    background-color: #2167AE;
    color: white;
}
.Badgebtn {
    color: white;
    background-color: #2167AE;
    border-radius: 100%;
    position: absolute;
    font-size:8px;
    width: 36px;
    height: 36px;
    border-color: white;
    border: 3px solid;   
   display: none;
   place-content:center;
    text-align:center;
}

#editimg:hover .Badgebtn {
   display:grid;
   
}

.matrices-hidden {
    display: none !important;
}

.hide-carousel {
    display: none !important;
}

.hidden-alert {
    display: none !important;
}

.select-466 {
    width: 466px !important;
    max-width: 466px;
    flex: 0 0 466px;
    box-sizing: border-box;
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0;
}

.select-466.mud-input-margin-dense {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.select-466 .mud-input-root {
    width: 100%;
    min-height: 40px;
    height: 40px;
}

.select-466 .mud-input-slot,
.select-466 .mud-input-slot input,
.select-466 .mud-input-adornment {
    height: 40px;
    line-height: 40px;
}

.appbar-nav {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.appbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.nav-button {
    text-transform: none !important;
    font-size: 12px;
    color: #ffffff !important;
    font-family: Arial, sans-serif;
    padding: 6px 12px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 220px;
    min-width: 220px;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.nav-button:hover {
    transform: scale(1.08);
    background-color: rgba(255, 255, 255, 0.28);
}

.appbar-nav .mud-menu {
    display: flex;
    align-items: center;
}

.appbar-nav .mud-menu .mud-button-root {
    margin: 0;
}

.dashboard-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dashboard-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.card-total {
    font-weight: 600;
    text-align: center;
}

.appbar-logo {
    max-height: 48px;
    width: auto;
}
