@import url('https://fonts.googleapis.com/css?family=Quicksand');
body{font-family: 'Quicksand', sans-serif;}
a:hover{text-decoration:none;}
.login {
    background-image: url('../../Images/Product/login_bg.png');
    background-repeat: no-repeat;
    background-size: 65%;
}
.login_box{top: 20%; right: 15%; position: absolute;}
form {border-radius:10px; background-color: #fff; padding: 20px 30px;   box-shadow: 0px 1px 20px 3px #ccc;}
.login_box i{position:absolute;padding:18px;color:#96989f}
.login_box input[type=text], .login_box input[type=password] {
  width: 100%;
  padding: 12px 20px 12px 40px;
  display: inline-block;
  background-color:#e6e6e6;
  font-weight:600;
  box-shadow: none;
  border: none;
  border-radius: 25px; height: 50px;
}

.login_box button {
  background-color: #1ad8fa;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 25px;
}

::placeholder{color:#96989f !important;}

.login_box button:hover {
  opacity: 0.8;
}
.forgot{padding-top:10px; text-align:center;font-size:12px; font-weight:600}

/*dashboard*/

.dashboard {
    background-image: url('../../Images/Product/dashboard_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 30px;
}
.brand-name{margin:5px 0 0 0;}
.brand-name a{color:#fff; font-size:40px; font-weight:600;}
.top-right{padding-top:22px; padding-right:0}
.search-box{padding-left:0}
.search-box input{border-radius:20px; box-shadow:none;padding-right:40px}
.search-box i{position: absolute;top: 10px;right: 35px;}
.msg{padding-right:0; text-align:right;}
.top_drop{padding:0; margin:0 0 0 40px;}
.msg .dropdown{list-style:none;padding:0 10px; float:left;}
.msg .dropdown-menu{
  top: 40px;
  right:-15px;
  left: unset;
  width: 350px;
  box-shadow: 0px 5px 7px -1px #c1c1c1;
  padding-bottom: 0px;
  padding: 0px;
}
.msg .dropdown-menu:before{
  content: "";
  position: absolute;
  top: -35px;
    right: 15px;
    border: 18px solid #0ea7f7;
    border-color: transparent transparent #0ea7f7 transparent;
}
.msg .head{
  padding:5px 15px;
  border-radius: 3px 3px 0px 0px;
}
.msg .footer{
  padding:5px 15px;
  border-radius: 0px 0px 3px 3px; 
}
.msg .footer :hover{background:none!important;}
.notification-box{
  padding: 10px; 
}
.text-light {
    color: #f8f9fa!important;
}
.bg-dark {
    background-color: #0ea7f7!important;
}
.bg-gray{
  background-color: #eee;
}
.badge-notify{
      background: #0ca0f6;
    position: absolute;
    top: -10px;
    left: 20px;
  }
.msg h2{padding:0; margin:0; font-size:20px}
.msg a{color:#000}
.top-user button{background:none; border:none; font-size:14px;font-weight:500}
.page-content{padding-top:20px}
.right-side1{background:rgba(255,255,255,0.75); border:solid 1px #ccc; border-radius:10px; padding:40px 60px;    width: 100%;float: left;}
.icon{text-align:center;padding:0;margin-bottom: 15px;}
.icon img {width: 60px;}
.icon p{font-weight:600; padding:10px 0;margin:0;font-size: 12px;}
.icon a{color:#000;font-size:10px; font-weight:600;}
.icon a:hover{text-decoration:none}
.icon a:hover img{opacity:0.6}
.sub{position: relative;display: inline-block;}
.sub .sub_menu {
  visibility: hidden;
  width:300px;
 background:rgba(255,255,255,0.9); 
 border:solid 1px #a9e7f9; 
 border-radius:10px; 
  text-align: center;
  padding: 15px 0;
  position: absolute;
  z-index: 1;
  top: 85%;
  left: 50%;
  margin-left: -60px;
}
.sub_menu img{width:30px}
.sub .sub_menu::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 15%;
  margin-left: -5px;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.sub:hover .sub_menu {
  visibility: visible;
}
.icon button{background:none; border:none; font-size:12px; font-weight:600;}
.icon button img{margin-bottom:5px}
.icon .dropdown-menu{/*background:rgba(255,255,255,0.9);*/z-index:1;top:120%; border:solid 1px #a9e7f9;  border-radius:10px; padding:10px 10px 0 10px; min-width:300px; left:-10% }
.icon .dropdown-menu img{width:30px}
.right-side .open::after {
  content: "";
  position: absolute;
     top: 75%;
    z-index: 9;
    left: 37%;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}
.user-panel{background:#fff;border:solid 1px #ccc; border-radius:10px;padding:15px;float:left; width:100%;margin-bottom:20px}
.user-panel h1{font-size:16px;margin-top:0; font-weight:600}
.left-menu{background:#fff;border:solid 1px #ccc; border-radius:10px;padding:15px;float:left; width:100%;}
.left-menu ul{padding:0; margin:0;}
.left-menu ul li{list-style:none; border-bottom:solid 1px #e7e7e7;font-size:14px;padding:10px}
.left-menu ul li a{color:#000}
.error_msg {
    color: #f00;
    font-weight: 600;
    position: relative;
    left: 15px;
}
@media only screen and (max-width: 960px) and (min-width: 768px)  {
    .login {
        background-image: url('../../Images/login_img/login_bg.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
.login_box{top: 20%; right: 0; position: absolute;}	
}

@media screen and (max-width: 767px) {
	.mob_menu{list-style: none;float: left;}
.top_drop{padding:0; margin:0;}
.msg .dropdown-menu:before{left:0px;right: auto;}
.msg .dropdown-menu {
    top: 40px;
    right: 0;
    left: 0;
    width: 285px;
}
.msg .mail_msg:before{left:65px;right: auto;}
.msg .mail_msg{left:-65px;}
.icon .dropdown-menu{min-width:100%; left:0}
.icon{margin-bottom:15px;}
.text-xs-center{text-align:center;}
    .login {
        background-image: url('../../Images/login_img/mob_bg.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
.login_box{top:0; right:0; position:inherit; padding-top:30%}
.brand-name a{font-size:50px}
.right-side{margin-top:20px;padding:20px 0px;}
.search-box{margin-bottom:20px}
.user-panel h1{font-size:24px;}
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 3px 8px 3px 32px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  display: block;
  transition: 0.3s;
}
.right-side {
    min-height:auto!important;
}
    .right-side i {
        font-size: 40px;
    }
.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .login {
        background-image: url('../../Images/login_img/mob_bg.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}