:root {
	/* Primary */
	--primary-main: #5A9BD5;
	--primary-dark: #3B6EA5;

	/* Secondary */
	--secondary-main: #4996C1;
	--secondary-light: #81B6D4;

	/* Tertiary */
	--tertiary-main: #495AC1;
	--tertiary-light: #A4ACE0;

	/* Warning */
	--warning-main: #FF9800;
	--warning-light: #FFB74D;
	--warning-lighter: #FFF5E7;
	--warning-dark: #F57C00;

	/* Info */
	--info-main: #2196F3;
	--info-light: #64B5F6;
	--info-dark: #1976D7;

	/* Success */
	--success-main: #4CAF50;
	--success-light: #6FBF73;
	--success-dark: #357A38;

	/* Error */
	--error-main: #F44336;
	--error-light: #F6685E;
	--error-dark: #AA2E25;

	/* Common */
	--common-white: #FFFFFF;
	--common-black: #000000;

	/* Button Labels */
	--button-label: #222222;
	--button-label-hover: #FFFFFF;

	--text-primary: #FCFCFC;
	--text-secondary: #E1E3E7;
	--text-disabled: #FAFAFA;

	/* Background */
	--background-default: #4A515F;
	--background-paper: #636E88;
	--background-tab-bar: #57637D;
	--background-disabled: #515C71;

	--border-radius: 0.5rem;
	--box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 2px rgba(0, 0, 0, 0.05);
}

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    background: var(--background-default) !important;
    min-height: 100%;
}

#mag_box {
	float: left;
	margin-left: 10px;
	margin-top: 0px;
	background-image: url(/templates/images/layouts/headmbox.png);
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
}
#sat_box_container {
	height: 85px;
	float: left;
}
.default_back {
	background-color: transparent !important;
}
.callletters {
	text-align: center;
	font-weight: 800;
	color: var(--common-white);
	width: 180px;
	margin: auto;
}

#login-container {
	clear: both;
}

.login {
	display: table;
	margin: auto;
	padding: 60px 80px 60px 80px;
	background: var(--background-paper);
	border-radius: 15px ;
}

#login-header {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	color: var(--text-primary);
	padding-bottom: 20px;
}

.login label {
	color: var(--text-primary);
	font-size: 17px;
	font-weight: bold;
}

.login-input {
	width: 300px;
	margin-top: 4px;
	padding: .6rem;
	color: var(--common-white) !important;
	border-width: 1px;
	border-style: solid;
	border-color: var(--text-secondary);
	background-color: var(--background-paper) !important;
	border-radius: var(--border-radius);
}

#login-button {
	width: 200px;
	height: 40px;
	border: none;
	border-radius: 17px;
	color: var(--button-label);
	background-color: var(--primary-main);
	font-weight: bold;
	font-size: 17px;
	margin: auto;
	display: flex;
	cursor: pointer;
}
#login-button:hover {
	background-color: var(--primary-dark);
	color: var(--common-white);
}

#error-msg {
	color: var(--error-main);
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	padding: 10px;
}