:root {
 --bgcolor :#e8e8e8;
 --txtcolor: #202020;
}
@media(prefers-color-scheme: dark){
	:root {
		--bgcolor: #202020;
		--txtcolor: #e8e8e8;
	}
}
body {
	color: var(--txtcolor);
	background-color: var(--bgcolor);
	transition: color .3s, background-color .3s ;
}
::placeholder {
	color: #bcc;
}
.uppercase_letter {
text-transform:uppercase;
}
span.navbar-toggler {
	border: 0;
}
.alert {
	line-height: 1.1;
}
.relative {
    position: relative;
}
.trash-can {
	position: absolute;
    width: 1.5em!important;
    height: 1.5em!important;
    left: 10px;
	top:-3px;
}
.loader {
	z-index:10000 !important;
	width:100vw;
	height:100vh;
	display:none;
	position: fixed;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -55%);
}
#SpinnerSize {
	width: min(30vw, 5rem);
    height: min(30vw, 5rem);
}
#load_per {
	color:white;
	text-shadow: 0 0 0.5em rgba(0, 0, 0, 1);
}
#btn_menu {
	z-index:10 !important;
	bottom:12px;
	right:12px;
}
#btn_menu > div > button {
	height:46px;
	width:46px;
	font-size: 0;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.bi {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	padding: 0;
	margin: 0;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}
button.page-link > i{
	transform: translateY(2px);
}
div > i.bi , .nav-link > i , 
button.page-link > i,
.navbar-toggler > i,
button.btn > i ,
h5 > i{
	background-color:light-dark( #202020, #e8e8e8);
}
button.btn-outline-warning > i.bi{
	background-color: #ffc107;
}
 span.btn-outline-primary > i.bi {
	background-color: #0d6efd;
} 
button.btn-success > i.bi, button.btn-primary > i.bi{
	background-color: #e8e8e8;
}
button.btn.btn-primary.rounded-circle > i.bi{
	font-size: 0;
	width: 20px ;
	height: 20px;
	background-color: #e8e8e8;
	transform: translateY(0px);
}


#AlertToast {
	background-color: white;
}
.navbar { 
	z-index:1000;
}

#alert_info,.pagination {
	z-index: 1 !important;
}
.footer{
	z-index:1000 !important;
	margin-top: auto;
}
.center{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50vw;
	transform: translate(-50%, -50%);
}
.b-icon{
	width: 2.0rem;
	height: 2.0rem;
}
.thumb{
	width: 4.5rem;
	height: 4.5rem;
	margin: 2px;
}
.fancybox__container{
	z-index : var(--fancybox-zIndex, 10500) !important;
}
.image-md{
	object-fit:cover;
	height: 200px;
	width: 100%;
}
.image-lg{
	margin: 1.0rem;
	width: auto;
	max-width: 40vw;
	height: auto;
	max-height: 40vh;
}

.alert-warning{
	font-size: 0.8rem;
	text-align: center;
}

.input_check {
	display: inline-block;
	width: 3.0rem;
	height: 3.0rem;
}

.input-group-text{
	width:5.0rem;
}
.req_content_text , .memo{
	field-sizing: content;
}
input:valid {
	background-color: light-dark(#f0fff0 ,#102810);
}  
input:invalid {
	background-color: light-dark(#fff0f0 ,#281010);
}  
.card-body > h5 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.required-info{
	top: -3px !important;
	left: 6px !important;
}
div.boxshadow {
	z-index: 1;
	cursor:pointer;
	border-radius: 0;
	color: light-dark(#101010 ,#f0f0f0);
	background-color: light-dark(#fafafa,#202020);
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
}
div.boxshadow:hover{
	background-color:light-dark(#f0f0f0,#303030);
}


a.btn > i , button.btn-danger > i{
	background-color: #e8e8e8;
}
.bi-pencil-square{
	mask-image: url("./svg/pencil-square.svg");
}
.bi-arrow-down-up{
mask-image: url("./svg/arrow-down-up.svg");
}
.bi-image{
mask-image: url("./svg/image.svg");
}
.bi-exclamation-triangle{
mask-image: url("./svg/exclamation-triangle.svg");
}
.bi-plus{
mask-image: url("./svg/plus.svg");
}
.bi-dash{
mask-image: url("./svg/dash.svg");
}
.bi-door-closed{
mask-image: url("./svg/door-closed.svg");
}

.bi-bar-chart-line{
mask-image: url("./svg/bar-chart-line.svg");
}
.bi-calendar-month{
mask-image: url("./svg/calendar-month.svg");
}

.bi-chevron-bar-right{
mask-image: url("./svg/chevron-bar-right.svg");
}
.bi-list{
mask-image: url("./svg/list.svg");
}
.bi-person{
mask-image: url("./svg/person.svg");
}
.bi-gear{
mask-image: url("./svg/gear.svg");
}
.bi-chevron-bar-left{
mask-image: url("./svg/chevron-bar-left.svg");
}
.bi-chevron-bar-up{
mask-image: url("./svg/chevron-bar-up.svg");
}
.bi-chevron-left{
mask-image: url("./svg/chevron-left.svg");
}
.bi-chevron-right{
mask-image: url("./svg/chevron-right.svg");
}
.bi-search{
mask-image: url("./svg/search.svg");
}
.bi-trash3{
mask-image: url("./svg/trash3.svg");
}
.bi-x{
mask-image: url("./svg/x.svg");
}