:root{

	/*Define custom colours*/
	--deepBlue: #000088;
	--lightGrey: #DDDDDD;
	--maroon: #AA0000;
	--lightMaroon: #CC0000;
}

/*Main body*/
body{
	background: url('/static/images/bg_img.png');
}

/**/
.bold-italic-text {
	font-weight: bold;
	font-style: italic;
}

/*Define background colour classes*/
.bg-maroon {
	background-color: var(--maroon);
}

.bg-lightGrey {
	background-color: var(--lightGrey);
}

.color-lightMaroon {
	color: var(--lightMaroon);
}


/*Display options*/
.display-none {
	display: none;
}

/*To darken the screen*/
.fullScreenDarkLayer {
	height: 100%;
	width: 100%;
	background-color: #00000080;
	position: fixed;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
	z-index: 99;
}

.fullScreenDarkLayer.visible {
	visibility: visible;
	opacity: 1;
}

/*For altering font size*/
.font-size-18 {
	font-size: 18px;
}

.font-size-100 {
	font-size: 100px;
}

.font-size-125 {
	font-size: 125px;
}

.font-size-150 {
	font-size: 150px;
}

/*For objects to be hidden under other elements*/
.hidden-under {
	opacity: 0;
	position: absolute;
	z-index: -1;
}


/*Alter style for input-group provided by Bootstrap 4*/
.input-group .form-control {
	color: black;
}

.input-group .form-control:focus {
	color: black;
	box-shadow: 0 0 0 2px #2050FF40;
}

.input-group .input-group-text {
	background-color: #2050FF;
	color: white;
}

.input-group .input-group-content-grey {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding: 0.375rem 0.75rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: black;
	text-align: center;
	background-color: #F0F0F0;
	border: 1px solid #ced4da;
}

.input-group .input-group-append-empty {
	width: 20px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	border-top: 1px solid #ced4da;
	border-right: 1px solid #ced4da;
	border-bottom: 1px solid #ced4da;
}


/*Label tag*/
label {
	margin: 0;
}

/*Left navigation panel*/
.leftNav {
	height: 100%;
	width: 300px;
	margin-left: -300px;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	background: url('/static/images/bg_img.png');
	overflow-x: hidden;
	padding-top: 60px;
	transition: 0.5s;
}

.leftNav a {
	text-decoration: none;
}

.leftNav button {
	display: block;
	background-color: transparent;
	color: #888888;
	margin: 15px;
	padding: 10px 30px;
	border-radius: 30px;
	width: 90%;
	border: none;
	outline: none;
	text-align: left;
	cursor: pointer;
	transition: 0.5s;
}

.leftNav button:hover {
	font-size: 105%;
	color: #555555;
	background-color: #DDDDDD
}

.leftNav button.active {
	color: black;
	background-color: #CCCCCC;
}

.leftNav button:focus {
	color: black;
	background-color: #DDDDDD;
}

.leftNav button i {
	font-size: 130%;
	transition: 0.5s;
}

.leftNav button:hover i {
	color: var(--maroon);
}

.leftNav button.active i {
	color: var(--lightMaroon);
}

.leftNav button:focus i {
	color: var(--lightMaroon);
}

/*Button to open left nav*/
#leftNavOpenbutton {
	height: 40px;
	width: 40px;
	padding: 5px 0px 0px 11px;
	margin: -10px 10px -10px -5px;
	cursor: pointer;
	border-radius: 50%;
	transition: .25s;
}

#leftNavOpenbutton:hover {
	background-color: var(--lightMaroon);
}


/*Margin classes*/
.ml-6 {
	margin-left: 5rem !important;
}

.ml-7 {
	margin-left: 8rem !important;
}

.ml-8 {
	margin-left: 12rem !important;
}


/*Modify navbar*/
.navbar {
	box-shadow: 0px 5px 10px grey;
	z-index: 101;
}

a.navbar-brand {
	font-family: cursive;
	font-size: 27px;
	margin: 3px 0px -5px 0px;
	padding: 0px;
	font-weight: bold;
}


/*Drop down for profile button in navTop*/
.navTopDropBox {
	height: 210px;
	width: 300px;
	position: fixed;
	right: 20px;
	border-radius: 10px;
	background: url('/static/images/bg_img.png');
	margin-top: -210px;
	transition: 0.5s;
	z-index: 100;
}


/*Vertical tabs on the left of the page*/
.page-tab {
	float: left;
	width: 100%;
}

.page-tab a {
	text-decoration: none;
}

.page-tab button {
	display: block;
	background-color: transparent;
	color: #999999;
	margin: 15px 0px;
	padding: 10px 30px;
	border-radius: 30px;
	width: 100%;
	border: none;
	outline: none;
	text-align: left;
	cursor: pointer;
	transition: 0.5s;
}

.page-tab button:hover {
	font-size: 105%;
	color: #555555;
	background-color: #DDDDDD
}

.page-tab button.active {
	color: black;
	background-color: #CCCCCC;
}

.page-tab button i {
	font-size: 130%;
	transition: 0.5s;
}

.page-tab button:hover i {
	color: var(--maroon);
}

.page-tab button.active i {
	color: var(--lightMaroon);
}

.page-tab-content {
	display: none;
}





/*Profile pic display and upload*/
.profile-pic-big {
	width: 180px;
	height: 180px;
	margin-top: 20px;
}

.profile-pic-big img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	line-height: 90px;
	text-align: center;
}

.profile-pic-big div.uploadOverlay {
	position: absolute;
	top: 20px;
	height: inherit;
	width: inherit;
	opacity: 0;
	transition: .5s ease;
	background-color: black;
	border-radius: 50%;
	cursor: pointer;
}

.profile-pic-big div.uploadOverlay:hover {
	opacity: 0.6;
}

.profile-pic-big div.uploadOverlayContent {
	color: white;
	font-size: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
	text-align: center;
}

.profile-pic-big i {
	font-size: 40px;
}


/*Profile pic dispay in navTop dropdown*/
.profile-pic-med {
	height: 100px;
	width: 100px;
	margin-top: 20px;
}

.profile-pic-med img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 50%;
	transition: .3s;
}

.profile-pic-med img:hover {
	opacity: 0.85;
}


/*Profile pic display on navTop*/
.profile-pic-small {
	height: 40px;
	width: 40px;
	object-fit: cover;
	border-radius: 50%;
	transition: .3s;
	cursor: pointer;
}

.profile-pic-small:hover {
	opacity: 0.7;
}



/*Round corners as needed*/
.roundCorner-10 {
	border-radius: 10px;
}

.roundCorner-30 {
	border-radius: 30px;
}

.roundCorner-left-30 {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.roundCorner-right-30 {
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}


/*Search results*/
.search-results-content {
	position: relative;
	background-color: var(--lightGrey);
	margin-top: 5px;
	width: 90%;
	border-radius: 30px;
	padding: 4px 10px 4px 20px;
	font-size: 17px;
	text-align: justify;
	transition: 0.5s;
	overflow: hidden;
}

.search-results-content .right-buttons {
	position: absolute;
	right: 10px;
	top: 13px;
}

.search-results-content .right-buttons button {
	padding: 5px 8px 5px 8px;
	border-radius: 50%;
}


.search-results-heading {
	background-color: var(--lightMaroon);
	border-radius: 30px;
	margin-top: 20px;
	padding: 5px;
	color: white;
	text-align: center;
	font-size: 19px;
	font-weight: bold;
	font-family: serif;
}


/*Simple wrapper around select input*/
.select-wrapper {
	padding-right: 15px;
	border: 1px solid #ced4da;
}

.select-wrapper select {
	border: none;
}


/*Horizontal line with text in the middle*/
.text-horizontal-line {
    display: flex;
    align-items: center;
    text-align: center;
    font-style: italic;
}

.text-horizontal-line::before, .text-horizontal-line::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid black;
}

.text-horizontal-line::before {
    margin-right: .25em;
}

.text-horizontal-line::after {
    margin-left: .25em;
}

/*For viewing password*/
.view-password-eye i{
	transition: 0.4s;
	color: #2050FF;
}

.view-password-eye:hover i{
	
	color: var(--lightMaroon);
}




/*Define width as needed*/
.width-40per {
	width: 40%;
}

.width-50per {
	width: 50%;
}

.width-60per {
	width: 60%;
}

.width-70per {
	width: 70%;
}

.width-80per {
	width: 80%;
}

.width-90per {
	width: 90%;
}

.width-100per {
	width: 100%;
}