/*************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400&family=Poppins:wght@300&display=swap');

body{
  width:100%;
  font-family: 'Jost', sans-serif;
  padding:3% 0 0 15%;
  transition: .5s ease-in-out;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
a{
  color:#000;
}
.sidebar_area{
  width:15%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index:9999;
  transition: .5s ease-in-out;
}
.top_bar{
  position: fixed;
  top: 0;
  left:15%;
  width:85%;
  height:50px;
  z-index:99;
  transition: .5s ease-in-out;
  
}

.top_bar h4{
  padding: 0px 60px;
}
.main_container{
  width:100%;
  /* position: fixed;
  width:85%;
  top: 6%;
  left: 15%;
  bottom: 0;
  overflow-y:scroll;
  overflow-x:hidden;
  z-index:99;
  transition: .5s ease-in-out; */
}

.adjust_width{
  width:100% !important;
  left: 0% !important;
  padding:3% 0 0 0 !important;
}

.rotate_icon{
  transform: rotate(180deg);
}
.side_bar {
  width: 100%;
  height:100vh;
  position: relative;
  top: 0;
  left: 0;
  padding:5px;
  /* -webkit-box-shadow: 10px 10px 38px 0px #888888;
  -moz-box-shadow: 10px 10px 38px 0px #888888;
  box-shadow: 10px 10px 38px 0px #888888; */
  transition: .5s all;
  z-index:99;
  border-right:2px solid #000;
  overflow: hidden;
}

.side_bar_toggle{
 left:-15%;
}
#toggle_icon{
  font-size: 25px;
  transition: .5s ease-in-out;
}

.side_button_toggle{
  left:0 !important; 
}
#side_button{
  float:left;
  height:50px;
  margin-top: -4px;;
  padding:12px;
  background:#000;
  color:#ffff;
  cursor: pointer;
  transition: .5s all;
}
.admin_detail {
  background-color: #fcfcfc;
}

@media(max-width:992px){
  body{
    width:100%;
    padding:50px 0 0 0;
    overflow-x: hidden;;
  }
  .main_container{
    overflow-x: hidden;
  }
  .sidebar_area{
    width:200px;
    left:-200px;
  }
  .side_bar_toggle::before{
    content:'';
    width:100%;
    height:100vh;
    background: #000000a5;
    backdrop-filter: blur(2px);
    position:fixed;
    top:50px;
    left:0px;
  }
  #side_button{
    float:right;
    height:50px;
    margin-top: -4px;;
    padding:12px;
    background:#000;
    color:#ffff;
    cursor: pointer;
    transition: .5s all;
  }
  .top_bar{
    left:0%;
    width:100%;
  }
  .side_bar_toggle{
    left:0px;
   }
  .main_container{
    width:100%;
  }
  #toggle_icon{
    transform: rotate(180deg);
  }
  .rotate_icon{
    transform: rotate(360deg) !important;
  }
  .top_bar h4{
    padding: 0px 30px;
  }
}
@media(min-width:993px) and (max-width:1300px){
  .main_container{
    width:100%;
  }
  .sidebar_area{
    width:20%;
  }
  .top_bar{
    left:20%;
    width:80%;
  }
  .side_bar_toggle{
    left:-20%;
   }
}
.action_icon{
  font-size:20px;
  cursor: pointer;
}
.menu_item{
  width: 100%;
  background: rgba(24, 24, 24, 0.42);
  color:#cfcfcf;
  cursor: pointer;
  padding:5px;
  margin:3px  0px 0px 0px;
  transition: .5s;
  border-left: 3px solid #aa0303;
  border-right: 3px solid #aa0303;
}
.menu_item i{
  font-size: 22px;
  margin: 0px 15px;
}

.activemenu{
  background: #000 ;
}
.menu_item_child{
  width:200px;
  font-size: 12px;
  padding: 5px 10px;
  margin-bottom:0px;
  color:#000;
  background-color: whitesmoke;
  transition: .5s;

}
.menu_item_child:hover{
  background-color: #cfcfcf;
  color:#000;
  cursor: pointer;
}
.menu_item:hover{
  background-color: #000;
  color: #fff;
}
.menu_content{
  display: block;
  animation: reveal .5s ease;
}
.active{
  background-color: #000;
  color:#fff;
}
@keyframes reveal{
  from{
    transform: scale(0);
    opacity: 0;
  }
  to{
    transform: scale(1);
    opacity: 1;
  }
}
.hidden{
  display: none;
}
.container_area{
  width:100%;
  height:100vh;
  display: flex;
  justify-content: center;
  padding:20px 50px;
}
.form_area{
  width:60%;
  height:100%;
  border-radius: 20px;
  background-color: #fff;
  padding: 10px 30px;
  -webkit-box-shadow: 0px 0px 34px 0px #f2f2f2;
  -moz-box-shadow: 0px 0px 34px 0px #f2f2f2;
  box-shadow: 0px 0px 34px 0px #f2f2f2;
  animation:slideright .5s ease;

}
.product_form_area{
  width:100%;
  height:100%;
  border-radius: 20px;
  background-color: #fff;
  padding: 10px 30px;
  -webkit-box-shadow: 0px 0px 34px 0px #f2f2f2;
  -moz-box-shadow: 0px 0px 34px 0px #f2f2f2;
  box-shadow: 0px 0px 34px 0px #f2f2f2;
  animation:slideright .5s ease;
  overflow-y: scroll;
}
@keyframes slideright{
  from{
    transform: translateX(-50%);
    opacity: 0;
  }
  to{
    transform: translateX(0%);
    opacity:1;
  }
}

.form_label{
  font-weight: 500;
  font-size:17px;
  color:#000;
}

.box{
  min-width:130px;
  border:1px solid #1C87C9;
  background-color: whitesmoke;
  margin:20px 10px;
  border-radius:10px;
  text-align:center;
  padding:5px 7px;
  color:#000;
  font-weight: 500;
  /* -webkit-box-shadow: inset 0px 0px 13px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 13px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 13px 0px rgba(0,0,0,0.75); */
}


.d_heading{
  background-color: #1089FF;
  color:#fff;
  font-weight: bold;
  padding:2px 3px ;
}
.d_values{
  background-color: #DC3545;
  margin: 5px auto;
  color:#fff;
  width:30px;
  height:30px;
  border-radius:50%;
}
.page_container{
	width: 100%;
	display:flex;
  z-index:99999;
}

.msg_box{
  z-index: 9999;
  position: absolute;
  top: 0px;
  left: 35%;
  width: auto;
  height:45px;
  border:1px solid #ccc;
  background: #000;
  animation: showmsg .5s ease ;
}

@keyframes showmsg{
  from{
    transform: translateY(-50%);
  }
  to{
    transform: translateY(0%);
  }
}
.msg_box p{
  padding:7px;
}
.msg_box .first_icon{
  padding: 5px;
  border-radius: 50%;
}
.msg_box .close-btn{
  border-left:1px solid #ccc;
  padding:7px;
  cursor: pointer;
}

.btn{
  border-radius: 3px !important;

}
.form-control{
  border-radius: 1px !important;
  border: 1px solid #cecece !important;
}
.form-control:focus{
  border: 1px solid #0b78bc !important;
}

.popup{
  width:85%;
  height:100vh;
  position: fixed;
  top:0;
  left:15%;
  background: rgba(0, 0, 0, 0.548);
  backdrop-filter: blur(1px);
  z-index:9;
  display:flex;
  justify-content: center;
  /* align-items: center; */
  transition: .5s ease-in-out;
}
.popup .popup_content{
  margin: 8% auto;
  width:70%;
  height:75%;
  border-radius: 3px;
  border:1px solid #fff;
  background: #fff;
  overflow-X: hidden;
  overflow-y: scroll;
  padding:10px;
  transition: .5s ease-in-out;
}
.email_popup_content{
  margin: 5% auto;
  width:45%;
  height:450px;
  border:1px solid #fff;
  background: #fff;
  overflow-X: hidden;
  overflow-y: scroll;
  padding:10px;
}

.content{
  max-height:250px;
  overflow-y: scroll;
  background: #fff;
  border:1px solid #cecece;
  width:95%;
  position: absolute;
  z-index:9;
  display: none;
}
.content span p{
  border-bottom:1px solid #cecece;
  background: #e9ecef;
  margin: 0;
  padding:5px 10px;
  color:#4c4c4c;
  cursor: pointer;
}

.content span p:hover{
  background: #383838;
  color:#cecece;
}

label{
  color:#111;
}

.response .detail{
  background:#cfcfcf;
  padding:5px;
  border-radius:5px;
}
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #42a6c1;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.Checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 5% auto;
  box-shadow: inset 0px 0px 0px #42a6c1;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}
.data-card{
  max-width:100%;
  border-radius:10px;
  margin:10px;
  -webkit-box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.103);
  -moz-box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.103);
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.103);
  background: #cfcfcf;
}
.data-card .data-icon{
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  background:#1e1e22;
  border-radius: 10%;
}

.data-card .data-icon i{
  font-size: 2rem;
  color:#aa0303;
}
.data-card .data-text{
  width: 80%;
  padding:5px 10px;
  text-align:center;
}
.data-card .data-text h4{
  font-weight: 500;
  font-size: 22px;
  margin: 10px 0px;
}

@media(max-width:767px){
  .data-card .data-icon i{
    font-size: 1.5rem;
    color:#aa0303;
  }
  .popup{
    width:100%;
    left:0;
  }
  .popup .popup_content{
    margin-top: 50px;
    width: 100%;
    height: 450px;
    border-radius: 3px;
    border: 1px solid #fff;
    background: #fff;
    overflow-X: hidden;
    overflow-y: scroll;
    padding: 10px;
  }

  .email_popup_content{
    margin: 5% auto;
    width:92%;
  }

}
@media(min-width:768px) and (max-width:1200px){
  .popup{
    width:100%;
    left:0;
  }
  .popup .popup_content{
    margin-top: 10%;
    margin-left: 2%;
    width: 96%;
    height: 550px;
    border-radius: 3px;
    border: 1px solid #fff;
    background: #fff;
    overflow-X: hidden;
    overflow-y: scroll;
    padding: 10px;
  }
  .email_popup_content{
    margin: 10% auto;
    width:60%;
  }
}

@keyframes stroke {
  100% {
      stroke-dashoffset: 0
  }
}

@keyframes scale {

  0%,
  100% {
      transform: none
  }

  50% {
      transform: scale3d(1.1, 1.1, 1)
  }
}

@keyframes fill {
  100% {
      box-shadow: inset 0px 0px 0px 30px #42a6c1
  }
}

.bg_light{
  background: #cfcfcf !important;
  border-radius: 10% !important;
}
.bg_light i{
  font-size: 16px;
}

.customers_profile{
  width:100%;
  background:#eaeaea;
  color:#000;
  border-radius: 10px;
  line-height: 25px;
}
@media (min-width:1000px) { 

.hide_pc{
  display:none !important;
}
} 
@media (max-width: 999px) {
.hide_mobile{
    display:none !important;
  }
}

@media (min-width:1000px) and (max-width:1300px){
  body{
    padding:4% 0 0 21%;
  }
}

.search_bar .fa-search{
  position: absolute;
  top:10px;
  left:90%;
}