/* google font - popins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200&display=swap');
*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root{
  /* Colors */
  --body-color: #E4E9F7;
  --sidebar-color: #FFF;
  /* --primary-color: #695CFE; */
  --primary-color: #8FCD1B;
  --primary-color-light: #F6F5FF;
  --color-success:#31c76f;
  --color-danger:#e72e3e;
  --toggle-color: #DDD;
  --text-color: #0A1F5E;
  --color-light: rgba(132, 139, 200, 0.18);
  --box-shadow-: 0 2rem 3rem var(--color-light);
  /* Transitions */
  --tran-02: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.4s ease;
  --tran-05: all 0.5s ease;
  /* Padding */
  --card-padding: 1.8rem;
  --padding-1: 1.2rem;
}
body{
  /* height: 100vh; */
  height: 100%;
  background: var(--body-color);
  transition: var(--tran-02);
}
body.dark{
  /* Colors */
  --body-color: #18191A;
  --sidebar-color: #242526;
  --primary-color: #3A3B3C;
  --primary-color-light: #3A3B3C;
  --toggle-color: #FFF;
  --text-color: #CCC;
}

/* ===Sidebar=== */
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  padding: 10px 14px;
  background: var(--sidebar-color);
  transition: var(--tran-05);
  z-index: 100;
  box-shadow: var(--box-shadow-)
}
.sidebar.close{
  width: 88px;
}

/* ===Reuseable CSS=== */
.sidebar .text{
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  transition: var(--tran-03);
  white-space: nowrap;
  opacity: 1;
}
.sidebar.close .text{
  opacity: 0;
}
.sidebar .image{
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar li{
  height: 50px;
  margin-top: 10px;
  list-style: none;
  display: flex;
  align-items: center;
}
.sidebar li .icon{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  min-width: 60px;
}
.sidebar li .icon,
.sidebar li .text{
  color: var(--text-color);
  transition: var(--tran-02);
}
.sidebar header{
  position: relative;
}
.sidebar .image-text img{
  width: 40px;
  border-radius: 6px;
}
.sidebar header .image-text{
  display: flex;
  align-items: center;
}
header .image-text .header-text{
  display: flex;
  flex-direction: column;
}
.header-text .name{
  font-weight: 600;
}
.header-text .profession{
  margin-top: -2px;
}
.sidebar header .toggle{
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%) rotate(180deg);
  height: 25px;
  width: 25px;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--sidebar-color);
  font-size: 20px;
  transition: var(--tran-03);
}
.sidebar.close header .toggle{
  transform: translateY(-50%);
}
body.dark .sidebar header .toggle{
  color: var(--text-color);
}
.sidebar .search-box{
  background: var(--primary-color-light);
  border-radius: 6px;
  transition: var(--tran-05);
}
.sidebar .menu{
  margin-top: 35px;
}
.search-box input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  background: var(--primary-color-light);
  transition: var(--tran-05);
}
.sidebar li a{
  height: 100%;
  width: 100%;
  align-items: center;
  text-decoration: none;
  display: flex;
  border-radius: 6px;
  transition: var(--tran-04);
}
.sidebar li a:hover{
  background: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
  color: var(--sidebar-color);
  transition: var(--tran-03);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
  color: var(--text-color);
  transition: var(--tran-03);
}
.sidebar .menu-bar{
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu-bar .mode{
  position: relative;
  border-radius: 6px;
  background: var(--primary-color-light);
}
.menu-bar .mode .moon-sun{
  height: 50px;
  width: 60px;
  display: flex;
  align-items: center;
}
.menu-bar .mode i{
  position: absolute;
}
.menu-bar .mode i.sun{
  opacity: 0;
}
body.dark .menu-bar .mode i.sun{
  opacity: 1;
}
body.dark .menu-bar .mode i.moon{
  opacity: 0;
}
.menu-bar .mode .toggle-switch{
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 60px;
  cursor: pointer;
  border-radius: 6px;
  background: var(--primary-color-light);
  transition: var(--tran-05);
}
.toggle-switch .switch{
  position: relative;
  height: 22px;
  width: 44px;
  border-radius: 25px;
  background: var(--toggle-color);
}
.switch::before{
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background: var(--sidebar-color);
  transition: var(--tran-03);
}
body.dark .switch::before{
  left: 24px;
}
.home{
  position: relative;
  height: 100vh;
  left: 250px;
  width: calc(100% - 250px);
  /* background: var(--body-color); */
  transition: var(--tran-05);
}
.home .recent-orders{
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.home .recent-orders table{
  background: var(--primary-color-light);
  width: 100%;
  border-radius: 7px;
  padding: var(--card-padding);
  text-align: center;
  box-shadow: 7px 10px 10px rgba(224, 209, 235, 0.671);
  transition: all 300ms ease;
}
/* .home .recent-orders button{
  border: none;
  border-radius: 5px;
} */
.home table thead tr th{
  padding-top: 10px;
}
.home table tbody td{
  height: 2rem;
  padding: 10px;
  border-bottom: 1px solid var(--color-light);
}
.home table tbody tr:last-child td{
  border: none;
}
.home .recent-orders .btn-add{
  background: var(--text-color);
  color: white;
  padding: 4px 6px;
  margin-top: -20px;
  margin-bottom: 15px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
}
.home table .btn-view{
  width: 100%;
  padding: 4px 6px;
  background: #31b35c;
  border-radius: 5px;
  border: none;
  text-decoration: none;
  color: #141414;
}
.home table .btn-add,
.home table .btn-delete{
  width: 100%;
  padding: 4px 6px;
  margin-left: 5px;
  border-radius: 5px;
  border: none;
  text-decoration: none;
  color: #FFF
}
.home table .btn-add{
  background: var(--text-color);
}
.home table .btn-delete{
  background-color: #e72e3e;
}
.home .text{
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
  padding: 8px 40px;
}
.home .clients{
  font-size: 18px;
  font-weight: 500;
  /* background: white; */
  color: var(--text-color);
  padding: 8px 40px;
}
.home .clients .update,
.home .clients .delete{
  background: var(--primary-color);
  color: white;
  border: 0;
  outline: none;
  border-radius: 3px;
  font-size: 16px;
  height: 22px;
  width: 80px;
  margin-left: 2px;
  padding-bottom: 2px;
  cursor: pointer;
}
.home .clients .delete{
  background: rgb(231, 66, 66);
  margin-right: 2px;
}
.sidebar.close ~ .home{
  left: 88px;
  width: calc(100% - 88px);
}
.home .client-info{
  margin-top: 10px;
  margin-left: 40px;
  margin-right: 10px;
  text-align: center;
  /* background: whitesmoke; */
  border-radius: 10px;
}
.home .client-info .task,
.home .client-info .document,
.home .client-info .support,
.home .client-info .notice{
  /* width:fit-content; --------------------------------------- */
  width: 95%;
  margin-bottom: 30px;
  margin-top: 20px;
  background: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 7px 10px 10px rgba(224, 209, 235, 0.671);
}
.home .client-info .task:hover,
.home .client-info .document:hover,
.home .client-info .support:hover,
.home .client-info .notice:hover{
  margin-bottom: 30px;
  color: var(--text-color);
  margin-top: 20px;
  /* background: rgb(78, 247, 101); */
  background: var(--primary-color);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 7px 10px 10px rgba(224, 209, 235, 0.671);
  transition: all 300ms ease;
}
.home .client-info .task .icon,
.home .client-info .document .icon,
.home .client-info .support .icon,
.home .client-info .notice .icon{
  font-size: 2rem;
  display: flex;
}
.home .client-info .task .icon h3,
.home .client-info .document .icon h3,
.home .client-info .support .icon h3,
.home .client-info .notice .icon h3{
  margin-left: 20px;
}
.home .client-info .task .middle,
.home .client-info .document .middle,
.home .client-info .support .middle,
.home .client-info .notice .middle{
  text-align: center;
}
/* .home .recent-orders .card{
  background: transparent;
  border-style: none;
} */
/* register */
.container{
  max-width: 500px;
  width: 100%;
  background: var(--primary-color-light);
  margin: 50px auto;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.container .title{
  font-size: 24px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 25px;
  color: var(--primary-color);
}
.container .form{
  width: 100%;
}
.container-admin .card{
  background: #FFF;
  margin-left: 300px;
  justify-content: center;
  /* background: transparent; */
  color: var(--text-color);
  border: none;
  box-shadow: 3px 5px 45px var(--color-light);
}
.container-admin .card .card-body .btn-update{
  background: var(--text-color);
  color: white;
  padding: 8px 10px;
  font-size: 15px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.container .form .input_field{
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.container .form .input_field label{
  width: 200px;
  font-size: 14px;
}
.container .form .input_field .input,
.container .form .input_field .textarea,
.container .form .input_field .selectbox{
  width: 100%;
  outline: none;
  padding: 1px 2px;
  transition: all 0.5s ease;
}
.container .form .input_field .textarea{
  resize: none;
}
.container .form .input_field .btn{
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  border: 0;
  cursor: pointer;
}
.container .form .input_field:last-child{
  margin-bottom: 0;
}
.loginform{
  max-width: 400px;
  width: 100%;
  background: var(--primary-color-light);
  margin: 150px auto;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.loginform h1{
  margin-bottom: 10px;
}
.loginform .textfiled{
  width: 100%;
  height: 35px;
  margin-bottom: 10px;
  padding-left: 7px;
}
.loginform .btn{
  margin-top: 5px;
  width: 100%;
  height: 30px;
  cursor: pointer;
}
.loginform .forgetpass{
  padding: 4px, 0;
  margin: 3px;
}
.loginform .forgetpass .link{
  text-decoration: none;
}
body .wrapper{
  margin-top: 300px;
  min-height: 100vh;
  text-align: center;
  justify-content: center;
}
.wrapper{
  text-align: center;
  background: url('bg.png') no-repeat;
  justify-content: center;
}
.wrapper form{
  width: 400px;
  justify-content: center;
  /* background: red; */
}
.wrapper .loginput{
  margin-top: 20px;
}

.table{
  position: relative;
  color: var(--text-color);
  /* height: 100vh; */
  left: 250px;
  width: calc(100% - 250px);
  background: var(--primary-color-light);
  transition: var(--tran-05);
  /* margin-left: 200px;
  background: white; */
}
.sidebar.close ~ .table{
  left: 88px;
  width: calc(100% - 88px);
}

/* ---------Media Query----- */
@media screen and (max-width: 768px) {
  .sidebar{
    /* background: red; */
    position: fixed;
    left: 0;
    z-index: 3;
    width: 130px;
    height: 100vh;
    /* display: none; */
  }
  .sidebar .toggle{
    cursor: pointer;
  }

.sidebar .menu-bar span{
  display: none;
}
.sidebar .image-text .image{
  display: none;
}
  .home .client-info{
    margin-left: -100px;
    width: fit-content;
  }
}


/* ---------Media Query----- */
@media screen and (max-width: 420px){
  .container .form .input_field{
      flex-direction: column;
      align-items: flex-start;
  }
  .container .form .input_field label{
      margin-bottom: 5px;
  }
  .home{
    margin-left: -100px;
  }
  .home .recent-orders{
    margin-left: -100px;
    width: fit-content;
  }
}
@media (max-width: 420px){
  .wrapper .form .loginput{
     flex-direction: column;
     align-content: flex-start;
  }
 
 }