@font-face {
    font-family: 'Roboto';
    src: url('../fonts/RobotoBlack.eot');
    src: url('../fonts/RobotoBlack.eot') format('embedded-opentype'),
         url('../fonts/RobotoBlack.woff2') format('woff2'),
         url('../fonts/RobotoBlack.woff') format('woff'),
         url('../fonts/RobotoBlack.ttf') format('truetype'),
         url('../fonts/RobotoBlack.svg#RobotoBlack') format('svg');
		   font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/RobotoBold.eot');
    src: url('../fonts/RobotoBold.eot') format('embedded-opentype'),
         url('../fonts/RobotoBold.woff2') format('woff2'),
         url('../fonts/RobotoBold.woff') format('woff'),
         url('../fonts/RobotoBold.ttf') format('truetype'),
         url('../fonts/RobotoBold.svg#RobotoBold') format('svg');
		   font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/RobotoLight.eot');
    src: url('../fonts/RobotoLight.eot') format('embedded-opentype'),
         url('../fonts/RobotoLight.woff2') format('woff2'),
         url('../fonts/RobotoLight.woff') format('woff'),
         url('../fonts/RobotoLight.ttf') format('truetype'),
         url('../fonts/RobotoLight.svg#RobotoLight') format('svg');
		 
		  font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/RobotoRegular.eot');
    src: url('../fonts/RobotoRegular.eot') format('embedded-opentype'),
         url('../fonts/RobotoRegular.woff2') format('woff2'),
         url('../fonts/RobotoRegular.woff') format('woff'),
         url('../fonts/RobotoRegular.ttf') format('truetype'),
         url('../fonts/RobotoRegular.svg#RobotoRegular') format('svg');
		     font-weight: normal;
    font-style: normal;
}


*
{ box-sizing: border-box;}


html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body{ margin:0; padding:0; font-family: 'Roboto'; background:#eceff0;}
a{ margin:0; padding:0; text-decoration:none !important;  outline:none !important; -moz-transition:.9s; -webkit-transition:.9s; -ms-transition:.9s; -o-transition:.9s; transition:.9s;}
a:hover{ color:#7d0e4b;}
::selection{ background:#881755; color:#fff;}
::-moz-selection{ background:#881755; color:#fff;}
::-webkit-selection{ background:#881755; color:#fff;}
img{ max-width:100%; height:auto;}
ul{ margin:0; padding:0; list-style-type:none;}
li{ margin:0; padding:0;}
p{ padding:0; color:#555555; font-size:17px;   font-family: 'Roboto'; margin:0 0 15px 0; font-weight:300;}
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-family: 'Roboto'; color:#151515;}

input, select, button{outline:none !important;}



.dataTable1{ width:50%;  border-collapse: collapse; margin-bottom:30px;}
.dataTable1 tr:nth-child(even){ background:#ccc}
.dataTable1 td{ border:1px #ddd solid; color:#333; font-size:15px; font-family: 'Roboto'; font-weight:normal;   padding: 8px;   }
.dataTable1 th{ font-weight:bold; border:1px #ddd solid; color:#333; font-size:17px; font-family: 'Roboto';   padding: 8px;}
.header-main{ float: left; clear: both; width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; transition: 0.5s;background: #f1f1f1; padding: 0px 30px 0 30px; min-height:70px; -webkit-box-shadow: 3px 10px 17px -12px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 10px 17px -12px rgba(0,0,0,0.2);
box-shadow: 3px 10px 17px -12px rgba(0,0,0,0.2); }
.logo-frame{float: left;transition: 0.5s;width: 175px;padding: 17px 0; }
.sticky{ position: fixed; background: rgba(0, 0, 0, 0.8); z-index: 9999; height: 79px;  }
.sticky .logo-frame{ width: 203px; }
.hamburger-toggle{position: relative;padding: 23px;background: transparent;border: 1px solid transparent;cursor: pointer;order: 1;}
.hamburger-toggle [class*='bar-']{display: block;
background:
#fff;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .2s ease all;
transition: .2s ease all;
border-radius: 2px;
height: 2px;
width: 24px;
margin-bottom: 4px;}
.hamburger-toggle [class*='bar-']:nth-child(2) {width: 18px;}
.hamburger-toggle [class*='bar-']:last-child {margin-bottom: 0;width: 12px;}
.hamburger-toggle.is-opened {left: 3px;}
.hamburger-toggle.is-opened [class*='bar-'] {background: #fff;}
.hamburger-toggle.is-opened .bar-top {-webkit-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: 15% 15%;transform-origin: 15% 15%;}
.hamburger-toggle.is-opened .bar-mid {opacity: 0;}
.hamburger-toggle.is-opened .bar-bot {-webkit-transform: rotate(45deg);transform: rotate(-45deg);-webkit-transform-origin: 15% 95%;transform-origin: 15% 95%; width: 24px;}
.hamburger-toggle:focus {outline-width: 0;}
.hamburger-toggle:hover [class*='bar-'] {}
.l-header {padding-left: 70px;position: fixed;top: 0;right: 0;z-index: 10;width: 100%;background: #ffffff;-webkit-transition: padding 0.5s ease-in-out;-moz-transition: padding 0.5s ease-in-out;-ms-transition: padding 0.5s ease-in-out;-o-transition: padding 0.5s ease-in-out;transition:padding 0.5s ease-in-out;}
.l-header__inner {width: 100%;
height: 63px;
background:
#113c9e; }
.sidebar-is-expanded .l-header {padding-left: 220px;}
.c-search {display: flex;height: 100%;width: 350px;}
.c-search__input {border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-right: 0;flex-basis: 100%;height: 100%; border: 0;font-size:14px;padding: 0 20px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.c-dropdown {opacity: 0;text-align: left;position: absolute;flex-direction: column;display: none;width: 300px;top: 30px;right: -40px;background-color: #fff;overflow: hidden;min-height: 300px;border: 1px solid #d0d0d0;-webkit-border-radius: 10px;border-radius: 10px;background-clip: padding-box;-webkit-box-shadow: 0px 5px 14px -1px #cecece;-moz-box-shadow: 0px 5px 14px -1px #cecece;box-shadow: 0px 5px 14px -1px #cecece;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.l-sidebar {width: 70px; height: auto;position: absolute;z-index: 10;left: 0;top: 70px;bottom: 0;background-image: linear-gradient(to bottom, #241a70, #0052a5, #0085c7, #00b7d8, #42e7e0);-webkit-transition: width 0.5s ease-in-out;-moz-transition: width 0.5s ease-in-out;-ms-transition: width 0.5s ease-in-out;-o-transition: width 0.5s ease-in-out;transition: width 0.5s ease-in-out;}
.l-sidebar .logo {width: 100%;height: 70px;display: flex;align-items: center;justify-content: center;background-color: #051835;}
.l-sidebar .logo .logo__txt {font-size: 26px;line-height: 1;color: #fff;text-align: center;font-weight: 700;}
.l-sidebar__content {height: 100%;position: relative;}
.sidebar-is-expanded .l-sidebar {width: 280px;}
.c-menu > ul {display: flex;flex-direction: column;}
.c-menu > ul .c-menu__item {color: #fff; max-width: 100%;overflow: hidden;}
.c-menu > ul .c-menu__item__inner {display: flex; margin-bottom: 0px;flex-direction: row;align-items: center;min-height: 60px;position: relative;
cursor: pointer;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner { background:#113c9e}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner i {color: #fff;}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span {color: #fff;}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner:before {height: 36px;opacity: 1;}
.c-menu > ul .c-menu__item:not(.is-active):hover .c-menu__item__inner {background-color: #113c9e;}
.c-menu > ul .c-menu__item i{flex: 0 0 70px;font-size: 18px;font-weight: normal;text-align: center;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.c-menu > ul .c-menu__item .c-menu-item__expand {position: relative;left: 100px;padding-right: 20px;margin-left: auto;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
.sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__expand {left: 0px;}
.c-menu > ul .c-menu__item .c-menu-item__title {flex-basis: 100%;padding-right: 10px;position: relative;left: 220px;opacity: 0;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-ms-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;}
.c-menu > ul .c-menu__item .c-menu-item__title span {font-weight: 400;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__title {left: 0px;opacity: 1;}
.c-menu > ul .c-menu__item .c-menu__submenu {background-color: #10388d;padding: 15px 19px 15px;font-size: 12px;display: none;}
.c-menu > ul .c-menu__item .c-menu__submenu li {border-bottom: none;
color: #5f9cfd;}
.c-menu > ul .c-menu__item .c-menu__submenu li a { padding:10px 0px; border-bottom: none; display:block;
color: #fff;}

.c-menu > ul .c-menu__item .c-menu__submenu li:last-child {margin: 0;padding: 0;border: 0;}
main.l-main {width: 100%;height: 100%; position:relative;padding: 70px 0 70px 70px;-webkit-transition: padding 0.5s ease-in-out;-moz-transition: padding 0.5s ease-in-out;-ms-transition: padding 0.5s ease-in-out;-o-transition: padding 0.5s ease-in-out;transition: padding 0.5s ease-in-out;position: fixed; z-index:100; }
main.l-main .content-wrapper {padding: 25px;height: 100%;}
main.l-main .content-wrapper .page-content {border-top: 1px solid #d0d0d0;padding-top: 25px;}
main.l-main .content-wrapper--with-bg .page-content {background: #fff;border-radius: 3px;border: 1px solid #d0d0d0;padding: 25px;}
main.l-main .page-title {font-weight: 400;margin-top: 0;margin-bottom: 25px;}
.accordion2 {background-color: #eee;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}
.accordion2:after {content: '\002B';color: #777;font-weight: bold;float: right; margin-left: 5px;}
.panel2 {padding: 0 18px; background-color: white;max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out;}
.sidePannelMainBg{background: #fff;max-width: 1202px;margin: 39px auto 0;padding: 50px 0px 50px;border: 1px #dddddd solid;}
.sidePannelsdivAll{ float:left; border-bottom:1px #dddddd solid; width:100%;padding: 0px 50px 35px; margin-bottom: 90px; margin-bottom:50px}
.sidePannelsDiv1{ float:left; width:70%;}
.sidePannelsDiv2{ float:left; width:30%; position:relative; padding-top: 15px;}
.sidePannelsDiv2:before{position: absolute;left: -54px;top: -52px;content: "";background: #ddd;width: 1px;height: 149px;}
.floatRightHeader{ float:right}
.floatLeftHeader{ float:left; padding-top: 7px;}
.loginWrapperHeader{ position:relative; padding-left: 65px;padding-top: 17px;}
.loginWrapperHeaderDiv{ position:absolute; left:0; top:0;}
.loginWrapperHeaderDiv img{ border-radius:50%; width: 57px;}
.dropbtn {

  color: #333;  font-family: 'Roboto'; font-weight:normal;  

font-size: 15px; border:none;

  cursor: pointer; background:none!important; text-transform:capitalize;
}

.dropbtn a:hover{color: #333; background:none;}
.dropbtn i{ padding-left:4px;}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; right: 0;
top: 64px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
.mainContentArea{ padding:23px;}
.linkingBtn1{ background:#113c9e; border-radius:30px; padding:10px; text-align:center; color:#fff!important; display:block; width:160px; font-size:15px;   font-family: 'Roboto'; font-weight:normal; margin-bottom:10px;   }
.linkingBtn1:hover{ background:#0050a3}


.linkingBtn2{ background:#00b2d6; border-radius:30px; padding:10px; text-align:center; color:#fff!important; display:block; width:160px; font-size:15px;   font-family: 'Roboto'; font-weight:normal; margin-bottom:10px;   }
.linkingBtn2:hover{ background:#0050a3}



.loginDiv1{ background:#eeeeee; float:left; width:50%; padding: 125px 0px; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;-o-align-items: center;-ms-align-items: center;
justify-content: right;-webkit-justify-content: right;-moz-justify-content: right;-o-justify-content: right; height:100vh  }
.loginDiv2{ background:url(../images/login-bg.jpg) no-repeat; float:left; width:50%; background-size:cover; padding:125px 0px; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;-o-align-items: center;-ms-align-items: center;
justify-content: left;-webkit-justify-content: left;-moz-justify-content: left;-o-justify-content: left; height:100vh  }
.loginDiv1Float{ float:right; min-height: 475px; width:498px; background:#fff; -webkit-box-shadow: -1px 1px 3px 2px rgba(0,0,0,0.04);-moz-box-shadow: -1px 1px 3px 2px rgba(0,0,0,0.04);box-shadow: -1px 1px 3px 2px rgba(0,0,0,0.04); border-radius: 0px 10px 10px 0px;padding: 47px;}

.loginDiv2Float{ float:left;min-height: 475px; width:498px; background:#113c9e url(../images/login-bg-img1.png) center center no-repeat; -webkit-box-shadow: -1px 1px 3px 2px rgba(0,0,0,0.04);-moz-box-shadow: -1px 1px 3px 2px rgba(0,0,0,0.04);box-shadow: -1px 1px 3px 2px rgba(0,0,0,0.04); border-radius: 10px 0px 0px 10px; padding:50px; display: flex;
justify-content: left;
align-items: center; }
.loginDivFlex{flex:1}

.forgetPassBtn{ color:#777777; font-size:14px; font-weight:300;  font-family: 'Roboto'; display:block; text-align:center; margin-top: 38px; }
.forgetPassBtn:hover{ color:#113b9b}
.signupTxt{ color:#555555; font-size:15px; font-weight:normal; font-family: 'Roboto'; margin-bottom:0; text-align:center; margin-top:70px; }
.signupTxt a{ color:#00a651; font-size:15px; font-weight:normal; font-family: 'Roboto';}
.signupTxt a:hover{ color:#333}
.loginDiv1Float h3{color:#113b9b; font-weight:bold; font-size: 36px; font-family: 'Roboto'; text-align:center; margin-bottom:30px;}
.loginDivFlex h3{ color:#ffe400; font-weight:bold; font-size:36px; font-family: 'Roboto'; line-height:42px; margin-bottom:10px;}
.loginDivFlex p{ color:#fff; font-size:23px; font-weight:300; font-family: 'Roboto'; line-height:36px;}
.contactInput {font-family: 'Roboto';color: #555555;font-weight: 300;margin-top: 30px;border: none;outline: none;padding: 0px 0 10px;font-size: 15px;transition: box-shadow 0.4s ease;border-bottom: 1px #ddd solid;width: 100%;}
.contactInput:focus {box-shadow: inset 0 -2px 0 0 #113b9b;}
.contactBtn{ cursor:pointer; border-radius:30px; border:none; margin: 46px auto 0; display:block; color:#fff; text-align:center; font-weight:bold; font-size:16px; text-transform:uppercase; width:174px; height:48px; background:#113b9b; font-family: 'Roboto'; transition:0.9s; }
.contactBtn:hover{ background:#ffe400; color:#333;}
.loginmain1Div{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;-o-align-items: center;-ms-align-items: center;
justify-content: center;-webkit-justify-content: center;-moz-justify-content: center;-o-justify-content: center;}


.loginBgAll{  position:relative; height:100vh}
.pattern1{width: 450px;

height: 450px;

display: block;

background:
#d4e9ea; z-index:100;

border-radius: 0px 0 436px 0; position:absolute; left:0; top:0}
.pattern1:after{ position: absolute;

left: 0;

top: 0;

content: "";

background:
#9bced2;

border-radius: 0px 0 550px 0;

width: 350px;
height: 350px;

z-index: -1;}

.pattern1:before{ position: absolute;

left: 0;

top: 0;

content: "";

background:
#b5dbdc;

border-radius: 0px 0 626px 0;
width: 270px;
height: 270px;

z-index: 1;}




.pattern2{width: 450px;

height: 450px;

display: block;

background:
#d3edec; z-index:100;

border-radius:436px 0px 0  0; position:absolute; right:0; bottom:0}
.pattern2:after{position: absolute;
right: 0;
bottom: 0;
content: "";
background:
#c2e9e4;
border-radius: 550px 0 0 0;
width: 355px;
height: 350px;
z-index: -1;}

.pattern2:before{ position: absolute;
right: 0;
bottom: 0;
content: "";
background:
#b2e5de;
border-radius: 626px 0px 0 0;
width: 270px;
height: 270px;
z-index: 1;}



.pattern3{width: 584px;
height: 600px;
display: block;
background:
#c7ece4;
z-index: 100;
border-radius: 602px 0px 0 0;
position: absolute;
right: 0;
top: 0;}
.pattern3:after{position: absolute;
right: 0;
bottom: 0;
content: "";
background:
#9cded2;
border-radius: 649px 0 0 0;
width: 450px;
height: 490px;
z-index: -1;}

.pattern3:before{ position: absolute;
right: 0;
bottom: 0;
content: "";
background:
#74cfc0;
border-radius: 705px 0px 0 0;
width: 320px;
height: 349px;
z-index: 1;}


.loginManiDivSpace{width:1000px; background:#fff  right no-repeat; height:600px; position:absolute; left:50%; bottom:50%; margin-left:-500px; margin-bottom:-300px; z-index:1000;  -webkit-box-shadow: -1px 0px 13px 0px rgba(155,206,210,0.9);
-moz-box-shadow: -1px 0px 13px 0px rgba(155,206,210,0.9);
box-shadow: -1px 0px 13px 0px rgba(155,206,210,0.9); overflow:hidden;padding: 150px 80px 0px; border-radius:30px;}

.loginImgBg{ position: absolute;
right: 83px;
top: 50%;
z-index: 100000;
margin-top: -115px;}

.loginField{ width:300px; border:1px #ddd solid; padding: 15px 0px 15px 38px; margin-bottom:10px; display:block; background:url(../images/login-icon1.png) no-repeat 7px; border-radius: 5px; -webkit-box-shadow: 0px 0px 5px 0px rgba(155,206,210,0.9);

-moz-box-shadow: 0px 0px 5px 0px rgba(155,206,210,0.9);

box-shadow: 0px 0px 5px 0px
rgba(155,206,210,0.9); }
.loginField1{ width:300px; border:1px #ddd solid; padding: 15px 0px 15px 38px; margin-bottom:10px; display:block; background:url(../images/login-icon2.png) no-repeat 7px; border-radius: 5px; -webkit-box-shadow: 0px 0px 5px 0px rgba(155,206,210,0.9);

-moz-box-shadow: 0px 0px 5px 0px rgba(155,206,210,0.9);

box-shadow: 0px 0px 5px 0px
rgba(155,206,210,0.9); }
.loginManiDivSpace h3{ font-size:30px; margin-bottom:20px; font-family: 'Roboto'; font-weight:bold; color:#74cfc0}
.loginSelectBoxText{ font-size: 12px;border: 1px #dddd solid;-webkit-appearance: none;-moz-appearance: none;appearance: none;-ms-appearance: none;-o-appearance: none;color:#333; width:300px ;  padding: 15px 0px 15px 38px;  
; display:block;
  background-image: url(../images/dropdown.png), url(../images/login-icon3.png);
  background-position: right , 7px ;
  background-repeat: no-repeat, no-repeat; -webkit-box-shadow: 0px 0px 5px 0px rgba(155,206,210,0.9);

-moz-box-shadow: 0px 0px 5px 0px rgba(155,206,210,0.9);

box-shadow: 0px 0px 5px 0px
rgba(155,206,210,0.9); border-radius: 5px; 

 }
 .loginBtn{ display:block; text-align:center; color:#fff;width:300px ; padding:15px; border-radius: 5px;  margin-top:20px; border:none; background:#74cfc0; font-size:15px; font-weight:bold; font-family: 'Roboto';  }
 .loginBtn:hover{ background:#f25f58; color:#fff}

::-webkit-scrollbar {
  background: transparent;
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

#contents {
  position: relative;
  transition: .3s;
  margin-left: 290px;
background-color: #c7ece4; height: 100vh;
}
.margin {
  margin-left: 0 !important;
}


.side-nav {
  float: left;
  height: 100%;
  width: 290px;
background-color: #5fafa2;
  color: #CCC;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition: .3s;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  z-index: 9999999
}
.side-nav .close-aside {
  position: absolute;
  top: 7px;
  right: 7px;
  cursor: pointer;
  color: #EEE;
}
.side-nav .heading {
background-color:
#498b80;
padding: 15px 15px 15px 20px;
overflow: hidden;
border-bottom: 1px solid
#498b80;
}
.side-nav .heading > img {
  border-radius: 50%;
  float: left;
  width: 28%;
}
.side-nav .info {
  float: left;
  width: 69%;
  margin-left: 3%;
}
.side-nav .heading .info > h3 {margin: 0 0 5px}
.side-nav .heading .info > h3 > a {
  color: #EEE;
  font-weight: 100;
  margin-top: 4px;
  display: block;
  text-decoration: none;
  font-size: 18px;
}
.side-nav .heading .info > h3 > a:hover {
  color: #FFF;
}
.side-nav .heading .info > p {
  color: #fff;
  font-size: 13px;
}
/* End heading */
/* Start search */
.side-nav .search {
  text-align: center;
padding: 15px 20px;

  position: relative;
}
.side-nav .search > input {
  width: 100%;
  background-color: transparent;
  border: none;

  padding: 7px 0 7px;
color: #fff;
}

.side-nav .search > input::-webkit-input-placeholder { color:#fff; }
.side-nav .search > input:-ms-input-placeholder {color:#fff; }
.side-nav .search > input::-moz-input-placeholder { color:#fff; }
.side-nav .search > input::placeholder {color:#fff; }

.side-nav .search > input ~ i {
position: absolute;

top: 22px;

right: 23px;

display: block;

color:
#fff;

font-size: 19px;
}
/* End search */

.side-nav .categories > li {
 padding: 17px 30px 17px 20px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  cursor: pointer;
}
.side-nav .categories > li > a {
  color: #fff;
  text-decoration: none;
}
/* Start num: there are three options primary, danger and success like Bootstrap */
.side-nav .categories > li > a > .num {
  line-height: 0;
  border-radius: 3px;
  font-size: 14px;
  color: #FFF;
  padding: 0px 5px
}
.dang {background-color: #f35959}
.prim {background-color: #0275d8}
.succ {background-color: #5cb85c}
/* End num */
.side-nav .categories > li > a:hover {
  color: #FFF
}
.side-nav .categories > li > i {
  font-size: 18px;
  margin-right: 5px; color: #fff;
}
.side-nav .categories > li > a:after {
  content: "\f053";
  font-family: fontAwesome;
  font-size: 11px;
  line-height: 1.8;
  float: right;
  color: #fff;
  transition: all .3s ease-in-out;
}
.side-nav .categories .opend > a:after {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
/* End categories */
/* Start dropdown menu */
.side-nav .categories .side-nav-dropdown {
  padding-top: 10px;

  list-style: none;
  display: none;
}
.side-nav .categories .side-nav-dropdown > li > a {
  color: #fff;
  text-decoration: none;
  padding: 7px 0;
  display: block; font-size: 15px;
}
.side-nav .categories p {
  margin-left: 30px;
  color: #535465;
  margin-top: 10px;
}

/* End dropdown menu */

.show-side-nav {
  -webkit-transform: translateX(-290px);
  transform: translateX(-290px);
}


/* End side navigation bar  */
/* Start welcome */

.welcome {
  color: #CCC;
}
.welcome .content {
background-color: #5fafa2;
  padding: 15px;
margin-top: 15px; margin-bottom: 15px;
}
.welcome h2 {
font-weight: bold;
margin-top: 0;
color:
#fff;
margin-bottom: 7px;
}
.welcome p {
  color: #fff; font-size:14px;
}


/* Start statistics */
.statistics {
  margin-top: 25px;
  color: #CCC;
}
.statistics .box {
  background-color: #313348;
  padding: 15px;
  overflow: hidden;
}
.statistics .box > i {
  float: left;
  color: #FFF;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 22px;
}
.statistics .box .info {
  float: left;
  width: auto;
  margin-left: 10px;
}
.statistics .box .info h3 {
  margin: 5px 0 5px;
  display: inline-block;
}
.statistics .box .info p {color:#BBB}

/* End statistics */
/* Start charts */
.charts {
  margin-top: 25px;
  color: #BBB
}
.charts .chart-container {
  background-color: #313348;
  padding: 15px;
}
.charts .chart-container h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

/* Start users */

.admins {
  margin-top: 25px;
}
.admins .box {

}
.admins .box > h3 {
  color: #ccc;
  font-family: Calibri;
  font-weight: 300;
  margin-top: 0;
}
.admins .box .admin {
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #313348;
  padding: 10px;
}
.admins .box .admin .img {
  width: 20%;
  margin-right: 5%;
  float: left;
}
.admins .box .admin .img img {
  border-radius: 50%;
}
.admins .box .info {
  width: 75%;
  color: #EEE;
  float: left;
}
.admins .box .info h3 {font-size: 19px}
.admins .box .info p {color: #BBB}

/* End users */
/* Start statis */

.statis {
  color: #EEE;
  margin-top: 15px;
}
.statis .box {
  position: relative;
  padding: 15px;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 25px;
}
.statis .box h3:after {
  content: "";
  height: 2px;
  width: 70%;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.12);
  display: block;
  margin-top: 10px;
}
.statis .box i {
  position: absolute;
  height: 70px;
  width: 70px;
  font-size: 22px;
  padding: 15px;
  top: -25px;
  left: -25px;
  background-color: rgba(255, 255, 255, 0.15);
  line-height: 60px;
  text-align: right;
  border-radius: 50%;
}

/*chart*/
.chrt3 {
  padding-bottom: 50px;
}
.chrt3 .chart-container {
  height: 350px;
  padding: 15px;
  margin-top: 25px;
}
.chrt3 .box {
  padding: 15px;
}













.main-color {
  color: #ffc107
}
.warning {background-color: #f0ad4e}
.danger {background-color: #d9534f}
.success {background-color: #5cb85c}
.inf {background-color: #5bc0de}


/* كمية الإمبورتات دى علشان البوتستراب تبطل غتاته وتسيب العناصر اللى متعدله فى حالها طبعا الكلام ده فى كود بن بس */

/* Start bootstrap */
.navbar-right .dropdown-menu {
  right: auto !important;
  left: 0 !important;
}
.navbar-default {

  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important; padding: 11px 0; -webkit-box-shadow: 3px 10px 17px -12px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 10px 17px -12px rgba(0,0,0,0.2);
box-shadow: 3px 10px 17px -12px
rgba(0,0,0,0.2);
}
.navbar-default .navbar-nav>li>a {
  color: #EEE !important;
  line-height: 55px !important;
  padding: 0 10px !important;
}
.navbar-default .navbar-brand {color:#FFF !important}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {color: #EEE !important}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {background-color: transparent !important; color: #FFF !important}

.navbar-default .navbar-brand {line-height: 55px !important; padding: 0 !important}
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {color: #FFF !important}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin: 0 !important}

.navbar-default .navbar-nav>li>a {
  float: left !important;
}
.navbar-default .navbar-nav>li>a>span:not(.caret) {
  background-color: #e74c3c !important;
  border-radius: 50% !important;
  height: 25px !important;
  width: 25px !important;
  padding: 2px !important;
  font-size: 11px !important;
  position: relative !important;
  top: -10px !important;
  right: 5px !important
}
.dropdown-menu>li>a {
  padding-top: 5px !important;
  padding-right: 5px !important;
}
.navbar-default .navbar-nav>li>a>i {
font-size: 22px !important;
color:#333;
}

.loginWrapperHeader{ position:relative; padding-left: 65px;padding-top: 17px;}
.loginWrapperHeaderDiv{ position:absolute; left:0; top:0;}
.loginWrapperHeaderDiv img{ border-radius:50%; width: 57px;}
.dropbtn {

  color: #333;  font-family: 'Roboto'; font-weight:normal;  

font-size: 15px; border:none;

  cursor: pointer; background:none!important; text-transform:capitalize;
}

.dropbtn a:hover{color: #333; background:none;}
.dropbtn i{ padding-left:4px;}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; right: 0;
top: 49px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}
.loginWrapperMain img{margin-top: 10px;}

@media screen and (max-width:1500px){ 



}

@media screen and (max-width:1365px){ 

}

@media screen and (max-width:1199px){

}
@media screen and (max-width:1000px){
}
@media screen and (max-width:991px){


}
@media screen and (max-width:767px){

}

@media screen and (max-width:479px){ 


}