@import
	"https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap";

html, body {
	height: 100vh;
	width: 100vw;
	min-height: 100%;
	min-width: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	font-family: 'Noto Sans', sans-serif;
}

p {
	color: #3988cd;
	text-align: center;
	font-weight: bold;
}

h3 {
	color: #3988cd;
	text-align: center;
	font-weight: bold;
}

h4 {
	color: #3988cd;
	text-align: center;
	font-weight: bold;
}

h2 {
	color: #3988cd;
	text-align: center;
	font-weight: bold;
}

h5 {
	color: #3988cd;
	text-align: center;
	font-weight: bold;
}

h6 {
	color: #3988cd;
	text-align: center;
	font-weight: bold;
}

.forgot-password {
	color: gray;
	width: 100%;
}

img {
	width: 40%;
	height: auto;
}

#demo-panel {
	order: 1;
	margin: 0;
	padding: 0;
}

#login-panel {
	order: 2;
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 8000px) {
	body {
		
	}
	.mobile-elements {
		display: none;
	}
	.icon {
		padding: 1.5%;
		font-size: 100%;
	}
}

@media screen and (max-width: 1192px) {
	body {
		
	}
	.mobile-elements {
		display: none;
	}
	.icon {
		padding: 3%;
		font-size: 100%;
	}
}

@media screen and (max-width: 992px) {
	body {
		
	}
	.mobile-elements {
		display: none;
	}
	.icon {
		padding: 3%;
		font-size: 100%;
	}
}

@media screen and (max-width: 600px) {
	body {
		
	}
	.mobile-elements {
		display: inline;
	}
	.non-mobile-elements {
		display: none;
	}
	.icon {
		padding: 2.5%;
		font-size: 100%;
	}
}

.login-layout {
	height: 100%;
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: row;
	background-image: url('/img/login-background.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: left top;
}

.ccse-logo {
	width: 130px;
	height: 130px;
}

.ccse-device-logo {
	margin-top: 10%;
}

.ccse-device-logo img {
	width: 80%;
}

.mobile-elements img {
	width: 80%;
}

.ccse-demo-button {
	background-color: #3988cd;
	border: none;
	color: white;
	font-weight: 900;
	border: 1px solid #D3D3D3;
}

.ccse-demo-button:hover {
	background: #FFFFFF;
	color: #3988CD;
	border: 1px solid #D3D3D3;
}

.right-container .login-panel {
	z-index: 2;
	position: relative;
	width: 40%;
	min-width: 250px;
	height: 55%;
}

.login-panel label {
	color: #3988cd;
}

.login-panel input {
	width: 100%;
	height: 5%;
}

.login-panel input:focus {
	outline: 0 0 0 0 !important;
	box-shadow: 0 0 0 0 !important;
}

.card {
	height: 370px;
	margin-top: auto;
	margin-bottom: auto;
	width: 400px;
	background-color: rgba(255, 255, 255, 0.8);
}

.login-label-org-name {
	margin-top: 20px;
}

.login-site-link {
	margin-top: 50%;
}

.social_icon span {
	font-size: 60px;
	margin-left: 10px;
	color: #3988cd;
}

.social_icon span:hover {
	color: white;
	cursor: pointer;
}

.card-header h3 {
	color: white;
}

.social_icon {
	position: absolute;
	right: 20px;
	top: -45px;
}

.input-group-prepend span {
	width: 50px;
	background-color: #3988cd;
	color: black;
	border: 0 !important;
}

.input-icons i {
	position: absolute;
}

.input-icons {
	width: 100%;
	margin-bottom: 10px;
}

.icon {
	color: #3988cd;
	text-align: right;
}

.input-field {
	width: 100%;
	padding-left: 40px;
}

.remember {
	color: #3988cd;
}

.remember input {
	width: 20px;
	height: 20px;
	margin-left: 15px;
	margin-right: 5px;
}

.remember input[type="checkbox"] {
	width: 15px;
	height: 15px;
}

.login_btn {
	color: white;
	font-weight: bold;
	background-color: #3988cd;
	width: 100%;
}

.login_btn:hover {
	color: black;
	background-color: white;
}

.login-form-label {
	color: #3988cd;
	font-size: 1vw;
}

.links {
	color: white;
}

.links a {
	margin-left: 4px;
}

.ccse-text-color {
	color: #3988CD;
}

.ccse-btn-outline {
	background: #FFFFFF;
	color: #3988CD;
	border: 1px solid #D3D3D3;
}

.ccse-btn-outline:hover {
	background: #3988CD;
	color: #FFFFFF;
}

.h-40 {
	height: 40% !important;
}

.ccse-btn-primary {
	color: #FFFFFF;
	background: #01A6A6;
}