/*

CONCEPTION -n
The conception of the website. Things that remain consistent throughout the system.

*/


/* ----- ROOT ----- */

	:root {
		/* BASE COLOURS */
		--cbp:  #7F4B9D;
		--cbs:  #5B0C88;

		--cbl:  #EDE4F1;
		--cbd:  #210F2E;

		--cbt:  #343D46;

		--cbn:  #A779C5;
		--cbm:  #4D0C74;
		--cbg:  #5E5C73;

		--cbw:  #FFFFFF;

		/* HIGHLIGHTING COLOURS */
		--chp:  #4A94C2;
		--chs:  #245878;

		--chl:  #F7FBFC;
		--chd:  #0F334A;

		--chn:  #728794;
		--chm:  #536E80;
		--chg:  #546875;

		/* TABLE COLOURS */
		--ctp: #EDE4F1;
		--cts: #F8F5FA;

		/* TRANSITIONS */
		--trb:  0.3s all ease;

		/* SHADDOWS */
		--bsl: 0.8px 0.8px 2.2px rgba(0, 0, 0, 0.02), 2px 2px 5.3px rgba(0, 0, 0, 0.028), 3.8px 3.8px 10px rgba(0, 0, 0, 0.035), 6.7px 6.7px 17.9px rgba(0, 0, 0, 0.042), 12.5px 12.5px 33.4px rgba(0, 0, 0, 0.05), 30px 30px 80px rgba(0, 0, 0, 0.07);

		/* FONT MANAGEMENT */
		font-size: 17px;
	}


/* ----- SPACING & SETUP ----- */
	html {
		background-color: var(--cbd);
	}

	body {
		font-family: 'Poppins', sans-serif;
		font-size: 1rem;
		color: var(--cbt);
	}

	body.navbar-is-fixed-top {
		margin-top: 54px;
	}

	.navbar .container-fluid {
		padding: 0px;
	}

	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3,
	.col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
	.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,
	.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
	.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
		padding-left: 0;
		padding-right: 0;
	}

	.radio, .checkbox {
		margin: 0px;
	}

	.main-container {
		padding-top: 80px;
		margin-top: -80px;
	}


/* ----- TEXT FORMATTING ----- */
	a {
		color: var(--cbp);
		text-decoration: none;
		transition: all 0.3s ease;
	}

	a:hover, a:focus, a:active {
		color: var(--cbs);
		text-decoration: none;
	}

	.form-item input::-webkit-input-placeholder,
	.form-item textarea::-webkit-input-placeholder {
		color: var(--cbg);
	}

	.form-item input:-moz-placeholder,
	.form-item textarea:-moz-placeholder {
		color: var(--cbg);
	}

	.form-item input::-moz-placeholder,
	.form-item textarea::-moz-placeholder {
		color: var(--cbg);
	}

	.form-item input:-ms-input-placeholder,
	.form-item textarea:-ms-input-placeholder {
		color: var(--cbg);
	}


/* ----- BUTTONS ----- */
	.btn {
	 	padding: 15px 50px;
	 	margin: 10px;
	 	border: none;
	 	border-radius: 15px;
	 	font-size: 1rem;
	 	cursor: pointer;
	 	transition: var(--trb);
	}

	.btn-primary {
		background-color: var(--chp);
		color: var(--cbw);
		transition: var(--trb);
	}

	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active {
	 	background-color: var(--chs);
		color: var(--cbw);
	  	outline: none;
	}

	.btn-default {
	 	background-color: var(--chp);
	 	color: var(--cbw);
	 	transition: var(--trb);
	}

	.btn-default:hover,
	.btn-default:focus,
	.btn-default:active {
	 	background-color: var(--chs);
	 	color: var(--cbw);
	}

	.btn-danger {
	 	background-color: #840029;
	 	color: var(--cbw);
	 	transition: var(--trb);
	}

	.btn-danger:hover,
	.btn-danger:focus,
	.btn-danger:active {
	 	background-color: #60112E;
	 	color: var(--cbw);
	}

	.btn-success {
	 	background-color: #008442;
	 	color: var(--cbw);
	 	transition: var(--trb);
	}

	.btn-success:hover,
	.btn-success:focus,
	.btn-success:active {
	 	background-color: #16633B;
	 	color: var(--cbw);
	}

	.btn-warning {
	 	background-color: #BFB341;
	 	color: var(--cbw);
	 	transition: var(--trb);
	}

	.btn-warning:hover,
	.btn-warning:focus,
	.btn-warning:active {
	 	background-color: #897D25;
	 	color: var(--cbw);
	}

	.btn-info {
	 	background-color: #005587;
	 	color: var(--cbw);
	 	transition: var(--trb);
	}

	.btn-info:hover,
	.btn-info:focus,
	.btn-info:active {
	 	background-color: #003057;
	 	color: var(--cbw);
	}


/* ----- ALERTS ----- */
	.alert {
		padding: 25px;
		border: none;
		border-radius: 20px;
		box-shadow: var(--bsl);
		margin: 40px 40px 25px 40px;
	}

	.form-item--error-message.alert {
		margin: 10px 0px 15px 0px;
		padding: 10px;
		border-radius: 15px;
	}

	.alert-dismissable .close, .alert-dismissible .close {
		color: var(--cbw);
		top: 0px;
		right: 0px;
	}

	button.close {
		background-color: var(--chd);
		padding: 5px 9px;
		border-radius: 50%;
		transition: var(--trb);
	}

	.alert-flex {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-start;
	}

	.alert-color {
		display: block;
		width: 40px;
		height: 40px;
		margin-right: 20px;
		text-align: center;
	}

	.form-item--error-message.alert.alert-danger {
		background-color: #9d574b;
		color: var(--cbw);
		font-weight: 700;
	}

	.alert-warning, .alert-success, .alert-danger {
		background-color: var(--cbw);
		color: var(--cbt);
	}

	.alert-success .alert-color:before {
		content: url(/sites/default/dl/svg/circle-check-solid.svg);
		display: inline-block;
		width: 40px;
		height: 40px;
	}

	.alert-warning .alert-color:before {
		content: url(/sites/default/dl/svg/circle-exclamation-solid.svg);
		display: inline-block;
		width: 40px;
		height: 40px;
	}

	.alert-danger .alert-color:before {
		content: url(/sites/default/dl/svg/circle-xmark-solid.svg);
		display: inline-block;
		width: 40px;
		height: 40px;
	}


/* ----- LOGIN STYLING ----- */
	/*.login-form {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0px;
		z-index: 9999;
	}

	.user-login-form {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.lif-bg {
		flex: 3 0 0px;
		height: 100vh;
		background: url(https://cdn.attgroup.co.za/app/dl/images/login.jpg);
		background-size: cover;
		background-position: center;
	}

	.lif-wrap {
		flex: 1 1 0px;
		background-color: var(--cbw);
		padding: 60px;
		box-shadow: var(--bsl);
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: flex-start;
		overflow-x: scroll;
	}

	.lifh-logo {
		margin-bottom: 60px;
	}

	.lifh-logo img {
		width: clamp(300px, 350px, 400px);
	}

	.lifh-wu {
		margin-bottom: 10px;
	}

	.lifh-wu h3 {
		font-weight: 900;
		margin-bottom: 25px;
		text-align: left;
	}

	.path-user .main-container {
		min-height: 30vh;
	}

	.lif-form .form-control {
		height: 60px;
		background-color: var(--cbw);
		border-radius: 20px;
		border: 2px solid #bcb8c2;
	}

	.lif-form .form-control:focus {
		border-color: var(--cbp);
		box-shadow: none;
	}

	.lif-form .btn {
		width: 100%;
		margin: 20px 0px;
		border-radius: 20px;
		padding: 19px 50px;
	}

	.lif-form .btn-primary {
		background-color: var(--cbp);
	}

	.lif-help {
		text-align: left;
		width: 100%;
		padding: 0px 10px;
	}

	.lif-help a {
		font-size: 0.7rem;
		color: var(--cbg);
	}

	.lif-form .form-item {
		position: relative;
		margin-top: 35px;
	}

	.lif-form .control-label {
		position: absolute;
		top: -15px;
		left: 20px;
		background-color: var(--cbw);
		padding: 5px 10px;
		border-radius: 4px;
	}

	.user-pass {
		width: 50%;
		margin: 100px auto;
		padding: 50px;
		border-radius: 20px;
		background-color: var(--cbl);
		box-shadow: var(--bsl);
	}

	.path-user .messages__wrapper {
		position: relative;
		z-index: 99999;
		width: 70%;
	}

	.path-user .alert {
		margin: 15px 40px;
	}*/