:root {
	--primary-color: #12214A;
	--primary-text-color: #12214A;
	--light-text-color: #AEADAD;
	--danger-color: #dc3545;
	--secondary-color: #1F75AE;
	--hover-blue: #f2f7fa;
	--selected-blue: #e3ecf1;
}

* {
	font-family: 'Inter', sans-serif;
	color: var(--primary-text-color);
}

body {
	margin: 0px 0px 0px 0px;
	font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
	color: var(--primary-text-color);
	font-weight: 600;
}

h2 {
	font-size: 20px;
}

.title {
	text-align: start;
}

.error
{
    color: var(--danger-color);
    font-weight: bold;
}

.OkAlert
{
    color: Green;
    font-weight: bold;
}

#Logo
{
	position:fixed; 
	top:0px; 
	left:0px;	
	z-index:100;
}

 #Logo img {
	height: 80px;
}

#Top {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 55px;
	position: fixed;
	z-index: 99;
}

#TopTable {
	width: 100%;
	height: 65px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	background: #ffffff;
	box-shadow: 0 0 5px #3333;
}

.left img.logo {
	height: 100%;
	max-height: 65px;
	width: auto;
	display: block;
	margin-left: 10px;
	margin-top: 1px;
}

.center {
	text-align: center;
	font-weight: bold;
}

.right {
	justify-self: end;
}

.user-menu {
	margin-left: auto;
	margin-right: 10px;
}

.user-menu span i {
	font-size: 14px;
}

.user-menu span {
	font-weight: 600;
    cursor:pointer;
}

.user-menu-dropdown {
    display:none;
    position:absolute;
    margin-top:2px;
    background-color:#FFF1F1;
    min-width:120px;
    box-shadow:0 8px 16px rgba(0,0,0,0.2);
    z-index:100;
	border-radius: 8px;
	right: 0;
	margin-right: 16px;
}

.user-menu-dropdown a {
    padding:5px 10px;
    text-decoration:none;
    display:block;
	text-align: center;
}

.user-menu-dropdown a span {
	color: #ff0000;
}

.user-menu-dropdown i {
	transform: scale(-1);
	color: #ff0000;
	padding-left: 5px;
}

.user-menu-dropdown a:hover {
    background-color: var(--hover-blue);
	border-radius: 8px;
}

.user-menu-dropdown.show {
    display:block;
}

#TableMenu
{
	width:100%; 
}

#Bottom
{
	bottom:0px; 
	left:0px; 
	width:100%; 
	height:25px; 
	position:fixed;	
	z-index:99;
}

#BottomTable
{
	background-image:url(../Images/Bottom.png); 
	background-repeat:repeat-x; 
	width:100%; 
	height:25px;
}

#BottomTableUser
{
        width:10%;
        padding-left:5px;
        vertical-align:bottom;
        color:white;
}

#BottomTableUser span {
        position:relative;
        bottom:3px;
}

#BottomTableAlert
{
	width:5%;
	padding-left:5px; 
	vertical-align:bottom;
}

#BottomTableRoller
{
	width:78%;
	padding-left:5px; 
	vertical-align:middle;
}

#BottomTablelogout
{
	width:7%; 
	text-align:right; 
	padding-right:5px; 
}

#screenCenterLogin
{
    width:400px; 
    height:200px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-100px auto auto -200px; 
    border:1px solid black;
    text-align:center;
    vertical-align:middle;
}

.LoadingLabel
{
        font:12px "segoe ui",arial,sans-serif;
        color:var(--light-text-color);
}

.FullWidth
{
	width:100%;
}

.Pointer
{
	cursor:pointer;
}

.Watermark
{
        font:12px "segoe ui",arial,sans-serif;
        color:var(--light-text-color);
}

#outerDiv {height: 200px; overflow: hidden; position: relative;}
#outerDiv[id] {display: table; position: static;}

#middleDiv {position: absolute; top: 35%;} /* for explorer only*/
#middleDiv[id] {display: table-cell; vertical-align: middle; width: 100%;}

#LoadingouterDiv {height: 200px; overflow: hidden; position: relative;}
#LoadingouterDiv[id] {display: table; position: static;}

#LoadingmiddleDiv {position: absolute; top: 40%;} /* for explorer only*/
#LoadingmiddleDiv[id] {display: table-cell; vertical-align: middle; width: 100%;}


/*#inner {position: relative; top: -50%}  for explorer only */
/* optional: #inner[id] {position: static;} */


/*LOADER*/
#transparent_class 
{
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    top:56px;
    bottom:26px;
    left:0px;
    right:0px;
    overflow: hidden; 
    position: absolute;
    z-index:10000;
	background-color:white;
}

#centerLoader
{
    width:400px; 
    height:200px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-100px auto auto -200px; 
    text-align:center;
    z-index:100001;
    background-color:White;
    border:solid 1px black;
}
/*END LOADER*/

/*ERROR BOX*/
#ErrorContainer
{
	width:400px; 
    height:200px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-100px auto auto -200px; 
    text-align:center;
    z-index:100001;
}

#ErrorTableContainer
{
	width: 400px; 
	height: 200px; 
}

#ErrorTopLeftCorner
{
	background-image:url(../Images/InfoUserTL.png); 
	width:15px; 
	height:15px;
}

#ErrorTopMiddle
{
	background-image:url(../Images/InfoUserTC.png); 
	background-repeat:repeat-x;
}

#ErrorTopRightCorner
{
	background-image:url(../Images/InfoUserTR.png); 
	width:15px; 
	height:15px;
}

#ErrorMiddleLeft
{
	background-image:url(../Images/InfoUserML.png); 
	background-repeat:repeat-y;
}

#ErrorMiddleMiddle
{
	background-color:Black; 
	height:170px;
	vertical-align:top;
	text-align:left;
	width:370px;
}

#ErrorMiddleRight
{
	background-image:url(../Images/InfoUserMR.png); 
	background-repeat:repeat-y;
}

#ErrorBottomLeftCorner
{
	background-image:url(../Images/InfoUserBL.png); 
	width:15px; 
	height:15px;
}

#ErrorBottomMiddle
{
	background-image:url(../Images/InfoUserBC.png); 
	background-repeat:repeat-x;
}

#ErrorBottomRightCorner
{
	background-image:url(../Images/InfoUserBR.png); 
	width:15px; 
	height:15px;
}

.LabelErrorTitle
{
    color:White;
    font-family:'Inter', sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:left;
}

.TextError 
{
	color: white;
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	text-align: justify;
	text-indent: 5px;
}

#bodyMessage
{
	height:120px;
	overflow-x:hidden;
	overflow-y:auto;
}

.IconImage
{
	float:left; 
	padding-right:20px; 
	padding-left:20px;
}

/*END ERROR BOX*/