:root {
	--main-bg-color: #f8f8f8;
	--secondary-bg-color: #2f3136;
	--modal-bg-color: #1e2229;
	--item-bg-color: #494949;
	--item-bg-color-hover: #535353;

	--button-bg-color: #373737;
	--button-bg-color-hover: #666666;

	--main-text-color: #222222;
	--muted-text-color: #7c7e83;
	--link-text-color: #80c0cf;
	--link-text-color-hover: #6aa4b1;

	--avatar-size: 9rem;
	--avatar-size-sm: 3rem;
	--avatar-size-xs: 1.9rem;

	--box-border-color: #eaeaea;
	--box-border-color-hover: #aad2ff;
}



html, body {
	color: var(--main-text-color);
}
h1 {
	margin-top:0px;
	margin-bottom:20px;
}
.modal h1 { margin-top:0px; }

h2 {
	margin-top:50px;
	margin-bottom:15px;
}

h5:not(.modal h5) {
	color: var(--main-text-color);
	font-size: 1rem;
	border-bottom: 1px solid var(--main-border);
	margin-top:25px;
	margin-bottom:8px;
}
h5:not(.modal) :first-child { margin-top:0px; }
/* .modal h5 { border-bottom: 0px; } */


.navbar {
	background-color: #fff;
}

.container {
max-width: 1140px;
}

#main.container {
	
	/* margin-top:5%; */
	padding-bottom:100px;
}

.small-width {
	max-width: 600px;
	margin: 0 auto;
}

.help {
	color: var(--muted-text-color);
	font-size:0.8rem;
}

.tab-content {
	padding:25px 10px;
	font-size: 0.8rem;
}

.content-loader { text-align: center; }
.content-loader img { max-width:200px; }
.content-loader div { font-size:1.2rem; color: var(--muted-text-color); }




.text-helper {
	color: var(--muted-text-color);
	font-size: 90%;
}


.box {
	border:1px solid var(--box-border-color);
	border-radius: 10px;
	padding:10px 20px;
	margin-bottom:10px;
}

a.box { display:block; }


.box-flex {
	display: flex;
}

/* .box.box-hover:hover {
	border:1px solid var(--box-border-color-hover);
} */

.box .icon {
	flex: 0 0 50px;
	font-size: 1.5rem;
}

.box .content {
	flex: 1 1 auto;
}

.box .tools {
	flex: 0 0 30px;
}


.box .content .title { font-size:1.4rem; }
.box .content .desc { font-size:0.8rem; color:var(--muted-text-color); }
.box .tools .dd { font-size:1.2rem; color:var(--main-text-color); }






.dashboard-customer {
	display: flex;
	border-bottom: 1px solid var(--main-border);
	padding: 10px 0px;
}
.dashboard-customer:last-child { border-bottom: none; }
.dashboard-customer a { color:var(--main-text-color); }
.dashboard-customer .icon { flex: 0 0 50px; font-size:2rem; }
.dashboard-customer .info { flex: 1 1 auto; }
.dashboard-customer .info .name { font-size:1.1rem; font-weight:300; }
.dashboard-customer .info .days-remaining { font-size:0.9rem; color:green; font-weight:bold; padding:0px 0px; }
.dashboard-customer .info .time { font-size:0.7rem; padding:0px 0px; }
.dashboard-customer .info .time .time-registered { display:inline-block; }
.dashboard-customer .info .time .confirmed { display:inline-block; margin-left:25px; }





a.infoscreen-tile {
	color: var(--main-text-color);
}
.infoscreen-tile {
	display: inline-block;
	height: 120px;
	width: 130px;
	border: 1px solid var(--secondary-border);
	border-radius: 10px;
	/* background-color: var(--bg-shade3); */
	text-align: center;
	margin:8px 8px;
}
.infoscreen-tile:hover {
	border: 1px solid var(--link-box-hover-bg-color);

}
.infoscreen-tile .icon {
	font-size: 3rem;
}
.infoscreen-tile .title {
	font-size: 0.9rem;
	width: 110px;
	margin-top:15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	text-align: center;
}

.infoscreen-tile.online {
	background-color: rgb(20, 231, 20);
}




.user-item { display:flex; }
.user-item .icon { flex:0 0 100px; text-align:center; }
.user-item .info { flex:1 1 auto; padding-left:15px; }
.user-item .tools { flex:0 0 50px; text-align:right; padding-top:10px; }

.user-item .icon img { width:80%; }

.user-item .info .role { font-size:0.7rem; }
.user-item .info .name { font-size:1.2rem; }
.user-item .info .contact { font-size:0.8rem; margin-top:3px; }
.user-item .info .time { font-size:0.7rem; margin-top:8px; }






.initials-circle {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: #ccc;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}

.initials-circle-sm {
	width: 20px;
	height: 20px;
	font-size: 10px;
}






.infobox {
	margin-bottom: 20px;;
}
.infobox label {
	font-size: 0.8rem;
	font-weight: bold;
	color: var(--muted-text-color);
}
.infobox div {
	font-size: 1.2rem;
	word-break: break-all;
}



.iframe-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
	overflow: hidden;
	border:5px solid var(--main-text-color);
	border-radius: 10px;
}

.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}





form .form-text {
	font-size:0.7rem;
}


.token-preview-box {
	word-break: break-all;
	background-color: var(--bg-shade3);
	font-size: 0.8rem;
	padding:8px 15px;
	border:1px solid var(--bg-shade2)
}

table.sortable th {
	cursor: pointer;
}

th.num, td.num {
	text-align: right;
	padding-right: 15px;
}

.btn-link {
	border:0px;
	text-decoration: none;
}




.dashboard-stats-box {
	display:flex;
	color:#fff;
}
.dashboard-stats-box .icon { flex:0 0 70px; font-size:3rem; padding-top:8px; }
.dashboard-stats-box .info { flex:1 1 auto; }
.dashboard-stats-box label {
	font-weight: 400;
	text-transform: uppercase;
	font-size: 0.7rem;
}
.dashboard-stats-box .number {
	font-size: 2.2rem;
	font-weight: 200;
	margin-top:-8px;
}
.dashboard-stats-box .subtext {
	font-size: 0.7rem;
	color:#d3d3d3;
	margin-top:-5px;
}



.gradient-blue {
	background: rgb(2,0,36);
	background: linear-gradient(307deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

.gradient-green {
	background: rgb(2,0,36);
background: linear-gradient(307deg, rgba(2,0,36,1) 0%, rgba(9,121,14,1) 35%, rgba(0,212,255,1) 100%);
}

.gradient-purple {
	background: rgb(2,0,36);
background: linear-gradient(307deg, rgba(2,0,36,1) 0%, rgba(121,9,102,1) 35%, rgba(0,212,255,1) 100%);
}

.gradient-red {
	background: rgb(2,0,36);
background: linear-gradient(307deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 35%, rgba(0,212,255,1) 100%);
}

.gradient-orange {
	background: rgb(2,0,36);
background: linear-gradient(307deg, rgba(2,0,36,1) 0%, rgba(121,67,9,1) 35%, rgba(0,212,255,1) 100%);
}

.gradient-yellow {
	background: rgb(2,0,36);
background: linear-gradient(307deg, rgba(2,0,36,1) 0%, rgba(118,121,9,1) 35%, rgba(0,212,255,1) 100%);
}