:root{
	--pageBlue: #09A5DB;
	--pageBlack: #011B33;
	--pageGrey: #B0B0B0;
	--pageTextBlack: #333333;
	--pageTextGrey: #828282;
}

body::-webkit-scrollbar {
  width: 0px;
  height: .3px;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
	background-color: var(--pageTextGrey);
	width: 2px;
	height: 2px;
	border-radius: 20px;
	cursor: pointer;
}

#pageBody{
	width: 100%;
	height: 100vh;
	margin: 0px!important;
}

#sectionMenu{
	float: left;
	width: 19%;
	padding: 2em;
}

#sectionBody{
	float: right;
	width: 81%;
}

#appName, #pingName{
	font-family: 'SF Pro Display Bold', sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 25px;
	letter-spacing: 0.01em;
	color: #011B33;
}

#pingName{
	padding: 1em;
}

#mainMenuText{
	margin-top: 4em;
}

.sideMenuText{
	color: #B0B0B0;
	padding: .7em;
	cursor: pointer;
}

.sideMenuText > span{
	padding-left: .8em;
	font-family: 'Open Sans';
	font-size: 1em;
	font-family: 'SF Pro Display Medium', sans-serif;
}

.sideMenuText.active > span {
	color: var(--pageBlue);
}

.active{
	animation: glow .5s linear;
}

#sectionBodyHeader{
	height: 70px;
}

#adminBtnBody{
	height: 40px;
	width: 130px;
	border-radius: 10px;
	border: 1px solid var(--pageGrey);
	margin-left: 30px;
	cursor: pointer;
}

#adminText{
	font-family: 'Open Sans', sans-serif;
	padding-right: 10px!important;
}

#funaabLogo{
	/*padding-left: 1.3em;*/
	font-size: 14px;
}

#adminTextArrow{
	padding-left: 5px;
	padding-top: 2px;
}

#sectionBodyContainer{
	height: calc(100vh - 70px);
	width: 100%;
}

.body{
	width: 100%;
	height: 100%;
	background: #f5f6fa;
	margin: 0px!important;
	overflow-y: scroll;
}

.body::-webkit-scrollbar {
  width: 7px;
  height: .3px;
}
.body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.body::-webkit-scrollbar-thumb {
	background-color: var(--pageTextGrey);
	width: 2px;
	height: 2px;
	border-radius: 20px;
	cursor: pointer;
}

#studentsSection{
	display: none;
}

#pingsSection{
	/*display: none;*/
}

#statsSection{
	width: 100%;
	height: 240px;
	animation: glow 1s linear;
}

#pingDetailsSection{
	width: 100%;
	height: 750px;
	animation: glow 1s linear .5s;
}

#statsBody{
	width: calc(100% - 80px);
	margin-top: 25px;
	margin-bottom: 25px;
	margin-right:40px;
	margin-left: 40px;
	height: 165px;
	border-radius: 10px;
}
#statsBodyName{
	height: 45%;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-size: 1.2em;
	padding: 25px;
	color: var(---pageTextBlack);
}

.pingsStatsCount{
	font-size: 25px;
	font-family: 'SF Pro Display Medium';
	font-weight: 300;
	color: var(---pageTextBlack);
	padding-top: .4em;
}

#statsBodyStats{
	height: 55%;
}

.pingsStatsCountText{
	font-family: 'Open Sans', sans-serif;
	color: var(--pageTextGrey);
}

#allPingsSection{
	width: 40%;
	float: left;
}

#infoSection{
	width: 60%;
	float: right;
}

#pingInfoSection{
	height: 450px;
	overflow-y: scroll;
}

#pingInfoSection::-webkit-scrollbar {
  width: 3px;
  height: .1px;
}

#pingInfoSection::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#pingInfoSection::-webkit-scrollbar-thumb {
	background-color: var(--pageTextGrey);
	width: 2px;
	height: 2px;
	border-radius: 20px;
	cursor: pointer;
}

#pingDetailsBody{
	width: calc(100% - 4em);
	height: calc(100% - 4em);
	margin: 2em;
	border-radius: 5px;
}

#pingDetailsHeader{
	height: 155px;
	width: 100%;
}

#pingDetailsHeaderBody{
	height: 80px;
	width: 100%;
	margin-bottom: 1.5em;
}

#pingDetailsHeaderBody > div{
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 400;
	padding-top: 25px;
	padding-left: 20px;
	font-size: 1.1em;
}

#pingDetailsHeaderRuleBody{
	height: 5px;
	margin-top: 65px;
}

#pingDetailsHeaderRule{
	height: 3px;
	width: 80%;
	border-bottom: 1px solid #EFEFEF;
}

#pingDetails{
	min-height: 300px;
}

#pingDetailFilter{
	height: 40px;
	width: 90px;
	border-radius: 10px;
	border: 1px solid var(--pageGrey);
	margin-left: 30px;
	cursor: pointer;
}

#pingDetailFilterArrow{
	padding-left: 1em;
	padding-top: 2px;
}

.pingDetail{
	width: 100%;
	height: 95px;
	padding-top: 15px;
	padding-bottom: 5px;
}

.pingDetail:hover{
	background: #F5F6FA;
	cursor: pointer;
}
.activePingIndicator.active{
	width: 15px !important;
	height: 15px !important;
	position: relative;
	bottom: 4em;
	right: 1em;
}
.activePingIndicator.passive{
	display: none;
}


#pingDetailImageBody{
	padding-top: .6em!important;
	/*padding-left: calc(100%-8px)!important;*/
}

#pingDetailImageBody > img{
	object-fit: cover;
	border-radius: 100px;
	width: 55.5px;
	height: 55px;
	margin-left: 2em;
}

.pingDetailTextBodyOne{
	height: 30%;
}

.pingDetailTextBodyTwo{
	height: 70%;
	color: #828282;
	font-family: 'Open Sans', sans-serif;
	/*white-space: nowrap; 
	overflow: hidden;
	word-wrap: break-word;
	text-overflow: ellipsis;*/
	padding-left: 12px;
}

.pingDetailName{
	font-family: 'SF Pro Display Medium', sans-serif;
	font-size: 1.1em;
	font-weight: 500;
}

.pingDetailTime{
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	color: #8798AD;
}

#infoSectionLatestPingContainer{
	width: 100%;
	height: 250px;
}

#infoSectionLatestPingBody{
	height: 200px;
	width: calc(100% - 4em);
	margin: 2em;
	border-radius: 10px;
}

#pingReplyButtons{
	display: none;
}
#latestPingImage{
	width: 60px;
	height: 60px;
	border-radius: 100px;
	object-fit: cover;
	margin-top: 10px;
}

#latestPingSectionOne{
	height: 45%;
}

#latestPingSectionOne > div {
	padding: 0px!important;
}

#latestPingSectionTwo{
	height: 55%;
	position: relative;
}

.latestPinger{
	height: 33.3%;
}

#latestPingerName{
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 500;
	line-height: 19px;
	font-size: 1.1em;
	padding: .5em;
	color: var(--pageTextBlack);
}

#latestPingerClinicNo{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: var(--pageTextBlack);
	line-height: 15px;
	padding: .5em;
}

#latestPingerTime{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 15px;
	padding-left: .5em;
	color: #8798AD;
}

#videoCallBtn{
	height: 40px;
	width: 140px;
	background: var(--pageBlue);
	border-radius: 5px;
	color: white;
	font-size: 14px;
	cursor: pointer;
}

#latestPingMessage{
	height: 70%;
	width: 95%;
	font-size: 15px;
	font-family: 'Open Sans', sans-serif, sans-serif;
	line-height: 21px;
	color: #828282;
	letter-spacing: 0.01em;
	padding-bottom: 1em;
	overflow-y: scroll;
}

#latestPingMessage::-webkit-scrollbar {
  width: 5px;
  height: .1px;
}
#latestPingMessage::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#latestPingMessage::-webkit-scrollbar-thumb {
	background-color: var(--pageTextGrey);
	width: 2px;
	height: 2px;
	border-radius: 20px;
	cursor: pointer;
}

#latestPingMessageOverlay{
	height: 40px;
	width: 92%;
	margin-right: -10px!important;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
	margin-bottom: 1.5em;
	position: absolute;
	bottom: -1.8em!important;
}

#infoSectionRecntlyContainer{
	width: 100%;
	height: 470px;
}

#infoSectionRecntlyBody{
	width: calc(100% - 4em);
	height: calc(470px - 4em);
	margin-top: 0px!important;
	margin: 2em;
}

#infoSectionRecntlyHeader{
	height: 80px;
	width: 90%;
}

#recentlyAddedToText{
	font-size: 1.1em;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 500;
	line-height: 19px;
	color: var(--pageTextBlack);
	letter-spacing: 0.045em;
	padding-top: 2.5em;
}

#recentlyAddedToSearch{
	height: 33px;
	width: 235px;
	border-radius: 10px;
	border: 1px solid lightgrey;
	opacity: 1;
	background: url('./icons/search.svg') no-repeat;
	background-position: 98% 40%;
	padding: 1em;
	transition: border .5s linear;
	margin-top: 2em;
	float: right;
}

#recentlyAddedToSearch:focus{
	outline: none;
	border: 1px solid var(--pageBlue);
}

#recentlyAddedTable{
	width: 100%;
	height: 350px;
}

#recentlyAddedTableHeader{
	height: 40px;
	width: 90%;
	background: #F6F6FB;
}

#recentlyAddedTableHeader > div {
	font-size: 13px;
	font-family: 'SF Pro Display Medium';
	line-height: 16px;
	color: #333333;	
}

#recentlyAddedTableBody{
	height: 40px;
	width: 90%;
	background: white;
}

#recentlyAddedTableBody > div{
	font-size: 13px;
	font-family: 'SF Pro Display Medium', sans-serif;
	line-height: 16px;
	color: #333333;	
}

.recentlyAddedUserImage{
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 1000000px;
}

.recentlyAddedUserName{
	padding-left: 1em;
}

.recentAddedBody{
	margin-top: 1em;
}


#disableMobile{
	position: fixed;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	background: var(--pageGrey);
	text-align: center;
	display: none;
}

#studentsAllStudentsSection{
	width: calc(90% - 2.5em);
	margin-left: 2em;
	margin-right: .5em;
	min-height: calc(100% - 4em);
	margin-top: 2em;
	margin-bottom: 2em;
	border-radius: 10px;
	animation: glow .5s linear;
}

#studentsAllSectionHeader{
	width: 100%;
	height: 70px;
}

#studentsSectionHeadetText{
	font-size: 1.1em;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 500;
	padding: 1.5em;
}

#studentsSectionFilter{
	height: 40px;
	width: 90px;
	border-radius: 10px;
	border: 1px solid var(--pageGrey);
	margin-left: 30px;
	cursor: pointer;
}

#studentSectionSearchBody{
	width: 100%;
	height: 40px;
}

#studentSectionSearch{
	height: 33px;
	width: 90%;
	border-radius: 10px;
	border: 1px solid lightgrey;
	opacity: 1;
	background: url('./icons/search.svg') no-repeat;
	background-position: 98% 40%;
	padding: 1em;
	transition: border .5s linear;
}

#studentSectionSearch:focus{
	outline: none;
	border: 1px solid var(--pageBlue);
}

#studentSectionsBody{
	width: 100%;
	height: 450px;
	overflow-y: scroll;
}

#studentSectionsBody::-webkit-scrollbar {
  width: 3px;
  height: .3px;
}
#studentSectionsBody::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#studentSectionsBody::-webkit-scrollbar-thumb {
	background-color: var(--pageTextGrey);
	width: 2px;
	height: 2px;
	border-radius: 20px;
	cursor: pointer;
}


.studentSectionDiv{
	width: 100%;
	height: 60px;
	margin-top: 1em;
}

.studentsSectionImages{
	height: 40px;
	width: 40px;
	border-radius: 100px;
	object-fit: cover ;
}

.studentsSectionName{
	font-size: 1.1em;
	font-weight: 500;
	font-family: 'SF Pro Display Medium', sans-serif;
}

.studentsSectionNumber{
	font-size: 15px;
	font-weight: normal;
	font-family: 'SF Pro Display Medium', sans-serif;
	color: #828282;
}

.studentsSectionClinicNo{
	font-weight: 'SF Pro Display Medium', sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: var(--pageTextBlack);
}

.studentsSectionLevel{
	font-size: 14px;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: normal;
	color: var(--pageTextGrey);
	text-align: right;
}

#studentDetailsSection{
	width: 100%;
	height: 180px;
	animation: glow .5s linear;
}

#studentDetailProfileBody{
	height: 90%;
	width: calc(100%-2em);
	margin-right: 1em;
	margin-top: 2em;
	border-radius: 5px;
}

#studentDetailProfilePicture{
	height: 120px;
	width: 120px;
	object-fit: cover;
}

#studentDetailsName{
	height: 20%;
	margin-top: 15%;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 400;
	font-size: 21px;
	color: var(--pageTextBlack);
}

#studentDetailsClinicNo{
	height: 20%;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: var(--pageTextGrey);
}

#studentDetailsLevel{
	height: 20%;
	margin-bottom: 15%;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: normal;
	color:  #000000;
}

#studentDetailsNumber{
	font-family: 'SF Pro Display Medium', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--pageTextBlack);
	padding-top: 1.5em;
}

#studentDetailsPingHistory{
	width: 100%;
	min-height: 360px;
	border-radius: 5px;
	animation: glow .5s linear;
}

.pingHistoryFullMessage{
	display: none;
	position: absolute;
	width: 400px;
	min-height: 80px;
	max-height: 180px;
	background: white;
	margin-top: 3em;
	margin-left: 5em;
	border-radius: 5px;
}
.pingHistoryFullMessageHeader{
	height: 40px;
	padding: .8em;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 500;
	font-size: 1.2em;
	color: var(--pageBlack);
}
.pingHistoryFullMessageText{
	min-height: 40px;
	max-height: 140px;
	padding: 1em;
	overflow-y: scroll;
}

.pingHistoryFullMessageText::-webkit-scrollbar {
  width: 3px;
  height: .3px;
}
.pingHistoryFullMessageText::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.pingHistoryFullMessageText::-webkit-scrollbar-thumb {
	background-color: var(--pageTextGrey);
	width: 2px;
	height: 2px;
	border-radius: 20px;
	cursor: pointer;
}

#studentDetailsPingHistoryHeader{
	height: 70px;
}

#pingHistoryText{
	padding-top: 2em;
	padding-left: 1.3em;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 500;
	color: var(--pageTextBlack);
	font-size: 1.1em;
}

#pingHistorySearch{
	height: 33px;
	width: 235px;
	border-radius: 10px;
	border: 1px solid lightgrey;
	opacity: 1;
	background: url('./icons/search.svg') no-repeat;
	background-position: 98% 40%;
	padding: 1em;
	transition: border .5s linear;
	float: right;
}

#pingHistoryTableColumns{
	height: 50px;
	background: #F6F6FB;
}

.pingHistoryColumn{
	font-size: 14px;
	font-family: 'SF Pro Display Medium', sans-serif;
	font-weight: 400;
	color: var(--pageTextBlack);
}

#pingHistoryTableRows{
	margin-top: 1em;
	height: 50px;
}

.historyDate{
	font-size: 12px!important;
}

.historyResponseStatus{
	width: 75px;
	height: 30px;
	border-radius: 30px;
	border: 1px;
	font-size: 13px;
	font-weight: 400;
	font-family: 'SF Pro Display Medium', sans-serif;
}

.historyResponseStatus.replied{
	border: 0.8px solid #219653;
	background: #EEFBF3;
	text-transform: capitalize;
	color: #219653;
}

.historyResponseStatus.ignored{
	border: 0.8px solid #EB5757;
	background: #FDEFEF;
	text-transform: capitalize;
	color: #EB5757;
}

.studentSectionDiv:hover{
	cursor: pointer;
	background: #d4e4ea;
}

#studentDetailProfilePicture{
	border-radius: 100px;
	object-fit: cover;
}

#startChatBtn{
	width: 110px;
	height: 40px;
	border-radius: 5px;
	border: 1px solid #09A5DB;
	margin-right: 1em;
	color: var(--pageBlue);
	cursor: pointer;
}

#startChatBtn:hover{
	background: #e5ebf0;
}

#chatBodyContainer{
	display: none;
	width: 500px;
	height: 515px;
	position: absolute;
	right: 2em;
	bottom: 0px;
	border-radius: 10px 10px 0px 0px;
	background: white;
}

#chatBodyHead{
	height: 70px;
	width: 100%;
	border-bottom: 1px solid #d6e3eb;
}

#chatUserName{
	font-family: 'SF Pro Display Medium', sans-serif;
	font-size: 20px;
	display: flex;
	align-items: flex-end;
}

#chatUserClinic{
	font-family: 'SF Pro Display Light', sans-serif;
	font-size: 16px;
	display: flex;
	align-items: flex-start;
}


#chatBox{
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#chatBox > div{
	width: 45px;
	height: 45px;
	background: #e6f6fb;
	border-radius: 5px;
	cursor: pointer; 
}

#chatBody{
	height: 385px;
	width: 100%;
	border-bottom: 1px solid #d6e3eb;
	overflow-y: scroll;
	padding-right: 10px;
	padding-left: 5px;
}

.receivedMessage{
	width: 400px;
	/*min-height: 50px;*/
	margin-top: 20px;
	float: left;
}

#chatBody::-webkit-scrollbar {
  width: 5px;
  height: .3px;
}

#chatBody::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#chatBody::-webkit-scrollbar-thumb {
	background-color: var(--pageTextGrey);
	width: 2px;
	height: 2px;
	border-radius: 20px;
	cursor: pointer;
}

.fluid{
	min-height: 50px !important;
}

.chatMessageBody{
	width: 100%;
	background: #F2F2F2;
	border-radius: 20px;
	padding: 1em;
	font-family: Open Sans, sans-serif;
}

.sentMessage{
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 5px;
	width: 320px;
	float: right;
}

.sentMessageBody{
	background: var(--pageBlue);
	border-radius: 20px;
	padding: 1em;
	color: white;
	font-family: Open Sans, sans-serif;
}

.chatReplyBody{
	height: 60px;
}

#chatReplyText{
	width: 100%;
	height: 100%;
	border: 0px;
	outline: 0px;
	padding: 1em;
}

#videoCallSection{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	background: #F5F6FA;
}

#videoCallSectionHeader{
	height: 65px;
	width: 100%;
	background: white;
}

#videoCallHeaderName{
	font-family: 'SF Pro Display Medium', sans-serif;
	font-size: 23px;
	color: var(--pageTextBlack);
	padding-top: 14px;
	padding-left: 1.1em;
}

#videoCallHeaderTime{
	font-family: 'SF Pro Display Medium', sans-serif;
	font-size: 23px;
	color: var(--pageBlue);
}

#videoCallBody{
	height: calc(100vh - 85px);
	width: 100%;
}

#videoCallViewSection{
	height: 450px;
	width: calc(100% - 80px);
	margin-right: 40px;
	margin-left: 40px;
	background: #edeef2;
}

#callersImage{
	width: 350px;
	height: 100%;
	object-fit: cover;
}

#doctorsImage{
	width: 150px;
	height: 150px;
	float: right;
	margin-right: 1em;
}

#videoCallButtonsBody{
	width: 100%;
	height: 90px;
}

#videoCallButtonsBody > div{
	margin-right: 1em;
	margin-left: 1em;
	cursor: pointer;
}

.videoCallButtons{
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	height: 60px;
	width: 60px;
	border-radius: 100px;
	background: var(--pageBlue);
}

.videoCallButtons.cancel{
	background: #EB5757;
}

#pingHistoryContainer{
	overflow-y: scroll;
	height: 250px;
}

#historyLoaderBody{
	display: none;
}











/*Login Page below*/

#loginBodyBackground{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: #F5FCFF;
}

#medicalTool{
	height: 258px;
	width: 258px;
	position: absolute;
	bottom: 100px;
	left: 16px;
	opacity: 0.08;
}

#loginBody{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: none;
}

header{
	width: 100%;
	height: 80px;
	color: var(--pageBlack);
	font-family: 'SF Pro Display Bold', sans-serif;
	font-size: 23px;
	padding-top: 30px;
	padding-left: 40px;
}

#loginContainer{
	height: calc(100% - 80px);
	width: 100%;
	display: flex;
	justify-content: center;
}

#loginDiv{
	height: 400px;
	width: 500px;
	margin-top: 3em;
}

#loginDivHeader{
	height: 60px;
	font-size: 24px;
	font-family: 'SF Pro Display Bold', sans-serif;
	color: #023664;
}

#loginDivHeaderText{
	font-family: 'SF Pro Display Light', sans-serif;
	font-size: 19px;
	color: #023664;
	padding-top: .3em;
	padding-right: 1em;
	padding-left: 1em;
	text-align: center;
	font-weight: bold;
	opacity: 0.8;
	margin-bottom: 1.5em;
}

.loginInput{
	margin-top: 1em;
	height: 60px;
	padding-right: 2em;
	margin-left: 2em;
}

#loginBtn{
	background: #09A5DB;
	border-radius: 5px;
	height: 50px;
	width: 100%;
	color: white;
	font-family: 'SF Pro Display Light', sans-serif;
	font-size: 20px;
	margin-top: 1.5em;
	cursor: pointer;
}


/* label focus color */
.input-field input[type=text]:focus + label {
    color: var(--pageBlue) !important;
}
.input-field input[type=password]:focus + label {
    color: var(--pageBlue) !important;
}

/* label underline focus color */
.input-field input[type=text]:focus {
    border-bottom: 1px solid #d6e3eb !important;
    box-shadow: 0 1px 0 0 #d6e3eb !important;
}
.input-field input[type=password]:focus {
    border-bottom: 1px solid #d6e3eb !important;
    box-shadow: 0 1px 0 0 #d6e3eb !important;
}

.input-field input[type=text] {
    color: #023664 !important;
    font-size: 20px;
    font-family: 'SF Pro Display Medium', sans-serif;
}
.input-field input[type=password] {
    color: #023664 !important;
    font-size: 20px;
    font-family: 'SF Pro Display Medium', sans-serif;
}

#loginError{
	font-family: 'SF Pro Display Light', sans-serif;
	color: red;
	padding-left: 2em;
	display: none;
}

#loginLoaderBackground{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	background: #ebf2f5;
	opacity: 0.7;
	display: none;
}

#loginLoader{
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	background: none;
	display: none;
}

#passwordViewIcon{
	position: absolute;
	right: 40px;
	color: var(--pageBlue);
	cursor: pointer;
}






@keyframes glow{
	from{
		opacity: 0;
	}
}