html {
	width: 100%;
}

body {
	overflow-x: hidden !important;
}

main {
	overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner > *{
	opacity: 0;
}

/* Spinner */
body.show-spinner::after{
	content: " ";
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	border-top-color: rgba(0, 0, 0, 0.3);
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
	left: calc(50% - 15px);
	top: calc(50% - 15px);
	position: fixed;
	z-index: 1;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}

.center {
	text-align: center;
}

.gray-pagination .page-link.next, .gray-pagination .page-link.prev, .gray-pagination .page-link.last, .gray-pagination .page-link.first {
	background: none;
	border-color: #dadada;
	color: #555;
}
.gray-pagination .page-link.first:hover, .gray-pagination .page-link.last:hover {
	border-color: #c5c5c5;
	background: none;
}

.img-circle {
	border-radius: 50px;
}

@font-face {
	font-family: Confortaa;
	src: url('/static/font/Comfortaa-Regular.ttf');
}
* {
	font-family: Confortaa;
}


.top-controls {
	margin-bottom:-1%;
}

.card-width-content {
	min-width: 90% !important
}

.card .custom-card {
	padding: 6px !important;
}

.card:hover {
	box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2), 0 1px 6px rgba(0, 0, 0, 0.04)
}
.card-box {
	background: white;
	box-sizing: border-box;
	position: relative;
	display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
	flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    font-family: Confortaa;
}

.bg-blue-color-theme {
	background-color: #136eb9;
}

.bg-purple-color-theme {
	background-color: #8e44ad;
}

.bg-green-color-theme {
	background-color: #1abc9c;
}

.bg-orange-color-theme {
	background-color: #f18024;
}

.bg-red-color-theme {
	background-color: #E34553;
}

.clean-bg {
	background-color: #f8f8f8 !important;
}

/* font-size classes */
.fs-6 {
	font-size: 6pt !important;
}

.fs-8 {
	font-size: 8pt !important;
}

.fs-12 {
	font-size: 12pt !important;
}

.fs-15 {
	font-size: 15pt !important;
}

.fs-20 {
	font-size: 20pt !important;
}

.fs-22 {
	font-size: 22pt !important;
}

.card-img-top {
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
}
.list-for-modal{
	max-height: 480px;
	overflow-y: scroll;
}
.main-col{
	min-height: 30rem;
}

.custom-border-footer{
	border-top: 1px solid rgba(100 ,100, 100, .2)
}
.custom-border-header{
	border-bottom: 1px solid rgba(100 ,100, 100, .2)
}

.no-display{
	display: 'none';
}

.material-input {
	border: none !important;
	border-bottom: 1px solid rgba(100, 100, 100, 0.3) !important;
}
.material-input:focus {
	border-bottom: 1px solid rgba(100, 100, 100, 1) !important;
}

.material-input[disabled] {
	background-color: #FFFFFF;
	color: #AAAAAA;
}

label.disabled {
	color: #888888;
}

.pointer {
	cursor: pointer;
}
option[disabled] {
	background-color: #DDDDDD;
}
option.separator {
	font-size: 1pt;
}
@media (min-width: 992px) {
	.modal-lg {
		max-width: 992px;
	}
}
.wrap-text {
	white-space: normal !important;
}

.modal-right > .modal-lg {
	max-width: 70% !important;
}
.v-divider {
/*	margin-left:5px;
	margin-right:5px;*/
	width:1px;
	height:100%;
	border-left: 1px solid #dadada;
}

.bootbox > .modal-dialog > .modal-content {
	border-radius: 5px;
	box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2), 0 1px 6px rgba(0, 0, 0, 0.04)
}
#tooltip {
	position: absolute;
	background: #000;
	color: #ffffff;
	padding: 8px;
	border-radius: 5px;
}

.table-borderless td,
.table-borderless th {
    border: 0;
}

.text-strike {
	text-decoration: line-through;
}
#add-certificate-modal .modal-body{
	overflow-x: auto;
}
#add-certificate-modal .table {
	max-width: 130%;
	width: 130%;
}
.v-scroll {
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}
.pale-bg {
	background-color: var(--separator-color)
}
.default-font-color {
	color: var(--primary-color);
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container video,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pamscrollbar::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.pamscrollbar::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

.pamscrollbar::-webkit-scrollbar-thumb {
	background: rgb(168, 168, 168);
	border-radius: 10px;
}

.pamscrollbar::-webkit-scrollbar-thumb:hover {
	background: rgb(128, 127, 127);
}

.small_avatar img {
    width: 25px;
    height: 25px;
}

.datepicker {
	z-index:10000 !important;
}

.horizontal-scrollable > .row {
	overflow-x: auto;
	overflow-y: auto;
	flex-wrap: nowrap;
	height: 80px;
}