@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap');

@font-face {
    font-family: 'Rounds';
    src: url('/_assets/fonts/roundsblack.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
  --main-color: #000000;
  --main-color2: #ffc350;  
  --main-color3: #ee9c00;  
  --main-color-h1: #000000;   
  --main-color-h2: #000000;   
  --main-color-h3: #000000;   
  --main-color-h4: #000000;   
  --main-color-btn-default: #e1126b;
  --main-color-btn-action: #e1126b; 
  --font-family: 'Montserrat', sans-serif; 
  --font-family-header: "Rounds", sans-serif;    
  --btn-border-radius: 20px;
  --form-border-radius: 0px;
  --primary-bg-color: #2ad2c9;
  --primary-bg-hover: #25aea7;  
  --color-yellow: #eeac3b;
  --color-red: #e1126b;    
  --color-blue: #5db9c5; 
  --color-green: #cbd23f; 
  --color-orange: #f07e19; 
  --color-purple: #433184; 
  --color-action: #e1126b;    
  --bg-color-grey: #f5f7fa;   
  --logo: url(/portals/0/assets/rplogo.png);
}

body {
	font-family: var(--font-family);
	color: var(--main-color);
	font-size: 16px;
	line-height:1.5;
	font-weight: 400;
	background: linear-gradient(180deg, rgba(162,215,255,1) 0%, rgba(255,255,255,1) 60%);
	background-repeat:no-repeat;
	margin:0; 
	height:100%;
	-webkit-font-smoothing: auto;
}

.site-color {color:var(--main-color-btn-action) !important;}

/*=========== Typography ===============*/
h1, h2, h3, h4, h5, h6, p, btn, .h1, .h2, .h3, .h4, .h5, .h6, .p, .btn {font-family: var(--font-family);}
h1, .h1 {font-size: 48px; font-weight: 600; color:var(--main-color-h1); margin-bottom:20px; font-family: var(--font-family-header);  line-height:1.2; text-transform:uppercase;}
h2, .h2 {font-size: 48px; font-weight: 600;  color:var(--main-color-h2); margin-bottom:20px; font-family: var(--font-family-header);  line-height:1.2; text-transform:uppercase;}
h3, .h3 {font-size: 24px; font-weight: 800;  color:var(--main-color-h3); margin-bottom: 16px; text-transform:uppercase;}
h4, .h4 {font-size: 20px; font-weight: 400;  color:var(--main-color-h4); margin-bottom: 20px}
h5, .h5 {font-size: 18px; font-weight: 500;  color:#000000; }
h6, .h6 {font-size: 24px; font-weight: 600;  color:#000000; }

p, .p, li, div, th, td, normal {font-size: 16px; font-weight: 400; color:var(--main-color); line-height:1.8;}

#body-wrapper a, #body-wrapper a:visited  {color:var(--main-color); text-decoration:none;}

.text-small {font-size:12px}
.text-blue {color:var(--color-blue) !important}
.text-red {color:var(--color-red) !important}
.text-yellow {color:var(--color-yellow) !important}
.text-green {color:var(--color-green) !important}
.text-orange {color:var(--color-orange) !important}
.text-purple {color:var(--color-purple) !important}
.text-action {color:var(--color-action) !important}

.table-row-background-grey {background-color:#efeef5 !important}
.table-row-background-pink {background-color:#fbecf2 !important}

.table-white-border td {border:10px solid #ffffff}

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

.required-indicator:before {content:'*'; color:var(--color-red); font-size:16px;}

/*=========== End Typography ===============*/

/*=========== Buttons ===============*/
.btn {border-radius: var(--btn-border-radius)}
.btn-site-default, a.btn-site-default {background-color: var(--main-color-btn-default) ; border-color: var(--main-color-btn-default); color: #FFFFFF; font-weight: 600; text-transform: uppercase; }
.btn-site-default:hover, .btn-site-default:active, .btn-site-default:focus {background-color: var(--main-color-btn-default) !important; opacity: 0.8; border-color: var(--main-color-btn-default) !important; color: #FFFFFF;}

.btn-site-action, a.btn-site-action {background-color: var(--main-color-btn-action); border-color: var(--main-color-btn-action); color:#ffffff !important; font-weight: 600; text-transform: uppercase;}
.btn-site-action:hover, .btn-site-action:active, .btn-site-action:focus {background-color: var(--main-color-btn-action) !important; opacity: 0.8; border-color: var(--main-color-btn-action-hover) !important; color:#ffffff;}

.btn-site-yellow, a.btn-site-yellow {background-color: var(--color-yellow); border-color: var(--color-yellow); color:#ffffff !important; font-weight: 600; text-transform: uppercase;}
.btn-site-yellow:hover, .btn-site-yellow:active, .btn-site-yellow:focus {background-color: var(--color-yellow) !important; border-color: var(--color-yellow) !important; color:#ffffff !important;}

.btn-site-red, a.btn-site-red {background-color: var(--color-red); border-color: var(--color-red); color:#ffffff !important; font-weight: 600; text-transform: uppercase; }
.btn-site-red:hover, .btn-site-red:active, .btn-site-red:focus {background-color: var(--color-red) !important; border-color: var(--color-red) !important; color:#ffffff !important;}

.btn-site-white, a.btn-site-white {background-color: #ffffff; border-color: #000000; color:#000000 !important; font-weight: 600; text-transform: uppercase; }
.btn-site-white:hover, .btn-site-white:active, .btn-site-white:focus {background-color: #ffffff !important; border-color: var(--color-red) !important; color:var(--color-red) !important;}

.btn-site-blue, a.btn-site-blue {background-color: var(--color-blue); border-color: var(--color-blue); color:#ffffff !important; font-weight: 600; text-transform: uppercase;}
.btn-site-blue:hover, .btn-site-blue:active, .btn-site-blue:focus {background-color: var(--color-blue) !important; border-color: var(--color-blue) !important; color:#ffffff !important;}

.btn-site-green, a.btn-site-green {background-color: var(--color-green); border-color: var(--color-green); color:#ffffff !important; font-weight: 600; text-transform: uppercase;}
.btn-site-green:hover, .btn-site-green:active, .btn-site-green:focus {background-color: var(--color-green) !important; border-color: var(--color-green) !important; color:#ffffff !important;}



.btn-danger {background-color: #000000; border-color: #000000; color:#ffffff !important; font-weight: 600; text-transform: uppercase; }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus {background-color: #000000 !important; border-color: #000000 !important; color:#ffffff !important;}

.btn-site-white-red, a.btn-site-white-red {background-color: #ffffff; border-color: var(--color-red); color:var(--color-red) !important; font-weight: 600; text-transform: uppercase; }
.btn-site-white-red:hover, .btn-site-white-red:active, .btn-site-white-red:focus {background-color: #ffffff !important; border-color: var(--color-red) !important; color:var(--color-red) !important;}

i.btn-view {color:#365dcd;}
i.btn-delete {color:#F44336;}

.btn-fa, .cursor-pointer {cursor:pointer}

.btn-width-1 {width:150px}

/*=========== End Buttons ===============*/

@media (max-width: 575px) {
	.container {--bs-gutter-x: 2.5rem;}
}

#wrapper {
    min-height:calc(100vh - 180px);
}


#body-wrapper {
    padding: 50px 0px 50px;
}


#header {padding-top:20px}

#headerlogo {
	height:170px; 
	width: 170px;	
	float:left; 
	background-image: var(--logo) !important;
    background-size: contain;
	background-repeat: no-repeat;
}



#footer-wrapper {
	background-image: url(/portals/0/assets/footer-banner.png);
    background-size: cover; 
	padding:20px 0px;
}
#footerlogo {height:140px; margin-left:20px;}

.FooterSection1 div, .FooterSection1 p, .FooterSection1 h1, .FooterSection1 a, #footer-navbar a, #footer-navbar a:visited, #footer-navbar a:focus, #footer-navbar a:hover {color:#ffffff;}

#footer-navbar {margin-top:30px}
#footer-navbar a {margin:0px 30px; font-weight:700}

@media (max-width: 991px) {
	#footer-navbar {margin-top:0px}
	#footer-navbar.nav {display:block; align-items:right}
	#footer-navbar li {text-align:right;}
}


#footerpb {height:60px; margin-top:0px} 

@media (min-width: 1200px) {
	#footerpb {position: absolute; right:40px; bottom:0px; margin-top:0px}
	#footercopy {position:absolute; bottom:0px}
}

.card { border-radius: 20px; }
.card-header {border-top-left-radius: 20px !important; border-top-right-radius: 20px !important;}
.card-footer {border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important;}

.card-title {
    font-size: 22px;
    color:var(--main-color-h1);
}

.form-control, .form-select {border:1px solid #2ad2c985; border-radius:20px}



/*=========== Navigation Code ===============*/

.navbar a, .navbar a:visited {color:#000000; font-weight:normal; font-size:20px;}
.navbar a:hover {color:rgba(0,0,0,0.7); font-weight:normal}
.navbar li.active a {font-weight:bold}

#header .navbar-expand-lg {
	margin-top:50px;
    float: right;
}

#header .navbar-nav {
	margin-left:auto!important;

}

#header .navbar-nav .nav-item {margin-left:30px}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,255,255);
} 

@media only screen and (max-width: 992px) {
	
	#header .navbar-expand-lg {
		margin-top: -40px;
		width: 100%;
	}	

}


@media only screen and (max-width: 767px) {
	
	#header .navbar-expand-lg {
	}	
	
	.navbar-collapse {background-color:var(--main-color); padding:20px 20px 0px; margin-left: -30px; margin-right: -30px;}	
}

.OTPEntry {padding:10px}

.icon-check {color:#4CAF50 }
.icon-cross {color:#f44336 }