/*common*/
body{ background-color: #ecf7fa; font-family: 'Lato', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.table th img, .table td img { width: 36px;  height: 36px;  border-radius: 100%;}
.table td, .table th{ white-space: nowrap; }
.table thead th{ font-weight: 500; }

a:hover{ text-decoration: none;}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 5px;
}

::-webkit-scrollbar:horizontal {
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;

}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    
}

.w-full{ width: 100%;}
.btn{padding: 0.6rem 1rem;}
.btn-gradient-primary { background: #6ac9c9;  min-height: 50px; border: 0;font-weight: 600;  -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease; color: #fff;}
.table{ margin-bottom: 0;}
.page-header .btn{ min-height: auto; display: inline-flex;    padding: 0.3rem 0.6rem;  align-items: center;}
.btn-gradient-primary:hover{ color: #fff; }
.h-48{ min-height: 48px;}
.table-responsive a.btn.btn-sm.waves-effect{    padding: 0.4rem 0.8rem;}
.w-33{ max-width: 33.3%;}



/*loginpage*/
.loginpage{ /*background: #fff url(../img/bg.jpg) no-repeat;   */  background-size: cover;    width: 100%; height: 100vh;  }
.logindiv{ padding: 30px;z-index: 1; background: #fff; border-radius: 20px; width: 100%; max-width: 440px;
     box-shadow: 0px 4px 15px #00000021;}
.logindiv .logo{ margin: 0px auto 15px;        padding: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
     max-width: 100%;    
    border-radius: 50%;
    justify-content: center; }
.logindiv h2{ text-align: center; margin-bottom: 20px;  }
.loginpage:after1{ background-color: #ffffffe6; position: absolute; left: 0; right: 0; content: ""; width: 100%; height: 100%; }
.form-control {    height: 45px;     font-size: .9rem;}
a {    color: #6ac9c9;}
.logindiv h5{ text-align:center; margin-bottom: 30px; font-weight: 600;}
.loginFlex {display: flex; align-items: center; justify-content: space-between; height: 100vh;}

.col-60{ display: flex; align-items: center; justify-content: center; width: 55%;}
.col-40{ width: 45%;}
.loginBg{height: 100vh; background-size: cover !important ; width: 100%;}
label{ color:#acacac}

.forgotPage{ display: flex; align-items: center; justify-content: center;}


/*input[type="date-time"]*/
input[type="datetime-local"] { position: relative; padding: 10px;}
input[type="datetime-local"]::-webkit-calendar-picker-indicator { color: transparent; background: none; z-index: 1;}
input[type="datetime-local"]:before { color: transparent; background: none; display: block; font-family: 'FontAwesome'; content: '\f073'; position: absolute;
  top: 6px;
    right: 16px;
    font-size: 20px; color: #333333;}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {   background: transparent;  bottom: 0;  color: transparent;   cursor: pointer;   height: auto;    left: 0;
    position: absolute;   right: 0;   top: 0;    width: auto;  }  


/*header*/

.navbar{    background: #ffffff;    justify-content: flex-end; display: flex;   padding: 0 30px 0 30px;  position: fixed;  top: 0;  left: auto;  right: 0;    width: calc(100% - 250px);
      z-index: 99;  margin: 0;     border-bottom: 1px solid #e0e0e0;}
 .navbar .logo{ display: none; }
.navbar-nav{ padding:  0; line-height: 55px;}
.navbar-dark .navbar-nav .nav-link {  color: rgb(6 6 6) !important; padding: 0;    font-size: 14px;}
.navbar-dark .navbar-nav .nav-link .mdi{font-size: 24px; color: #6ac9c9;}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    color: #000;}
 .sidebar .sub-menu .nav-item .nav-link{  background: #72d5d5;
    padding: 0.5rem 2em !important;
    font-size: 14px;
    color: #ffffff !important;}   

.navbar .dropdown-item{ line-height: 20px;     display: flex;    align-items: center;}

.navbar .dropdown-item{ font-size: 13px; padding: .25rem 1rem; left: auto; }
.navbar .dropdown-item img{ margin-right: 7px; }
.navbar .nav-item .nav-link { margin:0 15px 0 0; }
.navbar .nav-item.user .nav-link{ margin: 0;}
.user img{ width: 30px;  border-radius: 50%;     margin-right: 5px;}
.user .dropdown-menu i{ margin-right: 10px; font-size: 20px; }
.navbar .dropdown-menu{-webkit-box-shadow: 0px 3px 21px 0px rgb(0 0 0 / 20%); right: 0; left: auto; box-shadow: 0px 3px 21px 0px rgb(0 0 0 / 20%); border: 0}
.searchform span{position: absolute; top: 6px; left: 6px; font-size: 18px; z-index: 111;}
.searchform .form-control{ padding-left: 30px; }
.searchform .btn-primary{    background-color: #6ac9c9; border: 1px solid #6ac9c9;   border-radius: 0; color: #fff;}
button:focus{ outline: 0 !important; }
.content-page {     width: 100%; position: relative ; z-index: 1; /*margin-left: 250px;*/  overflow: hidden;  padding: 90px 15px 65px;  height: 100%;}
.preview-icon {
    width: 36px;
    height: 36px;
    border-radius: 100%; margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;

}

.togglemenmob{ display: none; }
.togglemenumob{display: none; }
/* .sidebaropen .content-page { margin-left: 100px;} */
body.sidebaropen .navbar {  width: calc(100% - 100px);}
.togglemenu{ background: none; border: 0; outline: 0;  background: #3a9292;
    padding: 5px 10px; position: absolute; right: 0;}
.togglemenu i{ color:#fff; font-size: 25px; }
.togglemenu:focus{ outline: 0; }
.leftsidebar{    width: 100%; 
    max-width: 250px;
    /* position: absolute; */
    /* overflow-y: scroll; */
    left: 0;
    top: 0;
    z-index: 22; height: auto;
    min-height: 100%;
    background: #6ac9c9;
    -webkit-transition: width .25s,opacity .25s,-webkit-transform .25s;
    -o-transition: width .25s,opacity .25s,-o-transform .25s;
    transition: width .25s,opacity .25s,transform .25s;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate(0,0,0);
    transform: translate3d(0,0,0);
   }

 .leftsidebar .logo{ max-width: 130px;} 
 .leftsidebar.sidebaropen .logo {  max-width: initial;  height: 50px;  margin: 10px auto;}
 .sidebaropen .togglemenu{     right: auto;  left: 100%;}  
.togglemenu .mdi-arrow-right{ display: none; } 
.sidebaropen .togglemenu .mdi-arrow-right{ display: block; }
.sidebaropen .togglemenu .mdi-arrow-left{ display: none; }
.leftsidebar.sidebaropen{ -webkit-transform: translate3d(0px,0,0);  -ms-transform: translate(0px,0);   transform: translate3d(0px,0,0); max-width: 100px;  }    
.togglediv{ text-align:right;}
.sidebaropen .togglediv{ text-align:center;}
.logo{ max-width: 70%; margin: 20px auto ; display: table; padding: 10px; }

.sidebaropen .nav .nav-item .nav-link .menu-title{ display: none !important; }
.sidebaropen .nav .nav-item .nav-link i.menu-icon{ margin-right: auto; }
.chartjs-render-monitor{ height: 100% !important;}
.sidebar { padding-bottom: 15px;  height: auto;  
    font-family: "ubuntu-regular", sans-serif;  padding: 0;  z-index: 11;
    transition: width 0.25s ease, background 0.25s ease;
    -webkit-transition: width 0.25s ease, background 0.25s ease;
    -moz-transition: width 0.25s ease, background 0.25s ease;
    -ms-transition: width 0.25s ease, background 0.25s ease;
}.sidebar .nav {
    /* overflow: hidden; */
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 0px;
}.sidebar .nav .nav-item .nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
   padding: 1rem 1.5rem;   
    color: #ffffff;
    -webkit-transition-duration: 0.45s;
    transition-duration: 0.45s;
    transition-property: color;
    -webkit-transition-property: color;
}.sidebar .nav .nav-item.active > .nav-link {
        color: #ffffff;
    background: #4fadad;
   
}
.sidebar .nav .nav-item .nav-link .menu-title {
    color: inherit;
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    white-space: normal;
}.sidebar .nav .nav-item.active > .nav-link i {
    color: #b66dff;
}
.sidebar .nav .nav-item .nav-link i.menu-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-left: auto;
    color: #ffffff;
}
/* .leftsidebar.sidebaropen .collapse{ position: absolute; left: 100%; top: 0; } */
li.nav-item{ position: relative;}
.sidebaropen div#page-layouts{
    background: rgb(57 175 209);  left: 100%;  padding: 0px;  position: absolute;  top: 0px;
    width: 220px;   z-index: 999999999999;}

.dropdown-toggle::after{ display: none; }
.bg-light-primary {    background-color: #6ac9c9;  box-shadow: -6px 6px 0px #a9ccd673; color: #fff !important;}
.card h5{ margin-bottom: 20px;}
.dashboard h1{ opacity: 1;
    color: #6ac9c9; }
.card{  box-shadow: 0 2px 4px rgb(0 0 20 / 8%), 0 1px 2px rgb(0 0 20 / 8%);     border-radius: .5rem!important;}
.icon-shape {  align-items: center;  display: inline-flex;  justify-content: center;  text-align: center;
 vertical-align: middle;}
.icon-md {    height: 2.5rem;
    line-height: 2.5rem;
    width: 2.5rem; min-width: 2.5rem;}

.dashboard2 .card-body{ padding: 0; }
.dashboard2 .card-body .d-flex {       margin: 0 !important;  padding:5px 15px;    background: #ebebeb;  border-radius: 6px 6px 0 0px; }
.dashboard2 .card-body .d-flex h4{ color: #000; }
.dashboard2 .card-d{    padding: 0 15px 15px 15px;}
.dashboard2 .bg-light-primary{ background-color: #2994b3; }
.dashboard2 .icon-md{height: 3.5rem;  line-height: 2.5rem;   width: 3.5rem;  position: relative;  top: 30px;}

.dashboard3 .card-body{ padding: 0; }
.dashboard3 .icon-md{   font-size: 35px !important; height: 6rem;  line-height: 2.5rem;  width: 5.5rem; margin-right: 15px;}
.dashboard3 .mdi:before{ font-size: 55px !important; }
.dashboard3 h5{color: #c1c1c1; font-weight: normal;}
.dashboard3 .bg-light-primary{     box-shadow: inherit; }
.dashboard .card-body{ padding: 10px; min-height: 130px; }
.dashboard .card-body h1{ margin-bottom: 0;}
.dashboard a h4{    opacity: .7; color: #000; font-size: 22px;}
.w-10 {
    max-width: 100px; height: 35px;
}

/*view*/
.viewSec{display: flex;justify-content: space-between; flex-wrap: wrap;}
.viewSec h5{ margin-bottom: 12px;}
.viewList{ display: flex; margin-bottom: 25px;     width: 33.3%;}
.viewList span{    width: 60px; height: 60px;  border-radius: 50%; background: #6ac9c92e; font-size: 35px;
    text-align: center;  line-height: 60px; color: #6ac9c9; min-width: 60px;}
.listContent{ width: 85%; margin-left: 20px; }
.backarrow span{ font-size: 45px;}


.paymentFilter{ display: flex;     width: 40%;}
.paymentFilter .w-50{ position: relative;}
.paymentFilter .w-50:nth-child(1){ margin-right: 10px;}
.paymentFilter .w-50 label{ position: absolute; top: -25px; z-index: 1;}
/*Role*/

.roleArea label{ margin-right: 20px; font-size: 14px; color: #000; display: inline-flex; align-items: center;}
.roleArea label input{    width: 15px; height: 15px;}
.roleArea h5{font-size: 1rem;     margin-bottom: 10px;}

.wrapper{ display: flex;    min-height: 100vh;}
/*input[type="date"]*/

input[type="date"] { position: relative; padding: 10px;}
input[type="date"]::-webkit-calendar-picker-indicator { color: transparent; background: none; z-index: 1;}
input[type="date"]:before { color: transparent; background: none; display: block; font-family: 'FontAwesome'; content: '\f073'; position: absolute;
  top: 6px;
    right: 16px;
    font-size: 20px; color: #333333;}
input[type="date"]::-webkit-calendar-picker-indicator {   background: transparent;  bottom: 0;  color: transparent;   cursor: pointer;   height: auto;    left: 0;
    position: absolute;   right: 0;   top: 0;    width: auto;  }

/*Type Select*/
.productSold{ padding: 25px;     background-color: #a9ccd614; margin-top: 20px; border-radius: 5px;}
.productlabel label{ width: 100%; }  
.productlabel h5{     display: flex; justify-content: space-between; margin: 0px 0 30px 0;}  
.productlabel h5 span{ width: 30%;min-width: 150px;}
.productInput{ display: flex; justify-content: space-between;}
.productInput .amount{ width: 30%;min-width: 150px;}
.productInput input[type="checkbox"]{margin-right: 10px; width: 15px; height: 15px;}
.productInput span{ display: block; margin-top: 10px;}
.productInput .amount input + input{ margin-top: 5px;}
.productInput .amount.w-full{ width: 100%;}

.page-header form{ position: relative;}
.searchBtn{   position: absolute; font-size: 25px; top: 4px;  right: 5px;  background: none;  border: 0; color: #4fadad;}
.page-item.active .page-link{ background-color: #4fadad;   border-color: #4fadad;}
.page-link{ color: #6ac9c9;}
.page-link:hover{color: #4fadad;}
a:hover{ color: #4fadad;}


/*-view-page*/
.viewDiv{ display: flex;}
.viewDiv span{background: #ecf7fa;
    border-radius: 50%;
    min-width: 58px;
    min-height: 58px;
    text-align: center;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
   
    color: #6ac9c9;
}
.viewDiv label{ font-size: 15px;}
.viewDiv h4{ font-weight: 600 ; font-size: 17px;}

@media screen and (min-width: 1025px) and (max-width: 1200px) { 
.col-xl-4.col-lg-4.col-md-6.col-12.mt-6.mb-3 {
    max-width: 100%; width: 100%;  flex: 0 0 100%;}
}


@media all and (max-width:1280px){

    .dashboard a h4{  font-size: 20px;}

}
@media all and (max-width:1120px){

    
.dashboard h4{ font-size: 20px;}
.listContent{ margin-left: 10px;}
.dashboard a h4{  font-size: 20px;}
}

@media all and (max-width:1024px){

.content-page{     padding: 80px 0px 60px; }
.navbar-dark .navbar-nav .nav-link .mdi-bell-outline{ color: #fff; }
.navbar{ width: 100%;     padding: 8px 10px;    background: #6ac9c9;     justify-content: space-between; }
.navbar .logo{ display: block; margin: 0; padding: 0; }
.navbar-nav{ line-height: 1px;    align-items: center; }
.navbar .logo img{    width: auto;  height: 35px; }
.language img { width: 25px;}
.user img {    width: 25px;}
.navbar-nav .dropdown-menu{ position: absolute; }
.navbar-nav{ line-height: 1; }
.navbar-nav{flex-direction: row;  }
.navbar .nav-item .nav-link{ font-size: 0; margin: 0px 5px;}
.searchform{ display: none; }
.dropdown-menu .searchform{ display: block;     padding: 10px 15px;}
.content-page{ margin-left: 0; }
.leftsidebar{ left: -260px;    position: absolute; -webkit-transition: all 0.25s ease-out;  transition: all 0.25s ease-out; }
.sidebaropenmob.leftsidebar{ left: 0;     z-index: 2222;     position: fixed;  overflow-y: auto;  height: 100%;}
.sidebaropenmob.sidebarnone { display: none; }
.sidebaropenmob .togglemenu{ display: none; }
.togglemenmob{ display: block;    border: 0;  background: none; }
.togglemenmob i{ font-size: 20px;    color: #fff; }
.togglemenumob{display: block;    float: right;   border: 0;     position: absolute;
    right: 0;  }
    .togglemenumob i{    color: #2089a7;
    font-size: 25px;}
.dropdown, .dropleft, .dropright, .dropup{ position: inherit !important; }
.dropdown-menu{    width: 95%;  max-width: 100%;  right: 0 !important;   left: 0 !important;   margin: 0 auto}
.searchdropdown a{ font-size: 15px !important; color: #fff !important; }
.searchdropdown a i{ color: #fff !important;     font-size: 20px;}
.navbar-dark .navbar-nav .nav-link .mdi{ color: #fff;}
}


@media all and (max-width:991px){
.chartArea { margin-top: 18px !important;}
.dashboard h4{ font-size: 20px;}

.loginFlex .col-60{ padding: 0 20px;}
.viewList{ width: 50%;}
.dashboard .card {    min-height: 130px;}

}
@media all and (max-width:767px){
.content-page{     padding: 80px 0px 60px; }
.navbar-dark .navbar-nav .nav-link .mdi-bell-outline{ color: #fff; }
.navbar-nav li{ margin-right: 5px;}
.navbar-nav li:last-child{ margin-right: 0;}
.navbar{ width: 100%;     padding: 8px 10px;    background: #6ac9c9;     justify-content: space-between; }
.navbar .logo{ display: block; margin: 0; padding: 0; }
.navbar-nav{ line-height: 1px;    align-items: center; }
.navbar .logo img{    width: auto;  height: 35px; }
.language img { width: 25px;}
.user img {    width: 25px;}
.navbar-nav .dropdown-menu{ position: absolute; }
.navbar-nav{ line-height: 1; }
.navbar-nav{flex-direction: row;  }
.navbar .nav-item .nav-link{ font-size: 0; margin: 0px 5px;}
.searchform{ display: none; }
.dropdown-menu .searchform{ display: block;     padding: 10px 15px;}
.content-page{ margin-left: 0; }
.leftsidebar{ left: -260px;     -webkit-transition: all 0.25s ease-out;  transition: all 0.25s ease-out; }
.sidebaropenmob.leftsidebar{ left: 0;     z-index: 2222;     position: fixed;  overflow-y: auto;  height: 100%;}
.sidebaropenmob.sidebarnone { display: none; }
.sidebaropenmob .togglemenu{ display: none; }
.togglemenmob{ display: block;    border: 0;  background: none; }
.togglemenmob i{ font-size: 20px;    color: #fff; }
.togglemenumob{display: block;    float: right;   border: 0;  }
.dropdown, .dropleft, .dropright, .dropup{ position: inherit; }
.dropdown-menu{    width: 95%;  max-width: 100%;  right: 0 !important;   left: 0 !important;   margin: 0 auto}
.searchdropdown a{ font-size: 15px !important; color: #fff !important; }
.searchdropdown a i{ color: #fff !important;     font-size: 20px;}
.navbar-dark .navbar-nav .nav-link .mdi{ color: #fff;}


/*login*/


.loginpage{ align-items: flex-start; padding: 20px; height: auto;}
.loginFlex{ display: block; height: auto;}
.loginFlex .col-60{ width: 100%;}
.loginBg{ display: none;}
.loginFlex .col-60 {
    padding: 0;
}

.viewList{ width: 100%;}
.listContent {  width: 70%;  margin-left: 10px;}

.content-page .page-header{     flex-wrap: wrap;}
.content-page .page-header .w-33{ max-width: 100%; margin-bottom: 10px;}
.paymentFilter{ width: 100%;}
.paymentFilter .w-50 label{ position: static;}
}
@media all and (max-width:575px){


.page-header .btn{ margin-left: auto;}


}


@media all and (max-width:479px){
.w-100 .btn.px-5.h-48 {
    width: 100%;
    margin-top: 5px;
}

.productSold{ padding: 10px;}
.productlabel label{font-size: 14px; padding-right: 10px;}
.productInput .amount{ min-width: 100px;}
.productlabel h5 span{ min-width: 100px;}
}



.form_tab{
    display: flex;
    flex-direction: column;
}
.radio-btn ,
.radio-btn input,
.radio-btn label{
    cursor: pointer;
}