html, body{
	font-family				: Calibri, sans-serif;
	font-size				: 16px;
	font-display			: optional;
}
h1{
    padding					: 0;
    margin					: 0;
    font-size				: 1.3rem;
    font-weight				: 600;
	font-variant			: small-caps;
}
h2{
	padding					: 0;
    margin					: 0;
	font-size				: 1.1rem;
    font-weight				: 600;
}

/*--------------------------------------------*/
/* External Libraries */
.datepicker-panel>ul>li.highlighted {
    background-color	: #FAFAFA !important;
}
.datepicker-panel>ul>li.picked, .datepicker-panel>ul>li.picked:hover {
	background-color	: #e5f2ff;
	font-weight			: 600 !important;
}


/*--------------------------------------------*/
/* Basic */
.clickable{
	cursor					: pointer;
}
.body-container{
	width					: 100vw;
	margin					: auto;
}
button > i{
	width					: 1.2rem;
	*margin-right			: 2px;
}
.input-error{
	background				: rgba(255, 20, 20, 0.30);
}
.input-warning{
	background				: rgba(255, 255, 0, 0.35);
}
.background-grey {
    background: #F5F5F5;
}

/*--------------------------------------------*/
/* Page Layout */

/* Top */
.top-container{
	display					: none;
}

/* Left */
.left-container{
	position				: fixed;
	z-index					: 999;
	top						: 0;
	left					: 0;
	height					: 100vh;
	width					: 220px;
	background				: #EEE;
	box-shadow				: 0px 0px 3px rgba(0, 0, 0, 0.5);
}
.left-navigation{
	position				: relative;
	width					: 100%;
	height					: 100vh;
	right					: 0;
}
.left-footer{
	width					: 100%;
	position				: absolute;
	bottom					: 0;
}

/* Right */
.right-container{
	width					: -webkit-fill-available;
	*padding-left			: 220px;
	margin-left				: 220px;
	height					: 100vh;
	overflow				: auto;
}
.right-content{
	width					: -webkit-fill-available;
}


/*--------------------------------------------*/
/* Default Content Layout */
section.header{
	margin					: 0;
	padding					: 0;
}
section.body{
	position				: relative;
	margin					: 0;
	padding					: 0;
	overflow				: auto;
}
section.body-tab{
	position				: absolute;
	top						: 0;
	right					: 0;
	min-width				: 50%;
	height					: 100%;
	
	border-left				: solid 1px #ddd;
    box-shadow				: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    background				: #fff;
}
section.body-tab .body-tab-header{
	padding					: 0;
    background				: #EEE;
    height					: 48px;
}

/*--------------------------------------------*/
/* Fonts */
.font-extrasmall{
	font-size				: 0.7rem;
}
.font-small{
	font-size				: 0.85rem;
}
.font-medium{
	font-size				: 1rem;
}
.font-large{
	font-size				: 1.2rem;
}
.font-extralarge{
	font-size				: 1.4rem;
}


/*--------------------------------------------------------------------------------------------------------------------*/
/* Text format */
.text-uppercase{
	text-transform			: uppercase;
}
.text-capitalize{
	text-transform			: capitalize;
}
.text-bold{
	font-weight				: 600;
}
.text-italic{
	font-style				: italic;
}
a.extenal-link{
	color: #b72279;
}


/*--------------------------------------------------------------------------------------------------------------------*/
/* Text format */
.margin-0{
	margin					: 0;
}
.padding-0{
	padding					: 0;
}


/*--------------------------------------------*/
/* Buttons */
button.btn-action{
	border					: solid 1px #0890C6;
	background-color		: #0985C1;
	color					: #fff;
}
button.btn-action:hover{
	border					: solid 1px #0890C6;
	background-color		: #1996E2;
}
button.btn-action:disabled, button.btn-action:disabled:hover{
	color					: #aaa;
	background-color		: #eee;
	border					: none;
}
/**/
button.btn-submit{
	border					: solid 1px #07B0A4;
	background-color		: #09C1A6;
	color					: #fff;
}
button.btn-submit:hover{
	border					: solid 1px #07B0A4;
	background-color		: #2AD1B5;
}
button.btn-submit:disabled, button.btn-submit:disabled:hover{
	color					: #aaa;
	background-color		: #eee;
	border					: none;
}
/**/
button.btn-warning{
	border					: solid 1px #B00774;
	background-color		: #C10976;
	color					: #fff;
}
button.btn-warning:hover{
	border					: solid 1px #B00774;
	background-color		: #D12A85;
}
button.btn-warning:disabled, button.btn-warning:disabled:hover{
	color					: #aaa;
	background-color		: #eee;
	border					: none;
}


/*--------------------------------------------*/
/* Notification (inline) */
.notification-inline-container{
	margin					: 0.5rem 0;
	padding					: 0.5rem;
	border					: solid 1px #c55;
    background				: #fcc;
    color					: #a33;
}
.notification-success{
	border					: solid 1px #5c5;
    background				: #cfc;
    color					: #292;
}
.notification-error{
	border					: solid 1px #c55;
    background				: #cfc;
    color					: #922;
}


/*--------------------------------------------------------------------------------------------------------------------*/
/* Tooltip */
.tooltip-container{
	position				: relative;
	display					: inline-block;
}

.tooltip-container .tooltip-content{
	visibility				: hidden;
	width					: max-content;
	background-color		: #fff;
	color					: #777;
	font-size				: 0.8rem;
	text-align				: center;
	padding					: 0.2rem 0.3rem;

	/* Position the tooltip */
	position				: absolute;
	z-index					: 1;
	top						: -1.7rem;
	border					: solid 1px #ccc;
	cursor					: pointer;
}

.tooltip-container:hover .tooltip-content{
  visibility				: visible;
}


/*--------------------------------------------*/
/* Left Panel */
.panel-left{
	width					: 50vw;
	max-width				: 600px;
	
}
.panel-left .pagetitle-container{
	position				: fixed;
	z-index					: 999;
	
	width					: inherit;
	max-width				: inherit;
	height					: 60px;
	
	background-color		: rgba(255, 255, 255, 0.85);
	backdrop-filter			: blur(5px);
	
	border-bottom			: solid 1px #ddd;
	border-left				: solid 1px #ddd;
	border-right			: solid 1px #ddd;
}
.main-pagetitle{
	padding					: 1rem;
	font-size				: 1.2rem;
	font-weight				: 600;
	letter-spacing			: 0.3px;
}



/*--------------------------------------------*/
/* Popup & Notification */
.popup-container{
	position				: fixed;
	z-index					: 1000;
	top						: 0;
	left					: 0;
	width					: 100vw;
	height					: 100vh;
	background-color		: rgba(0, 0, 0, 0.15);
	backdrop-filter			: blur(1px);
}
.popup-container#notification-container{
	z-index					: 1001;
}
.popup-overlay{
	position				: absolute;
	top						: 0;
	left					: 0;
	width					: 100vw;
	height					: 100vh;
	background-color		: rgba(0, 0, 0, 0.15);
	backdrop-filter			: blur(1px);
}
.popup-box{
	position				: absolute;
	top						: 50%;
	left					: 50%;
	width					: max-content;
	max-width				: 50vw;
	-ms-transform			: translate(-50%, -55%);
	transform				: translate(-50%, -55%);
	/**/
	margin					: 0;
	padding					: 0.3rem;
	padding-bottom			: 1rem;
	background-color		: #fff;
	box-shadow				: 0 0px 5px 0px rgba(0, 0, 0, 0.2);
	*border-radius			: 1rem;
}
.popup-header-closeBtn{
	background				: transparent;
	background-image		: none !important;
	border					: none !important;
	border-radius			: 50%;
	width					: 2.5rem;
	height					: 2.5rem;
	margin					: 0.3rem 0;
	padding					: 0;
}
.popup-header-closeBtn:hover{
	background				: #fafafa;
	color					: #000;
	border-radius			: 1rem;
}
.popup-header{
	font-size				: 1rem;
	font-weight				: 600;
	text-transform			: uppercase;
	*margin					: 0.5rem 0;
}
.popup-content{
	max-height				: 75vh;
	overflow-y				: auto;
}

.notification-box{
	border-radius			: 0;
	text-align				: center;
	padding					: 20px;
}
.notification-icon{
	font-size				: 2rem;
}