:root {
  --primary: 	#C4213E;
  --secondary: 	#AFBAD0;
  --accent: 	#162742;
  --background: #FAFAFA;
  --on_primary: #FAFAFA;
  --success: 	#00BC35;
  --warn: 		#CAB600;
  --error: 		#BC0000;
  --info: 		#009ABC;
  
}
body{
	display:flex;
	flex-direction: row;
	background-color: var(--background);
	margin: 0;
}
#sidebar {
  height: 100vh;
  background: var(--primary);
}

#sidebar .user-card{
	display: flex;
	flex-direction:column;
	background: #A81831;
	padding: 11px;
	color: var(--on_primary)
}

#sidebar header {
  font-size: 20px;
  line-height: 52px;
  text-align: center;
  margin: 11px;
}

#sidebar header a {
  color: #fff;
  display: block;
  text-decoration: none;
}

#sidebar header a:hover {
  color: #fff;
}

#sidebar .nav{
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
	scrollbar-color: var(--secondary) var(--main);
	scrollbar-width: thin;
  
}

#sidebar .nav-ns{
	display: flex;
	flex-direction: column;
	gap: 20px;  
}

#sidebar .nav a{
	height: 70px;
	display:flex;
	flex-direction: row;
	align-items: center;
	color: var(--on_primary);
	font-size: 15pt;
	margin-left:20px;
	overflow-y: auto;
	
}

#sidebar .nav a:hover{
  background: var(--on_primary);
  color: var(--primary);
  
}

#sidebar .nav a i{
  margin-right: 20px;
  font-size: 25px;
}

.end-session{
	position: fixed;
	bottom:15px;
}

content{
	width:100%;
	height:100vh;
	overflow-x:auto;
	overflow-y:auto;
	padding:75px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:30px;
}
content form{
	display:flex;
	flex-direction:column;
	height:100%;
}
body{
	font-family: 'Montserrat', sans-serif;
	font-weight: 100;
}
.body-login{
	background: rgb(194,33,62);
	background: linear-gradient(97deg, rgba(194,33,62,1) 0%, rgba(142,5,29,1) 100%);
	margin: auto;
	height:100vh;
	display: grid;
	place-content: center;
	color: var(--text);
	font-family: 'Montserrat', sans-serif;
	font-weight: 100;
}
.login-container{
	background-color: var(--background);
	display:flex;
	flex-direction:row;
	box-shadow: 0px 5px 84px 0px #4A0000;
}
.home-banner{
	height:auto;
	background: var(--accent);
	position:relative;
}
.login-form{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap: 30px;
	margin: 0 61px;
	
}
.login-form-group{
	width: 370px;
	height:25pt;
	display:flex;
	justify-content:center;
}
.login-form-control{
	width: 370px;
	height:25pt;
	border:0;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-bottom: solid 3px var(--primary);
	background: transparent;
	font-size: 15pt;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	padding-left:15px;
}
.login-form-control:focus{
	outline: 2px solid var(--primary);
	
}
.login-form-control[type=number]{
	-moz-appearance: textfield;
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.round-button{
	font-size: 15pt;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	background: var(--primary);
	color: var(--on_primary);
	padding: 16px 50px;
	border:0;
	border-radius: 50px;
}
.my-form{
	display:flex;
	flex-direction:column;
	gap:30px;
}

.my-form input{
	border:0;
	height:40pt;
	background: #F0F0F0;
}



.card .my-form input{
	border:0;
	height:40pt;
	background: #FAFAFA;
}

.my-form input[type=checkbox]{
	
	border:0;
	height:auto;
	background: #F0F0F0;
}

.my-form input[type=submit]{
	border:0;
	height:53px;
	min-width:200px;
	width:100%;
	font-size:15pt;
	color: var(--on_primary);
	background: var(--primary);
}
.my-form button{
	border:0;
	height:53px;
	min-width:200px;
	font-size:15pt;
	color: var(--on_primary);
	background: var(--primary);
}

.my-form select{
	border:0;
	height:53px;
	width:-moz-available;
	background: #F0F0F0;
	
}
.card .my-form select{
	border:0;
	height:53px;
	background: #FAFAFA;
}
.my-form textarea{
	border:0;
	height:53px;
	background: #F0F0F0;
}
.card .my-form textarea{
	border:0;
	height:53px;
	background: #FAFAFA;
}
.center{
	display:flex;
	justify-content:center;
	float:center;
}
.form-control:focus{
	box-shadow:none;
	border: gray solid 2px;
}
.title-bar{
	background: #E9EEF6;
	min-height: 50px;
	display:flex;
	align-items:center;
	font-size: 15pt;
}
input[type="file"] {
    display: none;
}
.custom-file-upload {
    display: inline-block;
    padding: 6px 30px;
    cursor: pointer;
    background: var(--accent);
    color:white;
	margin:0;
    width: max-content;
    display:flex;
    align-items:center;

}
.file-back{
  height:53px;
  background: red;
  display:flex;
  flex-direction:row;
  background:#F0F0F0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  border-radius: 4px;
}
.card .file-back{
  height:53px;
  display:flex;
  flex-direction:row;
  background:#FAFAFA;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  border-radius: 4px;
}
.file-text{
  width:-moz-available;
  
  display:flex;
  align-items:center;
  padding-left:12px;
}
.table-title{
	background:var(--primary);
	color: var(--on_primary);
	font-size:20pt;
}
.table-head{
	background:var(--primary);
	color: var(--on_primary);
}
.table-row{
	border:none;
}
.table-row th{
	font-weight: inherit;
	border:none;
}
.table-body{
	font-size:10pt;
}

.filter-button{
	height:40px;
	color: var(--primary);
	background: var(--on_primary);
	font-size:15pt;
	padding: 0px 50px;
	border:none;
}
.my-form .filter-input{
	height:40px;
	color: #808080;
	background: var(--on_primary);
	font-size:15pt;
	border:none;
	padding-left:15px;
	width:-moz-available;
	border-radius:4px;
}
.my-form  .filter-button{
	height:40px;
	color: #808080;
	background: var(--on_primary);
	font-size:15pt;
	border:none;
	padding-left:15px;
	width:-moz-available;
	border-radius:4px;
}
.table-filter{
	background: var(--primary);
	padding:10px;
	font-size:15pt;
	border-bottom: solid 2px #B90F2E;
}
.flex-row{
	display:flex;
	flex-direction:row;
}
.flex-column{
	display:flex;
	flex-direction:column;
}
.flex-row-reverse{
	display:flex;
	flex-direction:row-reverse;
}
.flex-spread{
	display:flex;
	justify-content:space-between;
}

.card{
	background: #E9EEF6;
	padding:40px 30px;
}
.card .title{
	font-size:14pt;
}

.col-gap{
	display:flex;
	flex-direction:column;
	gap: 20px;
}


tbody tr:nth-child(odd){
	background:#E9EEF6;
}
tbody tr:nth-child(odd):hover{
	background:#DAE2F1;
}
tbody tr:hover{
	background:#DAE2F1;
}
.spacer{
	display:block;
	height:70px;
}
.badge{
	height:30px;
	display:flex;
	align-items:center;
	gap: 10px;
	width: min-content;
	border-radius:30px;
	background:transparent;
}
.badge-dot{
	width:15px;
	height:15px;
	border-radius:20px;
}
.badge-valid{
	color:#40C057;
	!background:#EBFBEE;
	!border:1px solid #40C057;
}
.badge-invalid{
	color:#FA5252;
	!background:#FFF5F5;
	!border:1px solid #FA5252;
}
.badge-pending{
	color:#228BE6;
	!background:#E7F5FF;
	!border:1px solid #228BE6;
}
.badge-valid .badge-dot{
	background:#40C057;
}
.badge-invalid .badge-dot{
	background:#FA5252;
}
.badge-pending .badge-dot{
	background:#228BE6;
}
.cel-center{
	align-items:center;
}
.icon-button{
	background:transparent;
	font-size:15pt;
	width:auto;
	height:auto;
	border:none;
}
.hidden-button {
  color:transparent;
}

/* Mostrar o botão quando a linha estiver em hover */
tr:hover .hidden-button {
  color:var(--accent);
}
.color-accent{
	color:var(--accent);
}
.color-on-primary{
	color: var(--on_primary);
}
.row-gap{
	display:flex;
	gap:20px;
}
.col-center{
	display:flex;
	justify-content:center;
}

.c-toast{
	background:white;
	position:absolute;
	z-index:99999;
	right:20px;
	top:20px;
	display:flex;
	flex-direction:row;
	padding:35px;
	border-radius:4px;
	box-shadow: 0px 5px 20px 0px #4A0000;
	gap: 30px;
}
.toast-divider{
	width:1px;
	background:gray;
}
.toast-icon{
	display: grid;
	place-content: center;
	font-size: 30pt;
	color: var(--error);
}
.toast-text{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.toast-title{
	font-size:16pt;
	font-weight:bold;
}
.toast-message{
	font-size:15px;
	color: #808080;
}
.toast-close{
	position:absolute;	
	right: 10px;
	top: 10px;
	color:#808080;
	font-size:12pt;
}
.form-body{
	height:100vh;
}
.top{
	place-content: start;
}
.horizontal-divider{
	height:1px;
	background:gray;
}
.title-bar{
	top:0;
	position: absolute;
	height:90px;
	width:100vw;
	background: var(--accent);
}
.title{
	font-size: 20pt;
}
.content{
	width:100%;
	
	
	padding:20px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:30px;
}




@media (max-aspect-ratio: 1) {
		body {
			flex-direction:column;
		}
		#sidebar {
			height: auto;
		}
		.end-session{
			position:relative;
		}
		.body-login{
			/*place-content:normal;*/
		}
		.login-container{
			flex-direction:column;
			
		}
		.home-banner{
			display: none;
		}
		.login-form{
			margin: 20px;
		}
    }