@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');

@font-face {
    font-family: 'Palace';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('/portals/0/Palace_Script.ttf') format('truetype');
}


:root {
  --main-color: #000000;
  --main-color2: #ffc350;  
  --main-color3: #7e27d5;  
  --main-color-h1: #5d7cb5;   
  --main-color-h2: #5d7cb5;   
  --main-color-h3: #5d7cb5;   
  --main-color-h4: #000000;   
  --main-color-btn-default: #7e27d5;
  --main-color-btn-action: #7e27d5; 
  --font-family: 'Open Sans', sans-serif; 
  --font-family-header: 'Palace', 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: 80px; font-weight: 500; color:var(--main-color-h1); margin-bottom:0px; font-family: var(--font-family-header);  line-height:1.2; }
h2, .h2 {font-size: 48px; font-weight: 500;  color:var(--main-color-h2); margin-bottom:0px; font-family: var(--font-family-header);  line-height:1.2; }
h3, .h3 {font-size: 24px; font-weight: 500;  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: 20px; 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}



/*=========== 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;}




i.btn-view {color:#365dcd;}
i.btn-delete {color:#F44336;}

.btn-fa, .cursor-pointer {cursor:pointer}



/*=========== End Buttons ===============*/

#header .navbar-nav {
	margin-left:auto!important;

}

.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 {}

#header .navbar-nav .nav-item {
    margin-left: 30px;
}

#header {
    padding: 0px 10px;
    background-color: transparent;
    background-image: linear-gradient(220deg, rgba(255, 255, 255, 0.25) 49%, #6ec1e445 100%);
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;	
}

#headerlogo {
	height:100px; 
	float:left; 
	margin-top:10px;
}

#header .navbar-expand-lg {
    margin-top: 50px;
    float: right;
}

#dnn_BottomPane2 {background:#4fa2d6}

#dnn_BottomPane2 p {color:#ffffff}