
.approvals{
	display:block; 
	margin:auto; 
	width:fit-content; 
	text-align:center;
}
.filters{
	width: fit-content;
	padding: 5px 5px ;
	margin: 10px auto;
	/*margin-right:18px;*/
	text-align: right;
	/*box-shadow: 2px 2px 5px var(--3rd_clr);
	background:rgba(0, 0, 0, 1);*/
	color: var(--3rd_clr);
	display: flex;
	/*gap: 5px;*/
	justify-content: center;
	align-items: center;
}

.filters form{
	display: inline-block;
	width: 100%;
	padding: auto 5px ;
	margin: auto 10px;
}

.filters .search{
	width:100px;
	margin: auto 10px auto 5px;
	padding:  2px auto;
}

.filters input{
	background: var(--3rd_clr);
	color: var(--prim_clr);
}

.filters select{
	background: var(--3rd_clr);
	border:1px solid var(--prim_clr);
	color: var(--sec_clr);
	border-radius: 5px;
	text-align: right;
}

option:empty{
	display:none;
}
option:checked{
	color: var(--prim_clr);
}

.filters input[type=text]{
	background: var(--3rd_clr);
	border:1px solid var(--prim_clr);
	color: var(--prim_clr);
	padding: 2px 4px;
	margin: auto ;
	border-radius: 5px;
}

.doc_head{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	margin: auto;
	width: 100%;
	padding: 20px 5px;
}

/*h2{
	font-size: 1rem;
	margin-left: 10px;
	margin-bottom: 10px;
}

h3{
	margin: 5px auto;
	font-size: 1rem;
	text-align: center;
	width: 100%;
}*/

.doc_head_item{
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(3, 1fr);
	width: 180px;
	padding: 10px 5px;
	margin: 2px;
	color: var(--sec_clr);
}

.doc_category{
	grid-row: 1 / 2;
	grid-column: 1 / 3;
	font-weight: bold;
	font-size: 1.5rem;
	text-align: right;
	margin: auto 2px auto  auto;
	padding: 5px;
}

.doc_num{
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	font-size: 1.5rem;
	text-align: right;
	margin: auto 2px auto  auto;
	width:35px;
}

.doc_symbol{
	grid-row: 1 / 3;
	grid-column: 3 / 4;
	font-size: 3rem;
	text-align: center;
	margin: auto;
}

.doc_link{
	grid-row: 2 / 3;
	grid-column: 1 / 2;	
	text-align: right;
	margin: auto 2px auto  auto;
	min-width: 75px;
}

.doc_head_item:nth-of-type(1){
	/*Blue*/
	background: linear-gradient(90deg, #008cc0, #005bb0);
}

.doc_head_item:nth-of-type(2){
	/*Green*/
	background: linear-gradient(90deg, #5d8e53, #2a5a31);
}

.doc_head_item:nth-of-type(3){
	/*Black*/
	background: linear-gradient(90deg, #555555, #333333);
}

.doc_head_item:nth-of-type(4){
	/*Orange*/
	background: linear-gradient(90deg, #fda722, #fb8500);
}

.doc_head_item:nth-of-type(5){
	/*Red*/
	background: linear-gradient(90deg, #f93838, #c71515);
}

.doc_head_item:nth-of-type(6){
	/*Purple*/
	background: linear-gradient(90deg, #7b4f95, #592e83);
}

.doc_head_item:nth-of-type(7){
	/*Purple*/
	background: linear-gradient(90deg, #B7C1C3, #889293);
}

.doc_list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 98%;
	padding: 10px 5px;
	margin: auto;
}

.doc_list h2{
	text-align: center;
	width:100%;
	background: var(--3rd_clr);
	color:var(--sec_clr);
	margin: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.doc_list h3{
	margin-top:10px;
	text-align: left;
	width:100%;
}
.list_item span:nth-of-type(1),span:nth-of-type(3),span:nth-of-type(4){
	text-align: center;
}
.list_item span{
	margin-top:5px ;
	margin-bottom:2px;
	position: relative;
}

.list_item .new::after{
	content:"new";
	position: absolute;
	z-index: 1;
	width: fit-content;
	height: fit-content;
	/*top:-8px;
	right: 5px;*/
	background: #f00;
	color: white;
	border-radius: 3px;
	border: 1px solid #fff;
	padding: 2px;
	padding-top:1px;
	padding-bottom:2px;
	line-height: 0.65;
	font-size: 0.85rem;
	margin: 2px 5px;
}
.doc_list h2 i{
	color:var(--prim_clr);
}

.list_item{
	display: inline-grid;
	grid-template-columns: 30px auto 80px 45px;
	padding: 0px;
	width: 100%;
}

.list_item:nth-of-type(odd){
	background:#ddd;
}

.list_item:nth-of-type(even){
	background:#bbb;
}

.doc_list_icon img{
	display: inline-block;
	width:16px;
	height:16px;
	text-align: center;
}

@media only screen and (max-width:700px){
	.doc_head{
		flex-direction: column;
	}
	.doc_head_item{
		width: 100%;
	}
	.filters{
		width: 100%;
	}
}