@font-face{
font-family: fastorder;
src : url('/api/public/font/AvenirLTStd-Roman.otf');
}
*{font-family:fastorder }
body, html {
  font-family: fastorder;
  height:100%;
}
.container {
    max-width: 1290px!important;
}
.search{    padding-right: 0px!important;}
.search .modal-dialog{margin: 0px!important;
    width: 100%!important;max-width: 100%}
.search .modal-content .media{    padding: 0.5em 2em;height: 100%}
.search .modal-content .media .media-body input{width: 100%;border: none;    padding: 0px 30px;}
.search .modal-content .media .media-body input:focus{outline: none;!important;}
.right-section {height: 100vh; overflow-y: scroll;}
.right-section::-webkit-scrollbar {
  display: none;
}
.mg-auto{margin: auto;}
.payment-method-main-body .col-md-8 ul li{border-bottom: 1px solid lightgrey;padding:1em 0px;}
.payment-method-main-body .col-md-8 ul{list-style: none;margin: 0px;padding:0px;}
.payment-method{    box-sizing: border-box;
    box-shadow: 0px 0px 6px -2px #0000008f;}
.top-user-css{list-style: none;padding: 0px;margin:0px;overflow: auto;
    float: right;
    margin-right: 5em;cursor: pointer;}
.top-user-css li{float: left;    padding: 10px 20px;
    color: #fff;  }
.top-user-css .dropdown-toggle::after{display: none!important;}
.top-user-css .dropdown-menu {
    position: absolute;
    top: 120%;
    left: 55%;}
.navbar{background-color: #00197f;
    color: #fff;}
.home-btn-with-icon .navbar-brand{color: #fff!important}
#sidebar{height: 100vh;    background-color: #fff!important;
    filter: drop-shadow(0px 1px 5px #00000070);padding: 0px!important}
.bg-grey{background-color: #f2f2f2}
.logo{text-align: right;margin: auto;}
.logo img{padding-right: 5em}
.mg-auto{margin: auto;}


#sidebar .nav li{      padding: 0.5em 20px;
    font-size: 0.9em;}
#sidebar .nav li a{color: grey}
.menu-icon{color: #22a7de!important}


.first-section .main-card .main-card-body{height: 100%;
    box-shadow: 1px 2px 5px 1px #0000005c;
    border-radius: 2px;}
.first-section .main-card .main-card-body .body-card-body{height: 13rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent linear-gradient(120deg, #54D8FF 0%, #22A7DE 100%) 0% 0% no-repeat padding-box;flex-direction: column;color: #fff}
    .main-card-body .body-card-head {height: 7vh;display: flex;
    justify-content: center;
    align-items: center;}

     .main-card-body .body-card-footer{height: 7vh;display: flex;
    justify-content: center;
    align-items: center;}
    .main-heading{padding-bottom: 30px}
    .third-clum-edites ul{list-style: none;padding:0px;margin: 0px}
.third-clum-edites ul li{ padding: 1.2rem 10px 1.2rem 0px;
    border-bottom: 1px solid lightgray}
.third-clum-edites ul li:last-child{border-bottom: none;}
.third-clum .body-card-top-head{padding-top: 10px;}
.second-row{padding-top: 30px}
.chart-and-test{position: relative;
    top: 2rem;}

.bell-header{border-bottom: 1px solid lightgray}
.bell-body img{    width: 20%;}
.bell-body{display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    flex-direction: column;}
.left-shop-detals{    border-bottom: 1px solid lightgrey;;position: relative;}
    .sidepanel  {
  width: 0%;
  position: fixed;
    z-index: 1;
    height: 100vh;
    top: 3rem;
    right: 0;
    background-color: #fff;
    filter: drop-shadow(0px -1px 4px #000000);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 30px;
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: relative;
  top: 0;
  left: 10px;
  font-size: 36px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: transparent;
  color: white;
  padding: 10px 15px;
  border: none;
}
/*second page css*/
.second-page ul{list-style: none;padding:0px;margin: 0px}
.second-page ul li{float: left;padding:10px ;}
.second-page-custom #sidebar{filter: none!important}
.second-page-custom .right-section .second-page{border-bottom: 1px solid lightgrey;
    padding-bottom: 30px;}

.second-page-custom .dashboard-trans {
  border: 1px solid lightgrey;    width: 100%;
    height: 100%;display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:2rem;
}
.dashboard-trans img{width: 15%}
/*



/*login*/
.Login-form-fiel input:focus{outline:none;}
.Login-form-fiel input {
    width: 100%;
    border: none;
    border-bottom: 1px solid lightgrey;
}
.Login-form-fiel{display: flex;
    justify-content: center;
    align-items: center;}
.Login-form-fiel .form{    width: 50%;
    position: absolute;
    z-index: 2;}
.Login-form-fiel .form-btn{display: flex;
    width: 100%;
    justify-content: space-between;
    top: 5rem;
    position: relative;
    padding: 0px 15rem;}
    .Login-form-fiel .form-btn button{width: 45%;border: none;border-radius: 5px;height: 35px}
.Login-btn{background-color: #22A7DE;color: #fff}
#vehicle1{    width: 20px;}

@media screen and (max-width: 992px) {
.main-card .col-md-4{padding: 0px 0px 2rem 0px!important;}
.right-section{    position: absolute!important;
    top: 5em;}
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
.main-heading h2{font-size: 1.5em!important;}
  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -40%;
    width: 40%;
    height: 100vh;
  }



  .row-offcanvas-left.active {
    left: 40%;
    margin-left: -6px;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
  }
}


@media screen and (max-width:768px) {
  #sidebar .nav li {
    padding: 1.5em 5px;}
  .Create-new{width: 100vw}
  .Create-new .modal-dialog{padding-top: 10em!important;margin: 0px!important}
  .Create-new .modal-content{height: 100%;    border: none;
    border-radius: 0px;}
    .Create-new .modal-footer{    padding: 10px 15px;}
    .Create-new .modal-header{    padding-left: 0px;
    padding-right: 0px;}
    .Create-new .modal-header .media-left img{    width: 25px;}
    .Create-new .modal-dialog{background-color: #fff;height: 100vh}
  .right-side-section{    margin-top: 1.3rem;padding: 0px;
    justify-content: center;
    padding-right: 0px!important;
    padding-left: 0px!important;
    align-items: center;
    display: flex;
    flex-direction: row;}
.home-btn-with-icon button{color: #fff!important}
.logo img {
    padding-right: 0em;
}
.top-user-css .dropdown-menu{    left: 40%;}
.logo{position: absolute!important;
    top: -2rem;
    right: 0px;
    width: 20%!important;
    float: right;}
.navbar .home-btn-with-icon{    position: relative;}
  .top-user-css{margin-right: 0px!important}
.navbar-toggler-icon {color: #fff!important;    line-height: 1.3em;}
  .icon-mobile-none{display: none;}
}

}
/*
 * Off Canvas wider at sm breakpoint
 * --------------------------------------------------
 */
@media screen and (max-width: 34em) {


}

.card {
    overflow:hidden;
}

.card-body .rotate {
    z-index: 8;
    float: right;
    height: 100%;
}

.card-body .rotate i {
    color: rgba(20, 20, 20, 0.15);
    position: absolute;
    left: 0;
    left: auto;
    right: -10px;
    bottom: 0;
    display: block;
    -webkit-transform: rotate(-44deg);
    -moz-transform: rotate(-44deg);
    -o-transform: rotate(-44deg);
    -ms-transform: rotate(-44deg);
    transform: rotate(-44deg);
}


/*Login page*/

.second-page-custom-login .main-parent .col-md-9 .heading h2{font-weight: bold;
    font-size: 1.6rem;
    color: #686868;
    letter-spacing: 7px;}
.second-page-custom-login .main-parent .col-md-9 .heading p{color: #686868}
.Remember-forge{    padding: 0px!important;}
.left-logo img{width: 40%}
.left-logo .col-md-3{background: rgb(9,9,121);
background: transparent linear-gradient(333deg, #283A90 0%, #22A7DE 100%) 0% 0% no-repeat padding-box;height: 100vh;    justify-content: center;
    align-items: center; display: flex;flex-direction: column;}

.effect-1{border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

.effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}

.form-fiel-main{display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;}
.form-fiel-main .custom-form{    width: 50%;
    padding: 0px!important;
    margin-bottom: 30px;
}
.custom-form ul{list-style: none;padding: 0px;margin: 0px;width: 100%}
.custom-form ul li .effect-1{    width: 100%;}
.custom-form ul li .effect-1:focus{outline: none;}
.form-fiel-main{    padding: 20px 0px;}
.check-body{padding: 0px!important;display: flex;
    justify-content: center;
    align-items: center;}

  .check-body  .check0bb{width: 25%;}
  .check-body .check0bb2{text-align: right;}
  .button-login {    margin-top: 1.4rem;}
  .button-login button:focus{outline: none;}
  .button-login button{width: 90%;
    height: 2.3rem;
    background: transparent;
    border: 1px solid #adadad;
    border-radius: 5px;}
    .button-login .sign-in{background: #22A7DE!important;color: #fff}

    @media screen and (max-width:768px) {
      .left-logo .col-md-3{    height: 12vh;}
      .sidebar-offcanvas .nav {
    padding-top: 10em!important;
}
#sidebar .nav li{    font-size: 0.8em!important;}
      .Notification-text{font-size: 0.8em!important}
.sidepanel{    top: 8rem;}
    .sidepanel .closebtn {
    position: relative;
    top: 0;
    left: 0px;
    font-size: 20px;
        padding-left: 15px;
}
.bell-body img {
    width: 45%;
}
.payment-method-main-body .col-lg-4{        position: relative;
    left: 50%;
    transform: translate(-50%, 0%); width:70%!important;}
  .payment-method .sub-inner-heading{font-size: 1.6rem;
    padding-bottom: 1em;
}
.payment-method-main-body .col-lg-8{width: 100%!important}
.payment-method{    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;}

.bell-header .media-body h5{ font-size: 1rem;}
.bell-header .media-left{margin-right: 0px!important}
      .right-side-section .top-user-css{
            position: absolute;
    top: 0.6em;
    background: #43c7f4;
        width: 110%;
    display: flex;
    justify-content: space-between;
    align-items: center;
      }

    #mySidepanel
      .left-logo .col-md-3{height: 15vh;}
      .left-logo img {
       width: 4rem;;
}
.form-fiel-main .custom-form {
    width: 90%;}
    .check-body .check0bb {
    width: 50%;
}
.full-section{    padding-top: 5rem;
}

    }

.right-side-menu-list li .media-body{    line-height: 2em;}

/*mian dashboard css*/
.first-section .main-heading h2{    padding-left: 1.1rem;}
.right-section .main-heading h2{letter-spacing: 1.8px;
    color: #686868;    font-size: 1.5em;
    font-weight: 900;}
  .bolder{font-weight: bolder;letter-spacing: 1.77px;}
.Notification-text{font-size: 1.2em}
.Account-setting{     margin-top: 0rem; padding: 15px 0.2em!important;
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;}
#sidebar .nav li{transition: 0.5s ease;cursor: pointer;}
#sidebar .nav li:hover{    border-left: 5px solid #2db1e5;}
#sidebar .nav li:hover a{color: #000}

#submenu1{padding-left: 0px!important}
#submenu1 li{padding-left: 0px!important;padding-right: 0px!important}
.p-m-list li .media .media-left .icon{
  width: 23px;
    height: 10px;
    background: #90d3ee;
    border-radius: 20px;
}

.Create-new button{background: transparent!important;}
.Create-new .modal-footer{    display: flex;
    justify-content: space-between;
    padding: 10px 30px;}

.Create-new .modal-body{height: 20em;display: flex;    flex-direction: column;padding-top: 3rem}

.Create-new .modal-body input:focus{outline: none;color: #000}
.Create-new .modal-body input{height: 2.4rem;
    border: none;
    box-shadow: 0px 0px 1px 1px #0000004f;
    border-radius: 2px;color: #6868689C;    padding-left: 1em;}
.Create-new .modal-header{box-shadow: 0px 0px 9px -3px #00000087;}

.Create-new .modal-footer{box-shadow: 0px 0px 4px 0px #00000061;}

.Create-new .modal-footer .btn-close {    border: 1px solid #22A7DE;
    color: #22A7DE;   padding: 10px 30px;
    border-radius: 6px;}
.Create-new .modal-footer .btn-save{    background: #22A7DE!important;
    color: #fff;border: none;
        padding: 10px 30px;
    border-radius: 6px;}
.Create-new .modal-dialog{    padding-top: 5rem;}

.shop-icon img{width: 70%}


.left-shop-detals .media-body h5{font-size: 1.2em;margin-bottom: 0px!important}
.left-shop-detals .media-body p{color: grey;font-size: 0.8em}

.left-top-btn button,.Export-button-css{    text-transform: none;
    padding: 0.4em 1em;
    border: 1px solid grey;
    border-radius: 5px;
    background: transparent;
    color: grey;}

.calender-bb table {width: 100%;border: none;}

.calender-bb .table-bordered th, .calender-bb .table-bordered td {
    border: none!important;    padding: 10px;
}
.calender-bb .footer-bottom-btn{ text-align: right;border-top: 1px solid lightgrey;
    margin-top: 2em;
}

.calender-bb .footer-bottom-btn button{
  margin-top: 1em;
    padding: 10px 30px;border-radius: 5px;background: transparent;border: none;}

.calender-bb .footer-bottom-btn .cncl-btn{border:1px solid #22A7DE;}
.calender-bb .footer-bottom-btn .Updte-btn{background:#22A7DE;color: #fff }

.right-butoons  ul {list-style: none;overflow: auto;margin: 10px 0px 0px;padding: 0px}
.right-butoons  ul li{    padding: 0.4em 0px;}
.right-butoons  ul li button{width: 100%;border: 1px solid lightgrey;
    border-radius: 4px;
    background: transparent;    height: 35px;}
    #Calender .modal-dialog{    width: 80%;
    max-width: 100%;top: 4.5em}
    #bottom_modal .modal-dialog {
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    }

    /* Left & Right */

    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
      position: fixed;
      margin: auto;
      width: 500px;
      max-width: 100%;
      height: 100%;
    }

    .modal.left .modal-content,
    .modal.right .modal-content {
      height: 100%;
      overflow-y: auto;
    }


    .modal.left.fade .modal-dialog {
      left: -500px;
      -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
      -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
      -o-transition: opacity 0.3s linear, left 0.3s ease-out;
      transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.left.fade.show .modal-dialog {
      left: 0;
    }

    .modal.right.fade .modal-dialog {
      right: -500px;
      -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
      -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
      -o-transition: opacity 0.3s linear, right 0.3s ease-out;
      transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.show .modal-dialog {
      right: 0;
    }

    #right_modal .modal-body{overflow-y: scroll;display: flex;
    justify-content: center;
    align-items: center;}
    .right-section{padding: 0px!important}

    .modal.left .modal-content,
    .modal.right .modal-content,
    .modal.top .modal-content {
      border-radius: 0;
      border: none;
    }
.search{    z-index: 999999999!important;}
    .modal.left .modal-dialog.modal-sm,
    .modal.right .modal-dialog.modal-sm {
      width: 300px;
    }

    .modal.left .modal-dialog.modal-lg,
    .modal.right .modal-dialog.modal-lg {
      width: 800px;
    }

    .modal.left .modal-dialog.modal-xl,
    .modal.right .modal-dialog.modal-xl {
      width: 1140px;
    }




.branch-page .fixed-top{    z-index: 999999999;height: 57px}

#add-branch-add{    z-index: 99999999999;}
.Create-new{
    z-index: 99999999999!important;
}

.branch-page{overflow: hidden;}

    #bottom_modal  .modal-dialog {
    position: fixed;
    margin: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    }

    #bottom_modal .modal-content {
    height: 100vh;
    overflow-y: hidden;    border-radius: 0px;
    border: none;
    }

    #bottom_modal .modal-content .modal-header{    height: 10%;}
    #bottom_modal{z-index: 9999999999!important}

      #bottom_modal .modal-content .modal-body{overflow: auto;}

button{cursor: pointer;}
    #bottom_modal .modal-body {
    padding: 15px 15px;
    }

    /* Bottom */

    #bottom_modal.fade .modal-dialog {
    bottom: -100%;
    -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
    -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
    transition: opacity 0.3s linear, bottom 0.3s ease-out;
    }

    #bottom_modal.fade.show .modal-dialog {
    bottom: 0;
    }

    #bottom_modal.fade .modal-dialog {
    bottom: -100%;
    }
    .top-alert-in-branch{border: 2px solid #707070;!important}
    .top-alert-in-branch .media-right button{border: none;
    background: #22A7DE;
    color: #fff;
    padding: 5px 20px;
    border-radius: 5px;}

    .top-alert-in-branch h4{margin-bottom: 0px;color: #22A7DE}
    .mobile-padding-none{padding: 0px!important}

   .branch-body #myInput{width: 40%;margin-bottom: 1em;border: 2px solid #707070;}

   .branch-table #myTable .media-left img{    height: 60px;
    width: 60px;
}

 .branch-table #myTable .media-right img{
  width: 60%;
 }

 .branch-table thead th{background: #F5F5F5;border: none;}
 .branch-table td{border: none!important;}
 #submenuee{position: absolute;    margin: 0px;
    padding: 0px;
    list-style: none;
    overflow: hidden;
    padding-left: 0px!important;
    background: #ffff;    right: 1rem;    border-radius: 5px;
    box-shadow: 0px 0px 8px -4px #00000059;width: 8rem;
    box-sizing: border-box;}
     #submenuee li{transition: 0.4s}
     #submenuee li a{color: #000}
 #submenuee li:hover{background: #f0fbfe}

 #add-branch-add .modal-dialog{max-width: 70%}

 .add-branch-form .col-md-12 label{display: block}

  .add-branch-form .col-md-12 input{width: 100%}

  .brands-one-by-2 {    padding-top: 15px;}

  .brands-one-by-2 .col-md-6 label{margin-bottom: 0px;}
  #validationCustomUsername{width: 80%!important}



  .switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
 position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 1px;
    background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.add-branch-form{    overflow: auto;
    height: 30em;}

    .add-branch-form::-webkit-scrollbar {
  display: none;
}

#add-branch-add .modal-footer button{width: 8rem;
    height: 2.5rem;background: #22A7DE;color: #fff}
.all-create{width: 8rem;border-radius: 5px;
    height: 2.5rem;background: #22A7DE;color: #fff;border: none;}
    .all-c-header{border-bottom: 1px solid lightgrey;
    padding: 20px 10px;}
.all-c-header .media-body h4{margin-bottom: 0px;
    font-weight: bold;}

    .all-main-card{display: flex;
    justify-content: space-between;}

    .all-main-card{    padding: 30px 60px!important;}

    .all-main-card .card .card-img-top{height: 12rem;}
  .all-main-card  .card-footer{background: #fff}
 .all-main-card  .card-footer .col-md-3 {padding: 0px}
 .all-main-card  .card-footer .col-md-3 img{width: 35%;}
 .all-main-card  .card-footer .col-md-3 ul{list-style: none;padding: 0px;margin: 0px}
  .all-main-card  .card-footer .col-md-3 ul .b-count h1{font-size: 1.5rem}

  .left-shop-detals{position: relative;}
    #Calender{z-index: 99999;}

    /*sign up page css*/

    .sign-up-page .check-body .check0bb {
    width: 30%;
}

.sign-up-form0group{width: 55%!important}

.tow-cloum-filed{padding-left: 0px!important;padding-right: 0px!important;margin-bottom: 1.2em}
.tow-cloum-filed ul{list-style: none;padding: 0px;margin: 0px}
.tow-cloum-filed ul .effect-1{width: 100%}
.tow-cloum-filed ul .effect-1:focus{outline: none;}
.tow-cloum-filed form{ margin: 0px 15px 0px 0px;}


@media screen and (max-width: 768px){
    .allbranch-bodytable .row {margin: 0px!important  }
  .allbranch-bodytable .row .col-md-12{    padding: 0px!important;}
  .login-page-ss .check-body{padding: 0px 15px!important;}
  .sign-up-form0group{width: 100%!important}

  .sign-up-page .check-body .check0bb {
    width: 80%;
}
.sign-up-page .full-section {
    padding-top: 3rem!;
}

}


/*Code correction*/
.test-check .left-shop-detals{position: relative;
    z-index: 0;    top: 0rem;}
.test-check .sidebar-offcanvas .nav {
    padding-top: 0em!important;
}

.test-check #main{
    position: relative;}

.test-check .right-section {
    padding-top: 0rem !important;margin-top: 0rem!important}
.test-check #sidebar{max-height: 100%;
    height: 100vh;
    overflow-y: scroll;}
.test-check{overflow: hidden;}

.left-top-btn{border-bottom: 1px solid lightgray;}


.test-check .first-section .main-card .main-card-body .body-card-body{
  background: transparent linear-gradient(300deg, #22A7DE 0%, #283A90 100%) 0% 0% no-repeat padding-box;
opacity: 1;
}

.test-check .main-card{    padding: 2rem 0px;}
.main-card-rows{padding-bottom: 2rem}

.test-check .chart-and-test {top: 0rem;}
.test-check .main-card-rows .payment-method{height: 100%}

.main-dashboard{overflow: hidden;}

/*scroll bar css */

::-webkit-scrollbar
{
 width: 5px;
 border-radius: 50%;
}
::-webkit-scrollbar-thumb{
background:linear-gradient(rgb(99 198 237), rgb(99 198 237));
border-radius: 10%;
}
 /*scroll bar css */



@media screen and (max-width:768px) {
  .test-check #bottom_modal.fade.show .modal-dialog {
    top: 0;
}
  .Company-page-custom .all-main-card{    padding: 0px 0px!important;}
    .Company-page-custom .all-main-card .card-footer .col-md-3{
      width: 50%
    }


        .Company-page-custom .all-main-card .card{
              margin-bottom: 20px;margin-top: 20px;
        }

      .all-c-header .col-md-12{padding: 0px!important}
      .all-c-header .col-md-12 .media-left{margin-right: 0rem !important;}

      .Company-page-custom .Create-new .modal-dialog{
          padding-top: 0px!important
      }


.Company-page-custom .all-main-card .card{box-shadow: 0px 1px 5px #00000029;}

      /*branch page mobile css*/
      .branch-page .right-section{        overflow-y: scroll;}
      .branch-page .first-section{padding: 0px!important}
      .branch-body #myInput {
    width: 100%; margin-bottom: 1em;
}
.branch-table #myTable .media-left img {
    height: 40px;
    width: 40px;
}
.branch-table #myTable .media-left  {
    margin: auto;
}

.branch-table #myTable .media-body{width: 7rem;}
#add-branch-add .modal-dialog {
    max-width: 100%;margin: 0px;
}
#add-branch-add .modal-content{height: 90vh;}
.branch-table-main-body{overflow-x: auto;;}
.branch-page #main #sidebar .left-shop-detals{
    padding-top: 4rem!important;}
.branch-page #main #sidebar .col-md-12{    padding: 0px!important;
}
.branch-page .sidebar-offcanvas .nav {
    padding-top: 6em!important;
}
.left-shop-detals .media-body h5 {
    font-size: 1.2em;
    margin-bottom: 0px!important;    color: #686868;}
    .mobile-padding-none{padding: 0px!important}

   .branch-page  .right-section{top: 0em;}
   /*Dashborad pade*/

#Calender .modal-dialog {
    width: 100%;
    max-width: 100%;
    top: 0px;
    margin: 0px;
}

.main-card-rows .col-8{max-width: 100%;flex: 0 0 100%}
#Calender{overflow: hidden;}
#Calender .modal-body{height: 100vh;
    overflow-y: scroll;}
    #main{overflow: hidden;
      /* Dashboard main  mobile css*/
    }

.Create-new .modal-dialog{padding-top: 0px!important}
#sidebar{z-index: 1!important}
.branch-page #sidebar .nav li {
    padding: 0.5em 0px;
}

.branch-page #sidebar .nav li .nav-link {
    display: block;
    padding: 0.5rem 0.4rem;
    text-align: left;
}

      /*branch page Computer  css*/
.branch-table-main-body{padding: 0px!important}
      /*branch page Computer  css */

@media only screen and (min-width: 768px) {
  .test-check .left-top-btn {    padding-top: 5em;}

}

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

  .test-check #main  .right-section .left-top-btn .media-right{
    position: absolute;
    display: flex;
    top: 0em;
    left: 50%;
    clear: both;
    transform: translate(-50%, -10%);}
    .left-top-btn .media-body h4{padding-top: 4rem}
.test-check #main  .right-section .left-top-btn button .media-right{display: none;}
.test-check .main-card {
    padding: 1rem 0px!important;
}

.test-check .main-card .col{padding: 1em 1rem}
.test-check .main-card  .main-card-rows .col-8{padding:1rem}
.payment-method-main-body .col-md-4{margin: auto;}
.payment-method .chart-and-test{padding: 1rem}
}
.branch-page .fixed-top{    z-index: 9999999999!important;}

/*Right side notification*/

.modal.left .modal-dialog,
.modal.right .modal-dialog{
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}
.Create-new {    background: rgba(7, 7, 7, 0.44);}


.nav-item .collapsed .fa-chevron-up{transform: rotate(180deg);}
  .left-shop-detals:hover  img {
    content: url(' /api/public/images/website-images/store-add.png');
    height: auto;
    width: 30px;
    border-radius: 0.3em;
    margin-right: 1em
  }

#add-branch-add{overflow: hidden;}

.search  .modal-content{border: none!important; border-radius: 0px!important;}

.search .modal-dialog{box-shadow: 0px 4px 7px #00000029;
}

.search .modal-content{height: 4rem!important}
.search .modal-content .modal-content .media{height: 100%}
.rightside-header-items{list-style: none;overflow: hidden;display: flex;justify-content: space-between;margin: 0px;padding:0px;align-items: center;float: right;}
.rightside-header-items li{display: inline-block;padding: 0px 0px 0px 1.5em;}
#main{padding-top: 1rem!important;height: 100%!important}
.left-shop-detals{    padding: 10px 0px;}
.first-section .top-alert-in-branch{border-radius: 0rem;border: 2px solid #707070;}
.right-section .first-section{    height: 90vh;
    overflow-y: scroll;    padding: 0px!important;}
.rightside-header-items .icon-header img{width: 1.5rem}
.rightside-header-items li .media .media-left img{width: 2rem}
  .branch-page .Create-new {overflow: hidden; background: #00000059;}

@media only screen and (max-width: 768px) {
  .navbar .col-md-12{padding: 0px!important;    height: 2rem;}
  .navbar{margin: 0px!important;padding: 0px!important}
  .top-header-title,.top-header-logo{width: 50%!important;
    padding: 0px 0px;}
.search-user-notification{    background: #22a7de;    padding: 10px 0px;}
.search-user-notification .rightside-header-items{width: 100%}
.branch-page .fixed-top{    height: 4rem;}
.top-header-logo{    text-align: right!important;
    padding-right: 4em!important;}
    #right_modal .modal-dialog {
    padding-top: 4rem!important;
    height: 100vh;
    width: 100%;
}
.right-section {
    top: 4em;
}
.search{    top: 5rem;
    z-index: 2147483647 !important;}
.test-check .left-shop-detals{top: 0rem;}

.test-check .left-shop-detals{padding: .5rem 1.5rem!important}
}
#bottom_modal .all-c-header{box-shadow: 0px 1px 5px #00000052;}
.rightsidemenu ul{list-style: none;margin: 0px;padding: 0px}
.rightsidemenu ul li{padding: 10px 0px;cursor: pointer;}
}



.main-dashboard #sidebar{height: 100%!important;border: none;
    border-right: 1px solid lightgrey;overflow: hidden!important;}


.Color-red{height: 10px;width: 10px;background: red}

#submenuee{display: none;}

.three-dout-more-menu.active .list-unstyled{display: block!important;}

.rightside-header-items li{cursor: pointer;}

.three-dout-more-menu .list-unstyled {position: absolute;
    margin: 0px;
    padding: 0px;
    list-style: none;
    overflow: hidden;
    padding-left: 0px!important;
    background: #ffff;
    right: 1rem;
    border-radius: 5px;
    box-shadow: 0px 0px 8px -4px #00000059;
    width: 8rem;
    box-sizing: border-box;
}

:focus{outline: none!important}



/*login form css*/


 .form-fiel-main form{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 768px){
  .create-new-user .sign-up-form0group .tow-cloum-filed {padding: 0px 2rem 0px 0px!important;
      position: relative;}
      .create-new-user .sign-up-form0group {
          width: 60%!important;
      }
      .create-new-user .full-section{    padding: 5rem 0px;    overflow: auto;
    height: 100vh;}
      .left-logo .col-md-3{height: 100vh!important;}
}
@media screen and (max-width: 768px){
  .create-new-user .sign-up-form0group {
      width: 100%!important;
  }
  .sign-up-page .check-body .check0bb {
    width: 100%!important;    padding: 0px 1rem;}
  .create-new-user .sign-up-form0group .tow-cloum-filed {
    padding: 0px 1rem 0px 1rem!important;}
  .create-new-user .check-body .check0bb a {
    width: 100%!important;
}
   .check-body .check0bb {
    width: 100%;
}
.second-page-custom-login .main-parent .col-md-9 .heading h2 {
    font-weight: bold;
    font-size: 1.3rem;
    color: #686868;
    letter-spacing: 2px;
}
.create-new-user .button-login button{width: 100%;}

.create-new-user .second-page-custom-login .main-parent .col-md-9 .heading h2 {
    font-weight: bold;
    font-size: 1.3rem;
    color: #686868;
    letter-spacing: 2px;
}

}


.create-new-user .sign-up-form0group form ul{width: 100%;position: relative;}

.create-new-user .sign-up-form0group form ul li{margin: 0px 0px}

.create-new-user .call .media .media-left{    width: 25%;
    margin: auto auto 0px;}
    .create-new-user .call .media .media-left select{    width: 80%;      border-radius: 5px;
    border-color: #cccccc;  PADDING: 7PX 0PX;    font-size: 10px;}
  .create-new-user .call label{margin-bottom: 0PX;width: 100%}
  .create-new-user .tow-cloum-filed ul .effect-1{    font-size: 14px;}
.create-new-user .languages select{    font-size: 14px;}


.create-new-user .recap{    width: 60%!important;}

.create-new-user .check-body .check0bb {
    width: 100%;
    font-size: 14px;    display: flex;
    justify-content: flex-start;
    align-items: center;
}
 .create-new-user .check-body .check0bb a{    width: 50%;}
 .create-new-user .check-body .check0bb .sign-in{    width: 100%!important;cursor: pointer;}

 /*left -popup */

 .menu-list-sidebar .right-side-menu-list #submenutets{padding-left: 0px!important}
  .menu-list-sidebar .right-side-menu-list #submenutets li a{font-size: 14px;padding-left: 0px!important}

.top-header-title  .navbar-toggler{    padding-left: 0px!important;}
 /*left -popup close*/
.mobile-ml-3{margin-left: 1rem}

 .button-login .sign-up{background: #22A7DE!important;
    color: #fff;
    width: 185px;
    height: 50px;
    background: #22A7DE 0% 0% no-repeat padding-box;
    border: 1px solid #22A7DE;
    border-radius: 4px;
    opacity: 1;}


.check0bb label input{margin-right: .5rem;}

label{cursor: pointer;}

/*New Dashboard css*/

/*New Dashboard css close*/
/*float*/
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-placeholder {
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: 0.5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
  font-size: 12px!important;
}
.effect-1.form-control{border-width: 0px 0px 1px 0px;border-radius: 0px}
.form-control:focus{box-shadow: none!important;border: none}


#login_form .form-control-placeholder{padding-left: 0px;
    color: #000;
    opacity: 1;    font-size: 14px;}

    .form-group.has-error.has-danger label{color: red!important}
    .has-error .form-control{    box-shadow: none;    border-color: red;}

    .form-group.has-error.has-danger  .effect-1 ~ .focus-border{
    background-color: red!important;}
.help-block.with-errors .list-unstyled {    color: red;
    font-size: 12px;
    margin-top: 10px;}
.create-new-user .tow-cloum-filed ul .effect-1{    padding-left: 0px;}


.form-fiel-main .custom-form{    margin-bottom: 40px;}
.second-page-custom-login .main-parent .col-md-9 .heading h2 {
    font-weight: 500;
    color: #686868;
    letter-spacing: 7px;
    margin-bottom: 1rem;
    font-size: 32px;
}
.second-page-custom-login .main-parent .col-md-9 .heading p{opacity: 0.5;    color: #686868;}
.col-md-12.check-body.button-login{    margin-top: 3rem;}

.button-login button{    height: 45px}

.col-md-12.check-body .check0bb label { letter-spacing: 0px;
color: #686868;    font-size: 14px;}
.check0bb.check0bb2 a{    font-size: 14px;}
#login_form{margin-top: 1rem;}

#login_form .custom-form.tow-cloum-filed #password{    padding-left: 0px;}

#login_form .custom-form.tow-cloum-filed #email{    padding-left: 0px; }



@media screen and (max-width: 768px){
  .reset-password-page .col-md-9 .heading h2 {
    font-size: 24px!important;
  letter-spacing: 2px!important;
}

.form-fiel-main{    margin-top: 3rem;}
  .button-login button {
    width: 100%;}
    .col-md-12.check-body.button-login{    flex-direction: column;}
    .check-body .check0bb{    margin-bottom: 15px;}
    .left-logo .col-md-3 {
    height: 80px;
}

.second-page-custom-login .main-parent .col-md-9 .heading h2{font-size: 28px;letter-spacing: 3px;}
.full-section {
    padding-top: 4rem;
}
.second-page-custom-login .main-parent .col-md-9 .heading p{    margin-bottom: 0px;    font-size: 14px;}
#login_form {
    margin-top: 2rem;
}
}


#btnToggle{position: absolute;
right: 0px;
top: 50%;
transform: translate(-50% ,-50%);    background: transparent;border: none;}
#eyeIcon {
    color: #E1E1E1;
}


.change-eyye #eyeIcon {
    color: #22A7DE!important;
}



.change-eyye #btnToggle::before{display: none;}

/* #btnToggle::before{    content: '';
    position: absolute;
    left: 50%;
    background: #d5d5d5;
    width: 2px;
    height: 80%;
    transform: rotate(
42deg);
    top: 10%;} */


    select:-webkit-autofill ~ lable,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus ~ lable,
    input:-internal-autofill-selected ~ label{
      transform: translate3d(0, -100%, 0);    opacity: 1;
    font-size: 12px!important;
    }

    input:-internal-autofill-selected ~ label{
      transform: translate3d(0, -100%, 0);}