*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: ghostwhite;
  min-height: 100vh;
  font-size: 14px;
  /* overflow-x: hidden; */
}
.vertical-nav {
  min-width: 14rem;
  width: 14rem;
  margin-top: 60px;
  height: 100vh;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  left: 0;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.4s;
}
.page-content {
  width: calc(100% - 14rem);
  margin-left: 14rem;
  transition: all 0.4s;
}
.card{
  margin-top: 70px;
}
/*ul  Click part start*/

#main_ul #list1 ul,#main_ul #list2 ul,
#main_ul1 #list1 ul{
  position: static;
  display: none;
}
#main_ul #list1 ul.show,#main_ul #list2 ul.show,
#main_ul1 #list1 ul.show{
  display: inline-block;
}
#main_ul1{
  margin-right: 80px;
}
#main_ul #list1 a,#main_ul #list2 a,
#main_ul1 #list1 a{
  position: relative;
}
#main_ul #list1 ul a,#main_ul #list2 ul a,
#main_ul1 #list1  a,#main_ul1 #list1 a span{
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0.6px;
  word-spacing: 2px;
  margin-left: 20px;
}
#main_ul #list1 ul a:hover,#main_ul #list2 ul a:hover,
#main_ul1 #list1  a:hover,#main_ul1 #list1  a:hover span{
  background: none;
  color: rgba(255, 255, 255, 0.9);
}
#main_ul #list1 a span,#main_ul #list2 a span,
#main_ul1 #list1 a span{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: 20px;
 font-size: 130%;
 transition: transform 0.4s;
}
#main_ul1 #list1 a span{
  right: -20px;
}
#main_ul #list1 a span.rotate,#main_ul #list2 a span.rotate,
#main_ul1 #list1 a span.rotate{
 transform: translateY(-50%) rotateX(-180deg);
}

/*ul  Click part end*/


#sidebar.active {
  margin-left: -16rem;
}
table{
  overflow-x: scroll;
}

table th,tr td{
  font-size: 90%;
  text-transform: capitalize;
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 0;
}
.table1{
  background: lightgray;
}
.table1 th,.table1 td{
  border: 1px solid #fff;
  font-size: 85%;
  padding: 3px 10px;
  margin: 0;
}
table tbody tr td input[type='text']{
  background: none;
}
#content.active {
  width: 100%;
  margin: 0;
}
.text-uppercase {
  letter-spacing: 0.1em;
}
.nav-link{
  text-transform: capitalize;
}
.nav-link:hover{
  background: #eee;
}
.text-primary{
  color:#7579e7 !important;
}

.form-group label{
  font-weight: 600;
}
.btn-ex{
  font-size: 75%; 
}

/* Login Form css start */
.card1{
  margin-top: 80px;
}
form{
  padding: 15px;
  font-size: 90%;
}
input[type="password"],input[type="mail"]{
 background: transparent;
 border: 0;
 border-bottom: 1px solid #333;
 outline: none;
}
input[type="password"]:focus,input[type="mail"]:focus{
  background: transparent;
  border: 0;
  outline: none;
  border-bottom: 1px solid #fff;
}
.form-control {
    
    border-radius: 1.25rem !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-group-sm>.btn, .btn-sm {
    padding: .25rem .5rem;
    font-size: .975rem !important;
    line-height: 1.5 !important;
    border-radius: 2.2rem !important;
}
.btn-primary {
    color: #fff;
    background-color: #1e3b7f !important;
    border-color: #1e3b7f !important;
}
/* Login Form css start */

@media (max-width: 800px) {
  #sidebar {
    margin-left: -14rem;

  }
  #sidebar.active {
    margin-left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 100;
  }
  #content {
    width: 100%;
    margin: 0;
  }
  #content.active {
    margin-left: 14rem;
    width: calc(100% - 14rem);
  }
}
@media (max-width: 450px) {
  .form-group label,input[type="text"],input[type="date"],table{
    font-size: 75%;
  }
  form{
    padding: 0px;
  }
  #sidebar.active {
    margin-left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 100;
  }
  .rounded-circle{
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }

}