:root {
	--accent: #FAA635;
	--bg-blue: #08687E;
	--bg-red: #B43540;
	--navbar-red: #A51F22;
	
	--main: #162841;
	--secondary: #C4213E;
	--text: #AAAAAA;
}


.color-accent{
	color:var(--accent);
}
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	margin:0;
	padding:0;
	
}
button{
	border:none;
}

@font-face {
	font-family: campton;
	src: url('../fonts/campton/CamptonBook.otf');
}

.bg-transparent{
	background:transparemt
}

.pad-30{
	padding:30px;
}
.pad-l-15{
	padding-left:15px;
}
.pad-t-20{
	padding-top:20px;
}

.login-body{
	margin:0;
	background: var(--bg-red);
}
.center-contents{
	display: grid;
	place-content: center;
	height:100vh;
}
.flex-row{
	display:flex;
	flex-direction:row !important;
}
.title{
	font-size: 25px;
	color: #6D7E82;
}
.flex-column{
	display:flex;
	flex-direction:column;
}
.align-items-center{
	align-items:center;
}
.align-items-end{
	align-items:end;
}
.w-100{
	width:100%;
}
.h-100-vh{
	height:100vh;
}
.h-100{
	height:100%;
}
.h-30{
	height:30%;
}
.spacer-100{
	padding-top:100px;
}
.top-bar{
	background: var(--navbar-red);
	height:77px;
	display:flex;
	justify-content:space-between;
	padding-left:15px;
	padding-right:15px;
	position:fixed;
}
.side-bar{
	background: var(--navbar-red);
	width:77px;
	position:fixed;
	z-index:1;
	padding-top:80px;
}

.navbar-button{
	width:50px;
	height:50px;
	background:transparent;
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:15px
}
.navbar-button:hover{
	border-radius:4px;
	background: var(--bg-blue);
	/*color: var(--navbar-red)*/
}
.navbar-button-label{
	display:none;
}

.side-bar:hover{
	width: 400px;
	
}
.side-bar:hover   .navbar-button{
	width:100%;
	display:flex;
	justify-content:start;
	padding-left:28px;
	
}

.side-bar:hover   .navbar-button .navbar-button-label{
	display:block;
	
}
.dh-logo{
	position:absolute;
	z-index:999999;
	left:18px;
	top:18px;
	height:50px;
}
.table-menu{
	height:70px;
	border-left:solid 1px #6D7E82;
	border-right:solid 1px #6D7E82;
	border-top:solid 1px #6D7E82;
	box-sizing:border-box;
	padding:10px;
}
.body-content{
	padding-left:107px;
	padding-top:107px;
	padding-bottom:107px;
}

.divider-heading{
	border-top: solid 1px #08687E;
	border-left:solid 7px #08687E;
	
	box-sizing:border-box;
	padding-left:30px;
	padding-top:25px;
	color: #6D7E82;
}
.custom-form{
	display:flex;
	flex-direction:column;
	gap:20px;
	color: #6D7E82;
}
.custom-form-sm{
	color: #6D7E82;
}
.txt-red{
	color:red;
}

.btn-realizar{
	height:34px;
	width:100%;
	background: #08687E;
	border-radius:none;
	color:white;
	padding-right:20px;
	padding-left:20px;
}

.custom-form-sm input{
	width: 100%;
	height: 30px;
	background: white;
	border: none;
	border: solid 1px lightgray;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.05);
	border-radius:0px;
	padding-left:15px;
}
.custom-form-sm input:active{
	outline: solid gray 2px;
}

.custom-form-sm input:focus{
	outline: solid gray 2px;
}

.custom-form input{
	width: 100%;
	height: 50px;
	background: white;
	border: none;
	border: solid 1px lightgray;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.05);
	border-radius:0px;
	padding-left:15px;
}
.custom-form-sm select{
	width: 100%;
	height: 34px;
	background: white;
	border: none;
	border: solid 1px lightgray;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.05);
	border-radius:0px;
	padding-left:15px;
}
.custom-form select{
	width: 100%;
	height: 50px;
	background: white;
	border: none;
	border: solid 1px lightgray;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.05);
	border-radius:0px;
	padding-left:15px;
}
.custom-form .button-div{
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:end;
}
.custom-form-sm button{
	height:34px;
	width:auto;
	background: #08687E;
	border-radius:none;
	color:white;
}
.custom-form-sm input[type=submit]{
	height:34px;
	background: #08687E;
	border-radius:none;
	color:white;
	border:none;
}
.custom-form button{
	height:50px;
	padding-left:25px;
	padding-right:25px;
	width:auto;
	background: #08687E;
	border-radius:none;
	color:white;
}
.custom-form input[type=submit]{
	height:50px;
	width:150px;
	background: #08687E;
	border-radius:none;
	color:white;
	border:none;
}
.table-navigation{
	border:solid 1px #6D7E82;
	box-sizing:border-box;
	/*padding:10px;*/
	height:100%;
	width:250px;
	display:flex;
	flex-direction:row;
	justify-content:end
}
.month-div{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	padding-left:10px;
	
}
.next-month-div{
	height:100%;
	aspect-ratio:1 / 1;
	border-left: solid 1px #6D7E82;
	color: #6D7E82;
	background: transparent;
}
.prev-month-div{
	height:100%;
	aspect-ratio:1 / 1;
	color: #6D7E82;
	background: transparent;
}
.prev-month-div:hover{
 background:lightgray;
}
.next-month-div:hover{
 background:lightgray;
}
.calendar{
	border: solid 1px #6D7E82;
}
.calendar table{
	border-collapse: collapse;
}

.calendar tr{
	border-top: solid 1px #6D7E82;
	display:flex;
	
}
.calendar th{
	height: 30px;
	color: white;
	background: #6D7E82;
	border:0px;
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	
}
.calendar td{
	text-align:right;
	padding:10px;
	box-sizing:border-box;
	height: 100px;
	border-right: solid 1px #6D7E82;
	display:flex;
	flex-direction:column;
	gap:20px;
	width:100%;
}
.calendar td .card{
	text-align:center;
	background: #E0E0D1;
	color: #6D7E82;
}

/*
.custom-table{
	border: solid 1px #6D7E82;
}
*/
.custom-table table{
	border-collapse: collapse;
	width:100%
}

.custom-table tr{
	border-top: solid 1px #6D7E82;
	border-right: solid 1px #6D7E82;
	border-left: solid 1px #6D7E82;
	border-bottom:solid 1px #6D7E82;
}
.custom-table th{
	height: 30px;
	color: white;
	background: #6D7E82;
	border:0px;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	color:white;
	
}
.custom-table td{
	text-align:right;
	padding:10px;
	box-sizing:border-box;
	height: auto;
	border-right: solid 1px #6D7E82;
	flex-direction:column;
	gap:20px;
	white-space:nowrap;
	color: #6D7E82;
}
.custom-table td .card{
	text-align:center;
	background: #E0E0D1;
	color: #6D7E82;
}
.gap-15{
	gap:15px;
}
.gap-20{
	gap:20px;
}
.gap-100{
	gap:100px;
}

.pos-absolute{
	position:absolute;	
}

.color-white{
	color:white;
}



.login-container{
	border-radius:5px;
	background: var(--bg-blue)
}

.login-input-container{
	height:57px;
	width:280px;
	border-radius:0.25rem;
	border:none;
}
.text-align-center{
	text-align:center;
}
.login-titulo{
	font-size: 1.5rem;
	font-weight:300;
	text-align:center;
	line-height:1.7rem;
	letter-spacing:3px;
	color:white;
}
.login-input{
	height:57px;
	width:225px;
	border-radius:0 0.25rem 0.25rem 0;
	padding-left:10px;
	border:none;
	-webkit-transition: background-color 3.5;
	transition: background-color 3.5;
	font-size:14px;
	color: #9a9a9a;
	background:white;
	box-sizing:border-box;
}
.login-input:focus, .login-input:hover{
	outline: none;
	background: #EEEEEE
}
.login-input-icon-container{
	height:57px;
	width:57px;
	border-radius: 0.25rem 0 0 0.25rem;
	background:var(--accent)
}
.login-submit-button{
	border:none;
	background: #0C9ABE;
	width:280px;
	height:52px;
	border-radius:0.25rem;
	color:white;
	font-size:14px;
}
.login-submit-button:hover{
	background:#49afc9;
	color: #faa635;
}

.login-password-reset{
	color:white;
	font-weight: bold;
}
.login-password-reset:hover{
	color: #faa635;
}


#buttons{
	margin-top:15px;
	display:flex;
	flex-direction:row;
	gap:3px;

}
#buttons .active{
	width: 30px;
	background: lightgray !important; 
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.05) !important;
}
#buttons input[type=button]{
	height:30px;
	border: solid 1px lightgray;
	background: white;
	border-radius: 3px;
	box-shadow: inset 0 4px 4px 0 rgba(0,0,0,0.05);
}
#buttons input[type=button]:hover{
	height:30px;
	border: solid 1px lightgray;
	background: lightgray;
	border-radius: 3px;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.05);
}

#buttons .pg-number{
	width: 30px;
}