.alert-primary {
	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
}
.alert {
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
	margin-left: 18px;
	margin-right: 18px;
 }
.btn {
	display: inline-block;
	text-decoration: none;
	padding: 5px 10px;
	font-family: 'Roboto', sans-serif;

	border: 1px solid var(--page-foreground-color);
	height: 2em;
	border-radius: 5px;
	font-size: 13px;
	background-color: #323232;
	color: #fff;
}
.btn.btn-accept {
	color: #007BAA;
	background-color: #BEE1FE;
}

@font-face {
  font-family: Roboto;
  src: url(/assets/fonts/Roboto-Light.ttf);
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url(/assets/fonts/Roboto-Bold.ttf);
  font-display: swap;
  font-weight: 700;
}

@font-face {
  font-family: GothicA1;
  src: url(/assets/fonts/GothicA1-Regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: GothicA1;
  src: url(/assets/fonts/GothicA1-Bold.ttf);
  font-display: swap;
  font-weight: 700;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/*font-weight: inherit;
	font-style: inherit;
	font-family: inherit;*/
	vertical-align: baseline;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body
{
	position: relative;
	margin: 0px;
	padding: 0px;
	padding-top: 20px;
	background-color: #ffd800;
	background-color: var(--frontend_background_color);
	font-family: 'Roboto', sans-serif;
	color: #000000;
	font-size: 13px;
}
body.start
{
	background-image: url('/assets/splashscreens/splash-750x1334.png');
	background-position: top center;
	background-repeat: no-repeat;
}
::-moz-selection
{
  color: #000000;
  background: #ffd800;
}
::selection
{
  color: #000000;
  background: #ffd800;
}
#header
{
	position: relative;
	height: 100px;
}
#header img
{
	max-height: 90px;
	max-width: 180px;
	margin-top: 30px;
	margin-left: 20px;
}
#header .title
{
	position: absolute;
	width: calc(100vw - 145px);
	height: 40px;
	line-height: 30px;
	top: 30px;
	right: 0px;
	text-align: left;
	font-size: 25px;
	color: var(--frontend_color);
}
#header .back
{
	position: absolute;
	width: 15vw;
	height: 40px;
	line-height: 30px;
	top: 30px;
	right: 0px;
	font-size: 30px;
	text-align: center;
	font-weight: 300;
	color: var(--frontend_color);
	text-decoration: none;
	box-sizing: border-box;
}

table.nav
{
	border-collapse: collapse;
	width: 100%;
	background-color: #fbfbfb;
	border-spacing: 0px;
}
table.nav td
{
	overflow: hidden;
	height: 80px;
	/*white-space: nowrap;*/
	height: 80px;
	line-height: 80px;
	vertical-align: baseline;
	box-sizing: border-box;
	padding: 0;
}
table.nav td span.split
{
	display: inline-block;
  vertical-align: middle;
  line-height: 37px;
}
table.nav tr
{
	background-color: #fbfbfb;
}
table.nav tr:nth-child(2n)
{
	background-color: #ebebeb;
}
table.nav .date
{
	width: 20vw;
	text-align: center;
}
table.nav .date .date_top, table.nav .date .date_bottom
{
	display: block;
}
table.nav .date .date_top
{
	font-size: 30px;
	font-weight: 700;
	line-height: 30px;
}
table.nav .date .date_bottom
{
	font-size: 18px;
	line-height: 20px;
}
table.nav .navigate, table.nav .chat_time
{
	text-align: center;
	width: 12vw;
	font-weight: 300;
}
table.nav .chat_time
{
	font-weight: normal;
}
table.nav .navigate a
{
	font-size: 30px;
	line-height: 37px;
	display: inline-block;
	width: 100%;
	height: 60px;
	color: #000000;
	text-decoration: none;
	box-sizing: border-box;
}
table.nav .split .top, table.nav .split .bottom
{
	display: block;
}
table.nav .split .top
{
	font-weight: 700;
	line-height: 30px;
}
table.nav .split .bottom
{
	line-height: 20px;
}
table.nav .academy_image, table.nav .home_icon
{
	width: 80px;
	height: 80px;
	position: relative;
}
table.nav .academy_image img
{
	position: absolute;
	display: inline;
	height: 60px;
	width: 60px;
	left: 10px;
	top: 10px;
	object-fit: cover;
}
.news_image img
{
	border-radius: 6px;
	height: 50px !important;
	top: 15px !important;
}
.news_split
{
	line-height: 20px !important;
}
table.nav .home_icon img
{
	position: absolute;
	display: inline;
	height: 50px;
	width: 50px;
	left: 15px;
	top: 15px;
}
.home_title
{
	font-size: 16px;
}
table.nav .home_badge
{
	width: 40px;
	position: relative;
	text-align: center;
}
table.nav .home_badge .badge
{
	position: absolute;
	left: 10px;
	top: 30px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	background-color: #ce1719;
	color: #ffffff;
	font-weight: 700;
	font-size: 12px;
}
.home_profile
{
	height: 120px;
	width: 100%;
	background-color: #ebebeb;
}
.home_profile_picture
{
	float: left;
	margin-left: 20px;
	height: 120px;
	width: 120px;
	box-sizing: border-box;
}
.home_profile_picture img
{
	border-radius: 50%;
}
.home_profile_info
{
	float: left;
	margin-left: 20px;
	height: 120px;
	width: calc(100% - 160px);
	box-sizing: border-box;
	padding-right: 20px;
	padding-top: 15px;
	font-size: 15px;
}
.home_profile_info b
{
	font-size: 17px;
	font-style: italic;
}
.calender_item, .academy_cource, .news_item
{
	width: 100%;
	min-height: calc(100vh - 150px);
	background-color: #fbfbfb;
	box-sizing: border-box;
	padding: 20px 0px;
}
.academy_cource
{
	/*background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('/assets/images/carbon.jpg');*/
	background-color: #ebebeb;
}
.academy_cource .intro, .academy_cource .question
{
	font-weight: 700;
	color: #ffffff;
	font-size: 17px;
}
.academy_cource .intro
{
	color: #000000;
}
.calender_item h1, .calender_item .calender_item_time
{
	padding: 10px 40px;
}
.calender_item h1
{
	font-weight: 700;
	font-size: 20px;
}
.calender_item h5
{
	padding: 0px 40px;
	font-size: 15px;
}
.calender_item .calender_item_time
{
	background-color: #E0E0E0;
}
.calender_item_calender
{
	margin: 0px 40px;
	border-radius: 3px;
	background-color: #E0E0E0;
	padding: 0px 5px;
}
.calender_item_calender .calender_item_item
{
	background-color: #E0E0E0;
	height: 20px;
	line-height: 20px;
	width: 100%;
	border-bottom: #cccccc solid 1px;
}
.calender_item_item .time
{
	float: left;
	height: 20px;
	line-height: 20px;
	width: 50px;
}
.calender_item_item .content
{
	float: left;
	height: 20px;
	line-height: 20px;
	width: calc(100% - 50px);
}
.pageswap
{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 100vw;
	height: 100vh;
	background-color: #fbfbfb;
	opacity: 0.8;
}


.login
{
	text-align: center;
	padding: 20px;
	padding-top: 50px;
}
.login_logo
{
	display: inline-block;
	margin: 0 auto;
	margin-bottom: 50px;
}
.login form input
{
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	border: #666666 hidden 0px;
}
.login form input[type="submit"]
{
	border: #ffffff hidden 0px;
	background-color: #000000;
	color: #ffffff;
	padding: 4px 10px;
}

.academy_cource h1, .news_item h1, .chat h1
{
	padding: 30px 40px;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	background-color: #fbfbfb;
	margin-bottom: 10px;
}
.academy_cource, .news_item
{
	min-height: calc(100vh - 120px);
	background-color: #e0e0e0;
	padding-top: 0px;
	text-align: center;
}
.academy_cource .large_button
{
	display: inline-block;
	width: 60vw;
	margin: 0 auto;
	padding: 20px;
	color: #000000;
	background-color: #ffd800;
	font-size: 15px;
	text-decoration: none;
}
.news_item_content
{
	text-align: left;
	padding: 0px 20px;
	font-size: 14px;
}
.chat_profile_picture
{
	position: relative;
	width: 80px;
	height: 80px;
}
.chat_profile_picture img
{
	position: absolute;
	display: inline;
	height: 60px;
	width: 60px;
	left: 10px;
	top: 10px;
	border-radius: 50%;
	object-fit: cover;
}
.chat_search
{
	background-color: #e0e0e0;
	border: #e0e0e0 hidden 0px;
	padding: 8px 10px;
	border-radius: 3px;
	width: 65vw;
	height: 30px;
	font-size: 15px;
}
.chat_search:focus
{
	outline: none;
}
table.nav .chat_intro .top, table.nav .chat_intro .middle, table.nav .chat_intro .bottom
{
	display: block;
}
table.nav .chat_intro
{
	display: inline-block;
  vertical-align: middle;
  line-height: 37px;
 }
table.nav .chat_intro .top
{
	font-weight: 700;
	line-height: 20px;
}
table.nav .chat_intro .middle
{
	font-weight: 700;
	font-style: italic;
	line-height: 15px;
}
table.nav .chat_intro .bottom
{
	line-height: 15px;
}
.chat_title
{
	position: relative;
	height: 80px;
	line-height: 80px;
	background-color: #fbfbfb;
	box-shadow: 0 4px 2px -2px rgba(100, 100, 100, 0.2);
}
.chat_title img
{
	float: left;
	height: 60px;
	width: 60px;
	margin: 10px;
	border-radius: 50%;
	margin-right: 10px;
	object-fit: cover;
}
.chat_title span
{
	float: left;
	height: 60px;
	font-size: 22px;
	font-weight: 700;
}
.chat_title .chat_title_name
{
	position: absolute;
	left: 105px;
	top: 0px;
	font-size: 17px;
	font-weight: bold;
}
.chat_content
{
	height: calc(100vh - 150px - 68px);
	background-color: #e0e0e0;
	padding-top: 20px;
	overflow-x: hidden;
	overflow-y: scroll;
	box-sizing: border-box;
}
.chat_bubble, .chat_bubble_image, .chat_bubble_video
{
	width: 60vw;
	margin: 10px;
	margin-top: 0px;
	border-radius: 10px;
	min-height: 40px;
	background-color: #fbfbfb;
	box-sizing: border-box;
	padding: 10px;
	font-size: 14px;
}
.own_bubble
{
	float: right;
	background-color: #ffd800;
}
.chat_loader
{
	float: right;
	width: 40vw;
	margin: 10px;
	margin-top: 0px;
	border-radius: 10px;
	min-height: 20px;
	background-color: rgba(255, 216, 0, 0.75);
	box-sizing: border-box;
	padding: 5px 15px;
	font-size: 14px;
}
.chat_system_message
{
	width: 70vw;
	margin: 10px;
	margin-top: 0px;
	margin-left: 15vw;
	border-radius: 20px;
	min-height: 20px;
	background-color: rgba(15, 126, 208, 0.5);
	box-sizing: border-box;
	padding: 5px 15px;
	font-size: 14px;
	text-align: center;
}
.chat_bubble_image img
{
	max-width: calc(60vw - 20px);
}
.chat_bubble_video video
{
	width: calc(60vw - 20px);
	height: calc((60vw - 20px) / 1.8);
}
.chat_input_holder
{
	height: 68px;
}
.chat_input
{
	width: calc(100% - 50px);
	float: left;
}
#chat_input
{
	width: calc(100% - 10px);
	height: 60px;
	border-radius: 10px;
	box-sizing: border-box;
	margin-left: 5px;
	margin-top: 5px;
	outline: none;
	padding: 5px 8px;
	resize: none;
}
.chat_input_send
{
	position: relative;
	float: right;
	width: 50px;
	height: 68px;
	cursor: pointer;
}
.chat_input_send img.action_send
{
	position: absolute;
	top: 10px;
	right: 5px;
}
.chat_input_send img.action_media
{
	position: absolute;
	top: 40px;
	right: 5px;
}

.academy_cource .video .video_thumnail
{
	width: 80vw;
}
.academy_cource .video video
{
	/*display: none;*/
}
.academy_cource.questions
{
	background-color: #ffffff;
}
.academy_cource.questions .questions
{
	
}
.questions .question
{
	font-weight: 700;
	margin-bottom: 20px;
	font-size: 20px;
	padding: 0px 10px;
	color: #000000;
}
.questions .answer
{
	position: relative;
	width: 90vw;
	margin-left: 5vw;
	border-radius: 5px;
	padding: 10px;
	padding-left: 40px;
	background-color: #eeeeee;
	text-align: left;
	box-sizing: border-box;
	margin-bottom: 10px;
	min-height: 50px;
	font-size: 15px;
}
.questions .answer .selector
{
	position: absolute;
	left: 10px;
	top: 15px;
	width: 15px;
	height: 15px;
	background-color: #ffffff;
	border: #cccccc solid 1px;
	border-radius: 50%;
}
.questions .answer.selected
{
	background-color: #ffd800;
}
.questions .answer.selected .selector:after
{
	position: relative;
	top: 2px;
	left: 2px;
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	visibility: visible;
	background-color: #cccccc;
	border-radius: 50%;
}
.answer_button, .answer_button_open
{
	display: inline-block;
	width: 60vw;
	margin: 0 auto;
	padding: 20px;
	color: #000000;
	background-color: #ffd800;
	font-size: 15px;
	text-decoration: none;
}
.answer_button.disabled, .answer_button_open.disabled
{
	background-color: #eeeeee;
}
.answer_info
{
	position: relative;
	width: 90vw;
	margin-left: 5vw;
	border-radius: 5px;
	padding: 10px;
	background-color: #eeeeee;
	text-align: left;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.answer_info.correct
{
	background-color: #EFFEDE;
}
.answer_info.false
{
	background-color: #FEDEDE;
}
.answer_result
{
	color: #00cc00;
}
.answer_result.wrong
{
	color: #cc0000;
}



.academy_progress
{
	position: relative;
	width: 90vw;
	margin: 0 5vw;
	height: 30px;
}
.progress_dot
{
	position: absolute;
	top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #eeeeee;
	z-index: 500;
}
.progress_bar
{
	position: absolute;
	top: 8px;
	width: 30px;
	height: 4px;
	background-color: #eeeeee;
	z-index: 499;
}
.progress_dot.finished, .progress_bar.finished
{
	background-color: #ffd800;
}
.academy_results
{
	width: 100%;
	padding: 20px 0;
	background-color: #ffffff;
}

.popup
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2);
	line-height: 100vh;
	text-align: center;
}
.popup_body
{
	display: inline-block;
	vertical-align: middle;
	width: 90%;
	min-height: 100px;
	padding: 0px;
	background-color: #ffffff;
	border-radius: 10px;
	box-sizing: border-box;
	line-height: 30px;
}
.popup_body .title
{
	font-size: 20px;
	font-family: GothicA1;
	font-weight: 700;
	display: block;
	padding: 20px;
	padding-bottom: 10px;
}
.popup_body .body
{
	display: block;
	font-size: 16px;
	font-family: GothicA1;
	font-weight: normal;
	padding: 0px 20px;
	margin-bottom: 20px;
}
.popup_body .line
{
	width: 100%;
	height: 1px;
	border-bottom: rgba(100, 100, 100, 0.1) solid 1px;
	margin: 0px;
}
.popup_body .popup_btn
{
	width: 100%;
	height: 55px;
	text-align: center;
	line-height: 55px;
	color: #147efb;
	font-size: 20px;
	font-family: GothicA1;
	font-weight: 700;
	cursor: pointer;
}
.popup_body .popup_btn:hover, .popup_body .popup_btn.clicked
{
	background-color: rgba(100, 100, 100, 0.1);
}
.new_chat, .chat_title .add_person
{
	display: block;
	position: absolute;
	right: 70px;
	top: 15px;
	width: 46px;
	height: 46px;
	line-height: 46px;
	background-color: #eeeeee;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
}
.new_chat::before, .chat_title .add_person::before
{
	content: "+";
	font-size: 17px;
	font-weight: bold;
	color: #333333;
}
.chat_settings
{
	display: block;
	position: absolute;
	right: 15px;
	top: 15px;
	width: 46px;
	height: 46px;
	line-height: 46px;
	background-color: #eeeeee;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
}
.chat_settings img
{
	position: relative;
	left: 1px;
	top: 1px;
	width: 24px;
	height: 24px;
	opacity: 0.8;
}
.staff_member_picture
{
	border-radius: 50%;
	background-color: #eeeeee;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	margin: 10px;
}
.chat_title .staff_member_picture
{
	position: absolute;
	left: 15px;
	top: 0px;
}
.intro
{
	box-sizing: border-box;
	padding: 0 20px;
}
.video_top_link
{
	display: inline-block;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background-color: #ffffff;
	border: #cccccc solid 1px;
	width: 90%;
	text-decoration: none;
	color: #000000;
	margin-bottom: 20px;
}

.chat_intro_row
{
	position: relative;
}
.chat_badge
{
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 30px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #ce1719;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
}

.extra_buttons.white img
{
	filter: brightness(0) saturate(100%) invert(100%) sepia(8%) saturate(2%) hue-rotate(226deg) brightness(116%) contrast(100%);
}
.extra_buttons
{
	background-color: var(--frontend_background_color) !important;
}
.powerd_by
{
	display: none;
	position: absolute;
	width: 100%;
	text-align: center;
	top: -12px;
	left: 0px;
	font-size: 11px;
	color: var(--frontend_color) !important;
}

@media only screen and (max-width:340px)
{
	#header .title
	{
		font-size: 20px;
	}
	.navogation_buttons a {
		font-size: 15px !important;
	}
	body {
		font-size: 12px;
	}
}

@media only screen and (max-width:320px)
{
	#header .title
	{
		font-size: 16px;
	}
	.extra_buttons img {
		max-height: 25px !important;
	}
	body {
		font-size: 11px;
	}
}


/******************************************************************************
 *	Finance
 */
#finance {
	padding-left: 20px;
	padding-top: 10px;
}
#finance>div {
	margin-top: 10px;
	margin-bottom: 20px;
}
#finance .form-control {
	margin-left: 10px;
}
#finance .data {
	margin-left: 40px;
}
#finance a.file {
	text-decoration: none;
}


#ip_clock
{
	position: fixed;
	right: 50px;
	bottom: 0px;
	height: 50px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background-color: #333333;
	color: #cccccc;
	line-height: 50px;
	min-width: 50px;
	box-shadow: 0 4px 2px -2px rgba(100, 100, 100, 0.2);
	text-align: center;
	padding: 0px 10px;
	box-sizing: border-box;
	font-size: 21px;
	font-weight: bold;
	z-index: 999;
}
#ip_clock .far
{
	font-size: 25px;
}
#ip_clock.can_clock_in
{
	color: #ffffff;
	cursor: pointer;
}
#ip_clock.clocked_in
{
	color: #1DA809;
	cursor: pointer;
}
#ip_clock.pause
{
	color: #E77D0A;
	cursor: pointer;
}

#ip_clock_menu, #ip_clock_pause_menu
{
	position: fixed;
	right: 0px;
	bottom: 0px;
	height: 0px;
	background-color: #333333;
	color: #cccccc;
	line-height: 40px;
	width: 100%;
	text-align: center;
	padding: 0px 10px;
	box-sizing: border-box;
	font-size: 15px;
	font-weight: bold;
	z-index: 999;
}
.clock_button
{
	display: inline-block;
	width: calc(50% - 30px);
	background-color: #ffffff;
	margin-top: 10px;
	border-radius: 2px;
	color: #333333;
}
.clock_button.full_width_button
{
	width: 100%;
}