@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=Open+Sans&display=swap');


:root {
  --main-color: #000000;
  --main-color2: #ffc350;  
  --main-color3: #7e27d5;  
  --main-color-h1: #7e27d5;   
  --main-color-h2: #7e27d5;   
  --main-color-h3: #7e27d5;   
  --main-color-h4: #000000;   
  --main-color-btn-default: #7e27d5;
  --main-color-btn-action: #7e27d5; 
  --font-family: 'Open Sans', sans-serif; 
  --font-family-header: "Open Sans", sans-serif;    
  --btn-border-radius: 20px;
  --card-border-radius: 0px;  
  --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: #7e27d5; 
  --color-action: #7e27d5;    
  --bg-color-grey: #f5f7fa;   
}

body {
	font-family: var(--font-family);
	color: var(--main-color);
	font-size: 16px;
	line-height:1.5;
	font-weight: 400;
	background: #FFFFFF;
	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; font-family: var(--font-family-header); }
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:not(.btn), #body-wrapper a:visited:not(.btn)  {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; font-weight: 600; }
.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 - 150px);
}


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


#header {padding-top:20px}

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



#footer-wrapper {
	padding:20px 0px;
}

#footer-navbar {margin-top:30px}
#footer-navbar a {margin:0px 30px; font-weight:700}
.FooterSection1 div, .FooterSection1 p, .FooterSection1 h1, .FooterSection1 a, #footer-navbar a, #footer-navbar a:visited, #footer-navbar a:focus, #footer-navbar a:hover {color:#000000;}

.card { border-radius: var(--card-border-radius); }
.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 #cccccc; border-radius:5px}



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

#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.7)' 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(0,0,0);
} 



@media only screen and (max-width: 767px) {
	
	.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 }