@import url("paleta-color.css");

body {
    font-family: 'Poppins', sans-serif;
    background: var(--c-scale-10);
    color: var(--c-scale-90);
    &.content-acceso{
        
        min-height: 100vh;
    }
}
body.content-acceso{
    background-image: url(../Content/images/banner-facturacion.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.hide,
.after-none:after,
.before-none:after {
	display: none !important;
}
@media (max-width:819px){
    .hide-mobile,
    .collapse-hide-mobile{
        display: none !important;
    }
    .collapse-show-mobile{
        display: block !important;
    }
}
@media (min-width:820px){
    .hide-desktop,
    .collapse-hide-desktop{
        display: none !important;
    }
    .width-responsive-no-desktop{
        width: fit-content;
    }
    .collapse-show-desktop{
        display: block !important;
    }
}

.margin-0,
p,h1,h2,h3,h4,h5,h6{
    margin: 0;
}

p {
    
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.text-l{
    text-align: left;
    .control-label{
        text-align: left;
    }
}
.margin-t-10{
    margin-top: 10px;
}
.margin-b-10{
    margin-bottom: 10px;
}
.margin-b-20{
    margin-bottom: 20px;
}

.w-50{
    width: 50%;
}
.w-100{
    width: 100%;
}
.h-50{
    height: 50%;
}
.h-100{
    height: 100%;
}
.border-left{
    border-left: 1px solid var(--c-scale-20);
}

@media (min-width:820px){
    .border-left-desktop{
        border-left: 1px solid var(--c-scale-20);
    }
    .border-left-padding-desk{
        border-left: 1px solid var(--c-scale-20);
        padding-left: 20px;
    }
}

button{
    background: transparent;
    border: none;
    outline: none;
    &:focus,
    &:active{
        outline: none !important;
        box-shadow: none !important;
    }
}
.hide,
.hiden{
    display: none;
}

.validationError-pastel{
    background: var(--c-red-10);
    color: var(--c-red);
    padding: 10px;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
    height: fit-content;
    ul{
        margin-bottom: 0;
    }
}
  
/*
    =============
    SVG ICONS
*/
.icons-svg{
	/*font-size: 1.5em;*/
    stroke-width: 7%;
    /*max-width: 47rem;*/
	
	.bs-icon{
		display: inline-block;
		fill: none;
		margin: 0.2em;
		font-size: 1em;
		width: 1em;
        height: 1em;
		stroke: currentColor;
		stroke-width: inherit;
		stroke-linecap: inherit;
		stroke-linejoin: inherit;
		overflow: visible;
	}
}

/*=============
    SVG ICONS */
.icons-svg{
	/*font-size: 1.5em;*/
    stroke-width: 7%;
    /*max-width: 47rem;*/
	
	.bs-icon{
		display: inline-block;
		fill: none;
		margin: 0.2em;
		font-size: 1em;
		width: 1em;
		stroke: currentColor;
		stroke-width: inherit;
		stroke-linecap: inherit;
		stroke-linejoin: inherit;
		overflow: visible;
	}
}

/* ===== Flex Box ======*/
.flex-r,
.flex-_c,
.flex-_c-r,
.flex-c-_r,
.flex-_c-_r,
.flex-c,
.flex-r-c,
.flex-c-r,
.flex-_r,
.flex-_r-c{
    display: flex;
}
.flex-r{
    flex-direction: row;
}
.flex-_c,
.flex-_c-r{
    flex-direction: column-reverse;
}
.flex-_c,
.flex-_c-_r{
    flex-direction: column-reverse;
}
.flex-_r,
.flex-c-_r,
.flex-_r-c{
    flex-direction: row-reverse;
}
.flex-c,
.flex-c-r{
    flex-direction: column;
}
.flex-r-c{
    flex-direction: row;
}
@media (min-width: 820px){
    .flex-c-r,
    .flex-_c-r{
        flex-direction: row;
    }
    .flex-_c-_r,
    .flex-c-_r{
        flex-direction: row-reverse;
    }
    .flex-r-c,
    .flex-_r-c{
        flex-direction: column;
    }
    .flex-r-desktop{
        display: flex;
    }
}
.jc-b,
.jc-b-l,
.jc-b-r{
    justify-content: space-between;
}
.jc-c-r,
.jc-c{
    justify-content: center;
}
.jc-r,
.jc-r-c{
    justify-content: flex-end;
}
.jc-l-r{
    justify-content: left;
}
@media (min-width:820px){
    .jc-b-r,
    .jc-l-r,
    .jc-c-r{
        justify-content: right;
    }
    .jc-b-l{
        justify-content: flex-start;
    }
    .jc-r-c{
        justify-content: center;
    }
}
.as-c{
    align-self: center;
}
.as-r{
    align-self: flex-end;
}
.ai-c,
.ai-c-r{
    align-items: center;
}
.ai-r{
    align-items: flex-end;
}
.ai-l{
    align-items: flex-start;
}
.ai-c-l{
    align-items: center;
}
.ai-l-c{
    align-items: left;
}
.ai-l-r{
    align-items: flex-start;
}
@media (min-width: 820px){
	.ai-c-l{
        align-items: left;
    }
    .ai-l-c{
        align-items: center;
    }
    .ai-l-r,
    .ai-c-r{
        align-items: flex-end;
    }
}
.gap-5-20,
.gap-5{
    gap:5px;
}
.gap-10,
.gap-10-5,
.gap-10-15,
.gap-10-20,
.gap-10-40,
.gap-10-0{
    gap:10px;
}
.gap-15{
    gap:15px;
}
.gap-20,
.gap-20-0,
.gap-20-5,
.gap-20-40{
    gap:20px;
}
.gap-25{
    gap:25px;
}
.gap-30-40,
.gap-10-30,
.gap-30-20,
.gap-30{
    gap:30px;
}
.gap-40,
.gap-40-20{
    gap: 40px;
}
@media (min-width: 820px){
    .gap-10-0,
    .gap-20-0{
        gap: 0px;
    }
    .gap-10-5,
    .gap-20-5{
        gap: 5px;
    }
    .gap-10-15{
        gap: 15px;
    }
    .gap-5-20,
    .gap-10-20,
    .gap-30-20,
    .gap-40-20{
        gap:20px;
    }
    .gap-10-30{
        gap:30px;
    }
    .gap-30-40,
    .gap-20-40,
    .gap-10-40{
        gap: 40px;
    }
}
.wrap,
.wrap-m{
    flex-wrap: wrap;
}
.nowrap{
    flex-wrap: nowrap;
}
@media (min-width:820px){
    .wrap-d{
        flex-wrap: wrap;
    }
    .wrap-m{
        flex-wrap: nowrap;
    }
}
/*===== Fin - Flex Box =====*/

/*===== Grid ======*/
.d-grid{
    display: grid;
}
.cl-2,
.cl-2-3,
.cl-2-4,
.cl-2-5{
    grid-template-columns: repeat(2, 1fr);
}
.cl-3,
.cl-3-2,
.cl-3-3,
.cl-3-4,
.cl-3-5{
    grid-template-columns: repeat(3, 1fr);
}
.cl-4,
.cl-4-5,
.cl-4-2{
    grid-template-columns: repeat(4, 1fr);
}
.cl-5{
    grid-template-columns: repeat(5, 1fr);
}
.cl-6{
    grid-template-columns: repeat(6, 1fr);
}
.cl-7{
    grid-template-columns: repeat(7, 1fr);
}
@media (min-width: 1025px) {
    .cl-4-5,
    .cl-2-5,
    .cl-3-5{
        grid-template-columns: repeat(5, 1fr);
    }
    .cl-4-2,
    .cl-3-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .cl-2-3,
    .cl-3-3{
        grid-template-columns: repeat(3, 1fr);
    }
    .cl-2-4,
    .cl-3-4{
        grid-template-columns: repeat(4, 1fr);
    }
}

.cl-auto-3{
    grid-template-columns: auto 1fr 1fr 1fr;
}
.cl-auto-4{
    grid-template-columns: auto 1fr 1fr 1fr 1fr;
}
.cl-auto-3-auto{
    grid-template-columns: auto 1fr 1fr 1fr auto;
}
.cl-3-auto{
    grid-template-columns: 1fr 1fr 1fr auto;
}
.cl-4-auto{
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
}
.cl-2-auto-1{
    grid-template-columns: 1fr 1fr auto 1fr;
}
.cl-1-auto-1{
    grid-template-columns: 1fr auto 1fr;
}

.span-2{
    grid-column: span 2;
}
.span-3{
    grid-column: span 3;
}
.span-4{
    grid-column: span 4;
}
.span-5{
    grid-column: span 5;
}
.c3_span{
    grid-column: 3;
}
.c4_span{
    grid-column: 4;
}
.c5_span{
    grid-column: 5;
}
.c6_span{
    grid-column: 6;
}
.c5_span-3{
    grid-column: 5 / span 3;
}
.cl-4-location {
    grid-column: 4 / 4;
}
.cl-3-location {
    grid-column: 3 / 5;
}

@media (min-width:601px) and (max-width:991px){
    .m-span-2 {
        grid-column: span 2;
    }
    .m-span-3 {
        grid-column: span 3;
    }
    .m-span-4 {
        grid-column: span 4;
    }
    .m-span-5 {
        grid-column: span 5;
    }
}
@media (max-width:819px){
    .s-span-2{
        grid-column: span 2;
    }
    .s-span-3{
        grid-column: span 3;
    }
    .s-span-4{
        grid-column: span 4;
    }
    .s-span-5{
        grid-column: span 5;
    }
    .s-span-6{
        grid-column: span 6;
    }

}

/*===== Fin - Grid =======*/


/*===== Flex/Gid =====*/
.flex-c__grid,
.flex-r__grid,
.flex-_c__grid{
    display: flex;
}
.flex-c__grid{
    flex-direction: column;
}
.flex-_c__grid{
    flex-direction: column-reverse;
}
.flex-r__grid{
    flex-direction: row;
}
.grid__flex-r{
    display: grid;
}
@media (min-width: 820px){
	.flex-c__grid,
    .flex-r__grid,
    .flex-_c__grid
    {
        display: grid;
    }
    .grid__flex-r{
        display: flex;
        flex-direction: row;
    }
}

/*===== Fin - Flex/Grid ======*/

/*
==========
Botones
*/
.btn-link, .btn-link a{
    text-decoration: underline;
}
.btn{
    border: none;
    font-size:  var(--kendo-font-size);
    width: fit-content;
}
.btn-primary{
    background: var(--c-primary);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-primary-60);
    }
}
.btn-secondary{
    background: var(--c-scale-40);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-scale-50);
        color: var(--c-blanco);
    }
}
.btn-light{
    color: var(--c-scale-90);
    &:hover{
        background: var(--c-scale-20);
    }
}
.btn-yellow{
    background: var(--c-yellow);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-yellow-hover);
        color: var(--c-blanco);
    }
}
.btn-cyan{
    background: var(--c-cyan);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-cyan-hover);
        color: var(--c-blanco);
    }
}
.btn-orange{
    background: var(--c-orange);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-orange-hover);
        color: var(--c-blanco);
    }
}
.btn-green{
    background: var(--c-green);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-green-hover);
        color: var(--c-blanco);
    }
}
.btn-pink{
    background: var(--c-pink);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-pink-hover);
        color: var(--c-blanco);
    }
}
.btn-red{
    background: var(--c-red);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-red-hover);
        color: var(--c-blanco);
    }
}
.btn-scale-10{
    background: var(--c-scale-10);
    color: var(--c-scale-90);
    &:hover{
        background: var(--c-scale-20);
    }
}
.btn-scale-20{
    background: var(--c-scale-20);
    color: var(--c-scale-90);
    &:hover{
        background: var(--c-scale-30);
    }
}
.btn-scale-30{
    background: var(--c-scale-30);
    color: var(--c-scale-90);
    &:hover{
        background: var(--c-scale-40);
    }
}
.btn-scale-40{
    background: var(--c-scale-40);
    color: var(--c-scale-90);
    &:hover{
        background: var(--c-scale-50);
    }
}
.btn-scale-50{
    background: var(--c-scale-50);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-scale-60);
    }
}
.btn-scale-60{
    background: var(--c-scale-60);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-scale-70);
    }
}
.btn-scale-70{
    background: var(--c-scale-70);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-scale-80);
    }
}
.btn-scale-80{
    background: var(--c-scale-80);
    color: var(--c-blanco);
    &:hover{
        background: var(--c-scale-90);
    }
}
.btn-primary-pastel{
    background: var(--c-primary-10);
    color: var(--c-primary-60);
    border: 1px solid var(--c-primary-30);
    &:hover{
        background: var(--c-primary-20);
        color: var(--c-primary-60);
    }
}
.btn-secondary-pastel{
    background: var(--c-scale-20);
    color: var(--c-scale-60);
    border: 1px solid var(--c-scale-20);
    &:hover{
        background: var(--c-scale-20);
    }
}
.btn-yellow-pastel{
    background: var(--c-yellow-10);
    color: var(--c-yellow);
    border: 1px solid;
    &:hover{
        background: var(--c-yellow-20);
        color: var(--c-yellow);
    }
}
.btn-cyan-pastel{
    background: var(--c-cyan-10);
    color: var(--c-cyan-hover) !important;
    border: 1px solid;
    &:hover{
        background: var(--c-cyan-20);
        color: var(--c-cyan-hover);
    }
}
.btn-orange-pastel{
    background: var(--c-orange-10);
    color: var(--c-orange);
    border: 1px solid;
    border: 1px solid;
    &:hover{
        background: var(--c-orange-20);
        color: var(--c-orange);
    }
}
.btn-green-pastel{
    background: var(--c-green-10);
    color: var(--c-green) !important;
    border: 1px solid;
    &:hover{
        background: var(--c-green-20);
        color: var(--c-green);
    }
}
.btn-pink-pastel{
    background: var(--c-pink-10);
    color: var(--c-pink);
    border: 1px solid;
    &:hover{
        background: var(--c-pink-20);
        color: var(--c-pink);
    }
}
.btn-red-pastel{
    background: var(--c-red-10);
    color: var(--c-red);
    border: 1px solid;
    &:hover{
        background: var(--c-red-20);
        color: var(--c-red);
    }
}
.btn-default{
    color: var(--c-scale-80);
    background: transparent;
    &:hover{
        background: var(--c-scale-20);
    }
}

.btn-success{
    background: var(--c-green);
    border-color: transparent;
    &:hover{
        background: var(--c-green-hover);
    }
}
.panel-title{
    .btn-sm{
        padding: 5px 12px !important;
    }
    .btn-md{
        padding: 7px 15px !important;
        font-size: 1.1rem;
    }
    .btn-lg{
        padding: 12px 22px !important;
        font-size: 1.3rem;
    }
}

/* Badge */
.ct-badge-r,
.ct-badge{
    padding: 5px 15px;
    border-radius: 7px;
    font-size: 14px;
	height: fit-content;
	width: fit-content;
	border: none;
}
.ct-badge-r{
    border-radius: 50px;
    /*&:hover{
        color: var(--c-blanco);
    }*/
}
.ct-badge-a{
    border-radius: 50px 50px 50px 0;
    line-height: 1.5;
}
.badge-blue{
    background: var(--c-primary-10);
    color: var(--c-primary);
}
.badge-blue-hover{
    background: var(--c-primary-20);
    color: var(--c-primary);
}
.badge-cyan{
    background: var(--c-secondary-10);
    color: var(--c-secondary);
}
.badge-green{
    background: var(--c-green-10);
    color: var(--c-green);
}
.badge-action{
    background: var(--c-action-20);
    color: var(--c-action);
}
.badge-red{
    background: var(--c-red-10);
    color: var(--c-red);
}
.badge-pink{
    background: var(--c-action-20);
    color: var(--c-action);
}
.badge-yellow{
    background: var(--c-yellow-10);
    color: var(--c-yellow);
}
.badge-orange{
    background: var(--c-orange-10);
    color: var(--c-orange);
}
.badge-violet,
.badge-purple{
    background: var(--c-violet-10);
    color: var(--c-violet);
}
.badge-default{
    background: var(--c-scale-20);
    color: var(--c-scale-80);
}
.badge-black-0 {
    background: var(--c-scale-0-trans);
    color: var(--c-scale-80);
}
.badge-black {
    background: var(--c-scale-80);
    color: var(--c-scale-10);
}
.badge-blue-bg{
    background: var(--c-primary);
    color: var(--c-blanco);
}
.badge-red-bg{
    background: var(--c-red);
    color: var(--c-blanco);
}
.badge-pink-bg,
.badge-action-bg{
    background: var(--c-action);
    color: var(--c-blanco);
}
.badge-orange-bg{
    background: var(--c-orange);
    color: var(--c-blanco);
}
.badge-yellow-bg{
    background: var(--c-yellow);
    color: var(--c-blanco);
}
.badge-cyan-bg{
    background: var(--c-secondary);
    color: var(--c-blanco);
}
.badge-violet-bg{
    background: var(--c-violet);
    color: var(--c-blanco);
}
.badge-blanco-bg{
    background: var(--c-blanco-transparent);
    color: var(--c-blanco) !important;
}


/* Color */
.c-primary{
    color: var(--c-primary);
}
.c-orange{
    color: var(--c-orange);
}
.c-blue{
    color: var(--c-primary-60);
}

.k-table-tbody{
    .k-table-td button{
        padding: 2px;
        font-size: 1.4rem;
    }
}

/* Nav Top */
.main-header{
    .item-sesionLink{
        display: none;
    }
}
.navbar{
    padding: 10px;
    border: none;
    background: var(--c-scale-20);
    margin-bottom: 0;
    border-radius: 0;
}
.main-body {
    padding: 15px 20px;
    flex-grow: 1;
}
@media (min-width: 820px) {
    body:not(.sidebar-open) .main-header,
    body:not(.sidebar-open) .main-body,
    body:not(.sidebar-open) .main-footer {
        margin-left: 80px;
        transition: margin-left 0.3s ease-in-out;
    }
}
@media (min-width:820px) {
    .sidebar-mini.sidebar-open .main-header,
    .sidebar-mini.sidebar-open .main-body,
    .sidebar-mini.sidebar-open .main-footer {
        margin-left: 250px;
        transition: margin-left 0.3s ease-in-out;
    }
}
#page-home-index,
#page-home-about,
#page-home-contact{
    .main-body {
        padding: 0;
        .breadcrumb{
            display: none;
        }
    }
    .main-footer{
        display: none;
    }
}
#page-home-index{
    .action{
        background: var(--c-scale-100);
    }
}
.sidebar-mini{
    min-height: 100vh;
}
body:not(.sidebar-open){
    .main-sidebar {
        max-width: 80px;
        min-width: 80px;
        margin-left: -170px;
        transition: margin-left 0.3s ease-in-out;
        .sidebar-header{
            picture img{
                &.logo-ct{
                    display: none;
                }
                &.isotipo-ct{
                    display: block;
                }
            }
        }
        .nav>li>a{
            justify-content: center;
        }
    }
    @media (min-width:820px){
        .main-sidebar {
            margin-left: 0px;
            transition: 0.3s ease-in-out;
        
            .nav>li>a{
                margin: auto;
                width: 75%;
                border-radius: 10px;
                span,
                .i-chevron-bottom{
                    display: none;
                    transition: 0.3s ease-in-out;
                }
                
            }
            .menu-sider-list li a{
                
                span{
                    display: none;
                    transition: 0.3s ease-in-out;
                }
                &:active,
                &:focus,
                &:hover{
                    span{
                        display: block;
                        transition: 0.3s ease-in-out;
                    }
                }
            } 

            &:active,
            &:focus,
            &:hover{
                max-width: 250px;
                min-width: 250px;
                margin-left: 0px;
                transition: 0.3s ease-in-out;
                & .sidebar-header {
                    & picture img {
                        &.logo-ct {
                            display: block;
                        }
                        &.isotipo-ct {
                            display: none;
                        }
                    }
                }
                .nav>li>a{
                    justify-content: space-between;
                    width: 100%;
                    border-radius: 0px;
                    span,
                    .i-chevron-bottom{
                        display: block;
                        transition: 0.3s ease-in-out;
                    }
                    
                }
                .btn-home{
                    justify-content: flex-start !important;
                }
                .menu-sider-list li a span{
                    display: block;
                    transition: 0.3s ease-in-out;
                }
                .btn-sider-list:has(+ .list-menu .action) {
                    width: 100%;
                    border-radius: 0px;
                }
            }

            .btn-sider-list:has(+ .list-menu .action) {
                margin: auto;
                width: 75%;
                border-radius: 10px;
            }
        }
    }
} 
body.sidebar-open .main-sidebar{
    .sidebar-header{
        picture img{
            &.logo-ct{
                display: block;
            }
            &.isotipo-ct{
                display: none;
            }
        }
    }
}
body.sidebar-mini .main-sidebar .dropdown .menu-sider-list {
    display: none;
}
body.sidebar-open .main-sidebar:hover .dropdown .menu-sider-list,
body.sidebar-open .main-sidebar .dropdown .menu-sider-list,
body.sidebar-mini .main-sidebar:hover .dropdown .menu-sider-list {
    display: block !important;
}


/* Logo */
.isotipo-ct{
    max-width: 40px;
    cursor: pointer;
}
.logo-ct-s,
.logo-ct-m,
.logo-ct{
    max-width: 100px;
    margin: auto;
    cursor: pointer;
}

.logo-ct-s{
    max-width: 50px;
}

/* Menu Sidebar */
.sidebar-open{
    .main-sidebar{
        max-width: 250px;
        min-width: 250px;
        margin-left: 0px;
        transition: all 0.3s;
    }
}
.carousel, .item, .active{
    height: 100%;
}


.main-sidebar {
    width: 100%;
    background: var(--c-scale-300);
    color: var(--c-blanco);
    box-shadow: 0px 0 10px var(--c-scale-100);
    
    .sidebar-header {
        padding: 20px;
        background: var(--c-scale-300);
        display: block;
    }
    
    .nav>li>a:focus, .nav>li>a:hover{
        background: var(--c-scale-100);
    }
    ul li{
        list-style: none;
    }
    .nav>li>a{
        cursor: pointer;
        padding: 15px 20px;
        display: flex;
        font-size: 13px;
    }
    .menu-sider-list{
        padding: 10px;
        li{
            &:hover{
                background: var(--c-scale-80);
            }
            a{
                padding: 10px 20px;
                cursor: pointer;
                width: 100%;
                display: block;
                font-size: 13px;

                &.action {
                    background: var(--c-scale-100);
                    border-radius: 3px;
                }
            }
        }
    }
    .components{
        overflow: auto;
        height: 100%;
        
    }
    .btn-sider-list{
        svg.icon-rotate{
            transform: rotate(0deg);
            transition: transform .3s ease;
        }
        &.active-list{
            background: var(--c-scale-80);
        }
        &:has(+ .list-menu .action) {
            background: var(--c-scale-100);
        }
    }
    .btn-sider-list:has(+ .list-menu.collapse:not(.in)){
        svg.icon-rotate{
            transform: rotate(90deg);
            transition: transform .3s ease;
        }
    }
    .list-menu .menu-sider-list{
        border-bottom: 1px solid var(--c-scale-70);
    }

    .cont-accessibility{
        form,ul,li,a{
            width: 100%;
            margin: 0;
        }

        .item-nameUser{
            display: none;
        }
    }
    /* barra de desplazamiento */
    ::-webkit-scrollbar {
        width: 11px;
        height: 11px;
    }
    
    /* fondo de la barra */
    ::-webkit-scrollbar-track {
        background: var(--c-scale-40);
        border-radius: 10px;
    }
    
    /* thumb (la parte que se desplaza) */
    ::-webkit-scrollbar-thumb {
        background: var(--c-scale-70);
        border-radius: 10px;
    }
    
    /* Cambiar el color al pasar el mouse por el thumb */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--c-scale-90);
    }
  

}

.wrapper {
    
    align-items: stretch;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1100;
    min-height: 100vh;
}

.breadcrumb{
    font-size: 12px;
    margin: 0;
    padding: 0;
    background: transparent;
}
.btn-home{
    display: flex !important;
}
.divider{
    height: 1px;
    width: 100%;
    background: var(--c-scale-80);
    padding: 0 !important;
}


@media (max-width: 819px) {
    
    /* Adjust the dropdown links padding*/
    #sidebar.active ul ul a {
        padding: 10px !important;
    }

    /* Changing the arrow position to bottom center position, translateX(50%) works with right: 50% to accurately center the arrow */
    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
}

#sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1037;
}
@media (max-width: 819px) {
    .sidebar-open #sidebar-overlay {
        display: block;
    }
}

/* table kendo */
.k-grid-content.k-auto-scrollable {
    height: auto !important;
    min-height: 200px;
}
.k-toolbar .k-input, .k-toolbar .k-picker {
    width: 12em;
}

/* footer */
.footer{
    width: auto;
    padding: 20px;
    position: static;
    left: 0;
    background-color: var(--c-scale-20);
    color: var(--c-scale-80);
}

/* Page Home */
.main-home{
    .header-home{
        position: relative;
        img{
            width: 100%;
            height: calc(100vh - 70px);
            object-fit: cover;
        }
        .content-banner{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 30px;
            color: var(--c-blanco);
            .title-home{
                flex-grow: 1;
                padding: 10px 20px;
                position: relative;
                &::before{
                    content: "";
                    width: 7px;
                    height: 100px;
                    background: var(--c-orange);
                    position: absolute;
                    top: 0;
                    left: 0px;
                    margin: auto;
                    bottom: 0;
                    @media (min-width:820px){
                        height: 126px;
                    }
                }
                p{color: var(--c-blanco);}
                h2 {font-size: 3rem;font-weight: 800;}
                h3 {font-size: 2.3rem;font-weight: 700;}
                @media (min-width:820px){
                    h2 {font-size: 4rem;font-weight: 800;}
                    h3 {font-size: 3.3rem;font-weight: 700;}
                }
            }
            .content-items-home{
                @media (min-width:820px){
                    .item-footer {width: 80%;}
                }
                h5{
                    font-size: 1.5rem;
                    padding-bottom: 4px;
                    position: relative;
                    &:before {
                        content: "";
                        width: 30px;
                        height: 2px;
                        position: absolute;
                        background: var(--c-orange);
                        bottom: -2px;
                    }
                }
                p{color: var(--c-blanco);font-size: 1.2rem;}
                svg{font-size: 3rem;stroke-width: 1px;}
            }
        }
    }
}

/* layout Acceso */
.main-acceso{
    width: fit-content;
    margin: 0 auto;
    min-height: 100vh;
    @media (max-width:600px){
        min-width: 90%;
        .panel{
            width: 100%;
        }
    }
    .panel{
        min-width: 300px;
        padding: 20px;
        .panel-header{
            img{max-width: 140px;}
        }
        .panel-body{
            padding: 0;
        }
    }
    .input-group-accs input{
        margin: 0;
    }
    .input-group-addon{
        width: fit-content;
    }
    .btn{
        width: 100%;
    }
}


/* page about*/
.main-about,
.main-contact{
    .title-home{
        padding: 0;

        &::before{
            display: none;
        }
        h2{
            padding-bottom: 10px;
            position: relative;
            &:before{
                content: "";
                width: 30px;
                height: 2px;
                background: var(--c-orange);
                position: absolute;
                bottom: 0px;
                left: 0;
            }
        }
        p{
            font-size: 1.2rem;
            width: 90%;
            @media (min-width:820px){
                width: 40%;
            }
        }
    }

    .body-contact{
        width: 100%;
        @media (min-width:820px){
            width: 30%;
        }
        .item-contact{
            padding: 20px;
            background: #5f5a8c5c;
            color: var(--c-blanco);
            border-radius: 15px;
            transition: all .3s ease-in-out;
            p{width: 100%;}
            svg{
                font-size: 25px;
            }

            &:hover{
                background: #5f5a8c8b;
                transition: all .3s ease-in-out;
            }
        }
    }
}

/* Page Denegado */
.main-denegado{
    padding: 20px;
    background: var(--c-red-10);
    border-radius: 5px;
    img{
        width: 60px;
    }
    h3{
        color: var(--c-red);
        max-width: 120px;
        text-wrap: wrap;
        font-size: 20px;
        font-weight: bold;
    }
}


.panel-footer{
    font-size: var(--kendo-font-size);
}

/* Authenticator Google & pasos - Inicio Session */
.main-Authenticator{
    background: var(--c-blanco);
    padding: 20px;
    .img-col{
        width: 80%;
        height: 100%;
    }
    .header-title{
        h2{
            color: var(--c-primary-60);
            font-weight: bold;
            @media (min-width:820px){
                font-size: 2.5em;
            }
        }
    }
    .body-aut{
        font-size: 13px;
        flex-grow: 1;
        h4{
            font-size: 13px;
        }
    }
}
.main-code-verify{
    .img-col{
        width: 60%;
        height: 100%;
    }
    .content-verify{
        height: 100%;
    }
    .footer-verify{
        svg{
            font-size: 20px;
        }
        p{font-size: 13px;}
    }
}
.line-h-10 {
    width: 2px;
    height: 200px;
    background: var(--c-scale-20);
    margin: auto;
}

.main-recuperar-pass {
    .img-col {
        width: 34%;
        height: 100%;
    }
}