body
{
  margin:0px;
  padding:0px;
	font-family: "Open Sans", arial;
	
	color:#000000;
	font-weight:300;

  /* The image used */
 	background:#95969B;

  /* Full height */
  width: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.logo{
  
}

.settings {
  
  height:73px; 
  float:left;
  background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
  background-repeat:no-repeat;
  width:250px;
  margin:0px;
 text-align: center;
font-size:20px;
font-family: 'Strait', sans-serif;

}






/* ScrolBar  */
.scrollbar
{

height: 90%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}

.scrollbar:hover
{

height: 90%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.scrollbar2
{

height: 90%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
color: #FFFFFF;
}

.scrollbar2:hover
{
color: #000000;
height: 90%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}

/* Scrollbar Style */ 

.filtertj:hover, nav.filter.expanded {
width:250px;
height:100%;
top:0;
overflow:hidden;
opacity:1;
border-radius: 0px 0px 0px 0px;
z-index: 1;
}

.filtertj {
background: #ffffff;
position:fixed;
top:10%;
bottom:0;
height:9%;
right:0;
width:50px;
border-radius: 25px 0px 0px 25px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
opacity:1;
}

.filtertoko:hover, nav.filter.expanded {
width:250px;
height:100%;
top:0;
overflow:hidden;
opacity:1;
border-radius: 0px 0px 0px 0px;
z-index: 1;
}

.filtertoko {
background: #ffffff;
position:fixed;
top:30%;
bottom:0;
height:9%;
right:0;
width:50px;
border-radius: 25px 0px 0px 25px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
opacity:1;
}


.filter:hover, nav.filter.expanded {
width:250px;
height:100%;
top:0;
overflow:hidden;
opacity:1;
border-radius: 0px 0px 0px 0px;
z-index: 1;
}

.filter {
background: #ffffff;
position:fixed;
top:50%;
bottom:0;
height:9%;
right:0;
width:50px;
border-radius: 25px 0px 0px 25px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
opacity:1;
}


#style-1::-webkit-scrollbar-track
{
border-radius: 2px;
}

#style-1::-webkit-scrollbar
{
width: 0px;
background-color:#E0E0E0;
}

#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #BFBFBF;
}
/* Scrollbar End */ 




.fa-lg {
font-size: 3em;
  
}
.fa {
position: relative;
display: table-cell;
width: 70px;
height: 60px;
text-align: center;
top:20px; 
font-size:60px;

}



.main-menu:hover, nav.main-menu.expanded {
width:250px;
overflow:hidden;
opacity:1;
border-radius: 0px 0px 0px 0px;
height:100%;

}

.main-menu {
background: #ffffff;
position:fixed;
top:0;
bottom:0;
border-radius: 0px 0px 30px 0px;
height:65%;
left:0;
width:70px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
opacity:1;
}

.main-menu>ul {
margin:7px 0;

}

.main-menu li {
position:relative;
display:block;
width:250px;
  


}

.main-menu li>a {
position:relative;
width:255px;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#000000;
font-size: 15px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .14s linear;
transition:all .14s linear;
font-family: 'Strait', sans-serif;
border-top:0px solid #E0E0E0;
}



.main-menu .nav-icon {
  
position:relative;
display:table-cell;
width:55px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;

}

.main-menu .nav-text  {
   
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}

.main-menu .share {
}



.main-menu .fb-like {

left: 180px;
position:absolute;
top: 15px;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
  
}

.no-touch .scrollable.hover {
overflow-y:hidden;

}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
  
}


/* Logo Hover Property */


.settings:hover, settings:focus {   
  background:url( https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
  -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
}

.settings:active, settings:focus {   
  background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
  -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
}


a:hover,a:focus {
text-decoration:none;
border-left:0px solid #E0E0E0;



}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
  
}


nav ul,nav li {
outline:0;
margin:0;
padding:0;
text-transform: uppercase;
}




/* Darker element side menu Start*/


.darkerli:hover
{
background-color:#32AFFF;
text-transform:capitalize;  
}

.darkerli2:hover
{
background-color:#FF0096;
text-transform:capitalize;  
}

.darkerli3:hover
{
background-color:#00DCDF;
text-transform:capitalize;  
}


.darkerlishadow
{
background-color:#ffffff;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}


.darkerlishadowdown
{
background-color:#ffffff;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}

/* Darker element side menu End*/




.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
text-shadow: 0px 0px 0px; 
}
.area {
float: left;
background:#454545;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;

}


input[type=text] {
  padding: 10px 10px;
  margin: 3px 0;
  box-sizing: border-box;
}



input[type=date]{
  background:#32AFFF;
  padding: 7px;
  font-family: Calibri;
  color: #ffffff;
  font-size: 15px;
  border: none;
  outline: none;
  border-radius: 5px;
  ;
}

::-webkit-calendar-picker-indicator{
  background-color: #ffffff;
  padding: 5px;
  cursor: pointer;
  border-radius: 3px;
}


input[type=text]:focus {
  background-color:#DFF9FF;
}

input[type=password] {
  padding: 10px 10px;
  margin: 3px 0;
  box-sizing: border-box;
}


.button-42 {
  background:#32AFFF;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  line-height: 44px;
  outline: 0;
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 100%;
  border: 0;
}

.button-42:hover {
  background:#007CFF;
}

.button-4 {
  background:#32AFFF;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 20px;
  outline: 0;
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 45px;
  border: 0;
}

.button-4:hover {
  background:#007CFF;
}

.button-43 {
  background:#FF0062;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  height: 30px;
  line-height: 20px;
  outline: 0;
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 100px;
  border: 0;
}

.button-43:hover {
  background:#C9004E;
}


select {

  /* styling */
  background-color: white;
  border: thin solid black;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.st2 {
    border-collapse: collapse;
    font-size: 1em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.st2 thead tr {
    background-color: #00BD68;
    color: #ffffff;
    text-align: left;
}

.st2 th,

.st2 tbody tr {
    border-bottom: 1px solid #D3D3D3;
}

.st2 tbody tr:nth-of-type(even) {
    background-color:#E7E7E7;
}

.st2 tbody tr:last-of-type {
    border-bottom: 1px solid #D3D3D3;
}


.st2 tbody tr.active-row {
    color: BLACK;
}

.st2 tbody tr.acctive-row {
    font-weight: bold;
    color: white;
	background: #008CFF;
}


.st21 {
    border-collapse: collapse;
    font-size: 1em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.st21 thead tr {
    background-color: #00BD68;
    color: #ffffff;
    text-align: left;
}

.st21 th,

.st21 tbody tr {
    border-bottom: 1px solid #3DA4FF
}

.st21 tbody tr:last-of-type {
    border-bottom: 2px solid #008CFF;
}


.st21 tbody tr.active-row {
    color: BLACK;
}

.st21 tbody tr.acctive-row {
    font-weight: bold;
    color: white;
	background: #008CFF;
}



.st212 {
    border-collapse: collapse;
    font-size: 1em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.st212 thead tr {
    background-color: #00BD68;
    color: #ffffff;
    text-align: left;
}

.st212 th,

.st212 tbody tr {
    border-bottom: 1px solid #ff3f7a
}

.st212 tbody tr:last-of-type {
    border-bottom: 2px solid #ff3f7a
}


.st212 tbody tr.active-row {
    color: BLACK;
}

.st212 tbody tr.acctive-row {
    font-weight: bold;
    color: white;
	background: #008CFF;
}


.alert {
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}

.alert2 {
  padding: 20px;
  background-color:#00C504; 
  color: white;
  text-align: center;
}