:root{
    --width: 200px;
    --padding: 5px;
    --bgcolor: rgb(78, 78, 78);
    /*--bgcolor: rgb(99, 188, 247);*/
    --hovercolor: rgb(46, 128, 250);
    --width-collapsed: 50px;
    --margen-izquierdo: 20px;
    --margen-derecho: 20px;
}
body{
    background-color: #fbfbfc;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 0;
    margin: 0;
    margin-left: var(--width-collapsed);
    
}
.body-expanded{
    margin-left: var(--width);
}
#main-container{
    /*color: white;*/
    height:900px;
    margin-left: var(--margen-izquierdo);
    margin-right: var(--margen-derecho);
    margin-top: var(--margen-derecho);
}
/*#main-container button{
    background-color: rgb(58, 151, 97);
    width: 50px;
    height: 30px;
    padding: 0 0 0 0;
    font-size: 14px;
    border-color: rgb(58, 151, 97);
    background-color: rgb(120, 160, 248);
}*/
#sidemenu{
    background-color: var(--bgcolor);
    color: white;
    position: fixed;
    height: 100%;
    left: 0;
    top:0;
}
#sidemenu a{
    color: white;
    text-decoration: none;
}
/*
    header
*/
#sidemenu #header{
    box-sizing: border-box;
    border-bottom: solid 1px var(--hovercolor);
    border-color: #fbfbfc;
}
#sidemenu #header #title{
    box-sizing: border-box;
    overflow: hidden;
}
#sidemenu #header #title, #sidemenu #header #menu-btn{
    vertical-align: middle;
}
#sidemenu #header #menu-btn{
    display: inline-block;
}
#sidemenu #header #menu-btn{
    cursor: pointer;
    padding: 10px;
    width: var(--width-collapsed);
    box-sizing: border-box;
}
#sidemenu #header #menu-btn:hover{
    background-color: var(--hovercolor);
}
#sidemenu #header #menu-btn .btn-hamburger{
    background-color: #fff;
    width: 100%;
    height: 2px;
    margin: 5px 0;
}
/*
    profile
*/
#sidemenu #profile{
    border-bottom: solid 1px var(--hovercolor);
    padding: var(--padding) 0;
    text-align: center;
    border-color: #fbfbfc;
}
#sidemenu #profile #photo{
    box-sizing: border-box;
    padding: var(--padding);
    margin: 0 auto;
}
#sidemenu #profile #photo img{
    border-radius: 50%;
    width: 40%;
}
#sidemenu #profile #photo,#sidemenu #profile #name{
    font-size: 14px;
    padding: 5px 0;
    overflow: hidden;
}

/*
ITEM
*/
#sidemenu #menu-items{
    overflow: hidden;
}
#sidemenu #menu-items .item{
    width: var(--width);
}
#sidemenu #menu-items .item .icon{
    display: inline-block;
}
#sidemenu #menu-items .item .icon,#sidemenu #menu-items .item .title{
    font-size: 14px;
    vertical-align: middle;
    overflow: hidden;
    display: inline-block;
    
}
#sidemenu #menu-items .item a{
    display: block;
}
#sidemenu #menu-items .item a:hover{
    background-color: var(--hovercolor);
    
}
#sidemenu #menu-items .item .icon{
    box-sizing: border-box;
    padding: var(--padding);
    width: var(--width-collapsed);
}
#sidemenu #menu-items .item .icon img{
    width: 100%;
}
#sidemenu #menu-items .item .title{
    padding: var(--padding) 0;
}
#sidemenu #menu-items .item.separator{
    height: 1px;
    border-color: #fbfbfc;
    border-bottom: solid 1px /*var(--hovercolor)*/ ;
    margin: 0px 0;
}
.menu-expanded{
    width: var(--width);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.menu-expanded #header #title{
    display: inline-block;
    width: calc(100% - 50px);
    margin-right: -5px;
    padding: var(--padding);
}
.menu-expanded #header #title span{
    width: calc(var(--width) - var(--width-collapsed) - 5px);
    overflow: hidden;
    /*display: inline-block;*/
}
.menu-expanded #profile #photo{
    width: 200px;
}
.menu-expanded #profile #name{
    width: 100%;
}
.menu-collapsed{
    width: var(--width-collapsed);
}
.menu-collapsed #header #title{
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}
.menu-collapsed #profile #name{
    display: none;
}
.menu-collapsed.item{
    width: 100px;
}
/*
.optionsBar{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: right;
    align-items: right;
    background-color: var(--bgcolor);
    color: #fbfbfc;
}*/
header{
    background-color:var(--bgcolor);
    color: white;
    text-align: center;
    padding: 10px;
    height: 46px;
}
footer {
    background-color:var(--bgcolor);
    color: white;
    text-align: center;
    padding: 10px;
    height: 42px;
}

/*****/

#menu {
	background: #0099CC;
	color: #FFF;
	height: 45px;
	padding-left: 18px;
	border-radius: 10px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 5px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: #0099CC;
	background: #F2F2F2;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 280px;
	background: #20D1F5;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 12px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #F2F2F2;
	color: #444444;
}
table{
	border-collapse:collapse;
	font-size: 9pt;
	font-family: 'arial';
}
table th{
	text-align: left;
	padding: 9px;
	background: #f1f1f1;
	
}
table tr:nth-child(odd){
	background:#fff;
}
table td{
	padding: 5px;
}

.unidad table{

	border-collapse:collapse;
	font-size: 9pt;
	font-family: 'arial';
	width: 50%;
}
.unidad table th{
	text-align: left;
	padding: 9px;
	background: #f1f1f1;
	
}
.unidad table tr:nth-child(odd){
	background:#fff;
}
.unidad table td{
	
	padding: 5px;
	
}

.paginador ul{
	padding:5px;
	list-style: none;
	background: #ededed;
	margin-top: 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: flex-end;
}

.paginador a{
	color: #428bca;
	border: 1px solid #ddd;
	padding: 5px;
	display: inline-block;
	font-size: 14px;
	text-align: center;
	width: 35px;
}

.pageSelected{
	color: #428bca;
	border: 1px solid #ddd;
	padding: 5px;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	width: 35px;
}

.paginador a:hover{
	background: #ddd;
}

.pageSelected{
	color: #fff;
	background: #428bca;
	border: 1px solid #428bca;
}

.link_edit{
	color: #0ca4ce;
	font-size:16px;
}

.link_download{
	color: #08d41d;
	font-size:16px;
}

.link_delete{
	color: #f26b6b;
	font-size:16px;
}

.optionsBar{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.optionsBar span {
    color: #FFF;
    font-size: 11pt;
    font-family: 'GothamBook';
    text-transform: uppercase;
    margin-left: 30px;
}
.photouser {
    margin-left: 30px;
    width: 25px;
    height: 25px;
}
.close{
	width: 25px;
    height: 25px;
}
.optionsBar a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin-left: 30px;
}



/****/


.btn-primary{
    color:#fff;
    background-color:#337ab7;
    border-color:#2e6da4;
}
.btn-primary.focus,.btn-primary:focus{
    color:#fff;
    background-color:#286090;
    border-color:#122b40;
}
.btn-primary:hover{
    color:#fff;
    background-color:#286090;
    border-color:#204d74;
}
.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{
    color:#fff;
    background-color:#286090;
    border-color:#204d74;
}
.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{
    color:#fff;
    background-color:#204d74;
    border-color:#122b40;
}
.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{
    background-image:none;
}
.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{
    background-color:#337ab7;
    border-color:#2e6da4
}
.btn-primary .badge{
    color:#337ab7;
    background-color:#fff
}
.btn-success{
    color:#fff;
    background-color:#5cb85c;
    border-color:#4cae4c
}
.btn-success.focus,.btn-success:focus{
    color:#fff;
    background-color:#449d44;
    border-color:#255625
}
.btn-success:hover{
    color:#fff;
    background-color:#449d44;
    border-color:#398439
}
.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{
    color:#fff;
    background-color:#449d44;
    border-color:#398439
}
.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{
    color:#fff;background-color:#398439;border-color:#255625
}
.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{
    background-image:none
}
.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{
    background-color:#5cb85c;
    border-color:#4cae4c
}
.btn-success .badge{
    color:#5cb85c;
    background-color:#fff
}
.btn-info{
    color:#fff;
    background-color:#5bc0de;
    border-color:#46b8da
}
.btn-info.focus,.btn-info:focus{
    color:#fff;
    background-color:#31b0d5;
    border-color:#1b6d85
}
.btn-info:hover{
    color:#fff;
    background-color:#31b0d5;
    border-color:#269abc
}
.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{
    color:#fff;
    background-color:#31b0d5;
    border-color:#269abc
}
.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{
    color:#fff;
    background-color:#269abc;
    border-color:#1b6d85
}
.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{
    background-image:none
}
.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{
    background-color:#5bc0de;
    border-color:#46b8da
}
.btn-info .badge{
    color:#5bc0de;
    background-color:#fff
}
.btn-warning{
    color:#fff;
    background-color:#f0ad4e;
    border-color:#eea236
}
.btn-warning.focus,.btn-warning:focus{
    color:#fff;
    background-color:#ec971f;
    border-color:#985f0d
}
.btn-warning:hover{
    color:#fff;
    background-color:#ec971f;
    border-color:#d58512
}
.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{
    color:#fff;
    background-color:#ec971f;
    border-color:#d58512
}
.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{
    color:#fff;
    background-color:#d58512;
    border-color:#985f0d
}
.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{
    background-image:none
}
.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{
    background-color:#f0ad4e;
    border-color:#eea236
}
.btn-warning .badge{
    color:#f0ad4e;
    background-color:#fff
}
.btn-danger{
    color:#fff;
    background-color:#d9534f;
    border-color:#d43f3a
}
.btn-danger.focus,.btn-danger:focus{
    color:#fff;
    background-color:#c9302c;
    border-color:#761c19
}
.btn-danger:hover{
    color:#fff;
    background-color:#c9302c;
    border-color:#ac2925
}
.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{
    color:#fff;
    background-color:#c9302c;
    border-color:#ac2925
}
.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{
    color:#fff;
    background-color:#ac2925;
    border-color:#761c19
}
.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{
    background-image:none
}
.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{
    background-color:#d9534f;
    border-color:#d43f3a
}
.btn-danger .badge{
    color:#d9534f;
    background-color:#fff
}
.btn-link{
    font-weight:400;
    color:#337ab7;
    border-radius:0
}
.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{
    background-color:transparent;
    -webkit-box-shadow:none;
    box-shadow:none
}
.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{
    border-color:transparent
}
.btn-link:focus,.btn-link:hover{
    color:#23527c;
    text-decoration:underline;
    background-color:transparent
}
.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{
    color:#777;
    text-decoration:none
}
.btn-group-lg>.btn,.btn-lg{
    padding:10px 16px;
    font-size:18px;
    line-height:1.3333333;
    border-radius:6px
}
.btn-group-sm>.btn,.btn-sm{
    padding:5px 10px;
    font-size:12px;
    line-height:1.5;
    border-radius:3px
}
.btn-group-xs>.btn,.btn-xs{
    padding:1px 5px;
    font-size:12px;
    line-height:1.5;
    border-radius:3px}
.btn-block{
    display:block;
    width:100%
}
.btn-block+.btn-block{
    margin-top:5px
}
input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{
    width:100%
}

.scrollable-div {
    width: calc(100% - 20px); /* Set your desired width */
    height: calc(80% - 40px); /* Set your desired height */
    overflow-y: scroll; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add border for visualization */
    /*padding: 10px; /* Optional: Add padding for content */
}
.left {
    padding-left: 10px;
    padding-top: 10px;
    margin-left: 10px;
    float: left;
    position: auto;
    width: auto;
/*    border: steelblue solid 1px;*/
    height: auto;
}

.right {
    padding-top: 10px;
    padding-left: 10px;
    margin-left: 5px;
    position: relative;
    float: left;
    width: auto;
    /*border: steelblue solid 1px;*/
    height: auto;
}
select{
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

label.reporte{
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1em;
}


.tab {
    display: none;
}

.tab-button {
    padding: 10px;
    cursor: pointer;
    display: inline-block;
}

.tab-button.active {
    background-color: #ddd;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/***tabla scrollable *****/
        .table-container {
            width: 80%;
            max-height: 700px; /* Ajusta esta altura según sea necesario */
            overflow-y: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            /*border: 1px solid black;*/
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
            position: sticky;
            top: 0;
            z-index: 1; /* Asegura que el encabezado se superponga a las celdas de datos */
        }
        .table-container tr:nth-child(odd){
            background:#eaf0f7;
        }
        /*th:first-child, td:first-child {
            width: 60%;
        }

        th:nth-child(2), td:nth-child(2),
        th:nth-child(3), td:nth-child(3),
        th:nth-child(4), td:nth-child(4),
        th:nth-child(5), td:nth-child(5) {
            width: 10%;
        }*/
/*** fin tabla scrollable *****/

.scrollable-tbody {
    display: block;
    max-height: 300px; /* Ajusta según el diseño */
    overflow-y: auto;
}

.scrollable-tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table thead,
.table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

