@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");

/* Hoja de estilos para el index */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.navbar-header {
    display:none;
}

/* Custom scroll relacionado con el div de mensajes de comunicacion */
.custom-scroll {
    height: 35vh; 
    overflow-y: auto;
}

.custom-scroll::-webkit-scrollbar {
    border-radius: 20px;
    background-color: white;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #304b58 , #516f7a, #304b58);
    border-radius: 20px;
}
/* FIN */

/* Div donde se pintan los mensajes de comunicacion*/
.mensajes-comu {
    padding: 15px;
    margin-bottom: 0.8%;
    border-radius: 20px;
	text-align: justify;
    width: 100%;
    max-width: 70%;
    float: left;
    clear: both;
}

.col-mayor {
    width: 88%;
}

.col-menor {
    width: 12%;
}
/* FIN */

/* Boton ayuda de las distintas vistas */
#ayuda {
    text-align:right; 
    margin: 1%;
}

/*#main-wrapper {
    padding: 0px 20px 0px 20px;   
}*/

#logo-sum-menu {
    width: 145px;
    height: 70px;
}

.modal-content {
    padding: 0px 20px 0px 20px;  
}

.mobile {
    background-color:transparent;
    margin: 1% 2%;
    float: left;
}

.mobile:hover, .mobile:focus {
    background-color:transparent;
}

.logos-alissta-sum {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.botonmobile {
    font-size: 20px;
}

.header-alissta {
    padding: 0.7%;
    box-shadow: rgb(195, 195, 195) 0px 5px 5px -6px;
}

.logo-index {
    background-image: url('https://www.alissta.gov.co/SUM/Images/imagen-inicio.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: inherit;
}

#sidebar-wrapper {
   height: 100%;
   padding: 0px;
   position: absolute;
   z-index: 9;
   min-width: 300px;
}

#sidebar {
    position: relative;
    height: 100%;
    background-color: #ff7500;
    padding-top: 0px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.footer {
    background-color: #ddd;
    padding: 5px;
    text-align: center;
    color: lightslategray;
    font-size: .7em;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
}

.footer p {
    margin: 0;
}

.logo-empresa img {
    max-height: 60px;
}

/*Otros estilos*/
.titulosorganigrama {
    text-shadow: 2px 1px 2px rgba(255, 117, 0, 0.6);
}

.margin-btn {
    margin-bottom: 9% !important;
}

.error {
    color: red;
    font-weight: normal;
    font-style: oblique;
    font-size: 12px;
}

.delay025 {
    animation-delay: .25s;
}

.delay050 {
    animation-delay: .5s;
}

.delay075 {
    animation-delay: .75s;
}

.delay1 {
    animation-delay: 1s;
}

/* SIDEBAR USER INFO */
.open-close-sidebar {
    position: absolute;
    top: 25px;
    left: 276px;
    z-index: 100;
}

.alissta-user-data {
    overflow: hidden;
    padding: 10px;
    text-transform: uppercase;
    min-height: 70px;
    color: #fff;
}

.info-usuario-nombre {
    font-size: 10px; 
    font-weight: bold;
    margin: 5px 0;
}

.info-usuario-rol {
    font-size: 10px; 
    font-weight: normal;
    margin: 7.5px 0 5px 0;
}



.info-usuario-ult-ingreso {
    font-size: 6.5px;
    font-weight: lighter;
    margin: 5px 0;
}

.user-name {
    font-weight: 600;
    margin-bottom: 2px;
    -webkit-transition: all ease-in-out .15s;
    -o-transition: all ease-in-out .15s; 
    transition: all ease-in-out .15s;
    font-size: 12px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.user-role {
    font-size: 12px;
    margin-bottom: 0;
    text-transform:capitalize;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #7E8A97;
}

.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #fff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    height: 75px;
}

.logout-link {
    color: #fff;
    font-size: 12px;
}

.logout-link:active, .logout-link:focus, .logout-link:hover {
    color: #fff;
    text-decoration: none;
}

#button-menu {
    padding: 11px 16px;
    border-radius: 50px;
    background-color: #FF7500;
    color: #fff;
    transition: all ease-in-out .5s;
    border: 1px solid #fff;
    margin-bottom: 30%;
    font-size: 17px;
    display: block !important;
}

#button-menu:hover {
    display: block; 
    background-image: linear-gradient(to right, #304b58 , #516f7a, #304b58);
}

.icono-cambiar-aplicativo {
    background-image: url(https://www.alissta.gov.co/SUM/Images/iconos/cambio-aplicativo-sum.svg);
    background-position: center;
    background-size: 65px;
    background-repeat: no-repeat;
}

#button-cambio-aplicativo {
    padding: 14px 23px;
    border-radius: 50%;
    border: 1px solid #bbbbbb;
    background-color: #fff;
    transition: all ease-in-out .5s;
    cursor: pointer;
}

.icono-cambio-app-alissta {
    background-image: url(www.alissta.gov.co/SUM/Images/iconos/cambio-aplicativo-sum.svg);
    background-position: center;
    background-size: 40px;
    background-repeat: no-repeat;
}

#btn-cambio-app-alissta {
    padding: 11px 17px;
    border-radius: 50%;
    box-shadow: rgb(149, 166, 177) 7px 7px 15px -5px;
    background-color: #FFF;
    cursor: pointer;
}

/* ESTILOS PARA EL MENU */
.main-menu-item {
    color: #fff;
    padding: 0px 25px;
    display: block;
    text-decoration: none!important;
    border: none;
    background: transparent;
    height: 42px;
}

.menu-item-name {
    display: initial;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main-menu-item:visited, .main-menu-item:hover {
    background-color: #fff !important;
    color: black !important;
    text-decoration: none;
}

.menu {
    margin-top: 10px;
}

.parent-menu {
    margin: 0;
    padding: 0;
}

.parent-menu > li {
    height: 40px;
}

.parent-menu > li a {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.sub-menu {
    margin: 15px;
    list-style: none;
    border-radius: 20px !important;
    display: inline-block;
    cursor: pointer;
}

sub-menu-hijo {
    padding: 0;
    list-style: none;
    width: 100%;
    display: inline-block;
}

.sub-menu-hijo  > li {
    margin-bottom: 3% !important;
    border-radius: 20px !important;
    overflow-y: auto;
}

.sub-menu-hijo > li a {
    width: 100%;
    color: #000;
    padding: 10px 5px;
    text-align: center;
    font-size: 10.5px;
    display: block;
    background-color: lightgrey;
    border-bottom: 1px solid whitesmoke;
    text-decoration: none;
}

.menu-item-icono {
    width: 45px;
    height: 45px;
    display: inline-block;
    background-size: 45px;
    line-height: 45px;
    margin-right: 15px;
}

.main-menu-item:hover > .menu-item-icono,
.main-menu-item:active > .menu-item-icono,
.main-menu-item:focus > .menu-item-icono {
    background-position: center;
}

.submenu-title{
    margin: 0 auto;
    padding: 15px 0;
    background-color: #e6e6e6;
    border-radius: 20px;
    box-shadow: rgb(149, 166, 177) 7px 7px 15px -5px;
}

.submenu-title:hover {
    background-color: #ff7500;
}

.submenu-title h3 {
    color: #000;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 115%;
    font-weight: 400;
    margin-top: 0;
    text-align: center;
}

.sub-menu  > li {
    margin-bottom: 3%;
}

.sub-menu > li a {
    color: #000;
    padding: 12px 10px;
    text-align: center;
    width: 100%;
    font-size: 12px;
    display:block;
    background-color: lightgrey;
}

.sub-menu > li ul li a {
    text-align: left;
    padding-left: 20px !important;
}

.sub-menu-item {
    background-position: left;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 15%;
}

.sub-menu-item:hover, .sub-menu-item:active {
    color: #fff;
}

.icono img {
    width: 35%;
}

.sub-menu li ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-sub-menu {
    display: none;
}

.sub-sub-menu > li:last-child{
    border-bottom:none;
}

/* Estilos especificos para sub sub menus */
.sub-menu-hijo .sub-sub-menu-item a{
    padding: 5px 20px;
    text-decoration: none !important;
    color: #000;
    text-align: justify;
    background-color: #dedede;
    font-size: 10px;
}

.sub-menu-hijo .sub-sub-menu-item a:hover {
    color: #fff;
}
/* Fin */

/* Menus de segundo nivel con menos de 2 hijos */
/*#gestion-granempresa {
    width: 100%;
    position: absolute;
    top: 120%;
}*/



#gestion-actualizacion-empresa {
    width: 100%;
    position: absolute;
    top: 120%;
}

#gestion-activid {
    width: 100%;
    position: absolute;
    top: 120%;
}

#utorizacion-activid {
    width: 100%;
    position: absolute;
    top: 120%;
}


#informe-gest-proveed {
    width: 100%;
    position: absolute;
    top: 120%;
}

#gestion-Envivo {
    width: 100%;
    position: absolute;
    top: 120%;
}

/* Fin */

/* Menus de segundo nivel con 3 hijos  o más*/
#recla-registro-sol {
    width: 100%;
    margin-top: 10%;
}

#Asistencia {
    width: 100%;
    margin-top: 10%;
}

#Certificados {
    width: 100%;
    margin-top: 10%;
}

#parametricas {
    width: 100%;
    margin-top: 10%;
}

#admin-usuarios {
    width: 100%;
    margin-top: 10%;
}

#bigraficos {
    width: 100%;
    margin-top: 10%;
}

#GranP {
    width: 100%;
    margin-top: 10%;
}
#atinvestigaciones {
    width: 100%;
    margin-top: 10%;
}

#plproceso {
    width: 100%;
    margin-top: 10%;
}
#gestion-granempresa {
    width: 100%;
    margin-top: 10%;
}

#gestion-granmipyme {
     width: 100%;
    margin-top: 10%;
}

#prestac-econo {
    width: 100%;
    margin-top: 10%;
}

/* Fin */

/* Estilos para tablas */
thead > tr > td {
    text-transform: uppercase;
    font-weight: bold;
    text-align:center; 
    vertical-align:middle;
}

thead > tr > th {
    font-weight: lighter;
    text-align: center; 
    vertical-align: middle !important;
}

tbody > tr > td {
    font-size: 0.8em;
    vertical-align: middle !important;
}

tbody > tr {
    background-color: white;
    color: #000;
    font-weight: lighter;
}
/* Fin */

/* SECCION MEDIA QUERIES */
/* Media querie para tamaños hasta 414px (iphone's) */
@media screen and (max-width:414px) {
     .logo-alissta-header {
        width: 30% !important;
    }
    .logo-positiva-header {
        width: 40% !important;
    }
    .form-group {
        flex-direction: column;
    }
    .panel-footer-comunicaciones {
        flex-direction: column;
    }
}

/* Media querie para tamaños hasta 320px (celulares) */
@media screen and (max-width:320px) {
     .logo-alissta-header {
        width: 35% !important;
    }
    .logo-positiva-header {
        width: 50% !important;
    }
}

/* Media querie para tamaños desde 768px */
@media screen and (min-width: 768px) {
    .body {
        padding-top: 50px;
        overflow: hidden;
        font-size: 14px !important;
    }

    .img {
        max-width: 100%;
        height: auto;
    }

    .container-index {
        width: 100% !important;
    }

    .navbar-default {
        background-color: #fff !important;
        border-color: #e7e7e7;
        box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.2);
    }

    #wrapper {
        min-height: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        overflow-y: hidden;
    }

    #main-wrapper {
        height: 100%;
        width: 100%;
        overflow-y: hidden;
        padding: 65px 0 23px 0;
        transition: all ease-in-out .5s;
    }

    #main {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 2% 4%;
    }

    #sidebar-wrapper {
        height: 100%;
        position: relative !important;
        min-width: 300px;
        left: 0 !important;
        top: 0 !important;
    }

    #button-menu{ 
        display: none;    
    }

    .sub-menu {
        position: relative;
        min-width: 270px;
        z-index: 23;
    }

    .mobile {
        display: none !important;
    }

    /*Otros estilos*/
    .titulosorganigrama{
         text-shadow: 2px 1px 2px rgba(255, 117, 0, 0.6);
    }
}

@media screen and (max-width: 768px) {
    #sidebar-wrapper {
        left: -330px;
    }
    .logos-alissta-sum {
        margin-left: 25% !important;
    }
    .logo-alissta-header {
        width: 20% !important;
        object-fit: contain;
    }
    .logo-positiva-header {
        width: 30% !important;
        object-fit: contain;
    }
    .sub-menu {
        width: 29%;
    }
    .submenu-title {
        display: block !important;
        margin-bottom: 5%;
        min-inline-size: fit-content;
    }
    .submenu-title h3 {
        font-size: 100% !important;
    }
    .sub-menu-hijo {
        position: initial !important;
    }
}

/*Estilos para los botones en modo flex entre 768px y 900px*/
@media screen and (min-width: 768px) and (max-width: 900px){
    .form-group {
        flex-direction: column;
    }
    .panel-footer-comunicaciones {
        flex-direction: column;
    }
}

/* Media querie para pantallas de maximo 1310px */
@media screen and (max-width: 1366px){
    .mensajes-comu {
        max-width: 70%;
    }
    .col-mayor {
        width: 80%;
    }
    .col-menor {
        width: 20%;
    }
}

/* Media querie para pantallas de maximo 1115px */
@media screen and (max-width: 1115px){
    .mensajes-comu {
        max-width: 80%;
    }
}

/* Media querie para pantallas de maximo 991px */
@media screen and (max-width: 992px) {
    /*Otros estilos*/
    .margin-btn {
        margin-bottom: 0 !important;
    }
}

/* Media querie para alturas de maximo 625px (resoluciones de portatiles de 14') */
@media screen and (max-height: 625px) {
    #logo-sum-menu {
        height: 60px;
    }
    .parent-menu > li {
        height: 38px;
    }
    .menu-item-icono {
        line-height: 42px;
    }
}