html {
	position: relative;
	min-height: 100%;
}

header {
	flex: 1;
}

#page-contents {
	width: 100%;
	height: 100%;
}

.wrapper_login {
	margin-top: 32px;
}



/* The snackbar - position it at the bottom and in the middle of the screen */
#vtmob-toast {

	min-width: 250px;
	/* Set a default minimum width */
	margin-left: -125px;
	/* Divide value of min-width by 2 */
	background-color: rgba(38, 38, 38, 0.92);
	/* Black background color */
	color: #fff;
	/* White text color */
	text-align: center;
	/* Centered text */
	border-radius: .2em;
	/* Rounded borders */
	padding: 16px;
	/* Padding */
	position: fixed;
	/* Sit on top of the screen */
	z-index: 1;
	/* Add a z-index if needed */
	left: 50%;
	/* Center the snackbar */
	bottom: 0;
	/* 30px from the bottom */
	transform: translateY(100%);
	transition: all .3s ease-in-out;
	opacity: 0;
	min-height: 60px;
}

@media (min-width: 768px) {
	#vtmob-toast {
	right: 0.5rem;
	left: unset;
	}

}


#vtmob-toast.show {
	transform: translateY(-70%);
	opacity: 1;
}



#vtmob-overlay-loading {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	color: white;
	border-radius: 0;
	background-color: #2b334a;
	margin: 0px;
	text-align: center;
	transition: opacity 1.00s ease-in-out;
	-moz-transition: opacity 1.00s ease-in-out;
	-webkit-transition: opacity 1.00s ease-in-out;
	z-index: 100;
}

.vtmob-hide-fade {
	opacity: 0.0;

}

.vtmob-hide {
	display: none;
}

/* #vtmob-overlay-loading {
        display:none;  
    } */

#vtmob-overlay-offline {
	display: none;
	height: 100%;
	width: 100%;
	position: fixed;
	/* Stay in place */
	z-index: 1000000;
	/* Sit on top */
	left: 0;
	top: 0;
	background-color: rgb(0, 0, 0);
	/* Black fallback color */
	background-color: rgba(0, 0, 0, 0.9);
	/* Black w/opacity */
	overflow: hidden;
	/* Disable horizontal scroll */
	transition: 0.5s;
	/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

#vtmob-overlay-offline .content {
	font: bold 1em sans-serif;
	color: #fff;
	position: relative;
	top: 25%;
	/* 25% from the top */
	width: 100%;
	/* 100% width */
	text-align: center;
	/* Centered text/links */
	margin-top: 16px;
	/* 30px top margin to avoid conflict with the close button on smaller screens */
	padding: 2em;
}


#vtmob_page_container {
	margin: 0px;
}

.vtmob_close {
	justify-content: flex-end;
}

.vtflex-end {
	justify-content: flex-end;
	float: right !important;
}

.vtmob-date {
	width: 10em;
	font-size: 0.8em;
	padding: 0px 2px;
	border: 1px solid #ddd;
}

#modalprimary .modal-body,
#modalprimary .modal-footer,
#modalprimary .modal-header {
	padding: 8px !important;
}


/* LOADER SCREEN  */
/* Safari */
/* .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #000a66;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; 
        animation: spin 2s linear infinite;
      }
      
      @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
      @keyframes spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); } } */







.loader-alt {
	position: relative;
	width: 100px;
	height: 100px;
	text-align: center;
	animation: fade-in 0.75s ease-in;
	display: inline-block;
}

.loader-main {
	position: absolute;
	width: 100px;
	height: 100px;
	display: flex !important;
	justify-content: center;
	align-items: center;
	animation: rotate-center 20s linear infinite both;
}

.loader-dot-container {
	position: absolute;
	width: 100px;
	height: 100px;
	animation: rotate-center 20s linear infinite both;
}

.loader-dot {
	opacity: 0;
	font-size: 6px;
	position: absolute;
	width: 100px;
	height: 100px;
	padding: 20px;
	animation: fade-out 4s ease-in-out alternate infinite, rotate-center 4s ease-in-out infinite reverse;

}

.loader-dot.dot-one,
.loader-dot.dot-two,
.loader-dot.dot-three,
.loader-dot.dot-four {
	position: absolute;
	top: 0;

}

.loader-dot.dot-one {
	animation-delay: .2s;
}

.loader-dot.dot-two {
	animation-delay: .4s;
}

.loader-dot.dot-three {
	animation-delay: .6s;
}

.loader-dot.dot-four {}

@keyframes rotate-center {
	0% {
		transform: rotate(720deg);

	}

	100% {
		transform: rotate(0deg);

	}
}

@keyframes fade-out {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	40% {
		opacity: 1
	}

	80% {
		opacity: 1;
	}

	90% {
		opacity: 0;
	}


	100% {
		opacity: 0;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}