.logo{
    padding-top: 15%;
    background-color: #53B7EB;
    text-align: center;
    height: 100vh;
}
.loginform{
    padding-top: 18%;
    width: 300px;
    text-align: center;
}
input[type=text], input[type=password], input[type=email] {
        border-radius: 25px;
        border: 1px solid #939393;
        padding: 15px;
        width: 300px;
        height: 2px;
        margin: 5px;
        align-self: center;
}
.buttonlogin {
    background-color: #B4B4B4;
    color: white;
    padding: 5px 5px;
    margin: 30px 0;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    width: 150px;
}

/* button link */
.btn-link {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #0000EE;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
}

button:hover {
    opacity: 0.8;
  }
  /* The "Forgot password" text */
  span.psw {
    float: inline-end;
    padding: 16px;
  }
  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
    span.psw {
      display: block;
      float: none;
    }

}

/*Sidebar & Header*/
.sidebar{
  height: 100%;
  width: 15%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
}
.sidebar a{
  text-align: left;
  display: block;
  color: black;
  padding-left: 38px;
  padding-bottom: 10px;
  text-decoration: none;
}
.buttonRound{
  border-radius: 25px;
  background-color: white;
  color: #53b7eb;
  text-align: center;
  border: 2px solid #53b7eb;
  padding: 5px 20px;
}
.logoutButton{
  margin-left: 4%;
  bottom: 15px;
  position: fixed;
}
.buttonBackground{
  background-color: #53b7eb;
  color:  white;
  /* margin-left: 40%; */
  margin-top: 15px;
}
.buttonRound i{
  padding-left: 8px;
}
/* .imglogo{
  height: 20%;
} */
.header{
  background-color: #53B7EB;
  /* margin-left: 18%;
  padding: 30px ; */
}

/*Table*/
.bodystyle{
  background-color: #EAF3F8;
  /* margin-left: 18%; */
  /* margin-top: 30px; */
  width: 100%;
  font-size: medium;
  color: #909092;
  /* padding: 20px; */
}
.detailstab{
  padding: 25px;
  padding-top: 5px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 15px;

}
.tableheader{
  background-color: #95A5A6;
  text-align: center;
}
tr{
  text-align: center;
  padding: 10px;
}
.trbody{
  background-color: white;
}

/*Font*/
/* @font-face {
  /*font-family: 'Helvetica Neue Ultra Light';
  src: url('fonts/Helvetica Neue UltraLight.otf');*/

.vl {
  /* border-left: 1px solid lightgrey; */
  height: 30px;
  margin-left: 30px;
}

/*Product Box*/
.protabhead{
  text-align: left;
}
.trbodypro{
  background-color: white;
}

.boxbtn{
  border-radius: 25px;
  width: auto;
  background-color: white;
  color: black;
  padding: 1.5% 10%;
  margin: 0% 3%;

}

.boxbtnSelect{
  border-radius: 25px;
  width: auto;
  background-color: #53B7EB;
  color: white;
  padding: 2% 10%;
  margin: 0% 3%;
  border : none;
}
.productTable {
  width: 100%;
  padding: 25px;
  padding-top: 5px;
}

.productheader{
  background-color: #95A5A6;
  color: white;
  margin-bottom: 10px;
  font-weight: bold;
  padding: 6px;
  width: 94.5%!important;
  margin-left: 50px!important;
}
/*
    DEMO STYLE
*/

/*@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";*/

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    background: #53B7EB;
    height: 125px;
    font-size: 22px;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    height: 100%!important;
    /* align-items: stretch; */
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: white;
    z-index: 1;
    height: initial!important;
}

#sidebar .sidebar-header {
    /* padding: 20px; */
    background: white;
}

#sidebar ul{
  padding: 10% 0;
}
#sidebar .nonactive{
  color: grey;
}
#sidebar .active{
  color: #53b7eb;
}
#sidebar.active {
  margin-left: -250px;
}

/* .navbar-nav > .active > a {
  color: #53b7eb;
} */
a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}


.stats{
  color: white;
  padding: 0% 3%;
}
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 0px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}


/* Pagination CSS */

.page-item.active .page-link {
  z-index: 1;
  color: #fff!important;
  background-color: #53B7EB!important;
  border-color: #53B7EB!important;
}

.page-link {
  color: #53B7EB!important;
}

.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 25rem; }
.toggle.ios .toggle-handle { border-radius: 25rem; }


a.mouseover-thumbnail-holder {
  position:relative;
  display:block;
  float:left;
  margin-right:10px;
}
.large-thumbnail-style {
  display:block;
  border:10px solid #fff;
  box-shadow:0px 0px 5px #aaa;
}
a.mouseover-thumbnail-holder .large-thumbnail-style {
  position:absolute;
  top:0;
  left:-9999px;
  z-index:1;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
}
a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
	position: absolute;
    top: 0;
  	left:30%;
	z-index:9999;
	opacity:1;
    height: 200px;
}