.spacer {
	height:1vh;
}

.list-section {
	display: none;
}
#home-section {
	display: block;
}
body {
	margin:0px;
	padding:0px;
}


.page-body {
	position: relative;
	height: 80vh;
	background: #effbff;
	overflow: auto;
}
.body-container {
	display: none;
}
.img-loader {
	height: 40px;
}
.page-body-spinner {
	position: absolute;
	left: 45%;
	top: 45%;
	z-index: 10;
}
.spinner-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left: 0px;
	background-color: white;
	opacity: 0.8;
	z-index: 9;
}


.login-wrapper {
	background-color: #628895;
	color: white;
}

.form-floating {
	color: gray;
}
.err-box {
	border: red solid 3px;
}

/*
.row {
	border:1px black solid;
}
*/


/* 	CUSTOMIZE BUTTON FOR MOBILE MENU */
a.mobile-menu {
	display: none;
	height: 50px;
	width: 50px;
	text-decoration: none;
	border-radius:100%;
	position: fixed;
	top:50%;
	left:-17px;
	background-color: white;
	color: grey;
	z-index: 10;
	box-shadow: 0px 0px 10px grey;
	animation-name: menuSlide;
 	animation-duration: 1s;
}
a.mobile-menu > span.fi-thumbnails {
	position: absolute;
	left:40%;
	font-size: 33px;
}
a.mobile-menu > div.m-menu-peek {
	position: absolute;
	height: 100vh;
	width: 10px;
	top:-50vh;
	background-color: white;
	left:30%;
	font-size: 33px;
	box-shadow: 1px 0px 5px grey;
}

@keyframes menuSlide {
  from {left: -60px;}
  to {left: -20px;}
}


/*OFF CANVASS*/

.sidebar-offcanvas {
	width: 90vw;
}
#sidebar-offcanvas {
	z-index: 10050;
}

/*OFF CANVASS*/


/* TOAST */
.toast {
	z-index: 10051;
}
.danger-toast {
	border: '3px solid red',
	color: 'red'
}
/* TOAST */
	

/*MODAL CUSTOMIZE*/
.modal {
	z-index: 10000;
}

.modal-xl {
	min-height: 40vh;
}
/*MODAL CUSTOMIZE*/



/* SCROLL BARS */

    /* Add your custom scrollbar styles here */
    ::webkit-scrollbar {
      width: 12px;
    }

    ::webkit-scrollbar-track {
      background: #f1f1f1;
    }

    ::webkit-scrollbar-thumb {
      background: #888;
      border-radius: 6px;
    }

    ::webkit-scrollbar-thumb:hover {
      background: #555;
    }

/* SCROLL BARS */


/*DROPDOWNS*/

#snd-rcpnt {
	max-height: 50vh;
    overflow-y: auto;
}

/*DROPDOWNS*/



/*AUDIO*/
#myAlert {
  display: none;
}
/*AUDIO*/


/*POPOVER*/
.popover {
    z-index: 1000000; /* Set a higher z-index than the default modal z-index (1050) */
}
/*POPOVER*/


/*POPOVER*/
.tooltip {
    z-index: 1000001; /* Set a higher z-index than the default modal z-index (1050) */
}
/*POPOVER*/

/* 	MEDIA (PICTURES, VIDEOS HERE)
	MEDIA (PICTURES, VIDEOS HERE) */

.profile-pic {
	border-radius: 100%;
	width: 40px;
	height: 40px;
	object-fit: cover;
	object-position: 15% 0%;
}
.profile-name {
	text-decoration: none;
}

.dashboard-card {
	height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
}
#archive-box {
	height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
}

@media screen and (max-width: 575px) {
	div.nav-wrapper {
		display: none;
	}
	a.mobile-menu {
		display: block;
	}
	div#body-spacer {
		display: none;
	}
}


img.scanner-img {
	width: 5vh;
	z-index: 2;
	position: fixed;
	bottom:2vh;
	right:2vw;
	-webkit-animation: ensmall 0.5s; /* Chrome, Safari, Opera */
  	-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
}

@-webkit-keyframes ensmall {
    from {width: 8vh;}
    to {width: 5vh;}
}

img.scanner-img:hover {
  	-webkit-animation: enlarge 0.5s; /* Chrome, Safari, Opera */
  	-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
	cursor: pointer;
	width: 8vh;
}

@-webkit-keyframes enlarge {
    from {width: 5vh;}
    to {width: 8vh;}
}





/*
COLLOROOORSS
*/

.bg-danger-1 {
	background:#f68994;
}
.bg-danger-2 {
	background:#ef6d7a;
}
.bg-danger-3 {
	background:#e44656;
}


.bg-success-1 {
	background:#56c190;
}
.bg-success-2 {
	background:#39ac77;
}
.bg-success-3 {
	background:#269562;
}

div#system-announcement {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 5%;
	color: white;
	z-index: 10;
}


#accs-sec {
	display: none;
}

#selected-count {
	position: absolute;
	bottom:0;
}