/************************************************************************************************************
*                                                                                                           *
*   Start for style for student dashboard                                                                                                        *
*                                                                                                           *
**************************************************************************************************************/
/***************dashboard********************/
:root {
  --form-title-header: #0987fd;
  --header-color: #dde4e7;
  --card-color: #a7aeae;
  --title-header: #1ca2e0;
  --title-noteceBoard: #ec3b3b;
  --left-menu-bgcolor: #1ca2e0;
  --left-menu-font-color: #203dae;
  --left-menu-icon-color: #0a4058;
  --bottom-hover: #095b92;
  --left-menudetails-hover: rgb(213, 222, 255);
  --border-buttom-left-popup: rgb(223, 223, 223);
  --bottom-background-color: rgb(23, 91, 208);
 
}

body {
  transition: 0.5s;
  font-family: sans-serif;
  color: #2c2c2c;
  font-size: 14px;
  background-color: #ecf0f3;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: boder-box;
  list-style: none;
  text-decoration: none;

}

/****************************************************************/
/*statr left and top nav section*/
/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.sidebar{
 position:fixed;
  height: 100%;
  width: 240px;
  overflow: scroll;
   background-image: -moz-linear-gradient(to right, #0496ff, #0496ff,
      #0496ff, #0496ff, #0496ff, #24a1fa, #47affa, #048ff3);

  background-image: -webkit-gradient(to right, #0496ff, #0496ff,
      #0496ff, #0496ff, #0496ff, #24a1fa, #47affa, #048ff3);

  background-image: -o-linear-gradient(to right, #0496ff, #0496ff,
      #0496ff, #0496ff, #0496ff, #24a1fa, #47affa, #048ff3);

  background-image: linear-gradient(to right, #0496ff, #0496ff,
      #0496ff, #0496ff, #0496ff, #1ea0fd, #3aa7f6, #048ff3);

  transition: all 0.5s ease;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.sidebar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidebar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.sidebar.active {
  width: 70px;
}

.logo-details {
  height: 70px;
  display: flex;
  align-items: center;

 }

.sidebar .logo-details i {
  font-size: 30px;
  font-weight: 500;
  color: #fff;
  min-width: 50px;
  text-align: center;
}

.logo-details i img {
  border-radius: 50%;
}

.logo-details .logo_name {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

 .nav-links {
  margin-top: 10px;

  }

.nav-links li {
  position: relative;
  list-style: none;
  height: 50px;
  border-bottom: 1px solid rgb(177, 178, 177);
}

.nav-links li ul{
    position: relative;
    list-style: none;
    display: block;
    width: 100%;
    height:152px;
    display: none;
  }
  .nav-links li ul li{
    position: relative;
    z-index: +1;
    background: #045a90;
    display: block;
    }
    .nav-links li:hover ul{
    display: block;
    transition: all 0.8s;
    }
.nav-links li a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  color: #fff;
  font-weight: 600;
}


.alert {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #eff2f3;
  line-height: 40px;
}

 .nav-links li a.active {
  background-image: -moz-linear-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1e448b, #081D45);
  background-image: -webkit-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1e448b, #081D45);
  background-image: -o-linear-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1e448b, #081D45);
  background-image: linear-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1a438f, #081D45);
}

 .nav-links li a:hover {
  background-image: -moz-linear-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1e448b, #081D45);
  background-image: -webkit-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1e448b, #081D45);
  background-image: -o-linear-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1e448b, #081D45);
  background-image: linear-gradient(to right, #081D45, #081D45,
      #081D45, #081D45, #081D45, #081D45, #1e448b, #081D45);
}

.nav-links li i {
  min-width: 50px;
  text-align: center;
  font-size: 22px;
  color: #fff;
}

.nav-links li a .links_name {
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.nav-links .log_out {
  position: absolute;
  bottom: 10;
  width: 100%;
  background: #099310;
}

.home-section {
  position: relative;
  background: #ecf0f3;
  min-height: 100vh;
  width: calc(100% - 240px);
  left: 240px;
  transition: all 0.5s ease;
}

.sidebar.active~.home-section {
  width: calc(100% - 50px);
  left: 50px;

}

.home-section nav {
  display: flex;
  justify-content: space-between;
  height: 80px;
  background: #f4faff;
  display: flex;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  position: fixed;
  width: calc(100% - 240px);
  left: 240px;
  z-index: 100;
  padding: 0 2+0px;
  transition: all 0.5s ease;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 7px #9fa2a3;
  }

.sidebar.active~.home-section nav {
  left: 50px;
  width: calc(100% - 50px);
}

.home-section nav .sidebar-button {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
}

nav .sidebar-button i {
  font-size: 50px;
  margin-right: 10px;
  cursor: pointer;
  color: #0345d3;
}

.home-section nav .text-box {
  position: relative;
  height: 50px;
  max-width: 800px;
  width: 100%;
  margin: 0 20px;
  font-size: 20px;
  font-weight: 800;
  color: #123c95;
  text-align: center;
  text-transform: uppercase
    }

nav .text-box .bx-search {
  position: absolute;
  height: 40px;
  width: 40px;
  background: #2697FF;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 30px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  transition: all 0.4 ease;
  }

.home-section nav .profile-details {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 15px;
  min-width: 140px;
  position: relative;
  }

.profile-details span i {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 20px #81d0fb;
  }
  /**update log in  register form*/
  .login_form_body{
   width:380px;
   height:580px;
   position:relative;
   margin: 6% auto;
   background: #fcfeff;
   border-radius: 10px;
   box-shadow: 3px 3px 130px rgba(0,0,0,0.1);
   overflow: hidden;

  }
  
  
  
  .login_office_logo1{/*admin login */
   width: 70px;
   height: 70px;
   text-align: center;
   position: relative;
   border-radius: 50%;
   margin-right: auto;
   margin-left: auto;
   box-shadow: 2px3px 60px rgba(37, 37, 37, 0.3);
   
    }
    .login_office_logo1 img{/*admin login */
      border-radius: 50%;
      width: 70px;
      height: 70px;
     


    }
  
  
  .text-style-for-register{
      color:red;
  }
  .form_heading{
    position: relative;
    font-size: 14px;
    height:80px;
    width:380px;
    margin-bottom: 30px;
    line-height: 25px;
    background-image:linear-gradient(to left,#074279,#0861b5);
    text-align: center;
    padding:5px;
    border-radius: 10px 10px 0px 0px;
    color:#ffffff;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.2);

   }
   .button_box{
    width:220px;
    padding:5px;
    font-size:14px;
    margin:5px auto;
    position: relative;
    box-shadow: 2px 3px 60px rgba(37, 37, 37, 0.3);
    border-radius: 30px;
    }

    .toggle-btn{
     padding: 7px 25px;
     border:0;
     margin:0 auto;
     outline: none;
     font-size:16px;
     position: relative;
     background:transparent;
     cursor: pointer;
       }



       .form-style{
         width: 300px;
         position: absolute;
         top:180px;
         transition: 0.8s;
         }

       .form-style i{
         color:rgb(12, 116, 234);
         position:relative;
         top:40px;
         font-size: 17px;
         padding: 0 5px;
         border-radius: 5px;
         }


       .form-style label{
         color:#108403;
         font-size: 14px;
         position: relative;
         padding-top:30px;
         left:10px;
         transition: 0.7;
         font-weight: 600;
       }
       .input_field_custom{
          width: 100%;
          padding: 15px 0;
          margin:9px 0;
          border-bottom:  1px solid #999;
          outline: none;
          border:none;
          outline: none;
          color:#089dd8;
          padding-left:45px;
          border-radius:30px;
          box-shadow: -6px -6px 20px rgba(0,0,0,0.2),
                      6px 6px 20px rgba(0,0,0,0.2);

}

.input_field_custom:hover{
       background: #ebf8ff;
       transition: .5s;

}
.profile-details span p {
  background-color: #1c9607;
  height: 45px;
  width: 80px;
  line-height: 45px;
  text-align: center;
  position: relative;
  border-radius: 5px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #e5e5e8;
  color: #FFF;
  }

.profile-details span p:hover {
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
  color: #FFF;
  }

.profile-details span p:hover {
  background-color: #03517b;
  cursor: pointer;
  }


.profile-details img {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 20px #a0a0a0;
  color: #FFF;
  }

nav .profile-details i {
  font-size: 25px;
  color: #333;
}
/*view feedback page*/
.view_feebdack_body{
 position: relative;
 height: auto;
 background-color: #ebecec;
 top:91px;
 margin-right:auto;
 margin-left:auto;
 box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
}

.view_feebdack_body table{
  width:99.4%;
  margin-right: auto;
  margin-left: auto;
  margin: 0px;
  }
.view_feebdack_body table tbody tr td{
  padding-left:5px;
  padding-right:5px;
}

.header_view_feedback{ /*view feedback page*/
  position:relative;
  align-items:center;
  height:80px;
  margin-right:auto;
  margin-left:auto;
  width: 98.49%;
  line-height: 50px;
  border-radius: 5px 5px 0 0;
  background:linear-gradient(to left, #6acbff, #88cff5, #9edffe);
  box-shadow:3px 3px 10px rgba(0, 0, 0, .2);
  }
.header_view_feedback  h6{
  position:relative;
  z-index: +1;
  display: block;
  float:left;

}

.header_view_feedback img{/*view feedback page*/
   position:relative;
   margin-top:10px;
   margin-left: 20px;
   float:left;
   border-radius:30%;
   z-index: +1;
  }
.header_title{/*view feedback page*/
    position:relative;
    display: block;
    text-align: center;
    height: 80px;
    line-height: 20px;
    width:98%;
    margin: auto;
    padding-top:30px;
    color:#0679d7;
    font-size: 20px;
    border-radius: 20px;
    background:linear-gradient(to right, #f1f5f9,#fcfdfd,#fcfdfd, #fcfdfd, #fcfdfd, #f1f5f9);
    box-shadow: inset 0px 3px 0px #067ef6,
                inset 0px -3px 0px #067ef6;

    }
 .header_title p{/*view feedback page*/
     font-size: 22px;
     font-weight: 800;
     letter-spacing: 1px;
     text-transform:uppercase;
     text-shadow: 2px -2px 2px rgba(0, 0, 0, 0.2);
    }

    .header_title h5{/*view feedback page*/
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 1px;
      text-align: center;
      justify-content: center;
      display: block;
      text-shadow: 2px -2px 2px rgba(0,0,0,0.2);
     }
    .header_title span{
      font-size:16px;
      position: relative;
      font-weight: 500;
      color:rgb(3, 99, 171);

    }
  .header_title_details{
   width: 100%;
   margin: 5px;
   background-color: #ffffff;
   border:1px solid #cae4fa;
   border-radius: 5px;
   }

  .header_title_details p{
  color:rgb(6, 55, 139);
  height: 100%;
  padding:10px;
  font-weight: 600;
  letter-spacing: 1px;


  }
      select option[value="Nursing MCVTC"] {
            display: none;
        }
      
 .view_feedback_body_inner{/*view feedback page*/
    position: relative;
    padding: 10px;
    border: 1px solid #b7ccf6;
    margin:5px;
    margin-bottom: 5px;
    background-color: #ffffff;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
    line-height: 25px;
    width: 100%;
    border-radius: 5px;
    }
    .view_feedback_body_inner label{
      width: 100%;
      color: #011e63;
      }

   .view_feedback_body_inner span{
      color:rgb(252, 252, 254);
      height: 40px;
      width: 40px;
      border-radius: 5px;
      padding: 2px solid red;;
      background-color:#006ee4;
      margin-right:5px;
    }
    .view_feedback_body_inner p{
     color:#057dfd;
    }






    /*end view feedback page*/

/**************/
.home-section nav .profile-details1 {
  display: flex;
  align-items: center;
  background: #084170;
  border: 1px solid #2f96f7;
  border-radius: 6px;
  height: 50px;
  min-width: 150px;
  padding: 0 15px 0 2px solid red;;
}

nav .profile-details1 img {
  height: 40px;
  width: 40px;
  border-radius: 6px;
  object-fit: cover;
}

nav .profile-details1 .admin_name {
  font-size: 15px;
  font-weight: 500;
  color: rgb(252, 247, 247);
  margin: 0px 5px;
  white-space: nowrap;
  height: 40px;
  width: 100%;
  line-height: 40px;
}

.admin_name p {
  color: re
}

nav .profile-details1 i {
  font-size: 25px;
  color: rgb(252, 251, 251);
}

/*account admin pages*/

  .payment_details{
    position: relative;
    top:91px;
    width: 80%;
    min-height: 600px;
    margin-left:auto;
    margin-right:auto;
    background:#ffffff;
    transition: 0.6s;
    box-shadow: 3px 3px 4px rgb(187, 186, 186),
                -3px -3px 2px rgb(221, 230, 230);
    padding:15px;
    border-radius: 5px;


    }
  .payment_details ul{
    display: flex;
  }

  .img_left{
  position: relative;
  margin-right:5px;
 }

 .header_center{
  width: 80%;
  position:relative;
  text-align: center;
  font-size:16px;
  color: #102f7b;
  text-transform:uppercase;
  font-weight: 700px;
  line-height: 20px;
  }

  .img_right{
    position: relative;
   }


  .box_wrapper_for_message{
   position:relative;
   padding:100px;
   }
  .contact_body_wraper{
   width: 99%;
   position:relative;
   top:101px;
   margin-right:auto;
   margin-left:auto;
   display:inline-block;
   padding:10px;
   }

   .contact_body_wraper_custo{
    width: 99%;
    position:relative;
    margin-right:auto;
    margin-left:auto;
    display:inline-block;
    padding:10px;
    }
 .contact-body{ /*contact details page*/
    width:380px;
    height:425px;
    background-color:#ecf0f3;
    box-shadow: -4px -4px 1px rgb(255, 163, 65),
                 3px 3px 80px rgb(201, 201, 201),
                 4px 4px 1px rgb(62, 108, 245);

    margin-right: auto;
    margin-left:auto;
    border-radius:10px;
    }

    .contact-body1{ /*update HOD and supervisor profile*/
      width:380px;
      height:570px;
      background-color:#ecf0f3;
      box-shadow: -4px -4px 1px rgb(255, 163, 65),
                   3px 3px 80px rgb(201, 201, 201),
                   4px 4px 1px rgb(62, 108, 245);

      margin-right: auto;
      margin-left:auto;
      border-radius:10px;
      }

                                   
  .contact-user-profile{
    padding:15px;
   }

   .contact_profile{ /**ribbon for add hod profile*/
    font-size: 18px;
    color: #FFf;
    width:380px;
    background: #0a76f9d9;
    text-align: center;
    z-index:+1;
    left:-7px;
    position:relative;
    padding: 0 0.5em;
    font-size:1.5.000em;
    margin: 0 0 0 -0.625em;
    line-height: 1.875em;
    border-radius:1px;
    box-shadow: -1px 2px 13px rgba(0,0,0,0.5);
    margin-bottom:10px;
  }

  .contact_profile:before, .contact_profile:after{/*ribbon for add hod profile*/
    position:absolute;
    content: '';
    display: block;
  }

  .contact_profile:before{/*ribbon for add hod profile*/
    width: 0.469em;
    height: 100%;
    padding: 0 0 0.438em;
    top:0;
    left: -0.469em;
    background:inherit;
    border-radius: 0.313em 0 0 0.313em;
  }

  .contact_profile:after{/*ribbon for add hod profile*/
    width: 0.313em;
    height: 0.313em;
    background: rgba(0,0,0,0.35);
    bottom: -0.313em;
    left: -0.313em;
    border-radius: 0.313em 0 0 0.313em;
    box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
  }

.form_wraper{
  position: relative;
  width: 100%;
  padding: 5px;
  }

  .form_wraper label{
  position: relative;
  width: 80%;
  display:flex;
  color:rgb(4, 75, 133);
  font-size: 16px;
  bottom: -10px;
     }

/**/

.contact_body_wraper{
  width: 99%;
  position:relative;
  top:101px;
  margin-right:auto;
  margin-left:auto;
  padding:10px;
  }

.contact-body_view{ /*view user details */
   width:70%;
   min-height:425px;
   background-color:#ffffff;
   box-shadow: -2px -2px 1px rgb(255, 163, 65),
                3px 3px 80px rgb(201, 201, 201),
                4px 4px 1px rgb(62, 108, 245);

   margin-right: auto;
   margin-left:auto;
   border-radius:10px;
  
   }

 .contact-user-profile{
   padding:15px;
  }
  
  
  
.up_arrow_body {
  position: fixed;
  color: red;
  z-index: +1;
  bottom: 40px;
  right: 10px;
  font-size: 40px;
  background: #0c55f4;
  color: white;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.5s;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

#up_arrow {
  border: solid rgb(254, 254, 254);
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 7px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.up_arrow i:hover {
  background-color: #f4800c;
  transition: 0.6s;

}

  .contact_profile-view_user{ /**ribbon for add hod profile*/
   font-size: 18px;
   color: #FFf;
   width:70%px;
   background: #0a76f9d9;
   text-align: center;
   z-index:+1;
   left:-7px;
   position:relative;
   padding: 0 0.5em;
   font-size:1.5.000em;
   margin: 0 0 0 -0.625em;
   line-height: 1.875em;
   border-radius:1px;
   box-shadow: -1px 2px 13px rgba(0,0,0,0.5);
   margin-bottom:10px;
 }

 .contact_profile-view_user:before, .contact_profile-view_user:after{/*ribbon for add hod profile*/
   position:absolute;
   content: '';
   display: block;
 }

 .contact_profile-view_user:before{/*ribbon for add hod profile*/
   width: 0.469em;
   height: 100%;
   padding: 0 0 0.438em;
   top:0;
   left: -0.469em;
   background:inherit;
   border-radius: 0.313em 0 0 0.313em;
 }

 .contact_profile-view_user:after{/*ribbon for add hod profile*/
   width: 0.313em;
   height: 0.313em;
   background: rgba(0,0,0,0.35);
   bottom: -0.313em;
   left: -0.313em;
   border-radius: 0.313em 0 0 0.313em;
   box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
 }

.user_form_wraper{
 position: relative;
 width: 100%;
 height:100%;
 padding: 10px;
 top:20px;
 
 }


 .user_form_wraper table {
  width: 100%;
  border-collapse: collapse;

 }
 .user_form_wraper table thead tr th{
  border:1px solid rgb(215, 216, 216);
  color:#fff;
  height: 40px;
  text-align: left;
  padding:3px;
  border-radius:5px 5px 0px 0px;
 }

 .user_form_wraper table tbody tr td{
  border:1px solid rgb(215, 216, 216);
  height: 40px;
  padding:3px;
  box-shadow: 2px 3px 5px rgba(220, 218, 218, 0.3);
 }

 .user_form_wraper table tbody tr td i{
  color: red;
  padding-left: 10px;
  font-size: 20px;
 }
 .header_design{
  background-color: #21ccfb;

 }


  .form_wraper input[type="text"]{
    width: 90%;
    height: 40px;
    outline: #0989ce;
    border-radius:20px;
    border:1px solid rgb(185, 185, 193);
    box-shadow:2px 3px 13px  rgba(31, 31, 31, 0.3),
                 -3px 83px  rgba(255, 255, 255, 0.3),
                2px 3px 83px  rgba(225, 225, 225, 0.3);
    margin-right: auto;
    margin-left:auto;
    padding-left:40px;
    }

    .form_wraper input[type="number"]{
        width: 90%;
        height: 40px;
        outline: #0989ce;
        border-radius:20px;
        border:1px solid rgb(185, 185, 193);
        box-shadow:2px 3px 13px  rgba(31, 31, 31, 0.3),
                     -3px 83px  rgba(255, 255, 255, 0.3),
                    2px 3px 83px  rgba(225, 225, 225, 0.3);
        margin-right: auto;
        margin-left:auto;
        padding-left:40px;
        }

    .form_wraper i{
    position: relative;
    margin-left:10px;
    top:30px;
    font-size: 16px;
      }
  .form_wraper input[type="text"]:hover{
    width: 100%;
    transition: 1.3s;
    border: 1px solid rgb(181, 213, 250);
    }
    .form_wraper input[type="number"]:hover{
        width: 100%;
        transition: 1.3s;
        border: 1px solid rgb(181, 213, 250);
        }

        .bring_front {
        z-index: +1;
      padding-top:10px;
      
        }
    .form_wraper input[type="number"]{
        width: 90%;
        height: 40px;
        outline: #0989ce;
        border-radius:20px;
        border:1px solid rgb(185, 185, 193);
        box-shadow:2px 3px 13px  rgba(31, 31, 31, 0.3),
                     -3px 83px  rgba(255, 255, 255, 0.3),
                    2px 3px 83px  rgba(225, 225, 225, 0.3);
        margin-right: auto;
        margin-left:auto;
        padding-left:40px;
        }

  .form_wraper input[type="file"]:hover{
    width: 100%;
    transition: 1.2s;
  }




  
/************All card box shadow************/
.top_box_container {
  top: 90px;
  width: 100%;
  height: 130px;
  position: relative;
  margin-bottom: 98px;
}

.kl_topbox_body2 {
    background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
    transition: all 0.5s;
    color: #03a9f4;
    cursor: pointer;
    height: 120px;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: inset -3px -2px 5px #ffffff77,
      2px 3px 3px #aba9a9;
  }
  
  .kl_topbox_body3 {
    background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
    transition: all 0.5s;
    color: #03a9f4;
    cursor: pointer;
    height: 120px;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: inset -3px -2px 5px #ffffff77,
      2px 3px 3px #aba9a9;
  }
  
  .kl_topbox_body4 {
    background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
    transition: all 0.5s;
    color: #03a9f4;
    cursor: pointer;
    height: 120px;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: inset -3px -2px 5px #ffffff77,
      2px 3px 3px #aba9a9;
  }
  
  .kl_topbox_body4 span {
    color: red;
  }
  
  /* apply department class**/
  .kl_topbox_apply {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;
    width: 100%;
    color: #010613;
    text-align: center;
    background-image: linear-gradient(to bottom, #6d8a13, #9bc32f, #90b726, #90b726, #90b726, #90b726);
    height: 60px;
    border-radius: 5px 5px 0px 0px;
    line-height: 60px;
    color: rgb(255, 255, 255);
    box-shadow: 1px 2px 2px rgb(196, 196, 196);
  }
  
  .triangle-down_a {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #90b726;
    position: relative;
    margin-right: auto;
    margin-left: auto;
  }
  
  
  /*top video box*/
  .kl_topbox_video {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;
    width: 100%;
    text-align: center;
    background-image: linear-gradient(to bottom, #c03705, #db7b59, #d56339, #d56339, #d56339, #d56339);
    height: 60px;
    border-radius: 5px 5px 0px 0px;
    line-height: 60px;
    color: rgb(255, 255, 255);
    box-shadow: 1px 2px 2px rgb(196, 196, 196);
  }
  
  .triangle-down_v {
    width: 0;
    height: 40px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #da7551;
    position: relative;
    margin-right: auto;
    margin-left: auto;
  }
  
  /*Total Paid top box*/
  .kl_topbox_total_paid {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;
    width: 100%;
    text-align: center;
    background-image: linear-gradient(to bottom, #06881d, #16b934, #04a822, #04a822, #04a822, #04a822);
    height: 60px;
    border-radius: 5px 5px 0px 0px;
    line-height: 60px;
    color: rgb(255, 255, 255);
    box-shadow: 1px 2px 2px rgb(196, 196, 196);
  }
  
  .triangle-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #04a822;
    position: relative;
    margin-right: auto;
    margin-left: auto;
  }
  
  /* Leav Status class**/
  .kl_topbox_leavestatus {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;
    width: 100%;
    text-align: center;
    background-image: linear-gradient(to bottom, #0d728e, #28b1d7, #0f9dc4, #0f9dc4, #0f9dc4, #0f9dc4);
    height: 60px;
    border-radius: 5px 5px 0px 0px;
    line-height: 60px;
    color: rgb(255, 255, 255);
    box-shadow: 1px 2px 2px rgb(196, 196, 196);
  }
  
  .triangle-down_leave {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #0f9dc4;
    position: relative;
    margin-right: auto;
    margin-left: auto;
  }
  
  
  /*######################################################*/
  /* view apply depart by student after submit form*/
  .apply_dept_view_div {
    position: relative;
    font-weight: 500;
    transition: 0.5s;
    width: 100%;
    height: 60px;
    line-height: 40px;
  }
  
  .apply_dept_status {
    display: none;
    position: fixed;
    width: 40%;
    height: auto;
    background: rgb(246, 246, 246);
    top: 190px;
    padding: 0 20px 20px 20px;
    box-shadow: 0px 5px 5px gray;
    border-radius: 0px 0px 10px 10px;
    z-index: +1;
    margin-top: 40px;
  }
  
  .apply_dept_status button {
    height: 50px;
    width: 50px;
    top: -2px;
    left: 9px;
    position: relative;
    background: #FF6721;
    border-radius: 50%;
    border: none;
    outline: none;
    z-index: +1;
    cursor: pointer;
    color: #fff;
    float: right;
    box-shadow: inset -3px -3px 5px #ffffff77,
      3px 3px 15px #ff6721;
  }
  
  .apply_dept_status table {
    width: 100%;
    float: left;
    position: relative;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(194, 204, 238);
    text-align: left;
  }
  
  .apply_dept_status table th {
    border: 1px solid rgb(194, 204, 238);
    text-align: left;
    padding: 5px;
  }
  
  .apply_dept_status table td {
    border: 1px solid rgb(194, 204, 238);
    text-align: left;
    padding: 5px;
  }
  
  .apply_dept_status button {
    height: 50px;
    width: 50px;
    position: relative;
    background: #FF6721;
    border-radius: 50%;
    border: none;
    outline: none;
    z-index: +1;
    cursor: pointer;
    color: #fff;
    float: right;
    box-shadow: inset -3px -3px 5px #ffffff77,
      3px 3px 15px #ff6721;
  }
  
  .apply_dept_status button i {
    text-align: center;
    height: 30px;
    width: 30px;
    cursor: pointer;
    font-size: 18px;
  }
  
  .kl_db_card span button {
    border: none;
    background: rgb(255, 255, 255);
    height: 40px;
    width: 100px;
    line-height: 40px;
    border-radius: 10px;
    font-size: 16px;
    margin-left: -50px;
    color: blue;
    font-weight: 600;
    box-shadow: inset -3px -3px 15px #0564fe77;
  }
  
  .app_view_icon span button {
    border: none;
    background: rgb(255, 255, 255);
    height: 40px;
    width: 100px;
    color: #0345d3;
    line-height: 40px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: inset -3px -3px 15px #0564fe77;
    cursor: pointer;
    margin-left:-50px;
   
  }
  
  .app_view_icon span button a {
    color: rgb(15, 15, 221);
  }
  
  .button_style{
    border: none;
    background: rgb(255, 255, 255);
    height: 40px;
    width: 100px;
    color: #0345d3;
    position: relative;
    line-height: 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: inset -3px -3px 15px #0564fe77;
    cursor: pointer;
  }
  
  .button_style1{
    border: none;
    background: rgb(255, 255, 255);
    height: 40px;
    width: 100px;
    color: red;
    position: relative;
    line-height: 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: inset -3px -3px 15px #0564fe77;
    cursor: pointer;
  }
  
  .kl_db_cardBox .kl_db_card .kl_db_status {
    position: relative;
    font-size: 1.1em;
    font-weight: 500;
    padding: 2px;
    color: rgb(6, 135, 19);
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 2px 10px;
    width: 100%;
    transition: 0.5s;
  }
  
  .kl_db_cardBox .kl_db_card .kl_db_leave_status {
    position: relative;
    font-size: 1em;
    font-weight: 500;
    padding: 2px;
    color: rgb(6, 135, 19);
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 2px 10px;
    width: 100%;
    transition: 0.5s;
  }
  
  .kl_db_cardBox .kl_db_card .kl_db_iconBox {
    position: relative;
    font-size: 2em;
    font-weight: 500;
    transition: 0.5s;
    color: rgb(21, 94, 221);
  }
  
  .details {
    position: relative;
    width: 100%;
    display: grid;
    grid-gap: 20px;
    background: rgb(228, 227, 227);
    grid-template-columns: 2fr 1fr;
  }
  
  .details .student_status {
    position: relative;
    display: grid;
    min-height: 50px;
    padding: 10px 0px 0px 10px;
    line-height: 20px;
  }
  
  .cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .cardHeader h2 {
    font-weight: 600px;
    background: var(--title-header);
    border-radius: 5px 5px 0px 0px;
    width: 100%;
    color: white;
    padding: 10px;
    box-shadow: 0px 2px 2px rgb(190, 188, 188);
    text-align: center;
    font-size: 25px;
  }
  
  .btn {
    position: relative;
    padding: 5px 10px;
    background: #03a9f4;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    outline: none;
    box-shadow: 1px 3px 4px rgb(195, 193, 193);
    cursor: pointer;
    font-size: 15px;
  }
  

/*Start  store admin */

.card_box_one{
    position:relative;
    height: 120px;
    cursor: pointer;
    margin: 5px;
    box-shadow: inset -1px -2px 4px 2px #cacaca;
    border-radius: 5px;
}

   .card_box_one::before{ /*store admin page */
    content: '';
    position: absolute;
    border: 30px solid #02a2ff9b;
    left: 0;
    top:1px;
    border-bottom: 30px solid transparent;
    border-right: 30px solid transparent;
    border-radius:5px  0;
    }
    
    .card_box_one::after{ /*store admin page */
        content: '';
        position: absolute;
        border: 30px solid #02a2ff9b;
        right: 0;
        top:1px;
        border-bottom: 30px solid transparent;
        border-left: 30px solid transparent;
        border-radius:0 5px 
        }

      .serch_btn_wrapper{
      position: relative;
      padding: 7px;
        }
      .background_design{ /*store admin page */
       background-image: linear-gradient(to top, #f0faff, #f0f4f8, #ffffff);
      }
      
      .background_design:hover{
       background:hsl(201, 100%, 94%);
      }
      
      .background_design p{ /*store admin page */
      line-height: 60px;
      height: 60px;
      position: relative;
      text-align: center;
      font-size: 16px;
      color:#0f02ff;
      top:28px;
      border-radius: 5px;
       }
      .background_design i{
       position:relative;
       top:20px;
       left:50%;
       font-size:30px;
       color:#006ee4;
                         
      }
      .content_list{  /* class for department wise propertise details*/
        position:relative;
        height: 100%;
        padding: 7px;
        }

      .content_list p{
      float:left;
      width: 100%;
      
      }

.top_card_box { /*store admin page */
    background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
    transition: all 0.5s;
    color: #03a9f4;
    cursor: pointer;
    height: 120px;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: inset -3px -2px 3px #aba9a9;
  }
  .top_card_box1 { /*store admin page */
    background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
    transition: all 0.5s;
    color: #03a9f4;
    cursor: pointer;
    height: 120px;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: inset -3px -2px solid 3px 3px #aba9a9;
  }
  
  .top_card_box2 { /*store admin page */
    background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
    transition: all 0.5s;
    color: #03a9f4;
    cursor: pointer;
    height: 120px;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: inset -3px -2px 3px 3px #aba9a9;
  }
  
  .top_card_box3 { /*store admin page */
      background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
      transition: all 0.5s;
      color: #03a9f4;
      cursor: pointer;
      height: 120px;
      align-items: center;
      justify-content: center;
      display: block;
      margin: 10px;
      border-radius: 5px;
      box-shadow: inset -3px -2px 3px 3px #aba9a9;
    }

.box_wrapper{
position: relative;
height:auto;
width: 100%;
border:1px solid red;
padding:20px;
}

.box{
height: 400px;
width: 85%;
background: #f7fdf7;
padding:30px;
margin-top:50%;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
box-shadow: 2px 5px 20px 2px rgba(0,0,0,0.2);
border-left:3px dashed #00a0f6;
}

.box:hover{
 background: #deeeff;
 transition: all 1s;
 scale: 1.2;
 border-right: 3px solid  #006ee4; 
 border-radius:50px ;
}
.box button{
position: relative;
 font-size: 20px;
 padding:12px;
 border-radius: 6px;
 border:none;
 outline: 0;
 background: #27a101;
 box-shadow: 2px 5px 60px 2px rgba(255, 255, 255, 0.2);
  color:#fff;
  cursor: pointer;
 }
 
 .box button::before{
content: '';
position:absolute;
height:10px;
width: 100%;
left: 0px;
background: #000;
transform-origin:top ;
margin-top:40px;
filter: blur(25px);
 }

 
/*store admin{ledger page}*/

.ledger_page_container{
   position: relative;
   padding:10px;
   width: 16.5in;
   height: 11.7in;
   background: #f2f7ff;
   top:100px;
   }
.page_useful_btn{ /*store admin page */
width: 100%;
height: 40px;
position:relative;
background:#fafffe;
display: flex;
top:30px;
justify-content: space-between;
align-items: center;
}

.serach_box{ /*store admin page */
display: flex;
align-items: center;
justify-content: center;
background: #2d92ff;
padding: 3px;
color:#fff;
border-radius: 3px;
box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
}
                                                                                                      
.serach_box input[type="text"]{ /*store admin page */
border:none;
outline: none;
width: 200px;
height: 33px;
padding:7px;
border-radius:7px;
position: relative;
}

.serach_box input[type="text"]:hover{ /*store admin page */
width: 250px;
transition: all 0.9s;
}
.serach_box i{
 position:relative;
font-size: 25px;
left: -28px;
z-index: +100;
color:#006ee4;
}


.select_option{ /*store admin page */
box-shadow: 2px 2px 12px 2px rgba(0,0,0,0.2);
padding:2px 3px 2px 2px;
border: 1px solid #ebebeb;
border-radius:5px;
display: flex;
align-items: center;
justify-content: center;
position:relative;
}

.select_option select{ /*store admin page */
    border:none;
    outline:none;
    padding:5px;
    width: auto;
    height:36px;
    border: 1px solid #007696;

    }

.select_option label{ /*store admin page */
 color:#fff; 
 background:#007696;
 padding:10px ;
 position:relative;
 border-radius:3px 0 0 3px;
 }

.select_option span button{ /*store admin page */
padding: 11px;
color:#fff;
background:#007696;
border:none;
outline:none;
border-radius:0 7px 7px  0;
position:relative;
left:2px;
cursor: pointer;
}

.table_wrapper{
    position:realtive;
    margin-top:110px;
    min-height:100vh;
    }

.my_table{
margin: 0 auto;
width:900PX;

position: relative;
background:#cccddf;
overflow-y: scroll;  



}


.margin_bottom{
    position:relative;
    margin-bottom:30px ;
  }
.select{
 position:relative;
 top:150px;   
 float:left;
 
}
.header_contain_aria{
width: 100%;
height: 100px;
line-height: 100px;
background: #006ee4;
position: relative;
}
.ledger_form_header{
    position: relative;
    text-align: center;
}

.ledger_form_header p{ /*store admin page */
float: right;
right: 100px;
position: absolute;
}


.ledger_form_header h3{
font-size: 20px;
}

.ledger_form_header h2{
 font-size: 16px;
}



.page_print_botton button{ /*store admin page */
    cursor: pointer;
    background: #e05c05;
    border: none;
    outline: none;
    color:#fff;
    padding: 3px;
    border-radius:5px;
    box-shadow:1px 1px 10px 1px rgba(0, 0, 0, .1) ;
}   

.page_print_botton button i{ /*store admin page */
    font-size: 20px;
    padding:2px;
    background: #e05c05;
    color:#fff;
    height: 28px;
    width: 40px;
    position: relative;
    border-radius:5px;
      }

.top_margin{ /*store admin page */
    position: relative;
    top:130px;
}
.form_header_child{
position:relative;
}


.form_header_child img{
float: right;
top:-45px;
position:relative;
right:-125px;
}

.page_body_wrapper{   /*generate ledger page body*/
position: relative;
width:800px;
min-height: 100vh;
margin: 0 auto;
background: #ffffff;
padding: 20px;
border-radius: 7px;
box-shadow: 2px 2px 80px 2px rgba(0, 0, 0, .2);
}

.page_body_wrapper_1{
    position: relative;
    width:95%;
    min-height: 100vh;
    margin: 0 auto;
    background: #ffffff;
    padding: 50px 20px ;
    border-radius: 7px;
    box-shadow: 2px 2px 80px 2px rgba(0, 0, 0, .2);
    }
    

.page_body_wrapper_1 select{  /*generate ledger page body*/
 padding: 10px;
 width: 99%;
 border:none;
 outline: none;
 border:1px solid #1fa5ee57;
 border-radius:5px;
 box-shadow: 2px 2px 40px 2px rgba(0, 0, 0, .1);
 }

 .page_body_wrapper_1 p{  /*generate ledger page body*/
  position: relative;
  padding-top:20px;
  font-size:16px;
  }

  .page_body_wrapper_1 .data_get_btn{  /*generate ledger page body*/
   padding: 10px;
   position:relative;
   border-radius:5px;
   border:none;
   font-size:15px;
   outline: none;
   color:#fff;
   border: 1px solid #0066ee;
   background: #1d8afe;
   margin: 0 auto;
   box-shadow: 2px 2px 40px 2px rgba(0, 0, 0, .1);
  }

  .break_div{  /*generate ledger page body*/
    position: relative;
    height: 40px;
    top:40px;
    background: #057912;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:center;
    text-align: center;
    padding:0 0 20px;
    border-radius:5px;
    color:#fff;
    }
    
.search_box{  /*generate ledger page body*/
position: relative;
background: #eff3ff;
height: 200px;
width: 100%;
top:50px;
padding: 20px;
border-radius: 7px;
}
.search_box input[type="text"]{  /*generate ledger page body*/
padding:12px;
width: 100%;
border: none;
outline: none;
border:1px solid #afd9f9;
border-radius: 5px;
box-shadow: 2px 2px 40px 2px rgba(0, 0, 0, .1);
}
.search_box p{  /*generate ledger page body*/
    padding:20px 0 3px;
}

.title{
    position: relative; 
    padding: 7px;
    bottom: 20px;
    width: 100%;
    border-radius: 5px 5px 0 0 ;
    box-shadow: inset 10px 10px 50px 10px rgba(121, 121, 121, 0.1);
               
      }
.title h1{
color:#0066ee;
}
.data_search_asper_year{
width: 100%;
position:relative;
top:2px;
display:none;
}

.data_search_as_custo_date{
width: 295px;
height:40px;
display: flex; 
align-items:center;
justify-content:center;
color:#0066ee;
border-radius:3px;
position: relative;
padding-top:1px;
box-shadow:2px 2px 20px 1px rgba(0, 0, 0, .1);
}

.label_customize{
position:relative;
padding-right:5px;
color:#006ee4;
width: 100%;
display: flex;
justify-content:space-between;
}
.label_customize span{
position:relative;
padding: 6px;
}

.label_customize label:hover::before{
content:'Please choose only one checkbox';
position:absolute;
top:-20px;
width:100%;
color:#ff0a0a;
}

.data_search_as_custo_date label{
 padding: 2px 10px;
 position:relative;
 left:-8px;
 }

.data_search_as_custo_date input[type="text"]{
position: relative;
box-shadow:0 2px 30px 2px rgba(0, 0, 0, .1);
padding-right: 10px;
left:-8px;
}

.data_search_asper_type p{
position: relative;
top:-15px;
left:3px;
}

.table_body{ 
position: relative; 
}

.table_body table{
border-collapse: collapse;
width: 100%;
}

.table_body table thead tr th{
border:1px solid rgb(153, 223, 255);
padding:7px;
background:#088ddf;
color:#fff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
}

.table_body table tbody tr td{
    border:1px solid rgb(187, 191, 193);
    padding:5px;
    color:#111111;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
    }

.table_body table tbody tr:hover{
    background: hsla(200, 100%, 87%, 0.5)
}


.table_body table tbody tr td i{
    font-size: 20px;
}


.table_body_width_50{
    position: relative; 
    top:40px;
    }
    
    .table_body_width_50 table{
    border-collapse: collapse;
    width: 50%;
    margin: 0 auto;
    }
    
    .table_body_width_50 table thead tr th{
    border:1px solid rgb(153, 223, 255);
    padding:10px;
    background:#088ddf;
    color:#fff;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
    }
    
    .table_body_width_50 table tbody tr td{
        border:1px solid rgb(187, 191, 193);
        padding:5px;
        color:#111111;
        text-align: center;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
        }
    
    .table_body_width_50 table tbody tr:hover{
        background: hsla(200, 100%, 87%, 0.5)
    }
    
    
    .table_body_width_50 table tbody tr td i{
        font-size: 20px;
    }


.page_header{ 
     border-radius: 2px;
    background-image: linear-gradient(to left, #f2fbff, #ffffff);
    width: 280px;
    color:#058e05;
    height: 50px;
    line-height: 50px;
    margin:0 auto;
    padding:0px 10px;
    font-size: 17px;
    font-weight: 700;
    perspective: 500px;
    text-align: center;
    margin-bottom: 5px;
    box-shadow: 2px 2px 40px 2px rgba(0, 0, 0, .1),
            inset  2px 1px 2px 2px rgba(105, 207, 255, 0.594);
    }
.page_header::before{  /*store expense ledger*/
content: 'stuff receiving details';
width: 266px;
height: 50px;
background: #c8c7c8;
position: absolute;
top:-28px;
left:7px;
transform: rotateX(-1000deg);
}
.form_entry_form{
position:relative;
top:150px;
float: right;
right: 10px;
width: 190px;
padding:10px;
background: #f23c0f;
text-align: center;
color:#fff;
box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, .1);
cursor: pointer;
}

.page_header_1{ 
    border-radius: 2px;
   background-image: linear-gradient(to left, #f2fbff, #ffffff);
   width: 380px;
   color:#058e05;
   height: 50px;
   line-height: 50px;
   margin:0 auto;
   padding:0px 10px;
   font-size: 17px;
   font-weight: 700;
   perspective: 500px;
   text-align: center;
   margin-bottom: 5px;
   box-shadow: 2px 2px 40px 2px rgba(0, 0, 0, .1),
           inset  2px 1px 2px 2px rgba(105, 207, 255, 0.594);
   }
.page_header_1::before{  /*store expense ledger*/
content: 'stuff receiving details';
width: 366px;
height: 50px;
background: #c8c7c8;
position: absolute;
top:-28px;
left:7px;
transform: rotateX(-1000deg);
}

.store_form_wrapper{  /*store admin page */
height:100%;
width: 100%;

}
.printing_page_aria{
    position: relative;
    top:115px;
   }

.letter_page_a4{ /*store admin page */
    padding:15px;
    margin:10px;
    width: 8.27in;
    height: 11in;
    position: relative;
    position: relative;
    border-radius: 10px;
    margin:0 auto;
    margin-bottom: 300px;
    background:#fff;
    }


.header_wrapper{
display: flex;
}
.letter_header_text{
text-align: center;
}

.letter_header_sub_a4 {
text-align: center;
position: relative;
}
.letter_header_sub_a4{
top:10px;
position:relative;
line-height:30px;
font-size: 18px;
}

.letter_page_a4 table{ /*store admin page*/
    position: relative;
    border:none;
    width: 100%;
    top:100px;
    border-collapse: collapse;
    }
    
    
    .letter_page_a4 table thead tr th{ /*store admin page */
     border:1px solid #f0f1f3ea;
     width: 100% auto;
     padding:1px;
     background:#0099ff;
     font-size: 12px;
     line-height: 20px;
     border-radius: 3px;
     color:#fff;
     }
    
    .letter_page_a4 table tbody tr td{ /*store admin page */
    border:none;
    border: 1px solid #c2f0ff;
    background:#fff;
    padding-left: 2px;
    line-height: 16px;
    }
    .letter_page_a4 input[type="text"]{ /*store admin page */
      width: 100%;
      padding:8px 0px;
      border-radius:3px;
      outline: none;
      border: none;
    }
    
    .letter_page_a4 input[type="number"]{ /*store admin page */
      width: 100% ;
      padding: 8px 0px;
      border-radius:3px;
      outline:none;
      border: none;
     }
    
     .letter_page_a4 #btn_style{ /*store admin page */
    text-align: center;
    height: 15px;
    border: 1px solid #259bfc;
    color:#000;
    background:#fff;
    }
    .letter_page_a4 .btn_add{ /*store admin page */
        background: #03c85f;
        padding:6px;
        border: none;
        outline:none;
        cursor: pointer;
        border-radius:5px;
        border: 1px solid #259bfc;
        color:#fff;
        }
    
        .letter_page_a4 .btn_add:hover::after{ /*store admin page */
            content: 'add Row';
            position: absolute;
            width: 70px;
            height: 30px;
            color: #fff;
            right: 0px;
            line-height: 30px;
            top:-20px;
            text-align: center;
            background:#363737 ;
        }  
      
        .page_date_style{
            position: relative;
            width: 150px;
            float: right;
            padding: 5px;
            display: flex;
            top:10px;
            left:20px;
            background: #dffefd;
            border-radius: 20px;
        }
.page_date_style p{
font-size: 13px;
}
.adress_text_header{ /*store admin page */
  position: relative;
  float: left;
  font-size: 14px;
  width: 100%;
  line-height: 25px;
  left: 40px;
  margin-top:20px;
  padding:10px;
  }

.print_page_btn {
 background:#0258d8;
 color:#fff;
 padding:7px;
 font-size: 16px;
 border-radius:2px;
cursor: pointer;
 position: relative;
 border:none;
 top:-15px;
 left:-15px;
 box-shadow:2px 2px 40px 2px rgba(0, 0, 0, .1);
}
    .subject{
  position: relative;
  top:40px;
  display: flex;
  padding:10px;
  left:40px;
  font-weight: bold;
  width: 90%;
  }

  .subject label{
    position: relative;
    position: relative;
    left:-3px;
    color:#007a00;
    font-weight: bold;
    }

  .department_info{
    position:relative;
    width: 100%;
    text-align: center;
    color: #044fa5;
    height: 120px;
    justify-content: center;
    align-items: center;
    line-height: 25px;
      }

   .department_info img{
    float: left;
    height: 100px;
    width: 100px;
    box-shadow: 2px 2px 40px 2px rgba(111, 111, 111, 0.1);
     position:relative;
    left:40px;
   }

  
.date{
    float: right;
    right: 100px;
    position:relative;
}
.subject_lett{
    position: relative;
    top:60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:7px;
}
.subject_lett label{
position: relative;
left:-36px;
color:#007a00;

}
.subject_lett input[type="text"]{
 border:1px solid #dfdfdf;
 width: 85%;
 position: relative;
 left:-30px;
 padding:5px;
 }

 .letter_text_area{
  position: relative;
  top:100px;
 }

 .letter_text_area textarea{
 width: 90%;
 height: 550px;
 padding: 10px;
 border: none;
 outline: none;
 border: 1px solid #00a0f6
 }

.text_body{
 padding:10px;
 height: 650px;
 width: 680px;
 position:relative;
 top:-50px;
 left:40px;
 text-align: justify;
 line-height: 25px;
}

.signature_box{
position: relative;
line-height: 20px;
top:-180px;
left:40px;
padding:10px;
}

.signature_box img{
width: 120px;
height: 60px;
}
.store_form{ /*store admin page */
border: 1px solid rgb(215, 212, 212);
padding:15px;
background:#ffdcdc;
margin:10px;
width: 8.27in;
height: 11in;
position: relative;
line-height: 40px;
top:120px;
position: relative;
border-radius: 10px;
margin:0 auto;
margin-bottom: 300px;
}

.form_background{ /*store admin page */
background:#e9eeff;
}
.store_form table{ /*store admin page*/
position: relative;
border:none;
width:100%;
border-collapse: collapse;

}
#table_border{
 border: 1px solid rgb(148, 148, 148);
 width: 98%;
 margin-top:100px;
 height: 565px;
 border-radius: 2px;
  
}

.store_form table thead tr th{ /*store admin page */
 border:1px solid #f0f1f3ea;
 width: 100% auto;
 padding:1px;
 background:#0099ff;
 font-size: 12px;
 line-height: 20px;
 border-radius: 3px;
 color:#fff;
 }

.store_form table tbody tr td{ /*store admin page */
border:none;
border: 1px solid #c2f0ff;
background:#fff;
padding-left: 2px;
line-height: 16px;
}
.store_form input[type="text"]{ /*store admin page */
  width: 100%;
  padding:8px 0px;
  border-radius:3px;
  outline: none;
  border: none;
}

.store_form input[type="number"]{ /*store admin page */
  width: 100% ;
  padding: 8px 0px;
  border-radius:3px;
  outline:none;
  border: none;
 }

 .store_form input[type="checkbox"]{
    position: relative;
    left:20px;
 }

 .store_form #btn_style{ /*store admin page */
text-align: center;
height: 15px;
border: 1px solid #259bfc;
color:#000;
background:#fff;
}
.store_form .btn_add{ /*store admin page */
    background: #ed4903;
    padding:6px;
    border: none;
    outline:none;
    cursor: pointer;
    border-radius:5px;
    border: 1px solid #259bfc;
    color:#fff;
    }

    .store_form .btn_add:hover::after{ /*store admin page */
        content: 'add Row';
        position: absolute;
        width: 70px;
        height: 30px;
        color: #fff;
        right: 0px;
        line-height: 30px;
        top:-20px;
        text-align: center;
        background:#363737 ;
    }  
  


    .store_form_1{ /*store admin page */
        border: 1px solid rgb(215, 212, 212);
        padding:15px;
        background:#ffdcdc;
        width: 8.27in;
        min-height: 500px;
        position: relative;
        top:120px;
        position: relative;
        border-radius: 10px;
        scroll-behavior: auto;
        margin:0 auto;
       
        border: 1px solid red;
        
        }

       .form_background{
        background:#e9eeff;
        }

        .store_form_1 table{ /*store admin page*/
        position: relative;
        border:none;
        width: 100%;
        border-collapse: collapse;
        overflow: auto;
        }
        
        
        .store_form_1 table thead tr th{ /*store admin page */
         border:1px solid #f0f1f3ea;
         width: 100% auto;
         padding:1px;
         background:#0099ff;
         font-size: 12px;
         line-height: 25px;
         border-radius: 3px;
         color:#fff;
         }
        
        .store_form_1 table tbody tr td{ /*store admin page */
        border:none;
        border: 1px solid #c2f0ff;
        background:#fff;
        padding-left: 2px;
        
        }
        .store_form_1 input[type="text"]{ /*store admin page */
          width: 100%;
          padding:8px 0px;
          border-radius:3px;
          outline: none;
          border: none;
        }
        
        .store_form_1 input[type="number"]{ /*store admin page */
          width: 100% ;
          padding: 8px 0px;
          border-radius:3px;
          outline:none;
          border: none;
         }
        
         .store_form_1 #btn_style{ /*store admin page */
        text-align: center;
        height: 15px;
        border: 1px solid #259bfc;
        color:#000;
        background:#fff;
        }

        .store_form_1 .btn_add{ /*store admin page */
            background: #ed4903;
            padding:6px;
            border: none;
            outline:none;
            cursor: pointer;
            border-radius:5px;
            border: 1px solid #259bfc;
            color:#fff;
            }
        
            .store_form_1 .btn_add:hover::after{ /*store admin page */
              content: 'add Row';
              position: absolute;
              width: 70px;
              height: 30px;
              color: #fff;
              right: 0px;
              line-height:30px;
              top:-20px;
              text-align: center;
              background:#363737 ;
            }  

            .submit_btn_1{ /*store admin page */
                width: 80px;
                height: 40px;
                position:absolute;
                bottom:0;
                right:0;
                border:none;
                outline: none;
                margin-top:100px;
                border-radius: 3px 3px 7px 3px;
                background: #07bc2e;
                color:#fff;
                cursor: pointer;
                box-shadow:   2px 4px 30px 2px rgba(0, 0, 0, .2); 
                }

#nepali_date{ /*store admin page */
width: 100px;
padding: 10px;
border: 1px solid rgb(162, 162, 162);

}
#nepali_date_5{ /*store admin page */
    width: 90%;
    padding: 10px;
    position: relative;
    left:5px;
}

.store_form .btn_del{  /*store admin page */
background: #ff510c;
box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, .1);
padding:6px;
border: none;
outline:none;
cursor: pointer;
border-radius:5px;
color:#fff;
position:relative;
margin: 0 auto;
text-align:center;
left: 2px;
}

.btn_del{  /*store admin page */
    background: #ff510c;
    box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, .1);
    padding:6px;
    border: none;
    outline:none;
    cursor: pointer;
    border-radius:5px;
    color:#fff;
    position:relative;
    text-align:center;
    left:11px;
    
    }


.form_header{  /*store admin page */
  text-align: center;
}
.form_header input[type="text"]{
    border: 1px solid #006ee4;
}
.form_header select{
position: relative;
padding: 7px;
border:none;
border:1px solid #00af56;
border-radius: 3px;
outline:none;
}

.form_header i{  /*store admin page */
color:#026efa;
right: -233px;
position: relative;
font-size: 18px;
border: 1px solid #006ee4;
padding:8px;
}
.my_row{
display: none;
}
.form_header p{ /*store admin page */
position: relative;
float: right;
right: 20px;
}

.form_header h5{
font-size:15px;
float:left;
}
.form_header h5 span{
 color:#fb2306;
 font-size:23px;
 padding-left:10px;
}

.letter_header_a4 hr{ /*store admin page */
background-color:#e0580a;
height: 3px;
margin-top: 50px;
width: 100%;
top:50px;
}

.form_header_1{ /*store admin page */
  position: relative;
  float: left;
  font-size: 14px;
  width: 100%;
  line-height: 30px;
  }

 .form_header_1 p{ /*store admin page */
 position: relative;
 left:0;
 }

.form_header_1 span{ /*store admin page */
  position: relative;
  float: right;
  border-top: 1px dashed #000;
  margin: 10px 20px 0;
  }

  .background_color_seaen{  /*store receiving and expense note bakckground color */
   background: #f1f6fc;
  }

  .form_header_1 input[type="text"]{
    width: 100%;
    margin: 5px;
    padding-left: 10px;
  }

  .form_header_2{
    display: flex;
    justify-content: space-between;
  }

  .form_header_2 img{
    height: 50px;
    display: flex;
    position: relative;
    top:-30px;
    }

    .form_header_2 span{
    border: none;
    } 
    .form_header_2 p{
        top:25px;
    } 
 
.tax_calculation{   /*store admin page */
height: 40px;
width: 99%;
position:relative;
background: #c2dcf7;
display: flex;
padding-left:10px;
margin-left:8px;
top:-0px;
} 
.tax_calculation span{ /*store admin page */
    position: reltive;
    padding-left:9px;
    font-size: 15px;
}
.form_amount_calculation{ /*store admin page */
width:100%;
height: 40px;
position: relative;
display: flex;
top:-20px;

}

.form_amount_calculation label{ /*store admin page */
    width: 90px;       
    text-align: center; 
    padding: 1px;  
    background: #02a9e1;
    color:#fff;  
    margin-left:8px;
    
}

.form_amount_calculation input[type="number"]{
width: 160px;
border: 1px solid #00a5fe;
padding:19px;
}

.img_position{
    position: absolute;
  }

.img_position_4{
 position: relative;
 left: 150px;
 top:10px;
}

.position_center{
    position:relative;
    left:0;
    margin: 0 auto;
}

.img_position_5{
position: relative;
top:-220px;  
left:370px ;
transform: rotate(-40deg);
z-index: +100;
}


/*model box*/

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    margin: auto;
    padding: 20px;
    width: 100%;
  }
  
  .modal-content span{
     position:relative;
     top:0px;
     z-index: +110;
     background: #1a1817;
     border-radius: 50%;
     width: 30px;
     text-align: center;
      }

      
    .modal-content span:hover{
     color: #fff;
     }
    
  /* The Close Button */
  .close {
    color: #ffffff;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #f4f1f1;
    text-decoration: none;
    cursor: pointer;
  }
#myBtn{
position: relative;
height: 50px;
width:220px ;
top:170px;
background: #f02023;
border: none;
outline:none;
color:#fff;
font-size:16px;
float: right;
right: 10px;
}
.page_title p{
    background: #085df0;
    color:#fefefe;
    position: relative;
    font-weight: 700;
    padding:10px;
    width: 120px;
    font-size: 16px;
    border-radius: 5px;
    
}
 .close_btn{ /*store admin page */
 width:30px;
 height:30px;
 background:#0368dd;
 position: relative;
 float:right;
 top:-15px;
 left:14px;
 border-radius:5%;
 text-align:center;
 line-height:30px;
 box-shadow:  1px 3px 10px 4px rgba(149, 149, 149, 0.2);
 color:#fff;
 font-weight:700;
 cursor:pointer;
  }
.close_btn a{
    color:#fff;
}
.close_btn:hover::after{ /*store admin page */
content: 'Close File';
height: 40px;
width:100px;
background:hsla(13, 99%, 50%, 0.901);
color:#ffffff;
position:absolute;
top:-45px;
left:-40px;
z-index: +110;
line-height:40px;
border-radius: 5px;
animation: aniCbtn 0.6s ease-in;
cursor: pointer;
}

@keyframes aniCbtn{
          0% {
            transform: translateX(100px);
        }
        100% {
            transform: translateX(0);
        }    
    
}

.view_btn{
    width: 30px;
    height:30px;
    background:#0365c0;
    border:none;
    color:#fff;
    outline:none;
    box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, .1),
                -2px 2px -20px 2px rgba(0, 0, 0, .1);
    border-radius:5px;
    }


    .form_register_btn{
        width: 70px;
        height:30px;
        background:#d93f02;
        border:none;
        color:#fff;
        outline:none;
        box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, .1),
                    -2px 2px -20px 2px rgba(0, 0, 0, .1);
        border-radius:5px;
        }


        .received_btn{
            width: 70px;
            height:40px;
            background:#0884dc;
            border:none;
            color:#fff;
            cursor: pointer;
            outline:none;
            padding: 3px;
            box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, .2),
                        -2px 2px -20px 2px rgba(0, 0, 0, .2);
            border-radius:5px;
            }

    .view_btn i{
        color:#fff;
    }
  
    .process_btn{
        width: 80px;
        height:30px;
        background:#02ba08;
        border:none;
        color:#fff;
        outline:none;
        box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, .1),
                    -2px 2px -20px 2px rgba(0, 0, 0, .1);
        border-radius:5px;
        }

.form_footer_signaure{ /*store admin page */
 position: relative;
 float: left;
 width: 250px;
 height: 110px;
 top:-35px;
 left:10px;
}


.form_footer_signaure_dafault{ /*store admin page */
    position: relative;
    float: left;
    width: 250px;
    height: 110px;
    top:-30px;
    left:10px;
     }
   
   .form_footer_signaure_dafault p{ /*store admin page */
   line-height: 20px;
   position: relative;
   top:60px;
   }

   .form_footer_signaure_dafault img{ /*store admin page */
    width: 100px;
    height: 50px;
    float:left;
    
   }

.form_footer_signaure p{ /*store admin page */
line-height: 20px;
position: relative;
top:60px;
}

.img_position_1{ /*store admin page */
    position: relative;
    top:5px;
    
    }

  .image_position_top{ /*store admin page */
        position: relative;
        top:-70px;
        }
    
     

 .class_position_2{ /*store admin page */
     position: relative;
     left: 40px;
     }
 
  

    .img_position_vp{ /*store admin page */
        position: relative;
        top:20px;
        left:30px;
    }

    .img_position_vp1{
     position:relative;
     top:20px;
     left: 70px;
    }

    .img_position_vp2{
        position:relative;
        top:20px;
        left: 20px;
       }
 .img_position_2{
  position: relative;
  top:5px;
  line-height: 20px;
  }

 .img_position_3{
     position: relative;
     top:0px;   
       }

.img_position_4{
 position: relative;
 top:0px;   
   }

.class_position{
   position: relative;
   right:0px; 
}

.class_position_1{
    position: relative;
    left:100px;
 }

 .approve_btn button{
    position:relative;
    padding:7px;
    border:none;
    left: 40px;
    background: #06a541;
    color: #fff;
    border-radius:5px;
    }

    .approve_btn {
        position:relative;
        padding:7px;
        border:none;
        left: 15px;
        background: #06a541;
        color: #fff;
        border-radius:5px;
        }
      
 
.form_footer_signaure img{ /*store admin page */
width: 100px;
height: 50px;
float:left;
}
.form_date{
    position: relative;
    top:-10px;
    width: 100px;
    float: right;
    padding: 5px;
}

.form_body_style{
  position: relative;
 margin:0 auto;
 border: 1px solid red;
 left: 0;
right: 0;
top:0;
margin:0 auto;
background: #000;
}

.form_footer_left img{
    position: relative;
    width: 80px;
    top:-10px;
    left:-130px;
    }

.dashed_style_1{
border:1px dashed;
width: 100px;
position:absolute;
right:10px;
margin-top:0px;
left:1px;
margin-bottom: 4px;
} 

.dashed_style_2{
    border:1px dashed;
    width: 110px;
    position:absolute;
    right:10px;
    left:96px;
    top:57px;
    } 

 .dashed_style_3{
     border:1px dashed;
     width: 110px;
     position:absolute;
     right:10px;
     left:156px;
     top:57px;
     } 
.form_footer_signaure span { /*store admin page */
    position: absolute;
    color:red;
    }
    
.serial_no{ /*store admin page */
    position: absolute;
    left: 60px;
    top:130px;
    }


.serial_no span{ /*store admin page */
color:#f02023;
font-weight: 700;
font-size: 20px;
padding-left: 20px;
}
.note{
width: 100%;
position: relative;
clear: both;
top:-20px;
}


.form_footer_left span {
  color:red;
  position: relative;
  }


.class_possiion{
    position: relative;
    left: 355px;  
}
.margin_right{
    position:relative;
    line-height: 20px;
    padding-left:100px;
    }

    .form_footer{ /*store admin page */
        position: absolute;
        display: block;
        height: 140px;
        width: 97%;
        bottom:0;
        }
        
        
        .col_direction_right p{ /*store admin page */
          float:right;
          position: relative; 
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .form_footer h6{ /*store admin page */
        font-size:12px;
        position:relative;
        top:-50px;
        }
        
        .footer_cotainer{ /*store admin page */
            width: 100%;
            position: relative;
            top:10px;
        }
            
            .form_footer_left{ /*store admin page */
                position: relative;
                float: left;
                width: 195px;
                line-height: 30px;
                }
            
                                                       
                                                                  
                                                               
        .table_footer_wrap{ /*store admin page */
        width: 96%;
        height: 100px;
        position:absolute;
        bottom:100px;
        left:8px;
        }

.form_footer_right{ /*store admin page */
    position: relative;
    float: right;
    right: 40px;
    width: 250px;
    top:0px;
    line-height:20px;
     }

.form_footer_right img{ /*store admin page */
position: relative;
width: 80px;   
left:20px;
}
.form_footer_1{
 position:absolute;
 width:97%;
 bottom: 0px;
}


.form_footer_child_first{ /*store admin page */
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
top:-20px;
}

.form_footer_child_first img{ /*store admin page */
   position: relative;
   top:-55px;
   float: left;
   
   }

.form_footer_child_first p{ /*store admin page */
border-top:1px dashed #515252;
text-align: center;
width: 80px;
}

.form_footer_child_second{ /*store admin page */
position: relative;
top:-25px;
}

.form_footer_row_for_submit_1{ /*store admin page */
    width: 100%;
    height: 50px;
    background: #0675f5;
    position:fixed;
    text-align: center;
    border-radius:10px;
    
    }



.form_footer_row_for_submit{ /*store admin page */
width: 100%;
height: 50px;
background: #0675f5;
position:relative;
text-align: center;
border-radius:10px;
margin: 0 auto;
position: fixed;
cursor: pointer;
box-shadow:   2px 4px 30px 2px rgba(0, 0, 0, .1); 
}


.form_footer_row_for_submit button{
cursor: pointer;
color:red;
}
.update_btn{
height: 50px;
position:relative;
text-align: center;
border-radius:10px;
top:126px;
cursor: pointer;
}

.submit_btn{ /*store admin page */
 width: 80px;
 height: 40px;
 position:absolute;
 bottom:0;
 right:0;
 border:none;
 outline: none;
 cursor: pointer;
 border-radius: 3px 3px 7px 3px;
 background: #07bc2e;
 color:#fff;
 box-shadow:   2px 4px 30px 2px rgba(0, 0, 0, .1); 
 }

 .goods_received_btn{ /*store admin page */
    width: 80px;
    height: 40px;
    position:absolute;
    bottom:0px;
    right:-7px;
    border:none;
    outline: none;
    cursor: pointer;
    border-radius: 3px 3px 7px 3px;
    background: #07bc2e;
    color:#fff;
    box-shadow:   2px 4px 30px 2px rgba(0, 0, 0, .1); 
    }
      
   

.submit_btn:hover{
border-radius:5px;
transition: all 0.7;
background: #0099ff;
cursor: pointer;

}
.footer_signature{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
top:-40px;
}
.footer_signature p{
position:relative;
left:50px;
}

.footer_signature span{
position:relative;
top:-20px;
left:-76px;
}
 .margin-top{
    position: relative;
    top:130px;
    }
.padding_top{
 position:relative;
 top:20px;
}
.store_form h1{ /*store admin page */
  font-size:25px;

}

.store_form h3{ /*store admin page */
font-size: 25px;
}

.store_form h2{ /*store admin page */
  font-size: 20px;
  }

.store_form .right{ /*store admin page */
position: absolute;
right:20px;
font-size:12px;
  }
.table_wraper table{
 width: 100%;
 border-collapse: collapse;
 }

.ledger_title{
width:100%;
padding:7px;
font-size:14px;
padding:5px;
border:1px solid;
display: flex;
}

.ledger_title p{
background:#f7fbff;
position: relative;
float:left;
color:#1201ae;
padding: 7px;
width: 200px;
font-weight: 600;
box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, .1);
}

.ledger_title span{ 
    color:#006eef;
    padding:7px; 
    width: 100%;
    box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, .1);
   }

.table_wraper{ /*store admin page */
  position: relative;
  top:40px;
  width: 100%;
   }

 .table_wraper thead tr th{
    border: 1px solid rgb(11, 114, 239);
    background: #e6f1fd;
    padding:1px;
 }

 .table_wraper tbody tr td{
   border: 1px solid rgb(33, 9, 9);
   background: #f9fbfe;
   padding:1px;
   }
   
.serial_number{ /*store admin page */
    text-align: center; 
  }

.page_footer{ /*store admin page */
height: 80px;
width: 100%;
color:#fff;
background: #0179ba;
position: fixed;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
padding: 5px;
line-height: 30px;
}


.page_footer p{
 padding: 5px;

 }

.page_footer br{
    position:relatiave;
    top:20px;
}
.table{   /*store entry and receive note*/
position:relative;
width: 100%;

}


.table tbody th td{ /*store admin page */
position: relative;
background: #0678f1;
width: 100%;
color:#fff;
}


.width_hundred_percent{ /*store admin page */
width: 100%;
position:relative;

}
.width_seventy_five_percent{
position: relative;
width: 75%;
margin:0 auto;
}

.width_seventy_percent{ 
    position: relative;
    width: 70%;
    margin:0 auto;
    }

    .width_sixty_five_percent{ /*store admin page */
        position: relative;
        width: 65%;
        margin:0 auto;  
    }

.width_sixty_percent{ /*store admin page */
    position: relative;
    width: 60%;
    margin:0 auto;  
   }

 .width_fifty_five_percent{
    position: relative;
    width: 50%;
    margin:0 auto;  
}

.width_fifty_percent{
    position: relative;
    width: 50%;
   }

.width_fourty__five_percent{
    position: relative;
    width: 45%;
    }
   
   .width_fourty_percent{
    position: relative;
    width: 40%;
   }
   
   .width_thirty__five_percent{
    position: relative;
    width: 35%;
    }
   
   .width_thirty_percent{
    position: relative;
    width: 30%;
    }

    .width_twenty_five_percent{ /*store admin page */
    position: relative;
    width: 25%;
    }

    .width_twenty_percent{ /*store admin page */
        position: relative;
         width: 20%;
         } 
         
         
    .width_fifteen_percent{
        position: relative;
         width: 15%;
         } 

    .width_fourteen_percent{
        position: relative;
        width: 14%;
    }

    .width_thirteen_percent{
        position: relative;
        width: 13%;
    }
   
    .width_tweleve_percent{
        position: relative;
        width: 12%;
    }

    .width_eleven_percent{ /*store admin page */
        position: relative;
        width: 11%;
    }

    .width_ten_percent{
        position: relative;
        width: 10%;
    }
    
    .width_nine_percent{
        position: relative; /*store admin page */
        width: 9%;
    }

    .width_eight_percent{
        position: relative;
        width: 8%;
    }
    
    .width_seven_percent{
        position: relative;
        width: 7%;
    }

    .width_six_percent{
       position: relative;
       width: 6%;
    }
    .width_five_percent{
        position: relative;
        width: 5%;
    }

    .width_four_percent{ /*store admin page */
        position: relative;
        width: 4%;
    }

    .width_three_percent{
        position: relative; /*store admin page */
        width: 3%;
    }
    .width_two_percent{ /*store admin page */
        position: relative;
        width: 2%;
    }
    .width_one_percent{
        width: 1%;
    
    }
.table thead th{ /*store admin page */
    width: 10%;
    position: relative;
    height:40px;
    background:#116ec6;
    color:#fff;
}

.table tbody tr td{
border:1px solid #74dfff;
padding:2px;
text-align: center;
}

.table thead  tr th:nth-child(1){ /*store admin page */
width: 2%;
}

.table thead  tr th:nth-child(2){
    width: 7%;
    }

.table thead  tr th:nth-child(3){
    width: 5%;
    }

.table thead  tr th:nth-child(4){
    width: 5%;
    }

.table tbody input[type="text"]{
    border-radius: 2px;
    border: none;
    outline: none;
    border:  1px solid #abd2fb;
    width: 100%;
    padding:9px;
    }

    .table tbody i{
 font-size: 25px;
   }


.complited_button{ /*store admin page */
width: 100px;
height:35px;
border: none;
outline: none;
cursor: pointer;
background:rgb(255, 255, 255);
box-shadow:1px 2px 42px 1px rgba(193, 220, 247, 0.4),
            inset -1px 2px 5px 3px rgba(149, 198, 255, 0.5);
color:#156df0;
font-size: 15px;
border-right:2px solid rgb(0, 119, 255);
border-left:2px solid rgb(0, 119, 255);
border-radius: 30px;
}
.pending_button{
    width: 100px;
    height:35px;
    border: none;
    outline: none;
    cursor: pointer;
    background:rgb(255, 188, 44);
    box-shadow:1px 2px 42px 1px rgba(254, 254, 255, 0.1),
                inset -1px -2px -5px -3px rgba(254, 170, 14, 0.5);
    font-size: 15px;
    border-right:2px solid rgb(0, 119, 255);
    border-left:2px solid rgb(0, 119, 255);
    border-radius: 30px;
    }

    .pending_text{
        width: 100px;
        height:35px;
        border: none;
        outline: none;
        cursor: pointer;
        background:rgb(255, 188, 44);
        box-shadow:1px 2px 42px 1px rgba(254, 254, 255, 0.1),
                    inset -1px -2px -5px -3px rgba(254, 170, 14, 0.5);
        font-size: 15px;
                     
        }
    

/*end store classes*/


/*====================================================================================*/



 .page_wrapper{ /*page margin*/
    top: 101px;
    position:relative;
   }
   
   
   
   

   .name{ /*ribbon class for profile update of contact detail and and update HOD Profile */
    font-size: 18px;
    color: #FFf;
    width:380px;
    background: #0a76f9d9;
    text-align: center;
    z-index:+1;
    left:-7px;
    position:relative;
    padding: 0 0.5em;
    font-size:1.5.000em;
    margin: 0 0 0 -0.625em;
    line-height: 1.875em;
    border-radius:1px;
    box-shadow: -1px 2px 13px rgba(0,0,0,0.5);
    margin-bottom:10px;
  }

  .name:before, .name:after{
    position:absolute;
    content: '';
    display: block;
  }

  .name:before{
    width: 0.469em;
    height: 100%;
    padding: 0 0 0.438em;
    top:0;
    left: -0.469em;
    background:inherit;
    border-radius: 0.313em 0 0 0.313em;
  }

  .name:after{
    width: 0.313em;
    height: 0.313em;
    background: rgba(0,0,0,0.35);
    bottom: -0.313em;
    left: -0.313em;
    border-radius: 0.313em 0 0 0.313em;
    box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
  }
  .vtb-wraper { position: relative; z-index: 1; }
  /*class vtb-wraper's use for +z-index (to display left and right ribbon
  vtb class shold be inside the vtb_wraper class )*/
  .vtb {
    font-size: 20px;

     width: 376px;
    position: relative;
    background: #197bd0;
    color: #fff;
    text-align: center;
    left:-24px;
    top:-20px;
    padding: 0.7em 2em; /* Adjust to suit */
    margin: 2em auto 3em;
    box-shadow: 3px  3px 10px rgba(0, 0, 0, 0.3);
    bottom:50px;
   }

   .vtb:before, .vtb:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -0.9em;
    border: 1.1em solid #1693f3;
    z-index: -1;
   }
   .vtb:before {
    left: -2em;
    border-right-width: 1.9em;
    border-left-color: transparent;
   }
   .vtb:after {
    right: -2em;
    border-left-width: 1.9em;
    border-right-color: transparent;
   }
   .vtb .vtb-content:before, .vtb .vtb-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #9b9b9c transparent;
    bottom: -1em;
   }
   .vtb .vtb-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
   }
   .vtb .vtb-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
   }

   .view_box{
    height: 400px;
    width: 330px;
    margin-bottom:70px;
    text-align: center;
    position: relative;
    margin-right: auto;
    margin-left:auto;
    background-color: #fafafb;
    justify-content: center;
    transition: 1.2s;
    align-items: center;
    border-radius:10px 10px 10px 15px;
    box-shadow: -2px -2px 1px rgb(248, 132, 0),
                   3px 3px 100px rgb(201, 201, 201),
                   3px 3px 1px rgb(62, 108, 245);
   }

   .view_box:hover{
    border-radius:0px 100px 0px 100px;
    transition:0.6s;
    background-color: #eaf6fc;
  }

  .user-pic {
    position:relative;
    height: 100px;
    width: 100px;
    background-color: #02b022;
    border-radius:50%;
    text-align: center;
    left:0;
    top:-50px;
    margin: auto;
    box-shadow: 3px 3px 12px rgba(0,0,0,0.3);
  }

.user-pic i{
 color:#f4f1ee;
 font-size:90px;
 }

.view-box-title1 i{
 font-size: 30px;
 color:rgb(9, 101, 176);
 position:relative;
top:5px;
}
.view-box-title1 span{
font-size: 17px;
line-height: 50px;
color:rgb(9, 101, 176);
}


/*end Ribbon section*/

 
  

  
/*admin login page (Updated)*/
 
.login_form1{
  width:380px;
  height:480px;
  position:relative;
  margin: 6% auto;
  background: #fcfeff;
  border-radius: 10px; 
  box-shadow: 3px 3px 130px rgba(0,0,0,0.1);
  overflow: hidden;
  top:50px;
            
 }


.login_form_body1{
 width:380px;
 height:580px;
 position:relative;
 margin: 6% auto;
 background: #fcfeff;
 border-radius: 10px; 
 box-shadow: 3px 3px 130px rgba(0,0,0,0.1);
 overflow: hidden;
           
}

.form_heading1{ /*admin login page (Updated)*/
  position: relative;
  height:80px;
  width:380px;
  margin-bottom: 30px;
  line-height: 25px;
  background-image:linear-gradient(to left,#074279,#0861b5);
  text-align: center;
  padding:5px;
  border-radius: 10px 10px 0px 0px;
  color:#ffffff;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
       
 }

 .button_box1{
  width:220px;
  padding:5px;
  font-size:14px;
  margin:5px auto;
  position: relative;
  box-shadow: 2px 3px 60px rgba(37, 37, 37, 0.3);
  border-radius: 30px;
  }
  

    .form-style1{
    width: 300px;
    position: absolute;
    top:180px;
    transition: 0.8s;
    left:37px;
    }

  .form-style1 i{
    color:rgb(12, 116, 234);
    position:relative;
    top:40px;
    font-size: 17px;
    padding: 0 5px;
    border-radius: 5px;
    }


  .form-style1 label{
    color:#108403;
    font-size: 14px;
    position: relative;
    padding-top:30px;
    left:10px;
    transition: 0.7;
    font-weight: 600;
  }
  
  .input_field_custom1{
    width: 100%;
    padding: 15px 0;
    margin:9px 0;
    border-bottom:  1px solid #999;
    outline: none;
    border:none;
    outline: none;
    color:#089dd8;
    padding-left:45px;
    border-radius:30px;
    box-shadow: -6px -6px 20px rgba(0,0,0,0.2),
                6px 6px 20px rgba(0,0,0,0.2);
  
  }

.input_field_custom1:hover{
 background: #ebf8ff;
 transition: .5s;
 
}
.forgot_link{ 
    
    margin-top:230px;
    margin-left:200px;
    color:orange;
      }


.show_psw{
    height: 18px;
    width:18px ;
    line-height: 18px;
    position: relative;
    top:5px;
    padding: 10px;
    margin:10px;
     }
 
  
.form_heading1 h3,h2{
  font-size: 12px;
  text-transform:uppercase;
  
  }
.form_heading1 h1{
    text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;

}

  
  
  .login_student_logo1{/*student login */
   width: 70px;
   height: 70px;
  text-align: center;
   position: relative;
   border-radius: 50%;
   margin-right: auto;
   margin-left: auto;
   box-shadow: 2px 3px 60px rgba(37, 37, 37, 0.3);
   
    }
    .login_student_logo1 img{/*studentt login */
      border-radius: 50%;
      width: 70px;
      height: 70px;
      text-align: center;
      margin-right: auto;
      margin-left: auto;
    }
  


/* end admin login page (Updated)*/


  .body_wraper{
  padding-top:151px;
  padding-bottom:80px;
  height: 100%;
  position:relative;
  }
  .contact-user-profile h6{
      font-size: 16px;
      color:#056092;
      border-bottom:1px solid gray;
    }
    .contact-user-profile i{
      color:#03517b;
      padding-right:10px;
      font-size:16px;
    }

    .user_pic{
    height: 120px;
    width:120px;
    background-color: #d3dcef;
    margin-right:auto;
    margin-left:auto;
    border-radius:50%;
    margin-bottom:16px;
    }

    .user_pic img{
    border-radius:50%;
    height: 120px;
    width:120px;
    }



  .detail_record{ /*class for payment detials page*/
    width: 100%;
    height: 40px;
    background-image:linear-gradient(to left,
    #f9ceb6, #ed5e0b, #ed5e0b, #ed5e0b, #ffad7d);
     text-align:center;
    font-size:18px;
    line-height: 40px;
    position: relative;
    font-weight: 600;
    color:#fff;
    top:30px;
    border-radius:30px;
    border-right: 20px solid #0a8422;
    border-left: 20px solid #0a8422;

    }

  .payment_details img{
    position: relative;
    height: 100px;
    width: 100px;
    border-radius:50%;
    box-shadow: -2px -3px 5px #c1bebe, 2px 3px 15px #b9b7b7;
   }

   .details_record2 li{
    margin-top:30px;
    width: 25%;
    position: relative;
    background-color: rgb(75, 102, 119);
    height: 50px;
    line-height:50px;
    color:#fff;
    padding-left:10px;
    border:1px solid rgba(183, 219, 252, 0.557);
    border-radius: 5px 5px 0px 0px;
    }

    .details_record3 li{
      width: 25%;
      height: 40px;
      padding-left:10px;
      line-height:40px;
      border:1px solid rgba(183, 219, 252, 0.557);
      }

    .details_record4 li{
      width: 25%;
      height: 40px;
      padding-left:10px;
      line-height:40px;
      font-weight: 700;
      color:rgb(4, 98, 187);
      border:1px solid rgba(183, 219, 252, 0.557);
      }


  .text_left{
    width: 75%;
    line-height: 30px;
    position: relative;
    padding-left:10px;
    margin-top:40px;
    }

 .text_right{
   position: relative;
   float:right;
   width: 25%;
   line-height: 30px;
   margin-top:40px;
   }

     .verify_biling{
     position:relative;
     width: 50%;
     margin-right:auto;
     margin-left:auto;
     padding:20px;
     font-size: 15px;
     background-color: #fff;
     box-shadow: 3px 3px 15px gray;
     border-radius:5px;
    }

    .verify_biling  img{
     border-radius:50%;
     height: 80px;
     width: 80px;
     position: relative;
     top:-40px;
    }

    .verify_biling ul{
      display: flex;
      width: 100%;
      align-items: center;
    }

    .verify_biling li{
      float: left;
      display: block;
      height: 50px;
      width: 100%;
      position: relative;
      line-height: 50px;
      border-bottom:1px solid rgb(221, 218, 218);
      }

      .verify_biling h2{
        text-align: center;
        line-height: 10px;
        background-image: linear-gradient(to bottom, #b7ff8e, #90f754, #91f856, #78f52f, #7cee3a,#a5f179);
        padding: 20px;
        width: 30% auto;
        font-size:17px;
        margin-right:auto;
        font-weight: 900;
        margin-left:auto;
        position:relative;
        margin-bottom:40px;
        border-radius: 50px;
        top:20px;
        border-right:30px solid rgb(7, 167, 236);
        border-left:30px solid rgb(7, 167, 236);
        box-shadow: 2px 2px 10px  rgb(233, 233, 233);;
      }

    .vb {/*billing call for  biiling  html*/
    height:100px ;
    position: relative;
    margin-bottom:20px;
    display:flex;
    font-weight: 800;
    align-content: center;


    }

    .vb p{
      width: 230px;
      color:rgb(11, 11, 217);
      font-size: 18px;
      height: 15px;

      }

  .lip{
    position: relative;
    bottom: 30px;
  }

/*class for feeback form page*/
.i_view p{/*class user  for director admin page*/
  width:150px;
  height: 35px;
  line-height: 35px;
  border: none;
  font-size: 15px;
  margin-left:auto;
  margin-right:auto;
  font-style: normal;
  outline: none;
  color:rgb(250, 251, 253);
  display: inline-block;
  background-image:linear-gradient(to bottom, rgb(6, 169, 251),
  rgba(41, 160, 250, 0.967), rgba(6, 140, 243, 0.967));
  font-weight:bold;
  border-radius:20px ;
  position: relative;
  cursor: pointer;
  box-shadow: 2px 3px 10px rgb(193, 194, 190),
              2px 3px 10px rgb(218, 235, 247);


  }


/*end accounte admin pages*/
/* styled table */
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    background-color: #08233D;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}
.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}
/*class for inbox(message-box)*/
.email-box-container {
  width: 99%;
  height: 100%;
}

.email-body {
  top: 90px;
  padding: 10px;
  width: 100%;
  position: relative;
  height: 100vh;
  background: #f6fbfe;

  }

.email-body table {
  height: auto;
  position: relative;
  border-collapse: collapse;
  width: 100%;
  margin: 0%;
  padding: 0px;
  }

.email-body table tr td {
  border-bottom: 1px solid rgb(231, 231, 231);
  }

.th_group {
  width: 1000px;
  border: 1px solid red;
  text-align: left;
  padding: 5px;
  margin-bottom: 50px;
  }

.email-body table tr:hover {
  background-color: #d7effa;
  cursor: pointer;
  }

.email-body table tr td i {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  }

.th-group1 {
  width: 100%;
  }

/*class for HOD admin page*/


   .search-box1 {
    top:93px;
    width: 25%;
    height: 50px;
    position: relative;
    border-radius:50px;
    margin-bottom: 105px;
    margin-left:7px;
    box-shadow: 2px 2px 1px rgb(209, 208, 208),
                -2px -2px 1px rgb(229, 227, 227),
                2px 2px 10px rgb(185, 196, 248);

  }

  .search-box1 button{
    position:relative;
    width: 50px;
    height:50px;
    line-height:50px;
    text-align: center;
    border-radius:30px;
    border:none;
    color:rgb(248, 248, 248);
    cursor: pointer;
    background-color: #f16d01;
    z-index: +1;
   font-style: italic;
    box-shadow: 1px 2px 1px #eff5ef,
                1px 2px -10px #e5e5e5;
    }

    .search-box1 input[type="text"] {
     width:100%;
     top:-50px;
     position: relative;
     padding:16px;
     border:none;
     outline: none;
     border-radius:30px;
     padding-left:60px;

       }

  .search-box1 i {
   position:relative;
    width: 30px;
    height:30px;
    height:50px;
    line-height: 50px;
    color:#5ac4fe;
    float:right;
    font-size: 40px;
    right:20px;
    z-index: +1;

   }
  .search-box1:hover{
    width: 40%;
    transition: 1s;
  }



.search-box {
  width: 25%;
  height: 50px;
  top:5px;
  position: relative;
  border-radius:50px;
  margin-left:7px;
  box-shadow: 2px 2px 1px rgb(209, 208, 208),
              -2px -2px 1px rgb(229, 227, 227),
              2px 2px 10px rgb(185, 196, 248);

}
.search-box button{
  position:relative;
  width: 50px;
  height:50px;
  line-height:50px;
  text-align: center;
  border-radius:30px;
  border:none;
  color:rgb(248, 248, 248);
  cursor: pointer;
  background-color: #f16d01;
  z-index: +1;
 font-style: italic;
  box-shadow: 1px 2px 1px #eff5ef,
              1px 2px -10px #e5e5e5;
  }

.search-box:hover{
  width: 40%;
  transition:1.2s;
}
.search-box input[type="text"] {
  width:100%;
  top:-50px;
  position: relative;
  padding:16px;
  border:none;
  outline: none;
  border-radius:30px;
  padding-left:60px;

    }


.search-box i {
  position:relative;
  width: 30px;
  height:30px;
  height:50px;
  line-height: 50px;
  color:#5ac4fe;
  float:right;
  font-size: 40px;
  right:25px;
  z-index: +1;
 }

.td-group-1 {
  text-align: center;
  }

.td-group-2 {
  color: #0b56f9;
  }

.td-group-6 i {
  font-size: 20px;
  color: #0b56f9;
  }

.td-group-7 i {
  font-size: 20px;
  color: #e04a0f;
  }

.email-body table tbody td img {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  box-shadow: 1px 2px 5px gray;
  }

.email-body table tbody td p {
  padding: 5px;
  }
/*select box*/
.select_rows {
   margin-top: 20px;
   margin-bottom: 20px;
   padding: 10px;
   font-size: 15px;
   border: 1px solid grey;
   background: #f1f1f1;
}
.searchbox {
   margin-top: 20px;
   padding: 10px;
   font-size: 15px;
   border: 1px solid grey;
   background: #f1f1f1;
   width: 50%;
}
.searchbtn {
width: 10%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 15px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
.searchbtn:hover {
  background: #0b7dda;

}
/*view .email -box class*/

.page_back {
  width: 100%;
  height: 30px;
  background-color: #eff9e6;
  line-height: 30px;
  margin-bottom: 20px;
  font-size: 14px;
  position:relative;
  top:20px;
  box-shadow: 1px 2px 10px rgb(222, 220, 220);
  }

.page_back button {
  color: blue;
  background-color: #eff9e6;
  border: none;
  cursor: pointer;
  }

.page_back i {
  padding-right: 10px;
  font-size: 18px;
  }

.view-box-container {
  width: 99%;
  height: 100%;
  }

.view-body {
  top: 90px;
  padding: 10px;
  width: 100%;
  position: relative;
  height: 500px;
  background: #f6fbfe;
  }

.th_subject {
  padding: 10px;
  font-size: 18px;
  letter-spacing: 1px;
  }

.th_subject span {
  float: right;
  font-size: 15px;
  color: green;
  }

.view_email_box {
  width: 100%;
  height: auto;

  }

.view_email_box table {
  width: 100%;
  height: 100%;
  }

.view_email_box table tr th {
  text-align: left;
  padding: 10px;
  }

.view_email_box table tr:hover {
  background: none;
  }

.view_email_box table tr td {
  border: 1px solid rgb(255, 255, 255);
  height: 100%;
  }

.view_email_box table tr th:first-child {
  padding: 20px;
  }

.th_subject {
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
  padding-bottom: 20px;
  }

/*class for inbox page icon */
.inbox-icon {
  width: 150px;
  height: 30px;
  background: #01ba08;
  border-radius: 30px 0px 30px 0px;
  box-shadow: 3px 3px 10px rgb(159, 157, 157);
  margin-bottom: 30px;
  margin-top:18px;
  line-height: 30px;
  padding-left: 10px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  }

.table_row1 {
  height: 20px;
  color: #0345d3;
  padding-left: 10px;
  width: 50%;
  }

.table_row1 img {
  position: relattive;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  float: left;
  margin-right: 7px;
  cursor: pointer;
  }

.table_row1 img:hover {
  height: 200px;
  width: 200px;
  z-index: +100;
  position: relative;
  }

.table_row1 {
  display: block;
  position: relative;
  height: 40px;
  line-height: 40px;
  float: left;
  }

  #table_border{  /*use in store receiving note voucher*/
    border: 1px solid rgb(148, 148, 148);
    width: 99%;
    margin-top:100px;
    height: 534px;
    border-radius: 2px;
      }    

   #rotate_input_field{
    position:absolute;
    right:24px;
    top:327px;
    width:82px;
    height:545px;
    border: 1px solid rgb(148, 148, 148);
    border-right:none;
    writing-mode: vertical-rl;
    
    }
    
.table_body {
  width: 100%;
  height: 100% auto !important;
  display: block;
  float: left;
  padding: 10px;
  line-height: 25px;
  background-color: #f6fbfe;
    }

.table_body_file {
  width: 100%;
  display: block;
  float: left;
  background-color: #eff1f2;
  min-height: 100px;
  border-radius: 0px 0px 10px 10px;
  padding: 15px;
  }
.table_body_file span{
  color:rgb(17, 72, 118);
  padding-right: 10px;;
}
.table_body_file i{
  padding: left 15px;
}
.fr-button {
  position: relative;
  width: 100%;
  border: none;
}

.fr-button button {
  border: none;
  outline: none;
  float: right;
  position: relative;
}

.td_border {
  background: #0345d3;
}

/*Class use for email send page */
.send_email_body {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
  }

.send_email_body input {
  width: 100%;
  padding: 15px;
  border: none;
  outline: none
    }

.email_to {
  background-color: #e9efff;
  border-bottom: 1px solid rgb(225, 225, 225);
  }

.email_field {
  background-color: #f5f5f5;
  border-bottom: 1px solid rgb(225, 225, 225);
  }

.email_body {
  min-height: 200px;
  border: 1px solid rgb(220, 218, 218)
  }

.email_send {
  width: 100px;
  font-size: 16px;
  height: 40px;
  border: none;
  outline: none;
  border-radius: 5px;
  background: #06bc2e;
  position: relative;
  color: #fff;
  cursor: pointer;
  box-shadow: inset -3px 3px 5px #aebff6,
    3px 3px 6px #00000057;
  }

/**class for compose email*/
.sent_email_inbox_footer{
  position:relative;
  display:block;
  float:left;
  width:100%;
  height:40px;
  line-height: 40px;
  margin-bottom:20px;
}
.sent_email_inbox_footer input {
  display:inline-block;
  position: relative;
  background: #fafafd;
  width: 200px;
  height: 40px;
  padding: 8px;
  }

.sent_email_inbox_footer input file{
  width: 80px;
  float:left;
  display: block;
  position: relative;
}

.email_send:hover {
  background: #0c90d7;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
  }


.wrap_notice_textaria {
  width: 100%;
  margin: 0px auto;
  position: relative;
 }

.wrap_notice_textaria_input {
  float: left;
  width: 100%;
  min-height: 250px;
  outline: none;
  resize: none;
  border: 1px solid #bfd8ec;
  padding: 20px;
  border-radius:5px;
}

/*class for student list page (admin)*/
.preivew_button{
  width:40%;
  position: relative;
  }

  .preivew_button ul{
  position:relative;
  background:#20a319e8;
  display: flex;
  height:30px;
  padding:10px;
  }

.preivew_button ul li{
  list-style: none;
  position:realtive;
  }

.table-fb{
 text-align: right;
}

.table-fb button{
  background-color: #20a319e8;
  color:#fff;
  width: 250px;
  border:none;
  outline: none;
  float: right;
  height: 30px;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #999999e8;
  font-size: 16px;
 }

 .table-fb span{
  cursor: pointer;
  height: 30px;

  }

.table-fb i{
font-size: 16px;
 color:rgb(241, 241, 244);
 padding-left: 5px;
 cursor: pointer;
 line-height: 18px;

 }

 .table-fb1{
  text-align: right;

 }

 .table-fb1 button{
   background-color: #20a319e8;
   color:#fff;
   width: 250px;
   border:none;
   outline: none;
   height: 30px;

   border-radius: 5px;
   box-shadow: 3px 3px 10px #999999e8;
   font-size: 16px;
  }

 .table-fb1 i{
   font-size: 25px;
  color:rgb(9, 18, 185);
  padding-left: 5px;
  cursor: pointer;
 }


.table-fb3{
 text-align: right;
 }

 .dept-balance table p{
  float:left;
 }
 .dept-balance span{
  padding-left:7px;
  height: 30px;
   }

.payment_details_table{/*payment derails page class*/
width: 100%;
position:relative;
top:50px;
height: auto;
background-color: #fafafa;

}

.payment_details_table table{/*payment derails page class*/
width: 100%;
border-collapse: collapse;

}
.payment_details_table table tr th{/*payment derails page class*/
  width: 5%;
  height: 35px;
  text-align: left;
  padding-left:5px;
  background-image:linear-gradient(to top, #022e4e,  #022e4e,  #022e4e);
  border:1px solid rgb(211, 211, 250);
  color:#fff;

  }

  .payment_details_table table tbody tr td {/*payment derails page class*/
    width: 5%;
    height: 30px;
    padding-left:5px;
    border:1px solid rgb(208, 210, 213);
    border-radius:5px;
    }
    .payment_details_table table tbody tr:nth-last-child(1){
    background-color: #d1edfc;
    }


/************************************************/
/***********Start Super Admin*******************/
/*****************************************/
/*#######################################################################*/
/*Certificate for admin page */
.contain_details_certificate {
  position: relative;
  width: 100%;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  border-radius: 7px;
  padding: 12px;
  }

.contain_details_certificate .contain_sub_certificate {
  position: relative;
  display: grid;
  height: 100%;
  margin-top: 80px;
  background: #ffffff;
  box-shadow: 0 7px 15px rgba(187, 186, 186, 0.8);
  }

.contain_header_certificate {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0px;
  height: 11px;
  }

.contain_header_certificate h2 {
  position: relative;
  height: 50px;
  width: 100%;
  color: #fff;
  background-image: linear-gradient(to bottom, #03ad25, #10c033, #03ad25, #03ad25, #03ad25);
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  box-shadow: -3px 3px 8px #b1b1b1;
  }

.contain_details_certificate table {
  width: 100%;
  border-collapse: collapse;
  }

.contain_details_certificate table thead td {
  font-size: 500;

  }

.contain_details_certificate table thead td {
  width: auto;
  height: 100%;
  text-align: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.contain_details_certificate .contain_sub_certificate table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #160707;
  }

.contain_details_certificate .contain_sub_certificate table tbody td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.contain_details_certificate .contain_sub_certificate table tr:last-child {
  border-bottom: none;
  }


.contain_details_certificate .contain_sub_certificate table tbody tr:hover {
  background: #d7eeff;
  }

.contain_details_certificate .contain_sub_certificate table tr td {
  padding: 10px;
  width: auto;
  }

/*End Certificate for admin page */

/*class for HOD admin page */
.contain_details1 { /*main contain details*/
 position: relative;
  width: 100%;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  border-radius: 7px;
  padding: 12px;
  margin-top: 10px;
}

.contain_details .contain_sub {
  position: relative;
  display: grid;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 7px 15px rgba(187, 186, 186, 0.8);
  }


/*admin page (super admin  page )*/
.contain_details {
  /*main contain details*/
  position: relative;
  width: 100%;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  border-radius: 7px;
  padding: 12px;
    }

.contain_details .contain_sub {
  position: relative;
  display: grid;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 7px 15px rgba(0.0.0.0.4);
  }

.account_table p{
  display: block;
  float:left;
  }

.account_table span{
  padding-right:7px;
  padding-left:7px;
  }

.contain_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  }

.contain_header h2 {
  position: relative;
  height: 50px;
  width: 100%;
  color: #fff;
  background-image: linear-gradient(to bottom, #0f80f8, #488cfa, #2071f5, #2276fd, #2276fd);
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  box-shadow: -3px 3px 8px #b1b1b1;
  }

.contain_details table {
  width: 100%;
  border-collapse: collapse;
  }
  .contain_details table th{
    font-size: 14px;
    }

.contain_details table thead td {
  font-size: 500;
  background: rgb(220, 239, 248);
  }

.contain_details table thead td {
  width: auto;
  height: 100%;
  text-align: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.contain_details .contain_sub table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align:center;
  }

.contain_details .contain_sub table tbody td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 15px;
    }

.contain_details .contain_sub table tr:last-child {
  border-bottom: none;
  }

.contain_sub table tbody tr td:first-child{
  width: 20px;
  }

.contain_details .contain_sub table tbody tr:hover {
  background: #d7eeff;
  }


.contain_details .contain_sub table tr td {
  padding: 10px;
  width: auto;
 }

.view_button {
  color: rgb(87, 87, 159);
  border: none;
  font-weight: 600;
  padding: 10px;
  width: auto;
  font-size: 15px;
  outline: none;
  display: inline-block;
  background: #ffffff77;
  border-radius: 30px;
  position: relative;
  box-shadow: inset -3px -3px 15px #0564fe77;
  }

   .view_button1 {
    color: rgb(6, 6, 221);
    border: none;
    width:100%;
    font-weight: 500;
    padding-left: 30px;
    padding-right:30px;
     width: auto;
    font-size: 15px;
    outline: none;
    display: inline-block;
    background: #ffffff77;
    border-radius: 30px;
    position: relative;
    box-shadow: inset -3px -3px 15px #0564fe77;
    }



/*Hod admin page*/
/*######### HOD admin page############*/

.search_record{ /*Yearly record student(for hod admin)*/
  padding-top: 43px;
  }

.yearly_record_for_hod{
  min-height: 700px;
  background-color: #f7f7f7;
  }

 .search_box_for_hod{
  margin-top:40px;
  margin-right:auto;
  margin-left:auto;
  width:550px;
  height:80px;
  background-image:linear-gradient(to bottom,  rgb(214, 214, 213), rgb(251, 251, 251),rgb(228, 225, 225));
  line-height: 80px;
  border-right: solid 5px  rgb(251, 156, 3);
  border-left: solid 5px  rgb(251, 156, 3);
  border-width: 20px ;
  box-shadow: 0px 80px 85px rgb(206, 206, 206),
              inset 0px 100px 85px rgb(246, 249, 251);
  }

  .search_box_for_hod:hover{
    border-radius:50px;
    transition:1.2s;
  }


.search_box_for_hod label{
  color:rgb(9, 102, 183);
  font-size: 16px;
  margin:10px;
  }

.search_box_header{
  background-color: #02c8db;
  width: 450px;
  height: 50px;
  position:relative;
  }

.search_box_for_hod input[type="date"]{
  width:130px;
  height: 50px;
  border:none;
  outline:none;
  font-size: 15px;
  border-radius: 10px;
  text-align: center;
  background-color: #e6e8e9;
  }

.search_box_for_hod button{
  border:none;
  outline:none;
  height:50px;
  width: 80px;
  position:relative;
  background:rgb(5, 113, 229);
  right:1px;
  border-radius:10px;
  color:#fff;
  padding:7px;
  box-shadow: -1px -2px 1px rgb(215, 215, 212),
               2px 2px 1px rgb(201, 201, 200),
               10px 10px 20px rgb(203, 204, 203);
  }

  .search_icon{
    position: relative;
    top:30px;
    margin-top:40px;
    margin-right:auto;
    margin-left:auto;
    width:550px;
    height:50px;
    line-height: 40px;
    text-align: center;
    justify-content: center;
    border-radius: 10px 10px 0px 0px;
    background-image:linear-gradient(to bottom,  rgb(113, 188, 245), rgb(68, 171, 255), rgb(7, 115, 223));
  }

  .search_icon i{
    height:50px;
    line-height:50px;
    font-size:40px;
    color:#fff;
    position: relative;
  }
  .search_icon span{
    text-align:center;
    line-height: 50px;
    position:relative;
    left:20px;
    top:-10px;
    color:rgb(0, 0, 145)

  }

 .current_student_detail_title {
  position: relative;
  width: 100%;
  display: grid;
  transition: 0.7s;
  text-align: center;
  box-shadow: 3px 3px px rgb(185, 179, 179);
  margin-right: 10px;
  }

.current_student_details_body {
  position: relative;
  width: 97%;
  margin-top: 13px;
  margin-left: 10px;
  min-height: 400px;
  background: rgb(250, 250, 250);
  border-radius: 5px 5px 0px 0px;
  color: rgb(8, 133, 243);
  box-shadow: 3px 3px 2px rgb(181, 181, 181),
    -2px -1px 5px rgb(255, 255, 255),
    inset 3px 3px 2px rgb(189, 188, 188);
  }

.current_student_detail_title_sub {
  width: 100%;
  padding: 7px;
  }

.current_student_details p {
  position: relative;
  height: 40px;
  width: 100%;
  color: #fff;
  background-image: linear-gradient(to bottom, #1d92cd, #15aaea, #1d92cd, #1d92cd, #148cc8);
  line-height: 40px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  font-size: 20px;
  line-height: 40px;
  }

.current_student_details i {
  position: relative;
  margin-right: 5px;
  color: rgb(6, 46, 224);
  font-size: 30px;
  line-height: 39px;
  height: 39px;
  }

.current_student_details_body table {
  width: 100%;
  border-collapse: collapse;
  }

.current_student_details_body table tbody tr td:nth-child(1) {
  width: 20px;
  }

.current_student_details_body table thead td {
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgb(220, 239, 248);
  }


.current_student_details_body img {
  border-radius: 50%;
  box-shadow: 1px 2px 5px rgb(169, 169, 169);
  }

.current_student_details_body table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  }

.current_student_details_body table tbody td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.current_student_details_body table tr:last-child {
  border-bottom: none;
}

.current_student_details_body table tbody tr:hover {
  background: #d7eeff;
  }

.current_student_details_body table tr td {
  padding: 10px;
  width: auto;
  }

/* end add user page-right side bar (super admin  page)*/
/*appliction status*/

.view_application_status {
  position: relative;
  min-height: 400px;
  background: rgb(250, 250, 250);
  border-radius: 5px 5px 0px 0px;
  color: rgb(8, 133, 243);
  margin-right: 10px;
  margin-left: 10px;
  box-shadow: 3px 3px 15px rgb(181, 181, 181);
  }

.view_application_status_child {
  width: 100%;
  padding: 7px;
  }

.view_application_status_sub p {
  position: relative;
  height: 40px;
  width: 100%;
  color: #fff;
  background-image: linear-gradient(to top, #178ef7, #178ef7, #178ef7, #44a3f7, #0d80f4);
  line-height: 40px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  font-size: 20px;
  line-height: 40px;
}

.view_application_status_sub i {
  position: relative;
  margin-right: 5px;
  color: rgb(6, 46, 224);
  font-size: 30px;
  line-height: 39px;
  height: 39px;
  }

.view_application_status table {
  width: 100%;
  border-collapse: collapse;
  }

.view_application_status table tbody tr td:nth-child(1) {
  width: 20px;
  }

.view_application_status table thead td {
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgb(220, 239, 248);
  }


.view_application_status table tbody tr td i {
  color: blue;
  font-size: 20px;
  cursor: pointer;
  }

.view_application_status img {
  border-radius: 50%;
  box-shadow: 1px 2px 5px rgb(169, 169, 169);
  }

.view_application_status table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #160707;
  text-align: left;
  }

.view_application_status table tbody td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.view_application_status table tr:last-child {
  border-bottom: none;
  }

.view_application_status table tr td:last-child {
  text-align: center;
  }

.view_application_status table tbody tr:hover {
  background: #d7eeff;
  }

.view_application_status table tr td {
  padding: 10px;
  width: auto;
  }

/*end view application  status */

/*start notification page*/

.notication-page {
  margin-top: 100px;
  position: relative;
  display: block;
  margin-left: 20px;
  margin-right: 20px;
  }

.notication-page img {
  width: 100%;
  height: auto;
  }

/*super admin main contain body(student-list)*/
.student_list_body {
  position: relative;
  width: 100%;
  display: grid;
  border-radius: 7px;
  }

.student_contain_sub {
  position: relative;
  display: grid;
  height: 100%;
  background: #f3f2f2;
  box-shadow: 0 7px 15px rgba(187, 186, 186, 0.8);
  margin-top: 95px;
  }

.student_contain_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  }

.student_contain_header h2 {
  position: relative;
  height: 50px;
  width: 100%;
  color: #fff;
  background-image: linear-gradient(to right, #2790ff, #2276fd);
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  box-shadow: -3px 3px 8px #b1b1b1;
  }

.student_contain_sub table {
  width: 100%;
  background: rgb(255, 255, 255);
  border-collapse: collapse;
  }

.student_contain_sub table thead td {
  font-size: 500;
  background: rgb(220, 239, 248);
  }

.student_contain_sub table tbody tr td img {
  border-radius: 50%;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  }

.student_contain_sub table thead td {
  width: auto;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.student_list_body .student_contain_sub table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #160707;
  }

.student_list_body .student_contain_sub table tbody td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.student_list_body .student_contain_sub table tr:last-child {
  border-bottom: none;
  }

.student_list_body .student_contain_sub table tbody tr:hover {
  background: #d7eeff;
  }

.student_list_body .student_contain_sub table tr td {
  padding: 10px;
  width: auto;
  }


/*current student list of super admin*/

/*super admin main contain body(student-list)*/
.current_student_container{
  position: relative;
   }
  .table_body_wraper{
   position:relative;
   top:91px;
  }
  .table_body_wraper1{
    position:relative;
    height:100vh;
   }

.current_student_list_body {
  position: relative;
  width: 99%;
  display: grid;
  grid-template-columns: 1;
  border-radius: 7px;
  overflow:auto;

  }

.current_student_contain_sub {
  position: relative;
  display: grid;
  height: 100%;
  background: #f3f2f2;
  box-shadow: 0 7px 15px rgba(187, 186, 186, 0.8);
  margin-left: 10px;
  }

  .yearly-student-record-header h2{
    position: relative;
    height: 50px;
    width: 99%;
    color: #fff;
    background-image: linear-gradient(to bottom, #2790ff, #468cfc, #2276fd, #2276fd, #2276fd);
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    border-radius: 5px 5px 0px 0px;
    box-shadow: -3px 3px 8px #b1b1b1;
    margin-right:auto;
    margin-left:auto;
  }

.current_student_contain_header {
  width: 100%;
  margin-right:auto;
  margin-left:auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  }

.current_student_contain_header h2 {
  margin-top: 90px;
  width: 100%;
  color: #fff;
  background-image: linear-gradient(to bottom, #2790ff, #468cfc, #2276fd, #2276fd, #2276fd);
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  box-shadow: -3px 3px 8px #b1b1b1;
  }

.current_student_contain_sub table {
  width: 100%;
  background: rgb(255, 255, 255);
  border-collapse: collapse;
}

.current_student_contain_sub table thead td {
  background: rgb(220, 239, 248);
  }

.current_student_contain_sub table tbody tr td img {
  border-radius: 50%;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  }

.current_student_contain_sub table thead td {
  width: auto;
  height: 100%;
  text-align: center;
  border: 1px solid rgba(185, 32, 32, 0.1);
  }

.current_student_list_body .current_student_contain_sub table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: bold;
  }

.current_student_list_body .current_student_contain_sub table tbody td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  }

.current_student_list_body .current_student_contain_sub table tr td:first-child {
    width: 50px;
    }
.current_student_list_body .current_student_contain_sub table tr:last-child {
  border-bottom: none;
  }

.current_student_list_body .current_student_contain_sub table tbody tr:hover {
  background: #dfe1e2;
  transition: 0.5s;
  }

.current_student_list_body .current_student_contain_sub table tr td {
  padding: 10px;
  width: auto;
  }

/*student list detail  of super admin page*/

.view_button {
  color: rgb(87, 87, 159);
  border: none;
  font-weight: 500;
  padding: 10px;
  min-width:200px;
  font-size: 15px;
  outline: none;
  display: inline-block;
  background: rgb(255, 255, 255);
  border-radius: 30px;
  position: relative;
  box-shadow: inset -3px -3px 15px #0564fe77;

  }




/* Popup form style*/
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 50%;
  }

.box_cotainer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
  transform: scale(0);
  z-index: +1;
  }

.openform_div {
  height: 700px;
  width: 50%;
  margin: 0px 10px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  position: relative;
  }

.box_cotainer .openform_div i {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 15px;
  color: #fff;
  }


.my_form {
  background:#efefef;
  border: 1px solid red;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .5);
  height: 400px;
  width: 400px;
  top:0;
  left: 0;
  margin: 0 auto;

  }



.form_body_style {
  width: 98%;
  height: auto;
  border-radius: 30px;
  background-color: #ecf0f3;
  margin: 20px;
  box-shadow: 3px 1px 8px rgb(125, 125, 125);
  margin-right: auto;
  margin-left: auto;
  }

.form_title_payment {
  width: 100%;
  height: 60px;
  margin-right: auto;
  margin-left: auto;
  line-height: 50px;
  border-radius: 30px 30px 0px 0px;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  color: #0a578f;
  background-image: linear-gradient(to right, #fbf6ee, #f8f7f5);
  }

.payment_form_field {
  width: 100%;
  padding: 0px 5px 5px 5px;
  }

.payment_form_field i {
  height: 22px;
  line-height: 50px;
  margin: 0 10px -3px 25px;
  }

.payment_form_field p {
  margin-top: -15px;
  margin-left: 40px;
  padding: 0px 15px 15px 18px;
  color: blue
  }

.payment_form_field input {
  border: none;
  outline: none;
  background: none;
  width: 80%;
  padding: 15px;
  font-size: 14px;
  }


.payment_form_field select {
  border: none;
  outline: none;
  background: none;
  width: 80%;
  padding: 15px;
  font-size: 14px;
  }

.payment_form_field label {
  color: black;
  text-align: justify;
  display: block;
  }

.payment_form_field h3 {
  padding: 5px;
  color: #095b92;
  }

.payment_form_field textarea {
  background: none;
  outline: none;
  width: 90%;
  padding: 25px 0px 25px 10px;
  }

.form_body_style button {
  border: none;
  background: none;
  outline: none;
  color: #555;
  width: 80%;
  font-size: 14px;
  padding: 0px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
  }

/*Add department user (HOD)*/
.add_user_dept {
  width: 98%;
  height: auto;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  }

.add_user_form_container_dept {
  width: 60%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 93px;
  padding: 10px;
  border-radius: 5px 5px 0px 0px;
  }

.add_user_form_border_design_dept {
  background: #eeeeef;
  box-shadow: 0px 0px 10px #6a6b6c;
  padding: 0px 0px 7px 0px;
  border-radius: 5px;
  width: 100%;
  margin-top: 20px;
  }

.add_user_form_border_design_dept p {
  width: 100%;
  height: 40px;
  background-image: linear-gradient(to bottom, #0673c0, #49a9ee, #1090ec, #1090ec, #1090ec);
  font-size: 20px;
  color: #fff;
  line-height: 40px;
  border-radius: 5px 5px 0px 0px;
  }

.form_body_dept {
  /*class for customize left and righgin pading */
  background: #f3f5f7;
  width: 100%;
  height: 700px;
  display: block;
  padding: 20px;
  text-align: center;
  }

.form_body_dept label {
  text-align: left;
  position: relative;
  }

/*class for billing system*/
.billing_page {
  width: 99%;
  height: auto;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-top: 90px;

  }

.billing_form_container {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border-radius: 5px 5px 0px 0px;
  }

.billing_form_border_design {
  background: #eeeeef;
  box-shadow: 0px 0px 10px #6a6b6c;
  padding: 0px 0px 7px 0px;
  border-radius: 5px;
  width: 100%;

  }

.billing_form_border_design p {
  width: 100%;
  height: 40px;
  background-image:linear-gradient( to  bottom, #089ff0f7, #51bdf7f7, #089ff0f7, #089ff0f7, #089ff0f7);
  font-size: 25px;
  color: #fff;
  line-height: 40px;
  border-radius: 5px 5px 0px 0px;
  }

.billing_form_body {
  /*class for customize left and righgin pading */
  background: #f3f5f7;
  width: 100%;
  min-height:600px;
  display: block;
  padding: 20px;
  text-align: center;
  }

  .dept_fund_entry{
     background: #f3f5f7;
    width: 100%;
    min-height:300px;
    display: block;
    padding: 20px;
    text-align: center;
    }
.billing_form_body label {
  text-align: left;
  position: relative;
  }

/*View feedback form*/
.view_feedback_frombody table tr td{
  width: 100%;
  }

.td-width1{
  width: 40%;
  position: relative;
  background: #ebeff2;
  }
.td-width2{
  width: 60%;
  position: relative;
  background-color: #ebeff2;
  }

.td-width3{
  width: 40%;
  position: relative;
  }

 .td-width3 p{
  float:left;
  height: 20px;
  }

.td-width4 p{
  height: 20px;
  position: relative;
  display: block;
  padding-right: 5px;
  float: left;
  color:#1c74f6;
  font-size: 16px;
  }
.td-width4 span{
  padding-right:7px;
  }

.td-width-4a{
  position: relative;
  background-color:#ebeff2;
  }

.td-width-4b{
  position: relative;
  color:#07329e;
  }

.view_feedback_from_page{
  width: 99%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  top:91px;
  box-shadow: -3px 3px 10px gray;
  }

.view_feedbackform_heading{
   background-image:linear-gradient( to  bottom, #08bef0f7, #08bef0f7, #08bef0f7, #08bef0f7, #08bef0f7);
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  color:#fff;
  }

.view_feedback_from_page table{
  border-collapse: collapse;
  width: 100%;
  }

.view_feedback_from_page td{
   border-bottom: 1px solid rgb(225, 221, 221);
   border-left: 1px solid rgb(225, 221, 221);
   padding: 15px;
   line-height: 20px;
  }

.view_feedback_from_page table  tr td span{
  position: relative;
  float:left;
  }

.view_feedback_from_page td img{
  border-radius: 50%;
  height: 50px;
  width: 50px;
  padding:none;
  }

.td-styel{
  background: #cce0f2;
  height: 40px;
  padding:2px solid red;;
  align-items: center;
  color:rgb(2, 2, 76);
  font-size: 20px;
  }

/*End view feedback form */

.wrap_form_table {
  /*to coustomize display and padding inside of the input field (with five types of chckbox field)*/
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  position: relative;
}

.wrap_form_table span {
  /*to coustomize display and padding inside of the input field*/
  display: inline-block;
  position: relative;
  font-size: 13px;
  margin: 0px;
  width: 100%;
  }

.input_customize {
  /*customize inpute field (making shadow)*/
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cdced1,
    inset -8px -8px 8px #ffffff;
  }

.form_close_button {
  display: inline;
  height: 50px;
  width: 50px;
  line-height: 45px;
  top: -50px;
  margin-right: 5px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}

.form_close_button:hover {
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}
.userselect {
  padding: 12px 20px;
  font-size: 16px;
  border: 2px solid #008CBA;
}
.userbtn {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px solid red;;
  cursor: pointer;
}
.userbtn:hover {
  background-color: #4CAF50;
  color: white;
}
.userbtn2 {
  background-color: green;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px solid red;;

}
.userbtn2:hover {
  background-color: blue;
  color: white;
}
.submit_button {
  width: 100px;
  font-size: 16px;
  height: 40px;
  border: none;
  outline: none;
  border-radius: 5px;
  background: #f6f6f6;
  position: relative;
  box-shadow: inset -3px 3px 5px #aebff6,
    3px 3px 6px #00000057;
}

.submit_button:hover {
  background: #0c90d7;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}

.submit-alert-closebtn:hover {
  color: black;
  background-color: rgb(250, 255, 255);
  border-radius: 50%;
}

/* veiew more button (use for notification div) */
.view_more_button {
  width: 100px;
  font-size: 16px;
  height: 30px;
  border: none;
  float: right;
  position: relative;
  line-height: 30px;
  text-align: center;
  outline: none;
  border-radius: 30px;
  background: #356ff6;
  color: #fff;
  position: relative;
  box-shadow: inset -3px 3px 5px #aebff6,
    3px 3px 6px #00000057;
}


.click_btn{
 width: 200px;
 background:#f02023; 
 border:none; 
 position: relative;
 color:#fff;
 cursor: pointer;
 left:3px;
 font-size: 16px;
 top:10px;
 margin-bottom:15px;
 padding:10px;
 box-shadow: 5px 4px 20px 2px rgba(0, 0, 0, .2);
 border-radius: 5px;
}

.click_btn a{
color:#fff;
}
/* super admin Application form to verify by admin*/
.admin_form_container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 50%;
}

.cotainer_sub {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
  transform: scale(0);
  z-index: +1;
}

.application_form_div {
  height: 1000px;
  width: 50%;
  margin: 0px 10px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  position: relative;
  overflow: scroll;
}

.admin_header_view_app i {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 15px;
}

.close_button_billling{ /*class biilig page*/
  height: 50px;
  width: 50px;
  float:right;
  top:-135px;
  line-height: 50px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  color:#fff;
  cursor: pointer;
  text-align: center;
     box-shadow: inset -3px -3px 5px  #ffffff77,
    3px 3px 15px #ff6721;
}



.close_button1{ /* class for hod admin close page */
  height: 50px;
  width: 50px;
  line-height: 50px;
  top: -150px;
  margin-right: 5px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  text-align: center;
  cursor: pointer;
  color: #fff;
  float:right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
 }


.close_button {
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 50px;
  top: 50px;
  margin-right: 5px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  cursor: pointer;
  text-align: center;
  color: #fff;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}


.application_body {
  padding: 0px 20px 5px 20px;
  box-shadow: 2px 3px 5px rgb(160, 158, 156), -2px -2px 5px rgb(162, 164, 166);
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  height: 1600px;
  text-align: left;
}

.admin_header_view_app {
  position: relative;
  line-height: 100px;
  font-size: 20px;
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to right, #fdfdfd, #dcf6fd, #ffffff);
  margin-bottom: 10px;
  border-radius: 0px 0px 30px 30px;
  text-shadow: 1px 2px 3px rgb(18, 153, 231);
  margin-bottom: 70px;
  font-weight: 500;
}

.admin_header_view_app .form_logo {
  position: relative;
  float: left;
}

.admin_header_view_app p {
  font-size: 25px;
  text-align: center;
}

h6 {
  /*CLINICAL ELECTIVE APPLICATION FORM*/
  font-size: 20px;
  padding: 20px 20px 20px 0px
}

.form_logo img {
  top: 15px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  position: relative;
  box-shadow: 5px 5px 5px rgb(229, 226, 226);
}

.admin_header_view_app label {
  width: 100%;
  display: block;
}

.application_body span {
  padding: 10px;
  width: 100%;
  background: rgb(255, 255, 255);
  font-size: 14px;
  border: 1px solid rgb(239, 237, 237);
  display: block;
  margin-bottom: 20px;
  border-radius: 2px solid red;;
  background: #fefeff;
  box-shadow: inset 1px 1px 1px #cdced1, inset -1px -1px 1px #fff;
}

.application_body span i {
  padding: 0px 10px 0px 10px;
  background: rgb(241, 241, 241);
  border-radius: 0px 20px 0px;
  color: rgb(90, 150, 252);
}

.edit_button {
  display: inline;
  height: 50px;
  width: 50px;
  line-height: 45px;
  font-size: 16px;
  margin-right: 5px;
  position: relative;
  background: #2185ff;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #2167ff;
}

/*end form style*/
/*#######################################################################*/
/*it should remove style*/
.current_record_details {
  /* right side bar running placement student details for super admin*/
  position: relative;
  width: 100%;
  display: block;
  padding-right: 20px;
  transition: 0.7s;
  background: #f3f6f8;
}

.current_record_details_body {
  position: relative;
  height: 98%;

  background: rgb(250, 250, 250);
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 3px px rgb(185, 179, 179);
  color: rgb(8, 133, 243);
}

.current_record_details h4 {
  position: relative;
  height: 50px;
  width: 100%;
  color: #fff;
  background: var(--form-title-header);
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  box-shadow: -3px 3px 8px #b1b1b1;
}

.current_record_details i {
  position: relative;
  top: -60px;
  left: 10px;
  float: right;
  color: #fff;
  font-size: 30px;
  line-height: 40px;
}

.current_record_details_body table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.current_record_details_body table thead td {
  font-size: 500;
  background: rgb(220, 239, 248);
}

.current_record_details_body table thead td {
  width: auto;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.current_record_details_body table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #160707;
}

.current_record_details_body table tbody td {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.current_record_details_body table tr:last-child {
  border-bottom: none;
}

.current_record_details_body table thead tr td {
  text-align: left;
}

.current_record_details_body table tbody tr:hover {
  background: #d7eeff;
}

.current_record_details_body table tr td {
  padding: 10px;
  width: auto;
}


/*****************************************/
/***********End Super Admin*******************/
/*****************************************/
/*Student Admin page start from*/
.fee_structure {
  width: 300px;
  height: 200px;
  background: #f6f6f9;
  position: relative;
  color: black;
  z-index: +1;
  display: none;
}

.fee_structure .close_icon {
  top: 290px;
  position: fixed;
  left: 220px;
  background: red;
  padding: 7px;
}

.fee_structure p {
  display: block;
  background: white;
  border-bottom: 1px solid var(--border-buttom-left-popup);
  padding: 10px;
  box-shadow: 10px 5px 3px gray;
  z-index: +1;
}

.fee_structure p:hover {
  background: var(--left-menudetails-hover);
}

/*left side bar hospital information */

.hospital_info {
  width: 300px;
  height: 200px;
  background: #f6f6f9;
  position: relative;
  color: black;
  z-index: +1;
  display: none;
}

.hospital_info .close_icon {
  top: 370px;
  position: fixed;
  left: 220px;
  background: red;
  padding: 7px;
}

.hospital_info p {
  display: block;
  background: white;
  border-bottom: 1px solid var(--border-buttom-left-popup);
  padding: 10px;
  box-shadow: 10px 5px 3px gray;
  z-index: +1;
}

.hospiotal_info p:hover {
  background: var(--left-menudetails-hover);
}

.main {
  position: absolute;
  width: calc(100% - 250px);
  left: 250px;
  /* this value use to left menu width*/
  min-height: 100vh;
  background: rgb(255, 255, 255);
  transition: 0.5s;
}

.main.active {
  width: calc(100% - 60px);
  left: 60px;
}

.main .topbar {
  width: 100%;
  background-color: #0a578f;
  box-shadow: rgb(38, 62, 38) 0px 15px 25px -10px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle {
  position: relative;
  width: 60px;
  height: 60px;
  background: #fcfbfb;
  cursor: pointer;
  transition: 0.5s;
}

.toggle span {
  padding-left: 15px;
  line-height: 60px;
  font-size: 30px;
}

.kl_db_search {
  position: relative;
  width: 100%;
  margin: 0 10px;
  text-align: center;
  transition: 0.5s;
}

/**********************************************************/

.kl_db_banner_top h3 {
  font-size: 25px;
  color: #fff;
  position: relative;
  width: 100%;
  background: #0a578f;
}

.user {
  position: relative;
  min-width: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.5s;
}

.user img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
  border-radius: 50%;
}

/*start header box section */



.kl_topbox_body1 {
  background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
  transition: all 0.5s;
  color: #03a9f4;
  cursor: pointer;
  height: 120px;
  align-items: center;
  justify-content: center;
  display: block;
  margin: 10px;
  border-radius: 5px;
  box-shadow: inset -3px -2px 5px #ffffff77,
    2px 3px 3px #aba9a9;
}

.kl_topbox_body2 {
  background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
  transition: all 0.5s;
  color: #03a9f4;
  cursor: pointer;
  height: 120px;
  align-items: center;
  justify-content: center;
  display: block;
  margin: 10px;
  border-radius: 5px;
  box-shadow: inset -3px -2px 5px #ffffff77,
    2px 3px 3px #aba9a9;
}

.kl_topbox_body3 {
  background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
  transition: all 0.5s;
  color: #03a9f4;
  cursor: pointer;
  height: 120px;
  align-items: center;
  justify-content: center;
  display: block;
  margin: 10px;
  border-radius: 5px;
  box-shadow: inset -3px -2px 5px #ffffff77,
    2px 3px 3px #aba9a9;
}

.kl_topbox_body4 {
  background-image: linear-gradient(to right, #d6e8f5, #b0d8f6, #daeaf5);
  transition: all 0.5s;
  color: #03a9f4;
  cursor: pointer;
  height: 120px;
  align-items: center;
  justify-content: center;
  display: block;
  margin: 10px;
  border-radius: 5px;
  box-shadow: inset -3px -2px 5px #ffffff77,
    2px 3px 3px #aba9a9;
}

.kl_topbox_body4 span {
  color: red;
}

/* apply department class**/
.kl_topbox_apply {
  position: relative;
  font-size: 1.3em;
  font-weight: 500;
  transition: 0.5s;
  width: 100%;
  color: #010613;
  text-align: center;
  background-image: linear-gradient(to bottom, #6d8a13, #9bc32f, #90b726, #90b726, #90b726, #90b726);
  height: 60px;
  border-radius: 5px 5px 0px 0px;
  line-height: 60px;
  color: rgb(255, 255, 255);
  box-shadow: 1px 2px 2px rgb(196, 196, 196);
}

.triangle-down_a {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #90b726;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}


/*top video box*/
.kl_topbox_video {
  position: relative;
  font-size: 1.3em;
  font-weight: 500;
  transition: 0.5s;
  width: 100%;
  text-align: center;
  background-image: linear-gradient(to bottom, #c03705, #db7b59, #d56339, #d56339, #d56339, #d56339);
  height: 60px;
  border-radius: 5px 5px 0px 0px;
  line-height: 60px;
  color: rgb(255, 255, 255);
  box-shadow: 1px 2px 2px rgb(196, 196, 196);
}

.triangle-down_v {
  width: 0;
  height: 40px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #da7551;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

/*Total Paid top box*/
.kl_topbox_total_paid {
  position: relative;
  font-size: 1.3em;
  font-weight: 500;
  transition: 0.5s;
  width: 100%;
  text-align: center;
  background-image: linear-gradient(to bottom, #06881d, #16b934, #04a822, #04a822, #04a822, #04a822);
  height: 60px;
  border-radius: 5px 5px 0px 0px;
  line-height: 60px;
  color: rgb(255, 255, 255);
  box-shadow: 1px 2px 2px rgb(196, 196, 196);
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #04a822;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

/* Leav Status class**/
.kl_topbox_leavestatus {
  position: relative;
  font-size: 1.3em;
  font-weight: 500;
  transition: 0.5s;
  width: 100%;
  text-align: center;
  background-image: linear-gradient(to bottom, #0d728e, #28b1d7, #0f9dc4, #0f9dc4, #0f9dc4, #0f9dc4);
  height: 60px;
  border-radius: 5px 5px 0px 0px;
  line-height: 60px;
  color: rgb(255, 255, 255);
  box-shadow: 1px 2px 2px rgb(196, 196, 196);
}

.triangle-down_leave {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #0f9dc4;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}


/*######################################################*/
/* view apply depart by student after submit form*/
.apply_dept_view_div {
  position: relative;
  font-weight: 500;
  transition: 0.5s;
  width: 100%;
  height: 60px;
  line-height: 40px;
}

.apply_dept_status {
  display: none;
  position: fixed;
  width: 40%;
  height: auto;
  background: rgb(246, 246, 246);
  top: 190px;
  padding: 0 20px 20px 20px;
  box-shadow: 0px 5px 5px gray;
  border-radius: 0px 0px 10px 10px;
  z-index: +1;
  margin-top: 40px;
}

.apply_dept_status button {
  height: 50px;
  width: 50px;
  top: -2px solid red;;
  left: 9px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}

.apply_dept_status table {
  width: 100%;
  float: left;
  position: relative;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(194, 204, 238);
  text-align: left;
}

.apply_dept_status table th {
  border: 1px solid rgb(194, 204, 238);
  text-align: left;
  padding: 5px;
}

.apply_dept_status table td {
  border: 1px solid rgb(194, 204, 238);
  text-align: left;
  padding: 5px;
}

.apply_dept_status button {
  height: 50px;
  width: 50px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}

.apply_dept_status button i {
  text-align: center;
  height: 30px;
  width: 30px;
  cursor: pointer;
  font-size: 18px;
}

.kl_db_card span button {
  border: none;
  background: rgb(255, 255, 255);
  height: 40px;
  width: 100px;
  line-height: 40px;
  border-radius: 10px;
  font-size: 16px;
  margin-left: -50px;
  color: blue;
  font-weight: 600;
  box-shadow: inset -3px -3px 15px #0564fe77;
}

.app_view_icon span button {
  border: none;
  background: rgb(255, 255, 255);
  height: 40px;
  width: 100px;
  color: #0345d3;
  line-height: 40px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: inset -3px -3px 15px #0564fe77;
  cursor: pointer;
  margin-left:-50px;

}
.app_view_icon_dif span button{
   background: rgb(255, 255, 255);
  height: 40px;
  width:130px;
  color: #0345d3;
  line-height: 40px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset -3px -3px 15px #0564fe77;
  cursor: pointer;
  margin-left:-60px;
  border:none;
}

.app_view_icon span button a {
  color: rgb(15, 15, 221);
}

.app_view_icon_dif span button a {
  color: rgb(15, 15, 221);
}


.button_style{
  border: none;
  background: rgb(255, 255, 255);
  height: 40px;
  width: 100px;
  color: #0345d3;
  position: relative;
  line-height: 40px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: inset -3px -3px 15px #0564fe77;
  cursor: pointer;
}

.kl_db_cardBox .kl_db_card .kl_db_status {
  position: relative;
  font-size: 1.1em;
  font-weight: 500;
  padding: 2px solid red;;
  color: rgb(6, 135, 19);
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 2px 10px;
  width: 100%;
  transition: 0.5s;
}

.kl_db_cardBox .kl_db_card .kl_db_leave_status {
  position: relative;
  font-size: 1em;
  font-weight: 500;
  padding: 2px solid red;;
  color: rgb(6, 135, 19);
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 2px 10px;
  width: 100%;
  transition: 0.5s;
}

.kl_db_cardBox .kl_db_card .kl_db_iconBox {
  position: relative;
  font-size: 2em;
  font-weight: 500;
  transition: 0.5s;
  color: rgb(21, 94, 221);
}

.details {
  position: relative;
  width: 100%;
  display: grid;
  grid-gap: 20px;
  background: rgb(228, 227, 227);
  grid-template-columns: 2fr 1fr;
}

.details .student_status {
  position: relative;
  display: grid;
  min-height: 50px;
  padding: 10px 0px 0px 10px;
  line-height: 20px;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cardHeader h2 {
  font-weight: 600px;
  background: var(--title-header);
  border-radius: 5px 5px 0px 0px;
  width: 100%;
  color: white;
  padding: 10px;
  box-shadow: 0px 2px 2px rgb(190, 188, 188);
  text-align: center;
  font-size: 25px;
}

.btn {
  position: relative;
  padding: 5px 10px;
  background: #03a9f4;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  outline: none;
  box-shadow: 1px 3px 4px rgb(195, 193, 193);
  cursor: pointer;
  font-size: 15px;
}

/*view total apply applicaton details*/
.view_apply_container {
  /*view apply department list*/
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  width: 50%;
}

.view_apply_box_cotainer {
  /*view apply department list*/
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.5s;
  background: rgba(0, 0, 0, .3);
  transform: scale(0);
  z-index: +1;
}

.view_apply_openform_div {
  /*view apply department list*/
  height: auto;
  width: 50%;
  margin: 0px 10px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  position: relative;
  z-index: +1;
}

/*end View total apply application details*/

/*****View application form by studente after submit****(admin form)*/

.view_app_container {
  height: 100%;
  width: 99%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}

.button_close {
  background: #FF6721;
  height: 50px;
  width: 50px;
  top: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  color: rgb(254, 254, 254);
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}

.view_app_container i:hover {
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}

.view_app_container {
  padding: 0px 20px 5px 20px;
  box-shadow: 2px 3px 5px rgb(160, 158, 156), -2px -2px 5px rgb(162, 164, 166);
  border-radius: 5px;
  height: 1800px;
  font-size: 14px;
  margin-top: 91px;
}

.header_view_app {
  position: relative;
  line-height: 100px;
  font-size: 20px;
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  color: var(--left-menu-font-color);
  text-align: center;
  font-weight: bold;
  background-image: linear-gradient(to right, #efefef, #faf4f4, #faf4f4, #f3f3f3);
  box-shadow: 2px 1px 15px rgb(228, 228, 229);
  text-shadow: 1px 3px 2px rgb(220, 218, 218);
  margin-bottom: 70px;
}

.header_view_app .form_logo {
  position: relative;
  float: left;
}

.header_view_app p {
  font-size: 25px;
}
.contact-user-profile{
  padding:15px;
 }

 .contact_profile{ /**ribbon for add hod profile*/
  font-size: 18px;
  color: #FFf;
  width:380px;
  background: #0a76f9d9;
  text-align: center;
  z-index:+1;
  left:-7px;
  position:relative;
  padding: 0 0.5em;
  font-size:1.5.000em;
  margin: 0 0 0 -0.625em;
  line-height: 1.875em;
  border-radius:1px;
  box-shadow: -1px 2px 13px rgba(0,0,0,0.5);
  margin-bottom:10px;
}

.contact_profile:before, .contact_profile:after{/*ribbon for add hod profile*/
  position:absolute;
  content: '';
  display: block;
}

.contact_profile:before{/*ribbon for add hod profile*/
  width: 0.469em;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -0.469em;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.contact_profile:after{/*ribbon for add hod profile*/
  width: 0.313em;
  height: 0.313em;
  background: rgba(0,0,0,0.35);
  bottom: -0.313em;
  left: -0.313em;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}
/*yearly income record*/
.user_form_wraper2{
 position: relative;
 width: 100%;
 padding: 5px;
 top:40px;
 }


 .user_form_wraper2 table {
  width: 100%;
  border-collapse: collapse;

 }
 .user_form_wraper2 table thead tr th{
  border:1px solid rgb(215, 216, 216);
  color:#fff;
  height: 40px;
  text-align: left;
  padding:3px;
  border-radius:5px 5px 0px 0px;
 }

 .user_form_wraper2 table tbody tr td{
  border:1px solid rgb(215, 216, 216);
  height: 40px;
  padding:3px;
  box-shadow: 2px 3px 5px rgba(220, 218, 218, 0.3);
 }

 .user_form_wraper2 table tbody tr td i{
  color: red;
  padding-left: 10px;
  font-size: 20px;
 }
 .header_design{
  background-color: #028fb6;

 }
h6 {
  /*CLINICAL ELECTIVE APPLICATION FORM*/
  font-size: 20px;
  padding: 20px 20px 20px 0px
}

.form_logo img {
  top: 15px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  position: relative;
  box-shadow: 5px 5px 5px rgb(229, 226, 226);
}

.view_app_container label {
  width: 100%;
}

.view_app_container span {
  padding: 10px;
  width: 100%;
  font-size: 14px;
  border: 1px solid rgb(239, 237, 237);
  display: block;
  margin-bottom: 20px;
  border-radius: 2px solid red;;
  background: #fefefe;
  box-shadow: inset 1px 1px 1px #cdced1, inset -1px -1px 1px #fff;
}

.view_app_button {
  position: relative;
  border: none;
  font-size: 14px;
  border-radius: 50%;
  color: #fff;
  background: #ff6721;
  float: right;
  height: 50px;
  width: 50px;
  z-index: +9;
  top: 60px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #b8c0f1;
}

.view_app_button:hover {
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}

.view_app_button:hover {
  background: var(--bottom-hover);
  transition: 0.5s;
  padding: 10px;
  cursor: pointer;
}

.view_app_container span i {
  padding: 0px 10px 0px 10px;
  background: rgb(241, 241, 241);
  border-radius: 0px 20px 0px;
  color: rgb(90, 150, 252);
}

.view_app_container select {
  float: left;
  width: 100%;
  border-radius: 30%;
}

/*end view application form */

/*******************************************************************/

.view_app_form {
  /*view application div for student admin*/
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2fr, 1fr);
  grid-gap: 10px;
  transition: 0.7s;
  background: #1581b0;
  margin-bottom: 0px;
}

.view_app_form .view_app_form_body {
  position: relative;
  display: grid;
  min-height: 40px;
  background: rgb(255, 255, 255);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 2px solid red;;
  box-shadow: 0px 1px 3px rgb(185, 179, 179);
  line-height: 40px;
}

.view_app_form .view_app_form_body span {
  color: rgb(17, 65, 221);
  text-align: center;
  width: 120px;
  border-left: 1px solid rgb(209, 207, 207);
  padding-left: 5px;
}

.view_app_form .view_app_form_body button {
  padding: 7px;
  margin-left: 5px;
  outline: none;
  border: none;
  background: #2e8bdc;
  border-radius: 20px 0px 20px 0px;
  font-size: 16px;
  cursor: pointer;
  width: 80px;
  color: #fff;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
}

.view_app_form .view_app_form_body button:hover {
  background-color: var(--bottom-hover);
}

.view_app_form .view_app_form_body:hover {
  background: #dfe6f1;
}

/*submitted  application form view (student admin form )*/
/*Application  fomr*/
.container_application {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  transition: 0.7s;
}

.container_application_sub {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
  transform: scale(0);
  z-index: +1;
}

.container_application_form_div {
  height: 100vh;
  width: 100%;
  margin: 0px 10px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  position: relative;
  overflow: scroll;
}

.student_view_application {
  position: relative;
  line-height: 100px;
  font-size: 20px;
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to right, #fdfdfd, #dcf6fd, #ffffff);
  margin-bottom: 10px;
  border-radius: 0px 0px 30px 30px;
  text-shadow: 1px 2px 3px rgb(18, 153, 231);
  margin-bottom: 70px;
  font-weight: 700;
}

.student_view_application i {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 15px;
}

.close_button {
  display: inline;
  height: 50px;
  width: 50px;
  line-height: 45px;
  top: 50px;
  margin-right: 5px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}

.application_body {
  padding: 0px 20px 5px 20px;
  box-shadow: 2px 3px 5px rgb(160, 158, 156), -2px -2px 5px rgb(162, 164, 166);
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  height: 1800px;
  text-align: left;
  margin-top: 20px;
}

.student_view_application .form_logo {
  position: relative;
  float: left;
}

.student_view_application p {
  font-size: 25px;
  text-align: center;
}

h6 {
  /*CLINICAL ELECTIVE APPLICATION FORM*/
  font-size: 20px;
  padding: 20px 20px 20px 0px
}

.form_logo img {
  top: 15px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  position: relative;
  box-shadow: 5px 5px 5px rgb(229, 226, 226);
}

.student_view_application label {
  width: 100%;
  display: block;
}

.student_view_application_body span {
  padding: 10px;
  width: 100%;
  background: rgb(255, 255, 255);
  font-size: 14px;
  border: 1px solid rgb(239, 237, 237);
  display: block;
  margin-bottom: 20px;
  border-radius: 2px solid red;;
  background: #fefeff;
  box-shadow: inset 1px 1px 1px #cdced1, inset -1px -1px 1px #fff;
}

.application_body span i {
  padding: 0px 10px 0px 10px;
  background: rgb(241, 241, 241);
  border-radius: 0px 20px 0px;
  color: rgb(90, 150, 252);
}

.edit_button {
  display: inline;
  height: 50px;
  width: 50px;
  line-height: 45px;
  font-size: 16px;
  margin-right: 5px;
  position: relative;
  background: #2185ff;
  border-radius: 50%;
  border: none;
  outline: none;
  z-index: +1;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #2167ff;
}

.edit_view_button {
    height: 35px;
    width: 80px;
    line-height: 35px;
    font-size: 14px;
    position: relative;
    background: #fff;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
    color: #088ddf;
     box-shadow: inset -1px -1px 2px #ffffff77,
    1px 1px 7px #2167ff;
  }

  .edit_view_button:hover{
  background:#dfeeff;
  transition: all 0.8s;
  color:#000;
  }
.feedback_page_back_button {
  background: rgb(68, 163, 12);
  height: 40px;
  width: 90px;
  color: #fff;
  top: 20px;
  border: none;
  outline: none;
  left: 50px;
  font-size: 16px;
  line-height: 40px;
  position: relative;
  box-shadow: 3px 3px 5px rgb(166, 165, 165);
}

.feedback_page_back_button i {
  font-size: 20px;
  padding-right: 20px;
}

.feedback_parrent_title1 h3 {
  margin-left: 15px;
  text-align: left;
}

/*add user form*/
/********************start regiatration body********************/


.kl-border-design {
  box-shadow: 0px 0px 20px #3c404a;
  border-radius: 20px 0px 0px 20px;
  min-height: 600px;
  width: 100%;
  padding: 6px 2px 7px 2px solid red;;
  margin-left: 160px;
  background-color: #2157df;
}


.kl-form-border-design {
  background-color: #173c52;
  box-shadow: 0px 0px 20px #6a6b6c;
  padding: 7px 1px 7px 1px;
  border-radius: 5px;
  min-height: 600px;
  width: 100%;
}

.kl-form-title {
  /* for register form title*/
  background-color: var(--form-title-header);
  box-shadow: rgb(177, 168, 174) 0px 20px 30px -10px;
  border-radius: 5px 5px 0px 0px;
  margin-bottom: 15px;
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

.kl-form-sub_title {
  /* sumited application form view*/
  background-color: var(--left-menu-bgcolor);
  box-shadow: rgb(177, 168, 174) 0px 20px 30px -10px;
  border-radius: 5px 5px 0px 0px;
  margin-bottom: 15px;
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 18px;
}

.kl-form-body {
  /*for costomize padding input field */
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ebebf1;
  padding: 10px;
  min-height: 600px;
  border-radius: 30px;
}

.kl-form1-body {
  /*for costomize padding input field */
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ebebf1;
  padding: 10px;
  min-height: 600px;
  border-radius: 30px;
}

.kl-input-form {
  /*costomize field of input padding (keep padding above the name )*/
  width: 100%;
  padding: 20px 5px 5px 5px;
}

.kl-input-form input {
  border: none;
  outline: none;
  background: none;
  color: #555;
  width: 80%;
  font-size: 15px;
  padding: 20px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
}

.kl-input-form i {
  height: 25px;
  margin: 0px 10px -3px 25px;

}

.kl-form-logo {
  /* use for background image shadow with 50% radious*/
  height: 120px;
  width: 120px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: rgb(168, 172, 177) 0px 20px 30px -10px;
  margin-bottom: 10px;
}

.kl-form-logo img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  padding: 7px;
}

.kl-heading {
  /* for register click button page*/
  padding: 10px 15px 15px 15px;
  background-color: #b1ceeb;
  box-shadow: rgb(168, 172, 177) 0px 20px 30px -10px;
  border-radius: 30px;
  margin-bottom: 15px;
  text-align: center;
}

.kl-form-logo img {
  width: 120px;
  border-radius: 50%;
  height: 120px;
}

.style_button {
  height: 40px;
  top:50px;
  position:relative;
  width: 100px;
  border: none;
  outline: none;
  background-color: #077ce9;
  font-size: 16px;
  color: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
}

.style_button1 {
  height: 40px;
  top:80px;
  position:relative;
  width: 100px;
  border: none;
  outline: none;
  background-color: #077ce9;
  font-size: 16px;
  color: #fff;
  float:left;
  border-radius: 5px;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  cursor: pointer;
}



.style_button:hover {
  background-color: #095b92
}

.style_button:active {
  background-color: #158a15;
}

.style_button:active {
  background-color: #158a15;
}
.style_button2 {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 5px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px solid red;;
  cursor: pointer;
}
.page_back_button {
  background: rgb(68, 163, 12);
  height: 30px;
  width: 120px;
  color: #fff;
  border: none;
  outline: none;
  font-size: 16px;
  position: relative;
  top: -45px;
  float: left;

  box-shadow: 3px 3px 5px rgb(166, 165, 165);

}

.page_back_button i {
  font-size: 20px;
  padding-right: 20px;
}

/*End user form*/


/*end sumited application form view (student admin form)*/

/*Update user form*/
/**############################################################***/
/* update user details in setting page (super admin)*/
.user_detail_update {
  width: 98%;
  height: auto;
  background: rgb(255, 254, 254);
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.user_detail_update1 {
  width: 98%;
  background: rgb(255, 254, 254);
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  height: auto;
}

.form_container {
  width: 99%;
  margin-left: auto;
  margin-right: auto;
}

.form_border_design {
  background-color: #eeeeef;
  box-shadow: 0px 0px 10px #6a6b6c;
  padding: 0px 0px 7px 0px;
  border-radius: 5px;
  width: 100%;
  margin-top: 20px;
}


.form_border_design p {
  /*use to update official and  company details ( super admin page)*/
  width: 100%;
  height: 40px;
  background: rgb(0, 149, 255);
  font-size: 25px;
  color: #fff;
  line-height: 40px;
  border-radius: 5px 5px 0px 0px;
}


.form_border_design h3 {
  /*use to updatte company details ( super admin page)*/
  width: 100%;
  height: 40px;
  background: rgb(34, 168, 27);
  font-size: 25px;
  color: #fff;
  line-height: 40px;
  border-radius: 5px 5px 0px 0px;
}

/*left, top right and buttom padding for add and update form of supper admin*/
.form_body {
  /*for costomize padding input field */
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ebebf1;
  padding: 10px 140px;
  border-radius: 30px;
  min-height: 500px;
  /*form height*/
}

.form_body_update {
  /*class for update admin.html */
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ebebf1;
  padding: 10px 80px;
  border-radius: 30px;
  height: 500px;
  /*form height*/
}

.circle {
  height: 90px;
  width: 90px;
  background-color: #0380f4;
  border-radius: 50%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
  line-height: 90px
}

.circle i {
  font-size: 60px;
  height: 90px;
  color: #fff;
  line-height: 90px;
}

.input-form {
  /*costomize field of input padding (keep padding above the name )*/
  width: 100%;
  padding: 20px 5px 5px 5px;
}

.input_form input {
  border: none;
  outline: none;
  background: none;
  color: #555;
  width: 80%;
  font-size: 15px;
  padding: 20px 0px 15px 10px;
  border-top: 0px 2px 4px #5f5f5f;
}

.input_form select {
  border: none;
  outline: none;
  background: none;
  color: #555;
  width: 80%;
  font-size: 15px;
  padding: 20px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
  border-radius: 30px;
}

.username,
/* use for costomize box shadow and border radious of the input field*/
.company_name,
.number,
.password,
.email {
  margin-bottom: 25px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cdced1, inset -8px -8px 8px #fff;
}

.user_update_button:hover {
  background: var(--bottom-hover);

}

/*end update  user form*/

/*update student information */
.update_student_info{
    height: auto;
    border-radius: 5px;
    position: relative;
    }

.update_student_info_form_container{
   width: 98%;
   height: auto;
   margin-left: auto;
   margin-right: auto;
   margin-top: 93px;
   border-radius: 5px 5px 0px 0px;

  }

  .update_student_info_form_container1{ /*update student admin infromation(infomation and contact address box*/
    width: 98%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px 5px 0px 0px;

   }

  .update_student_info_design {
    background: #fff;
    box-shadow: 0px 0px 10px #6a6b6c;
    padding: 0px 0px 7px 0px;
    border-radius: 5px;
    width: 100%;
    margin-top: 20px;
  }

   .update_student_form_body {
    padding: 50px 50px;


  }

  .update_student_input_form {
    /*costomize field of input padding (keep padding above the name )*/
    width:100%;
    margin: 20px 0px;

      }
  .update_student_input_form i{
    padding-left:30px;
  }
  .update_student_input_form input {
    border: none;
    outline: none;
    background: none;
    color: #555;
    width: 80%;
    font-size: 15px;
    padding: 20px 20px 15px 10px;
    border-top: 0px 2px 4px #5f5f5f;
  }

  .username,
  /* use for costomize box shadow and border radious of the input field*/
  .company_name,
  .number,
  .password,
  .email {
    margin-bottom: 25px;
    border-radius: 25px;
    box-shadow: inset 8px 8px 8px #cdced1, inset -8px -8px 8px #fff;
  }






/*End update student information */

/*Add user class (super admin page)*/
.add_user {
  width: 98%;
  height: auto;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
   height:100vh;
}

.add_user_body {
  width: 98%;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  height: auto;
}

.add_user_form_container {
  width: 50%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 93px;
  border-radius: 5px 5px 0px 0px;
}

.add_user_form_border_design {
  background: #eeeeef;
  box-shadow: 0px 0px 10px #6a6b6c;
  padding: 0px 0px 7px 0px;
  border-radius: 5px;
  width: 100%;
  margin-top: 20px;
}

.add_user_form_border_design p {
  width: 100%;
  height: 40px;
  background-image: linear-gradient(to bottom, #0673c0, #49a9ee, #1090ec, #1090ec, #1090ec);
  font-size: 20px;
  color: #fff;
  line-height: 40px;
  border-radius: 5px 5px 0px 0px;
}

.add_user_form_body {
  background: #ecf0f3;
  box-shadow: 0px 0px 20px #ebebf1;
  padding: 15px;
  border-radius: 30px;
  height: 500px;
}

.label_for_addDept {
  /*lable_padding class use to customize pading(line height)*/
  padding: 15px 20px 20px 10px;
  color: #0a4058;
  font-weight: 500;
  float: left;
}

/*End Add user class (super admin page)*/

/*information section for studen admin section(index)*/

.info_div {
  width: 97%;
  min-height: 400px;
  background: #fff;
  position: relative;
  margin-left: 10px;
  top: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: 3px 3px 2px rgb(181, 181, 181),
    -2px -1px 5px rgb(255, 255, 255),
    inset 3px 3px 2px rgb(189, 188, 188);
}

.info_div_body {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 40px 15px 0px 10px;
  text-align: justify;
  padding-left:50px;
  }
.info_div_body_c{
  width: 100%;
  height: 100%;
  position: relative;
  padding: 40px 15px 0px 0px;
  text-align: justify;
  padding-left:0px;

}
.info_div_body_c p{
display:flex;

}

.info_div_body_c i {
  padding-left:15px;
  font-size:16px;
}

.info_div_body_c h3{
font-size: 16px;
color: rgb(30, 57, 213);
text-align: left;
padding: 10px;
}
.info_div_body i{
  padding-left:12px;

 }

.info_div_body h3 {
  font-size: 16px;
  color: rgb(30, 57, 213);
  text-align: left;
  padding: 10px;
  left:-45px;
  position: relative;

}

.info_div_body table {
  width: 100%;
}

.info_div_body table tbody tr td:nth-child(1) {
  width: 10px;
  background: #fdfefe;
}



.info_div_body table tr td {
  border: 1px solid rgb(244, 242, 242);
  top: 40px;
  background: rgb(250, 251, 251);
}

.info_div_body p {
  line-height: 30px;
  font-size: 16px;
}

/* Fee structure */
.info_div_title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to bottom, #0673c0, #49a9ee, #1090ec, #1090ec, #1090ec);
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 18px;
  border-radius: 5px 5px 0px 0px;
}

/*Hospital Information*/
.info_div_title2 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to bottom, #054ade, #447df8, #175cf1, #175cf1, #175cf1);
  text-align: center;
  color: rgb(253, 253, 253);
  font-size: 18px;
  border-radius: 5px 5px 0px 0px;
}

  .add_dept_box{/*Add new department (for Elective admin)*/
  position: relative;
  margin-top:100px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  text-align:center;
  padding:50px;
  }
  
   .dept_box{ /*Add new department (for Elective admin)*/
   background: rgb(215, 228, 250);
   width:100%;
   min-height: 260px;
   border-radius: 5px 5px 0px 0px ;
   box-shadow: 3px 3px 20px rgba(0,0,0,0.3);
   text-align:center;
   display:flex;
   align-content:space-between;
    }


/*******Edit department list***************************************************/
  .add_dept_box1{/*Edit department (for Elective admin)*/
  position: relative;
  width: 100%;
  text-align:center;
  padding:50px;
  left:0;
  top:0;
  margin:0 auto;
}
  
   .dept_box1{ /*Edit  department (for Elective admin)*/
   background: rgb(215, 228, 250);
   width:100%;
   min-height: 260px;
   border-radius: 5px 5px 0px 0px ;
   box-shadow: 3px 3px 20px rgba(0,0,0,0.3);
   text-align:center;
   align-content:space-between;
   display:flex;
   padding:15px;
    }
    
  .dept_box1 input[type="text"]{
      width:100%;
      border:none;
      outline:none;
      border-radius:10px;
      padding:10px;
      box-shadow: 3px 6px 4px 5px rgba(0,0,0,0.3);
      
  }
    
    .dept_box1 h2{
     width:100%;
     text-align:center;
     color:red;
     display:block;
     justify-content:center;
     padding:2px solid red;;
     font-size:16px;
    }

/*******End Edit department list***************************************************/

 .dept_box h3{
 background-color: #fa2f0b;
 padding:10px;
 color: #fff;
 text-align: center;
 border-radius: 5px 5px 0px 0px ;

 }
 .dept_box label{
 top:25px;
 position:relative;
 left: 10px;
 color:#04035a;
 }
 
 .dept_box input{
 padding: 10px;
 border-radius:5px;
 width: 90%;
 border: none;
 position: relative;
 outline:1px solid#028fb6;
 margin-top:40px;
 position: relative;
 margin-left: auto;
 margin-right: auto;
 box-shadow: 3px 3px 20px rgba(0, 0, 0, .3);

  }

.dept_box input:hover{
width:90%;
transition: 0.7s;
outline-color: blue;
}
.dept_box select{
 width:90%;
 position:relative;
 bottom: 10px;
 padding:10px;
 margin-right:auto;
 margin-left:auto;
 margin-top:20px;
}

.dept_box button{
 position:relative;
 text-align:center;
 display:flex;
}




/*Contact Address*/
.info_div_title3 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to bottom, #c09807, #edc534, #deae03, #deae03, #deae03);
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 18px;
  border-radius: 5px 5px 0px 0px;
}

/*accommodation*/
.info_div_title4 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to bottom, #474646, #837171, #6d6464, #6d6464, #6d6464);
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 18px;
  border-radius: 5px 5px 0px 0px;
}

.info_div_title i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: #fffefb;
  border-radius: 50%;
  font-size: 16px;
  color: #230a94
}

.info_div_title2 i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: #ffffff;
  border-radius: 50%;
  font-size: 16px;
  color: #ff0a0a;
  margin-right: 5px;
}

.info_div_title3 i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background-color: #fcfcfc;
  border-radius: 50%;
  font-size: 16px;
  color: rgb(2, 30, 210);
  margin-right: 5px;
}

.info_div_title4 i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: #fffefb;
  border-radius: 50%;
  font-size: 16px;
  color: #0345d3;
  margin-right: 5px;
}

.view_info_i i {
  height: 39px;
  width: 39px;
  line-height: 39px;
  font-size: 20px;
  text-align: center;
  background: #ffffff;
  border-radius: 50%;
  color: rgb(13, 54, 235);

  }

.info_i p{
 display:block;
 position: relative;
 text-indent: -25px;
 line-height: 23px;



}
.info_i i{
  padding-right:10px;
}

.info_i i i{
padding-left: 20px;
color:red;
}
/*view application status*/

.view_app_status {
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  margin-top:91px;
}

/*View accepted letter deatails*/

.view_accepted_letter {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2fr, 1fr);
  grid-gap: 10px;
  transition: 0.6s;
}

.view_accepted_letter_body {
  position: relative;
  display: grid;
  min-height: 40px;
  background: rgb(255, 255, 255);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 2px solid red;;
  box-shadow: 0px 1px 3px rgb(185, 179, 179);
  line-height: 40px;
}

.view_accepted_letter_body span {
  color: rgb(17, 65, 221);
  text-align: center;
  padding-left: 5px;
  width: 120px;
  border-left: 1px solid rgb(209, 207, 207);
}

.view_accepted_letter_body button {
  padding: 7px;
  margin-left: 5px;
  outline: none;
  width: 80px;
  border: none;
  background: rgb(23, 91, 208);
  font-size: 16px;
  cursor: pointer;
  border-radius: 20px 0px 20px 0px;
  color: #fff;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
}

.view_accepted_letter_body button:hover {
  background-color: var(--bottom-hover);
}

.view_accepted_letter_body:hover {
  background: #dfe6f1;
}


/******End view accepted lettter*************************/


/************Cancel Div************************************/
.placement_cancel {
  width: 100%;
  height: 80px;
  display: blcok;
  background: rgb(235, 234, 234);
  box-shadow: 1px 1px 15px rgb(165, 165, 172);
  margin-bottom: 30px;
  border-radius: 5px;
  padding: 10px;
  color: rgb(10, 51, 117);
  font-size: 18px;
}

.cancel_button {
  position: relative;
  background: #FF6721;
  border: none;
  height: auto;
  width: 100px;
  line-height: 40px;
  text-align: center;
  outline: none;
  cursor: pointer;
  top:20px;
  margin-bottom:10px;
  color: #fff;
  right: -5px;
  border-radius: 30px 0px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #92ccff;
}


.cancel_button:hover {
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
    }


/********Add department div***************************/

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background: rgb(237, 110, 13);
  padding: 16px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  border-radius: 20px;
  float: right;
}

.leave_app_form_body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 70%;
  position: relative;
  margin-left: 10px;
  box-shadow: 2px 3px 12px gray;
  margin-top: 75px;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}

.add_dept_form_body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 70%;
  position: relative;
  margin-left: 10px;
  box-shadow: 2px 3px 12px gray;
  margin-top: 91px;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}


.add_dept_form_body_style_sub {
  width: 100%;
}

.add_dept_form_body_style {
  height: 100%;
  width: 100%;
  padding: 10px 20px;
  background: #ecf0f3;
  border-radius: 5px;
  text-align: left;
  position: relative;
}


.add_form_heading {
  background-image: linear-gradient(to top, #178ef7, #178ef7, #178ef7, #44a3f7, #0d80f4);
  text-align: center;
  width: auto;
  color: #fff;
  padding: 10px;
  font-size: 18px;
  margin-bottom: 20px;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 3px 3px 8px #9f9d9d, -3px -3px 8px #fff;
}

.add_form_heading i{
  width: 30px;
  height: 30px;
  background:  #fff;
  border-radius:50%;
  color:#00a0f6;
  line-height: 30px;
}
#submit {
  width: 100px;
  height: 40px;
  line-height: 40px;
  border: none;
  outline: none;
  color: #fff;
  display: inline-block;
  background: #0a76dc;
  border-radius: 30px 0px;
  position: relative;
  box-shadow: inset -1px -1px 5px #9cb2fb,
    3px 3px 20px #00000057;
  margin-bottom: 50px;
  top:20px;
  
  

}

#submit:hover {
  background: #03517b;
  border-radius: 30px 0px;
  color: #fff;
  font-size: 14px;
  box-shadow: inset -1px -1px 1px #ffffff77,
    3px 3px 20px #0c90d7;
}

.add_close_button {
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  height: 55px;
  width: 55px;
  line-height: 55px;
  text-align: center;
  outline: none;
  cursor: pointer;
  color: #fff;
  float: right;
  z-index: +1;
  top: -55px;
  right: -5px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #92ccff;
}

.add_close_button:hover {
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}

.add_form_field {
  width: 100%;
  padding: 0px 5px 5px 5px;
}

.add_form_field i {
  height: 22px;
  line-height: 50px;
  margin: 0 10px -3px 25px;
}

.add_form_field input {
  border: none;
  background: none;
  outline: none;
  color: #555;
  width: 86%;
  font-size: 14px;
  padding: 0px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
}

.add_form_field select {
  border: none;
  outline: none;
  background: none;
  width: 80%;
  padding: 15px;
  font-size: 14px;
  border-radius: 5px;
}
.add_form_field input[type="date"]{
  width:80%;
}



.wrap_textaria {
  max-width: 820px;
  margin: 0px auto;
  margin-top: 5px;

}

.textarea_input {
  float: left;
  width: 100%;
  min-height: 200px;
  outline: none;
  resize: none;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid rgb(22, 139, 235);
}

.add_form_field h3 {
  padding: 5px;
  color: #095b92;
}

.form_body_style button {
  float: right;
  background: #f54e42;
  border: none;
  color: #fff;
  padding: 5px;
  border-radius: 30px;
  box-shadow: 1px 3px 1.5px rgb(229, 140, 140);
}

.input_customize {
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cdced1,
    inset -8px -8px 8px #ffffff;
}

.input_customize_default {
margin-bottom: 30px;
border-radius: 5px;
border: 1px solid #aee2f5;
}

.input_customize_default1{/* update student admin page information details*/
margin-bottom: 30px;
border-radius: 5px;
border: 1px solid #0a80ef;
height: 100px;
}
/* Add some hover effects to buttons */

.form-container .btn:hover,
.open-button:hover {
  opacity: 1;

}

.sucess_message {
  width: 80%;
  padding: 20px;
  background: #4b63ee;
  color: #fff;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  text-align: center;
  border-radius: 10px;
  display: none;
}

/******end Add department section*******/

/******add document  div**************/
/********Add document department div***************************/

.add_document_div {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2fr, 1fr);
  transition: 0.7s;
  background: #fff;
}

.add_document_div .add_document_div_body {
  position: relative;
  display: grid;
  min-height: 40px;
  line-height: 40px;
  background: rgb(255, 255, 255);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 2px solid red;;
  box-shadow: 0px 1px 3px rgb(185, 179, 179);
  line-height: 40px;
}

.add_document_div .add_document_div_body span {
  text-align: center;
  width: 120px;
  padding-left: 5px;
  border-left: 1px solid rgb(209, 207, 207);
}

.add_document_div_body span i {
  line-height: 30px;
}

.add_document_div .add_document_div_body button {
  padding: 7px;
  margin-left: 5px;
  outline: none;
  border: none;
  background: rgb(23, 91, 208);
  font-size: 16px;
  cursor: pointer;
  width: 80px;
   border-radius: 20px 0px 20px 0px;
  color: #fff;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
}

.add_document_div .add_document_div_body button:hover {
  background-color: var(--bottom-hover);
}

.add_document_div .add_document_div_body:hover {
  background: #dfe6f1;
}

/*Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background: rgb(237, 110, 13);
  padding: 16px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  border-radius: 20px;
  float: right;
}

.add_doc_container {
  /*add cocument container*/
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 50%;
}

.add_doc_form_body {
  /*add cocument container*/
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
  transform: scale(0);
  z-index: +1;
}

.add_doc_body_style {
  /*add cocument container*/
  height: 350px;
  width: 40%;
  padding: 20px;
  background: #ecf0f3;
  border-radius: 5px;
  text-align: center;
  position: relative;
  text-align: left;
}

.add_document_div_form_heading {
  /*add cocument container*/
  background-color: var(--title-header);
  text-align: center;
  width: 100%;
  color: #fff;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  font-size: 20px;
  border-radius: 20px 20px 0px 0px;
  box-shadow: 5px 5px 8px #b1b1b1, -15px -3px 15px #fff;
}

.ad_close_button {
  /* add document close button*/
  height: 50px;
  width: 50px;
  line-height: 50px;
  margin-right: 5px;
  text-align: center;
  position: relative;
  background: #FF6721;
  top: -43px;
  margin-right: -6px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}

.ad_close_button i {
  /* add document close button*/
  font-size: 12px;
}

.ad_close_button:hover {
  /* add document close button*/
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}
/********end document div**************/


/************************start leave aplication  from**************************/
.app_leave_div {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1fr 1fr);
  transition: 0.7s;
}

.app_leave_div_body {
  position: relative;
  display: grid;
  min-height: 40px;
  background: rgb(255, 255, 255);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 2px solid red;;
  box-shadow: 0px 1px 3px rgb(185, 179, 179);
  line-height: 40px;
}

.app_leave_div_body span {
  color: rgb(17, 65, 221);
  text-align: center;
  width: 120px;
  padding-left: 5px;
  border-left: 1px solid rgb(209, 207, 207);
}

.app_leave_div .app_leave_div_body span i {
  line-height: 40px;
}

.app_leave_div .app_leave_div_body button {
  padding: 7px;
  margin-left: 5px;
  outline: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  width: 80px;
  border-radius: 20px 0px 20px 0px;
  color: #fff;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
}


.app_leave_div .app_leave_div_body button:hover {
  background-color: var(--bottom-hover);
}

.app_leave_div .app_leave_div_body:hover {
  background: #dfe6f1;
}

.leave_form_heading {
  background-color: var(--title-header);
  text-align: center;
  width: 100%;
  color: #fff;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  font-size: 24px;
  border-radius: 20px 20px 0px 0px;
  box-shadow: 5px 5px 8px #b1b1b1, -15px -3px 15px #fff;
}

.leave_container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  z-index: +1;
}


.leave_form_body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
  transform: scale(0);
  z-index: +1;
}


.leave_form_body_style {
  width: 60%;
  height: 60vh;
  padding: 20px;
  background: #ecf0f3;
  position: relative;
  border-radius: 30px;
  z-index: +1;
  overflow: scroll;
}

.leave_form_field {
  width: 100%;
  padding: 5px 5px 5px 5px;
}

.leave_close_button {
  display: inline;
  height: 50px;
  width: 50px;
  margin-right: 5px;
  position: relative;
  background: #FF6721;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  float: right;
  top: -43px;
  right: -12px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
}

.leave_close_button i {
  font-size: 12px;
}

.leave_close_button:hover {
  background: #0c90d7;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}

.leave_form_field i {
  height: 22px;
  line-height: 50px;
  margin: 0 10px -3px 25px;
}

.leave_form_field input {
  border: none;
  background: none;
  outline: none;
  color: #555;
  width: 80%;
  font-size: 14px;
  padding: 0px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
}

.leave_form_field select {
  border: none;
  outline: none;
  background: none;
  width: 90%;
  padding: 15px;
  font-size: 14px;
  color: rgb(128, 126, 126);
}

.leave_submit_button {
  height: 40px;
  line-height: 40px;
  width: 100px;
  margin: 0px;
  color: blue;
  border: none;
  outline: none;
  display: inline-block;
  background: #f4f5f7;
  border-radius: 30px;
  position: relative;
  box-shadow: inset -3px -3px 5px #9cb2fb,
    3px 3px 25px #00000057;
}

.leave_submit_button:hover {
  height: 40px;
  line-height: 40px;
  display: inline-block;
  background: #0c90d7;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
}

.label_padding {
  /*lable_padding class use to customize pading(line height)*/
  padding: 15px 20px 20px 10px;


}

.input_customize {
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cdced1,
    inset -8px -8px 8px #ffffff;
}
/* modal form*/

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Add some hover effects to buttons */

.form-container .btn:hover,
.open-button:hover {
  opacity: 1;

}
.btn:hover {
  background: green;
}
/************end leave application**********/

/* feedback form  for student Admin (this form use bystudent )*/


.feedback_form_body {
  width: 90%;
 height: 1350px;
  margin-top: 93px;
  background: #ecf0f3;
  margin-right: 40px;
  margin-right:auto;
  margin-left:auto;
  box-shadow: 1px 2px 10px gray;
  }

.feedback_div_body {
  position: relative;
  display: grid;
  min-height: 40px;
  background: #ecf0f3;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 2px solid red;;
  box-shadow: 0px 1px 3px rgb(185, 179, 179);
  line-height: 40px;
}

.feedback_div_body a {
  color: #fff;
}

.feedback_div .feedback_div_body span {
  color: rgb(17, 65, 221);
  text-align: center;
  width: 120px;
  border-left: 1px solid rgb(209, 207, 207);
  padding-left: 5px;
}

.feedback_div .feedback_div_body button {
  padding: 7px;
  margin-left: 5px;
  outline: none;
  border: none;
  background: #2e8bdc;
  border-radius: 20px 0px 20px 0px;
  font-size: 16px;
  cursor: pointer;
  width: 80px;
  color: #fff;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
}

.feedback_div .feedback_div_body button:hover {
  background-color: var(--bottom-hover);
}

.feedback_div .feedback_div_body:hover {
  background: #dfe6f1;
}


.feedback_form_body_style {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
  background: #0496ff;
}

.form_title {
  /* feedback form for sutdent admin(use for student) */
  width: 98%;
  height: 15px;
  margin-right: auto;
  margin-left: auto;
  line-height: 15px;
  border-radius: 30px 30px 0px 0px;
  font-weight: bold;
  text-align: center;
  font-size: 25px;
  margin-bottom: 5px;
  color: #fff;
  }

.form_field {
  /* feedback form for sutdent admin(use for student) */
  width: 98%;
  padding: 0px;
  margin-top: 20px;
  }

.form_field i {
  /* feedback form for sutdent admin(use for student) */
  height: 22px;
  line-height: 50px;
  margin: 0 10px -3px 25px;
  }

.form_field p {
  /* feedback form for sutdent admin(use for student) */
  margin-top: -15px;
  margin-left: 40px;
  padding: 0px 15px 15px 18px;
  color: rgb(6, 6, 28)
  }

.form_field input {
  /* feedback form for sutdent admin(use for student) */
  border: none;
  background: none;
  outline: none;
  color: rgb(122, 118, 118);
  width: 80%;
  font-size: 14px;
  padding: 0px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
  }

.form_field select {
  /* feedback form for sutdent admin(use for student) */
  border: none;
  outline: none;
  background: none;
  border-radius: 30px;
  width: 85%;
  padding: 15px;
  font-size: 14px;
  color: rgb(122, 118, 118);
  }

.form_field label {
  /* feedback form for sutdent admin(use for student) */
  padding: 10px;
  text-align: justify;
  display: block;
  }

.form_field h3 {
  /* feedback form for sutdent admin(use for student) */
  padding: 5px;
  color: #095b92;
  }

  .wrap_feedback_table {
  /*to coustomize display and padding inside of the input field (with five types of chckbox field)*/
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  position: relative;
  }

.wrap_feedback_table span {
  /*to coustomize display and padding inside of the input field*/
  display: inline-block;
  position: relative;
  font-size: 13px;
  margin: 0px;
  width: 100%;
  }

/* feedback form for sutdent admin(use for student) */
.input_customize {
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cdced1,
    inset -8px -8px 8px #ffffff;
}

.wrap_feedback_textaria {
  width: 100%;
  margin: 0px auto;
  }

.wrap_feedback_textaria1{
  margin-bottom:10px;
  }

.wrap_feedback_textaria1 {
  width: 100%;
  margin: 0px auto;
  margin-left: 20px;
  position: relative;
  }

.wrap_feedback_textaria_input {
  float: left;
  width: 100%;
  min-height: 60px;
  outline: none;
  resize: none;
  border: none;
  padding: 20px;
  border-radius: 30px;
  box-shadow: inset 8px 8px 8px #cdced1,
  inset -8px -8px 8px #ffffff;
  margin-bottom: 30px;
  }

/* class for notice send page*/
#submit_button {
  height: 40px;
  width: 80px;
  padding: 8px;
  color: rgb(250, 250, 250);
  border: none;
  outline: none;
  background: #3191ff;
  border-radius: 30px;
  position: relative;
  margin-bottom: 50px;
  cursor: pointer;
  float: left;
  top: 10px;
  margin-left: 15px;
  box-shadow: inset -3px 3px 5px #cbd7fc,
  3px 3px 5px #00000057;
  }

#submit_button:hover {
  height: 40px;
  background: #0c90d7;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  box-shadow: inset -3px -3px 5px #ffffff77,
                       3px 3px 15px #0c90d7;
  }

/*animate form*/
::-webkit-file-upload-button:hover {
  background: rgb(37, 150, 190);
}

/*animate  aapilcation pages*/
.animate {
  -webkit-animation: animatezoom 1.2;
  animation: animatezoom 1.3s;
}

@-webkit-keyframes animatezoom {
  from {
    -wekit-transform: scale(0)
  }

  to {
    -wekit-transform: scale(1)
  }
}

.animate_feedback
{
  -webkit-animation: animate_feedback 1.2s;
  animation: animatezoom 1.2s;
}

@-webkit-keyframes animatezoom {
  from {
    -wekit-transform: scale(0)
  }

  to {
    -wekit-transform: scale(1)
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/*end feed bacck from for student admin*/

/***start vew certificate */

.certificate_div {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2fr, 1fr);
  grid-gap: 10px;
  transition: 0.7s;
  background: #1581b0;
  }

.certificate_div .certificate_div_body {
  position: relative;
  display: grid;
  min-height: 40px;
  background: rgb(255, 255, 255);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 2px solid red;;
  box-shadow: 0px 1px 3px rgb(185, 179, 179);
  margin-bottom: 0px;
  line-height: 40px;
  }

.certificate_div .certificate_div_body span {
  color: rgb(17, 65, 221);
  text-align: center;
  width: 120px;
  border-left: 1px solid rgb(209, 207, 207);
  padding-left: 5px;
  }

.certificate_div .certificate_div_body button {
  padding: 7px;
  margin-left: 5px;
  outline: none;
  border: none;
  background: #2e8bdc;
  border-radius: 20px 0px 20px 0px;
  font-size: 16px;
  cursor: pointer;
  width: 80px;
  color: #fff;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
    }

.certificate_div .certificate_div_body button:hover {
  background-color: var(--bottom-hover);
  }

.certificate_div .certificate_div_body:hover {
  background: #dfe6f1;
  }

.view_certificate {
  display: none;
  position: fixed;
  width: 100%;
  z-index: 600;
  height: 100vh;
  display: block;
  padding: 50px;
  margin: 50px;
  top: 200px;
  transition: 0.5s;
  }

.certificate_div_body a {
  color: #fff;
}

/*end add department section******/

************************start right side section ****************************************/ .notice_section {
  /*use in index page of student dashboard page*/
  position: relative;
  width: 100%;
  display: grid;
  grid-gap: 10px;
  transition: 0.7s;
  background: #e4e6e7;
  text-align: center;
  padding-right: 10px;
  margin-top: 10px;
  }

.notice_section h2 {
  position: relative;
  height: 40px;
  width: 100%;
  font-size: 30px;
  text-shadow: 0px 1px 3px rgb(43, 45, 43);
  line-height: 40px;
  text-align: center;
  }

.kl-appform-title-sec h2{
  font-size: 28px; 
}
.notice_section_body {
  position: relative;
  height: 400px;
  background: rgb(250, 250, 250);
  border-radius: 5px;
  margin-right: 10px;
  margin-left: 10px;
  top: 13px;
  border-radius: 5px;
  box-shadow: 3px 3px 2px rgb(181, 181, 181),
    -2px -1px 5px rgb(255, 255, 255),
    inset 3px 3px 2px rgb(189, 188, 188);
  }

.notice_section_body p {
  position: relative;
  background-image: linear-gradient(to bottom, #ff113f, #ff5f3f, #ee2121, #ee2121, #ed1111);
  font-size: 14px;
  color: #EFEEF1;
  text-align: center;
  font-weight: 600;
  border-radius: 5px 5px 0px 0px;
  }

.notice_i i {
  height: 39px;
  width: 39px;
  line-height: 39px;
  font-size: 20px;
  text-align: center;
  margin-right: 5px;
  background: #ffffff;
  border-radius: 50%;
  color: blue;
  }

.notice_section_body_contain ul li {
  font-size: 15px;
  display: block;
  }

.notice_section_body_contain {
  padding: 20px;
  }

/*end notification use  for index page  of student dashboard*/

/*notification class use for add new department of student dashboard*/
.notice_section_add_dept {
  position: relative;
  width: 100%;
  display: grid;
  grid-gap: 10px;
  transition: 0.7s;
  background: #e4e6e7;
  text-align: center;
  padding-right: 10px;
  margin-top: 10px;
  }

.notice_section_add_dept h2 {
  position: relative;
  height: 40px;
  width: 100%;
  font-size: 30px;
  text-shadow: 0px 1px 3px rgb(43, 45, 43);
  line-height: 40px;
  text-align: center;
  }

.notice_section_body_add_dept {
  position: relative;
  height: 400px;
  background: rgb(250, 250, 250);
  border-radius: 5px;
  margin-right: 10px;
  margin-left: 91px;
  top: 20px;
  border-radius: 5px;
  box-shadow: 3px 3px 2px rgb(181, 181, 181),
    -2px -1px 5px rgb(255, 255, 255),
    inset 3px 3px 2px rgb(189, 188, 188);
  }

.notice_section_body_add_dept p {
  position: relative;
  background-image: linear-gradient(to bottom, #ff113f, #f53f3f, #ee2121, #ed1111);
  font-size: 20px;
  color: #efefef;
  text-align: center;
  font-weight: 600;
  border-radius: 5px 5px 0px 0px;
  }

.notice_i i {
  height: 39px;
  width: 39px;
  line-height: 39px;
  font-size: 20px;
  text-align: center;
  margin-right: 5px;
  background: #ffffff;
  border-radius: 50%;
  color: blue;
  }

.notice_section_body_contain_add_dept li {
  font-size: 18px;
  display: block;
  }

.notice_section_body_contain_add_dept {
  padding: 20px;
  }

/*end notication for add new departmnet */

/*********************start new section for video****************/
.video_box_body {
  width: 100%;
  height: auto;
  position: relative;
  top: 100px;

}

.iframe_video_box {
  width: 99%;
  padding-bottom: 50%;
  position: relative;
  height: 0;
  margin-left: 7px;
  margin-bottom: 50px;
  }

.iframe_video_box iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  border-radius: 0px 0px 10px 10px;
  }

.kl_db_videoName h5 {
  text-align: center;
  background: rgb(102, 188, 249);
  border-radius: 10px 10px 0px 0px;
  padding: 10px;
  box-shadow: -1px -5px 10px -1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to bottom, #0673c0, #49a9ee, #1090ec, #1090ec, #1090ec);
  color: white;
  font-size: 18px;
  width: 100%;
  }

/************contact Number*************/
.contact_number {
  display: block;
  left: 400px;
  width: 400px;
  height: auto;
  background: #dcdcf0;
  border-radius: 0px 30px 30px 0px;
  display: none;
  }

.contact_number button {
  display: none;
}

/************End contact Number*************/
/*login form*/
.top-header {
  width: 100%;
  padding: 10px;
  color: #0a578f;
  min-height: 80px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0px 5px 15px gray;
  margin-right: auto;
  margin-left: auto;
}

.top-header img {
  position: relative;
  float: left;
  border-radius: 50%;
}

.kl_form_container {
  width: 100%;
}

/*appplication form*/
/*==========Start application form================*/
.kl-header {
  /*application form header*/
  width: 80%;
  background-color: #0a578f;
  padding: 21px;
  color: white;
  min-height: 140px;
  line-height: 30px;
  text-align: center;
  box-shadow: rgb(46, 72, 46) 0px 15px 25px -10px;
  padding-right: 250px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 100px;
}

.kl-header img {
  position: relative;
  float: left;
  border-radius: 50%;
}

/*class for update application form for admin page*/

.kl-appform-body1 {
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ffffff;
  padding: 6px 1px 7px 2px solid red;;
  border-radius: 20px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  margin-top:100px;
  position:relative;
  margin-bottom: 30px;
}

/*close buton for applicationform (update application page for admin*/
.form_button_close {
  position: relative;
  background: #FF6721;
  z-index: +100;
  height: 50px;
  width: 50px;
  top: 120px;
  right: 160px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  color: #fff;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #ff6721;
  }

.form_button_close a {
  color: #fff;

}

.form_button_close:hover {
  background: #0c90d7;
  height: 50px;
  width: 50px;
  float: right;
  box-shadow: inset -3px -3px 5px #ffffff77,
    3px 3px 15px #0c90d7;
  }

.kl-appform-title-sec1 {
  width: 80%;
  height: 120px;
  position:relative;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
  padding-top: 45px;
  margin-top: 100px;
  font-size: 40px;
  color: #0a578f;
  text-shadow: 1px 2px 4px;
  background-image: linear-gradient(to right, #fbf6ee, #f8f7f5);
  }

.kl-appform-title-sec1 a {
  font-size: 14px;
  }

/*end update appliction form for admin*/

.kl-appform-body {
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ffffff;
  padding: 6px 1px 7px 2px solid red;;
  border-radius: 20px;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  margin-bottom: 30px;
  }

.kl-appform-title-sec {
  width: 80%;
  height: 120px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
  padding-top: 45px;
  margin-top: 91px;
  color: #0a578f;
  background-image: linear-gradient(to right, #fbf6ee, #f8f7f5);
  }

.kl-appform-input-field {
  width: 99%;
  padding: 20px 20px 5px 20px;
  }

.kl-appform-input-field input {
  /*customize app form  input field*/
  border: none;
  outline: none;
  width: 80%;
  background: none;
  color: #555;
  font-size: 15px;
  padding: 20px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
  }


.kl-appfrom-inputpadding-boxshadow {
  /* use for costomize box shadow and border radious of the input field*/
  margin-bottom: 25px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cdced1, inset -8px -8px 8px #fff;
  }

.kl-appfrom-inputpadding-boxshadow select {
  border-radius: 30px;
  border: none;
  background: none;
  width: 80%;
  padding: 20px 10px 15px 20px;
  font-size: 15px;
  outline: #ecf0f3;
  }

.kl-appform-input-field i {
  /*for icon setting*/
  height: 25px;
  margin: 0px 10px -3px 15px;


  }

.kl-appform-col-padding {
  /*make padding inside col- 6 div*/
  padding: 10px;
  }

.kl-name-lable-section {
  color: #173c66;
  font-size: 18px;
  font-weight: bold;
  position:relative;
  bottom:10px;
  }

  .kl-appform-login-checkbox {
  display: flex;
  padding: 15px;
  margin-right: 20px;

}

.kl-appform-leftdiv-input {
  /*class for left div of the input filed */
  margin-top: 13px;
  width: 100%;
  padding-left: 1px;
  margin-left: 1px;

}

.kl-appform-leftdiv-input li {
  /*class for left div of the input filed */
  margin-top: 25px;
  list-style: none;
  }

.kl-appform-send-button {
  outline: none;
  border: none;
  cursor: pointer;
  width: 20%;
  height: 45px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 700px;
  color: #fff;
  text-align: center;
  background-color: #02c8db;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
  }

.kl-appform-send-button:hover {
  background-color: #095b92;
  }

.kl-appform-send-button:active {
  background-color: #158a15;
  }

.kl-appform-file {
  font-size: 20px;
  background-color: white;
  border-radius: 30px;
  outline: none;
  width: 100%;
  }

::-webkit-file-upload-button {
  color: white;
  background: #1581b0;
  padding: 5px;
  border: none;
  border-radius: 30px;
  box-shadow: 1px0px 1px 1px black;
}

::-moz-file-upload-button {
  color: white;
  background: #1581b0;
  padding: 5px;
  border: none;
  border-radius: 30px;
  box-shadow: 1px 0px 1px 1px black;
}

::-o-file-upload-button {
  color: white;
  background: #1581b0;
  padding: 5px;
  border: none;
  border-radius: 30px;
  box-shadow: 1px 0px 1px 1px black;
}

::-webkit-file-upload-button:hover {
  background: rgb(37, 150, 190);
}
.payment_details{
  position: relative;
  top:91px;
  width: 80%;
  min-height: 600px;
  margin-left:auto;
  margin-right:auto;
  background:#ffffff;
  transition: 0.6s;
  box-shadow: 3px 3px 4px rgb(187, 186, 186),
              -3px -3px 2px rgb(221, 230, 230);
  padding:15px;
  border-radius: 5px;


  }
.payment_details ul{
  display: flex;
}
.payment_details img{
  position: relative;
  height: 100px;
  width: 100px;
  border-radius:50%;
  box-shadow: -2px -3px 5px #c1bebe, 2px 3px 15px #b9b7b7;
 }
 .payment_details_table{/*payment derails page class*/
width: 100%;
position:relative;
top:50px;
height: auto;
background-color: #fafafa;

}

.payment_details_table table{/*payment derails page class*/
width: 100%;
border-collapse: collapse;

}
.payment_details_table table tr th{/*payment derails page class*/
  width: 5%;
  height: 35px;
  text-align: left;
  padding-left:5px;
  background-image:linear-gradient(to top, #022e4e,  #022e4e,  #022e4e);
  border:1px solid rgb(211, 211, 250);
  color:#fff;

  }

  .payment_details_table table tbody tr td {/*payment derails page class*/
    width: 5%;
    height: 30px;
    padding-left:5px;
    border:1px solid rgb(208, 210, 213);
    border-radius:5px;
    }
    .payment_header{
 width: 80%;
 position:relative;
 text-align: center;
 font-size:17px;
 color: #120af2;
 text-transform:uppercase;
 font-weight: 700;
 line-height: 25px;
  }
    .payment_header_wrapper{
  background-color: #fefefe;
  box-shadow: -5px 5px 20px rgba(0,0,0,0.1);
  border-radius:10px;
  line-height: auto;
  padding:10px;
 }

/*****************end application form******************
  *                                                       *
  *                                                       *
  *                                                       *
  *                                                       *
  ********************************************************/
.kl-login-form-body-border-design {
  margin: 5px auto;
  background-color: #366bf1;
  padding: 6px 1px 7px 2px solid red;;
  border-radius: 20px 20px 20px 20px;
}
.login-admin {
  width: 50%
}
.kl-login-form-body {
  margin: 5px auto;
  background-color: #ecf0f3;
  min-height: 600px;
  border-radius: 20px;
  }

.kl-login-form-inner-body {
  /*for input inset and outset field*/
  width: 100%;
  padding: 20px 20px 5px 20px;
  }

.kl-login-form-inner-body input {
  border: none;
  outline: none;
  width: 80%;
  background: none;
  color: #555;
  font-size: 15px;
  padding: 20px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
  }

.kl-login-form-inner-body i {
  /* costomize icon( password, email and user  margin and height*/
  height: 25px;
  margin: 0px 10px -3px 25px;
  }

.kl-login-logo {
  /* use for background image shadow with 50% radious*/
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #ecf0f3;
  align-content: center;
  box-shadow: rgb(158, 161, 164) 0px 15px 25px -10px;
  color: rgb(169, 175, 175);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 10px;
  }

.kl-login-logo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  }

.kl-form-heading-title {
  padding: 20px;
  background-color: #b0e4f7;
  box-shadow: rgb(168, 172, 177) 0px 20px 30px -10px;
  border-radius: 15px;
  margin-bottom: 15px;
  text-align: center;
  margin-left: 18px;
  margin-right: 18px;
  font-size: 16px;
  }

.kl-username,
/* use for costomize box shadow and border radious of the input field*/
.kl-company_name,
.kl-password,
.kl-contact-num,
.kl-email {
  margin-bottom: 25px;
  border-radius: 25px;
  box-shadow: inset 8px 8px 8px #cdced1, inset -8px -8px 8px #fff;
  }

.kl-login-button {
  outline: none;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 45px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 700px;
  color: #fff;
  text-align: center;
  background-color: #02c8db;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
  }

.kl-chekbox {
  padding: 10px;
  padding-right: 20px;
  padding-left: 0px;
  width: 200px;
  border-radius: 15px;
  background-color: #f7f0f0;
  display: flex;
  margin-top: 20px;
  margin-bottom: 10px;
  box-shadow: 3px 3px 5px #b1b1b1, -3px -3px 8px #fff;
  }

  .kl-chekbox1 {
    padding: 10px;

    width: 200px;
    float: left;
    margin:0;
    border-radius: 15px;
    background-color: #f7f0f0;
    display: flex;
    margin-top: 20px;
    box-shadow: 3px 3px 5px #b1b1b1, -3px -3px 8px #fff;
    }

  .kl-chekbox1 label{
    position:relative;
    width: 100%;
    color:blue;
    left:-10px;
  }
.kl-chekbox label {
  width: 200px;
  }

.kl-login-button:hover {
  background-color: #095b92;
  }

.kl-link {
  padding-top: 20px;
  text-align: center;
  }

.kl-login-button:active {
  background-color: #158a15;
  }

.kl-link a {
  text-decoration: none;
  font-size: 15px;
  }


/* ===================alert message ===================================*/
.kl-login-alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  border-radius: 5px;
}

.kl-login-alert-closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.kl-login-alert-closebtn:hover {
  color: black;
  background-color: rgb(250, 255, 255);
  border-radius: 50%;

}


/*start language alert message while hover application input field */
.language_alert_message:hover::before{
content: 'Plase use English language only ' ;
min-width: 100px;
height: 40px;
margin-top:-20px;
position:absolute;
color:red;
}


.fileSize_alert_message:hover::before{
content: 'Plase upload file upto 2Mb in MS Word and PDF Format ' ;
min-width: 100px;
height: 40px;
margin-top:-20px;
position:absolute;
color:red;
}


/*=====================alert messag for register page===================*/

/********************start regiatration body********************/
.kl-container {
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  }

.kl-registration-border-design {
  box-shadow: 0px 0px 10px #2c404a;
  border-radius: 20px 0px 0px 20px;
  min-height: 600px;
  padding: 6px 2px 7px 2px solid red;;
  margin-left: 160px;
  background-color: #2157df;
  margin-top: 30px;
  }

.kl-registration-form-border-design {
  background-color: #050703;
  box-shadow: 0px 0px 20px #6a6b6c;
  padding: 7px 1px 7px 1px;
  border-radius: 30px;
  min-height: 600px;
  margin-top: 20px;
  }

.kl-registration-form-title {
  /* for register form title*/
  background-color: #039cd3;
  box-shadow: rgb(177, 168, 174) 0px 20px 30px -10px;
  border-radius: 15px;
  margin-bottom: 15px;
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  }

.kl-registration-form-body {
  /*for costomize padding input field */
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ebebf1;
  padding: 10px;
  min-height: 600px;
  border-radius: 30px;
  }

.kl-registration-form1-body {
  /*for costomize padding input field */
  background-color: #ecf0f3;
  box-shadow: 0px 0px 20px #ebebf1;
  padding: 10px;
  min-height: 600px;
  border-radius: 30px;
  }

.kl-registration-input-form {
  /*costomize field of input padding (keep padding above the name )*/
  width: 100%;
  padding: 20px 5px 5px 5px;
  }

.kl-registration-input-form input {
  border: none;
  outline: none;
  background: none;
  color: #555;
  width: 80%;
  font-size: 15px;
  padding: 20px 10px 15px 5px;
  border-top: 0px 2px 4px #5f5f5f;
  }

.kl-registration-input-form i {
  height: 25px;
  margin: 0px 10px -3px 25px;
  }

.kl-registration-form-logo {
  /* use for background image shadow with 50% radious*/
  height: 120px;
  width: 120px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: rgb(168, 172, 177) 0px 20px 30px -10px;
  margin-bottom: 10px;
  }

.kl-registration-form-logo img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  padding: 7px;
  }

.kl-registraion-heading {
  /* for register click button page*/
  padding: 10px 15px 15px 15px;
  color:#095DBC;
  box-shadow: 0px 0px 20px #999977;
  border-radius: 30px;
  margin-bottom: 15px;
  text-align: center;
  }

.kl-registration-form-logo img {
  width: 120px;
  border-radius: 50%;
  height: 120px;
  }

.kl-register-button {
  outline: none;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 12px 10px 12px 5px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700px;
  color: #fff;
  text-align: center;
  background-color: #02c8db;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
  }

.kl-register-form-button {
  outline: none;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 12px 10px 12px 5px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700px;
  color: #fff;
  text-align: center;
  background-color: #02c8db;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s;
  }

.kl-register-button:hover {
  background-color: #095b92;
  }

.kl-register-form-button:hover {
  background-color: #095b92;
  }

.kl-register-form-button:active {
  background-color: #158a15;
}

.kl-register-button:active {
  background-color: #158a15;
}
/* pagination*/
.pagination {
  display: inline-block;
  margin-left: 5px;
  padding-bottom: 5px;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
/**************alert Message***********************/
.submit-alert {
  padding: 20px;
  background-color: #368ff4;
  color: white;
  border-radius: 5px;
  font-size: 25px;
}

.submit-alert-closebtn {
  color: rgb(202, 29, 29);
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
  }

/********pin codbox *******************/
.pincod-box {
  margin-top: 30px;
  width: 400px;
  text-align: center;
  font-size: 20px;
  height: 400px;
  background: #ffffff;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  z-index: +1;
  transition: 1s;
  padding: 30px;
  transition: all .2s;
  border-radius: 5px;
  box-shadow: inset 2px 1px 5px #78797a,
    2px -1px 5px rgb(255, 255, 255),
    2px -1px 5px rgb(209, 228, 255);
  }

.pincod-box-body {
  width: 100%;
  height: auto;
  padding: 40px 40px;
}

.pincod-box-body input {
  width: 100%;
  border: 2px solid red; 
  outline-color: #03a9f4;
  padding: 15px;
  border-radius: 15px;
  font-size: 16px;
  color: #9ea1a3;
  }

.pincod-box-body input:hover {
  border: 1px solid red;
  }

.pincod-box-button {
  background: rgb(14, 150, 240);
  border: none;
  outline: none;
  padding: 7px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: inset -3px -3px 15px #83b4ec77,
    3px 3px 5px #e7e6e6;
  }

.pincod-box-button h5 {
  color: #8b8b8b;
  font-size: 14px;
  border: 1ps solid;
  }

/********end pin codbox *******************/


/***********success  Message *************************/
.success_message_box {
 position:relative;
 padding-top:100px;
  width: 400px;
  height: 300px;
  padding: 30px;
  background: rgb(239, 241, 250);
  transition: 1s;
  transform: rotate(360deg);
  margin-right:auto;
  margin-left:auto;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: inset 2px 3px 5px #c4c4c5,
    2px -3px 5px rgb(255, 255, 255),
    2px 3px 5px rgb(222, 236, 255);
  }

.success_message {
  padding-top: 10px;
  }

.success_message_box i {
  font-size: 100px;
  color: #fffFFF;
  }

.circal_box {
  background: rgb(75, 186, 77);
  height: 110px;
  width: 110px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  }

.sucess_message_body {
  width: 100%;
  height: 200px;
  position:relative;
  height: 200px;
  text-align: center;
  
    }

.sucess_message_body p {
  text-align: center;
  align-items: center;
  font-size: 20px;
  color: #080e5e;
  line-height: 30px;
  }

  .hello{
   width: 60%;
   height: auto;
   position: relative;
   margin-right:auto;
   margin-left:auto;
   top:140px;
  }
  .contact-body_view{ /*view user details */
   width:70%;
   min-height:425px;
   background-color:#ffffff;
   box-shadow: -2px -2px 1px rgb(255, 163, 65),
                3px 3px 80px rgb(201, 201, 201),
                4px 4px 1px rgb(62, 108, 245);

   margin-right: auto;
   margin-left:auto;
   border-radius:10px;
   }
/**=============Start Animation CSS================***/
.feediv_animate {
  /*animation class for fee structure div*/
  animation: feeAnimate 1s ease-in;
}

@keyframes feeAnimate {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }

}

/*yearl student record*/
.yearlystuRecord{
 animation: ysrAnimation 1s ease-in;
}

@keyframes ysrAnimation {
	0% {
		opacity: 0;
		transform: rotateX(-100deg);
		transform-origin: top;
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
		transform-origin: top;
	}
}

.studentList{
animation: slAnimation 1s ease-in;
}

@keyframes slAnimation {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateY(100px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateY(-65px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateY(-28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateY(-8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}
}

.clAnimation{
  animation: cl
}


/*Canceled student list*/
.csList {
  animation: csAnimation 1s ease-in;
}

@keyframes csAnimation {
	0% {
		opacity: 0;
		transform: rotateX(-100deg);
		transform-origin: top;
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
		transform-origin: top;
	}
}


.animApply{
  animation: animApply 1s ease-in;
}


@keyframes animApply {
  0% {
    opacity: 0;
    transform: rotateY(-70deg);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: rotateY(0);
    transform-origin: left;
  }
}


/*animatio video div*/

.animVideo {
  animation: videoAnim 1s ease-in;
}

@keyframes videoAnim {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

/*Total paid */

.animTotal {
  animation: animTotaldiv 1s ease-in;
}

@keyframes animTotaldiv {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*animation leave status div*/
.animLeave {
  animation: animLeavediv 1s ease-in;
}

@keyframes animLeavediv {
  0% {
    opacity: 0;
    transform: translateX(250px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*animation  class for view application page*/
.veiwApp {
  animation: animateViewapp .7s ease-in;
}

@keyframes animateViewapp {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}

/*animation class for add new department class*/

.animAdddept {
  animation: animAdddept 0.7s ease-in;
}


@keyframes animAdddept{
	0% {
		transform: scaleX(0.4);
		transform-origin: 100% 100%;
	}

	100% {
		transform: scaleX(1);
		transform-origin: 100% 100%;
	}
}

/*animation class for student list page*/

.comlist {
  animation:comStuden 0.9s ease-in;
}

@keyframes comStuden {
	0% {
		transform: scaleY(0);
	}

	100% {
		transform: scaleY(1);
	}
}

/*feedback form  class for company admin page*/

.comstudentList{
animation: comAnimation ;
}
@keyframes comAnimation {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

/*class for add document page*/

.animAdddoc {
  animation: animAdd 0.7s ease-in;
}

@keyframes animAdd {
  0% {
    opacity: 0;
    transform: translateX(-250px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*animation class for leave application page*/

.animLeave {
  animation: animLeavepage 0.5s ease-in;
}

@keyframes animLeavepage {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.animPlacement {
  animation: placementAnim 0.6s ease-in;
}


@keyframes placementAnim {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}

/*animation class for Hospital Information*/

.hospital_div {
  animation: hospitalAnim 1s ease-in;
}

@keyframes hospitalAnim {
  0% {
    transform: scale(0);
    transform-origin: 100% 50%;
  }

  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
  }
}

/*animation class for View application */

.current_anim {
  animation: currentAnim 1s ease-in;
}

@keyframes currentAnim {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}

/*animation for accomodation*/

.accomodationAnim {
  animation: accoAnim 1s ease-in;
}

@keyframes accoAnim {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*animation for */

.contAnim {
  animation: scaleup 1s ease-in;
}

@keyframes scaleup {
  0% {
    transform: scale(0.2);
  }

  100% {
    transform: scale(1);
  }
}

/*notification animation*/

.noticeAnim {
  animation: animNotice 1s ease-in;
}

@keyframes animNotice {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translateY(-250px);
  }

  38% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0);
  }

  55% {
    animation-timing-function: ease-in;
    transform: translateY(-65px);
  }

  72% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }

  81% {
    animation-timing-function: ease-in;
    transform: translateY(-28px);
  }

  90% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }

  95% {
    animation-timing-function: ease-in;
    transform: translateY(-8px);
  }

  100% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
}

.animCurrentstu {
  /*animation current student page (super andin)*/
  animation: scaleinFoward 0.8s ease-in;
}
@keyframes scaleinFoward {
	0% {
		opacity: 0;
		transform: rotateX(70deg);
		transform-origin: top;
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
		transform-origin: top;
	}
}

/*animation class for index page*/
.animDashpage {
  animation: superAdminpage 0.9s ease-in;
}


@keyframes superAdminpage {
  0% {
    opacity: 0;
    transform: rotateX(-70deg);
    transform-origin: bottom;
  }

  100% {
    opacity: 1;
    transform: rotateX(0);
    transform-origin: bottom;
  }
}

/*add department user page animation*/
.adddeptUser {
  animation: deptUser 1s ease-in;
}

@keyframes deptUser {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.cancellPage {
  animation: animPage 1s ease-in;
}

@keyframes animPage {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}

.animFrom{
    animation: animPage 1s ease-in;
  }
  
  @keyframes animPage {
    0% {
      opacity: 0;
      transform: rotateX(-100deg);
      transform-origin: top;
    }
  
    100% {
      opacity: 1;
      transform: rotateX(0deg);
      transform-origin: top;
    }
  }


/*animation class for add company user page*/
.addcomUser {
  animation: addCompanyuser 1s ease-in;
}

@keyframes addCompanyuser {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}

/*animation class for send notice for student*/
.noticPage {
  animation: animationNotice 1s ease-in;
}

@keyframes animationNotice {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}


/*animation class for update admin user*/

.updateAdminuser {
  animation: upadateAU 1s ease-in;
}

@keyframes upadateAU {
  0% {
    transform: scaleY(0.4);
    transform-origin: 0% 100%;
  }

  100% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
  }
}

/*update company user*/
.updateComUser {
  animation: updateComuser 1s ease-in;
}


@keyframes updateComuser {
	0% {
		opacity: 0;
		transform: rotateX(-100deg);
		transform-origin: top;
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
		transform-origin: top;
	}
}


/* class for update department user*/
.updatedeptUser {
  animation: updateDU 1s ease-in;
}

@keyframes updateDU {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 0%;
  }

  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
  }
}


/*Email page animation pages*/

.emailPAge {
  animation: animationEmailpage 0.9s ease-in;
}

@keyframes animationEmailpage {
  0% {
    opacity: 0;
    transform: rotateX(-100deg);
    transform-origin: top;
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
  }
}



/*******************************************************************************************/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[class*="col-"] {
  float: left;
  width: 100%;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (min-width:900px) and (max-width: 1800px) {
.info_div{
display: block;
width:97%;
position:relative;
}
}

@media only screen and (min-width: 1220px) and (max-width: 1500px) {
  .feedback_form_body {
    width: 95%;
      }
      .feedback_form_body{
        height: 1550px;
      }
}

@media only screen and (min-width:780px) and (max-width: 1220px) {
  .feedback_form_body {
    width: 95%;
      }
      .kl-appform-title-sec h2{
          font-size:28px;
          transition:0.7s;
      }
      .feedback_form_body{
        height: 1600px;
      }
}


@media only screen and (min-width:766px) and (max-width: 850px) {
  .feedback_form_body {
    width: 95%;
      }
      .feedback_form_body{
        height: 1650px;
      }
      .hello{
        width:80%;
      }
    }


@media only screen and (min-width:100px) and (max-width: 768px) {
  .feedback_form_body {
    width: 95%;
      }
      .feedback_form_body{
        height: 4100px;
      }
      .kl-appform-title-sec h2{
         font-size:20px;
         transition:0.7s;
      }
      .table_body{
        position:relative;
        top:100px;
      }

}

@media only screen and (min-width: 700px) and (max-width: 1020px) {
  .kl-appform-input-field input {
    width: 70%;
  }
    }

@media (max-width:1700px) {
  .home-section nav .text-box {
    font-size: 18px;
    line-height: 25px;
  }
}

/* responsive for student admin*/
@media (max-width:1500px) {
  .leave_form_field select {
    width: 80%;
  }

  .form_title {
    font-size: 25px;
    height: 80px;
    line-height: 80px;
  }

  .form_body {
    padding: 10px 100px;
  }

  .wrap_feedback_textaria_input {
    width: 98%;
    border-radius: 30px;
  }

  .home-section nav .text-box {
    font-size: 18px;
    line-height: 25px;
  }

}

@media (max-width:1400px) {
  .home-section nav .text-box {
    font-size: 18px;
    line-height: 25px;
  }
   }

@media (max-width:1300px) {
  .home-section nav .text-box {
    font-size: 18px;
    line-height: 25px;

  }
}

/*start responsice menu media query*/
@media (max-width: 1440px) {
  nav .profile-details {
    width: 180px;
    margin-right: 20px;

  }
  .kl-appform-title-sec1{
    font-size:30px;
    }
  .form_button_close{
    right: 100px;
  }
}

@media (max-width: 1240px) {
  .sidebar {
    width: 50px;
  }

  .sidebar.active {
    width: 220px;
  }

  .home-section {
    width: calc(100% - 50px);
    left: 50px;
  }

  .sidebar.active~.home-section {
    left: 220px;
    width: calc(100% - 220px);
    overflow: hidden;
    }

  .home-section nav {
    width: calc(100% - 50px);
    left: 50px;
  }

  .sidebar.active~.home-section nav {
    width: calc(100% - 220px);
    left: 220px;
  }
}

@media(max-width:1280px) {
  .kl_db_banner_top h3 {
    font-size: 20px;
    text-align: center;
  }

  .kl_db_cardName {
    font-size: 20px;
    height: 50px;
  }

  .add_document_div_form_body {
    width: 85%;
  }

  .form_title {
    font-size: 30px;
    height: 60px;
    line-height: 30px;
    display: block;
    text-align: center;
  }

  .form_body_update {
    padding: 10px 30px;
  }

  .add_dept_form_body {
    width: 95%;
    transition:1.2s;
  }
  .home-section nav .text-box {
    font-size: 18px;
    line-height: 25px;
  }
  }


@media only screen and (max-width: 1160px) {
  .kl-header {
    padding-right: 50px;
  }
}

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

  .kl-header h3,
  h1,
  h2 {
    font-size: 18px;

  }

  .kl-add-container {
    /*Add  user form (super admin)*/
    width: 80%;
  }

  .form_body {
    padding: 10px 70px;
  }
}

@media(max-width:1080px) {
  .kl_db_banner_top h3 {
    font-size: 16px;
    text-align: center;
  }

  .home-section nav .text-box {
    line-height: 25px;
  }

  .header_view_app p {
    font-size: 20px;
  }

  .add_document_div_form_body {
    width: 90%;
  }

  .leave_form_body {
    width: 100%;
  }

  .form_title {
    font-size: 20px;
    height: 60px;
  }

  .view_app_container {
    width: 97%;
  }

  .triangle-down_v {
    height: 60px;
  }

  .triangle-down {
    height: 60px;
  }

  .kl_form_container {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }


}

@media (max-width:991px) {
  .kl_db_navigation {
    left: -300px;
  }

  .kl_db_navigation.active {
    width: 300px;
    left: 0px;
  }

  .main {
    width: 100%;
    left: 0px;
  }
  .home-section nav .text-box {
    line-height: 20px;
  }

  .main.active {
    left: 300px;
  }

  .kl_db_cardBox {
    grid-template-columns: repeat(2, 1fr);
    height: 350px;
    z-index: +1;
    margin-bottom: 20px;
  }

  .kl_db_cardName {
    font-size: 18px;
    height: 50px;
  }

  .billing_form_container{
    width: 90%;
  }

  .form_body {
    /*this class use in add and update form of super admin form*/
    padding: 30px;
  }

  .student_view_application {
    height: 100px;
    justify-content: center;
    line-height: 40px;
  }

  .student_view_application p {
    font-size: 16px;
  }

  .apply_dept_view_div {
    height: 5px;
  }

  .apply_dept_view_div {
    width: 100%;
    z-index: +1;
  }

  .apply_dept_status {
    width: 100%;
    z-index: +1;
  }

  .leave_form_body_style {
    width: 80%;
  }

  .header_view_app p {
    font-size: 16px;
  }

  .kl-login-form-body-border-design {
    min-height: 500px;
    padding: 8px 8px 8px 8px;
  }
  .login-admin {
    width: 90%;
  }
  .kl-registration-border-design {
    min-height: 500px;
    padding: 8px 2px 8px 2px solid red;;
    margin-left: 0px;
  }

  .kl-registration-form-body {
    padding: 10px 10px 1px 10px;
  }

  .kl-login-form-body {
    border-radius: 30px;
  }

  .kl-container {
    width: 50%;
  }

  .top-header h1 {
    font-size: 20px;
    text-align: center;
    line-height:20px;
  }

  .top-header h2,
  h3 {
    font-size: 16px;
    text-align: center;

  }

  .add_user_form_container {
    width: 80%;
   
  }
  }

@media only screen and (max-width: 900px) {
  .view_app_container label span {
    float: left;
  }

  .kl-add-container {
    /*Add  user form (super admin)*/
    width: 80%;
  }

  .info_div {
    width: 97%;
  }

  .add_user_details {
    grid-template-columns: 1fr;
    }

  .home-section nav .text-box {
    font-size: 16px;
    line-height: 20px;
   }

  .text-box {
    font-size: 14px;
  }
  .table_text_right{
  left:100px;
  transition: 0.6s;

  }
  .text_right{
    width:50%;
  }
  .verify_biling{
    width:60%;
  }
  .leave_app_form_body{
   width: 93%;
  transition: 1.2s;
  }
  #myBtn{
    position: relative;
   top:10px;
   margin: auto;
   }
}

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

  .kl-header h3,
  h1,
  h2 {
    font-size: 13px;
    padding-right: 0px;
  }

  .kl-header img {
    float: none;
  }

  .kl-appform-title-sec {
    font-size: 30px;
  }

  .kl_form_container {
    width: 95%;
  }

  .add_user_form_container {
    width: 90%;
  }
  
  .box{
  margin-top:5%;
  transition: all 0.5s;
  }
  
  }

@media(max-width:810px) {
  .kl_db_banner_top h3 {
    font-size: 12px;
    text-align: center;
  }

  .add_dept_form_body_style {
    width: 98%;
    transition:1.2s;
    }
 .contact-body_view{
  width: 80%;
  }

  .add_dept_form_body {
    width: 97%;
    transition:1.2s;
  }

  .kl-add-container {
    /*Add  user form (super admin)*/
    width: 80%;
  }

  .home-section nav .text-box {
    font-size: 16px;
    line-height: 20px;
  }

  .text-box {
    font-size: 14px;
  }

  .billing_form_container {
    width: 100%;
  }
  .table_text_right{
    left:60px;
    transition: 0.6s;
    }
    .verify_biling{
      width: 80%;
    }
    .search-box1{
      width:50%;
      transition: 1.2s;
    }
    .search-box1:hover{
      width:70%;
    }
    .dept_fund_entry{
      height: 600px;
      transition: 1.2s;
    }
       
   
    }


@media (max-width:768px) {
  .details {
    grid-template-columns: repeat(1, 1fr);
    padding-right: 10px;
  }

  .kl_topbox_body4 {
    margin-bottom: 90px;
  }
  .info_div{
    width:95%;
  }
 .data_search_asper_type{
    position: relative;
    top:50px;
    transition: all 0.8s;
 }
 .break_div{
    position: relative;
    top:80px;
    transition: all 0.8s;
 }
 .data_get_btn{
    position: relative;
    top:50px;
    transition: all 0.8s;
 }
 
 .search_box{
  position:relative;
  margin-top:50px;
   transition: all 0.8s;
 }

  .contain_details {
    grid-template-columns: repeat(1, 1fr);
    padding-right: 10px;
  }

  .student_view_application p {
    font-size: 12px;
  }

  .add_doc_body_style {
    width: 80%;
  }

  .notice_section_body {
    margin-left: 10px;
  }

  .header_view_app p {
    font-size: 12px;
  }

  .leave_submit_button {
    width: 100px;
  }

  .kl-container {
    width: 60%;
  }

  .kl-login-form-body-border-design {
    border-radius: 20px;
    margin-bottom: 10px;
  }

  .kl-registration-border-design {
    border-radius: 20px;
  }

  .kl-logo-area {
    border-radius: 0px 0px 100px 100px;
  }

  .kl-header-back {
    background-image: linear-gradient(to right, white, white);
  }

  .kl-logo-area-background {
    background-image: linear-gradient(to right, white, white);
  }

  .kl-appform-title-sec {
    font-size: 25px;
  }

  .notice_section_body {
    width: 95%;
    margin-bottom: 40px;
  }

  .kl_form_container {
    width: 80%;
    margin-left: 20px;
    margin-right: 20px;
  }

  .kl_form_container {
    width: 95%;
    margin-right: auto;
    margin-left: auto;
  }

  .serch_btn_wrapper{
    position: relative;
    top:100px;
  }

  .form_field {
    width: 94%;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
  }

  .wrap_feedback_textaria1 {
    margin-left: 0px;
    position: relative;
  }

  .label_for_addDept {
    padding: 0px 5px 5px 5px;
  }

  .add_user_form_container_dept {
    width: 80%;
  }

  .home-section nav .text-box {
    font-size: 13px;
    line-height: 20px;
  }

  .billing_form_container {
    width: 100%;
  }

  .billing_form_body {
    height: 950px;
  }
  .payment_details{
    width:100%;

  }
  .update_student_info_form_container{
    margin-top:0;
  }
  .update_container{
    margin-top:93px;
  }
  }

@media (max-width: 700px) {

  nav .sidebar-button .dashboard,
  nav .profile-details nav .profile-details i {
    display: none;
  }
  .home-section nav .profile-details {
    height: 50px;
  }

    
  .table_text_right{
    left:10px;
    transition: 0.6s;
    }
    .contact-body_view{
      width:85%;
    }
    .hello{
      width:80%;
    }
    }
    @media (max-width: 550px) {
  .hello{
   width: 1000px;
   }
 .contact-body_view{
    width: 100%;

  }
 }
 @media (max-width: 550px) {
  .overview-boxes .box {
    width: 100%;
    margin-bottom: 15px;
  }
  .table_text_right{
    left:0;
  }
  .dept_fund_entry{
    height: 600px;
    transition: 1.2;
  }
  .contact-body_view{
   width:90% ;
  }
  .hello{
    width:80%;
  }

  .sidebar.active~.home-section nav .profile-details {
    display: none;
  }
  .details_record2 li{
    height: 50px;
    line-height: 25px;
     }
     .search-box1{
      width:60%;
      transition: 1.2s;
    }
    .search-box1:hover{
      width:70%;
    }
}

@media (max-width: 400px) {
  .sidebar {
    width: 0;
  }
  .contact-body_view{
    width:100%;
  }
    .kl-appform-title-sec h2{
         font-size:17px;
         transition:0.7s;
      }

  .sidebar.active {
    width: 60px;
  }
  .hello{
    width:100%;
  }

  .home-section {
    width: 100%;
    left: 0;
  }

  .sidebar.active~.home-section {
    left: 50px;
    width: calc(100% - 50px);

    }

  .home-section nav {
    width: 100%;
    left:0;
  }

  .sidebar.active~.home-section nav {
    left: 60px;
    width: calc(100% - 60px);
  }
}

.text-box h5{
  display: none;
}

.text-box span {
  display: none;
}

/*end menu responsive*/

@media only screen and (min-width: 700px) and (max-width: 2500px) {
  .text-box h5 {
    display: block;
  }
}

@media only screen and (min-width: 100px) and (max-width: 699px) {
  .text-box span {
    display: block;
    line-height: 60px;
    font-size: 18px;
  }
}



@media only screen and (max-width: 600px) {
  .kl-container {
    width: 80%;
  }
  .contact-body_view{
    width:100%;
  }

  .add_user_form_container_dept {
    width: 95%;
  }

  .kl-login-form-body-border-design {
    margin-bottom: 20px;
  }

  .billing_form_container {
    width: 100%;



  }

  .td-group-2 {
    display: none;
  }

  .kl-header h3,
  h1,
  h2 {
    font-size: 14px;
  }

  .kl-appform-title-sec {
    font-size: 22px;
  }

  .info_container {
    width: 99%;
  }

  .kl_form_container {
    width: 85%;
    margin-left: auto;
    margin-right: auto;

  }

  .kl-login-form-inner-body {
    /* costomize outsize are of input*/
    width: 100%;
    padding: 10px 5px 5px 5px;
  }

  .kl-login-form-inner-body input {
    /* costomize input field  padding and  border  area*/
    padding: 20px 10px 15px 3px;
    border-top: 0px 2px 4px #5f5f5f;
  }

  .kl-login-form-inner-body i {
    /* costomize for icon (passowrd, email, user*/
    height: 25px;
    margin: 0px 10px -3px 25px;

  }

  .kl-login-logo {
    /* use for background image shadow with 50% radious*/
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #ecf0f3;
    align-content: center;
    box-shadow: rgb(158, 161, 164) 0px 15px 25px -10px;
    color: rgb(169, 175, 175);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 10px;
  }

  .kl-login-logo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .kl-username,
  /* use for costomize box shadow and border radious of the input field*/
  .kl-password,
  .kl-email {
    margin-bottom: 25px;
    /*change dessign input field area */
    border-radius: 25px;
    box-shadow: inset 8px 8px 8px #cdced1, inset -8px -8px 8px #fff;

  }

  .current_student_details_body {
    margin-right: none;
    width: 95%;
    position:relative;
    margin-top: 20px;
      }

  .info_container {
    width: 99%;

  }

  .leave_app_form_body {
    width:100%;
    transition: 1.1s;

  }

  .form_field {
    width: 94%;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
  }

  .wrap_feedback_textaria1 {
    margin-left: 0px;
    position: relative;
  }
  .verify_biling{
    width: 90%;
  }
  .add_form_field select{
    width:60%;
  }
   .add_form_field input[type="date"]{
    width:85%;
    transition: 1.1s;

  }
  .add_form_field input[type="file"]{
    width:75%;
     }
     .info_div{
      top:0px;
     }
}
@media (max-width: 400px) {
  .sidebar {
    width: 50px;
  }

  .sidebar.active {
    width: 220px;
  }

  .home-section {
    width: calc(100% - 50px);
    left: 50px;
  }

  .sidebar.active~.home-section {
    left: 200px;
    width: calc(100% - 200px);
    overflow: hidden;
    }

  .home-section nav {
    width: calc(100% - 50px);
    left: 50px;
  }

  .sidebar.active~.home-section nav {
    width: calc(100% - 200px);
    left: 200px;
  }
}


@media only screen and (max-width: 450px) {
  .kl-appform-title-sec {
    font-size: 18px;
    line-height: 16px;
  }

  .add_dept_form_body {
    width: 100%;
    transition:1.2s;
  }

  .add_dept_form_body_style {
    width: 100%;
    transition:1.2s;
  }

  .text-box {
    font-size: 10px;
  }
}

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

/* resposive for 1px-300px (for the mobie device*/
  {
  .kl-login-form-body-border-design {
    padding: 6px 1px 7px 2px solid red;;
    border-radius: 20px;
    min-height: 600px;
  }

  .kl-registration-form-body {
    padding: 0px;
  }

  .text-box {
    font-size: 12px;
  }

  .kl-registration-input-form {
    font-size: 8px;
  }

  .kl-registration-input-form i {
    height: 12;
    margin: 0px 10px -3px 12px;
  }

  .kl-login-form-body {
    background-color: #ecf0f3;
    min-height: 600px;
    font-size: 12px;
  }

  .kl-login-form-inner-body {
    /*for input inset and outset field*/
    width: 100%;
    padding: 0px 7px 4px 7px;
  }

  .kl-login-form-inner-body input {
    font-size: 11px;
    padding: 10px 10px 10px 5px;
    border-top: 0px 2px 4px #5f5f5f;
  }

  .kl-login-form-inner-body i {
    height: 15px;
    margin: 0px 10px -3px 10px;
  }

  .kl-login-logo {
    /* use for background image shadow with 50% radious*/
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #ecf0f3;
    align-content: center;
    box-shadow: rgb(158, 161, 164) 0px 15px 25px -10px;
    color: rgb(169, 175, 175);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }

  .kl-login-logo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .kl-username,
  .kl-password,
  .kl-email {
    margin-bottom: 15px;
    /*change dessign input field area */
    border-radius: 15px;
    box-shadow: inset 8px 8px 8px #cdced1, inset -8px -8px 8px #fff;
  }

  .kl-link {
    padding-top: 20px;
    text-align: center;
  }

  .kl-link a {
    text-decoration: none;
    font-size: 12px;
  }
}


@media only screen and (max-width: 360px) {
  .col-s-1 {
    width: 8.33%;
  }

  .col-s-2 {
    width: 16.66%;
  }

  .col-s-3 {
    width: 25%;
  }

  .col-s-4 {
    width: 33.33%;
  }

  .col-s-5 {
    width: 41.66%;
  }

  .col-s-6 {
    width: 50%;
  }

  .col-s-7 {
    width: 58.33%;
  }

  .col-s-8 {
    width: 66.66%;
  }

  .col-s-9 {
    width: 75%;
  }

  .col-s-10 {
    width: 83.33%;
  }

  .col-s-11 {
    width: 91.66%;
  }

  .col-s-12 {
    width: 100%;
  }

}



@media only screen and (min-width: 300px) {

  .col-s-1 {
    width: 8.33%;
  }

  .col-s-2 {
    width: 16.66%;
  }

  .col-s-3 {
    width: 25%;
  }

  .col-s-4 {
    width: 33.33%;
  }

  .col-s-5 {
    width: 41.66%;
  }

  .col-s-6 {
    width: 50%;
  }

  .col-s-7 {
    width: 58.33%;
  }

  .col-s-8 {
    width: 66.66%;
  }

  .col-s-9 {
    width: 75%;
  }

  .col-s-10 {
    width: 83.33%;
  }

  .col-s-11 {
    width: 91.66%;
  }

  .col-s-12 {
    width: 100%;
  }
}



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

  .col-s-1 {
    width: 8.33%;
  }

  .col-s-2 {
    width: 16.66%;
  }

  .col-s-3 {
    width: 25%;
  }

  .col-s-4 {
    width: 33.33%;
  }

  .col-s-5 {
    width: 41.66%;
  }

  .col-s-6 {
    width: 50%;
  }

  .col-s-7 {
    width: 58.33%;
  }

  .col-s-8 {
    width: 66.66%;
  }

  .col-s-9 {
    width: 75%;
  }

  .col-s-10 {
    width: 83.33%;
  }

  .col-s-11 {
    width: 91.66%;
  }

  .col-s-12 {
    width: 100%;
  }
}


@media only screen and (min-width: 600px) {

  /* For tablets: */
  .col-s-1 {
    width: 8.33%;
  }

  .col-s-2 {
    width: 16.66%;
  }

  .col-s-3 {
    width: 25%;
  }

  .col-s-4 {
    width: 33.33%;
  }

  .col-s-5 {
    width: 41.66%;
  }

  .col-s-6 {
    width: 50%;
  }

  .col-s-7 {
    width: 58.33%;
  }

  .col-s-8 {
    width: 66.66%;
  }

  .col-s-9 {
    width: 75%;
  }

  .col-s-10 {
    width: 83.33%;
  }

  .col-s-11 {
    width: 91.66%;
  }

  .col-s-12 {
    width: 100%;
  }

}


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

  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }

  .col-2 {
    width: 16.66%;
  }

  .col-3 {
    width: 25%;
  }

  .col-4 {
    width: 33.33%;
  }

  .col-5 {
    width: 41.66%;
  }

  .col-6 {
    width: 50%;
  }

  .col-7 {
    width: 58.33%;
  }

  .col-8 {
    width: 66.66%;
  }

  .col-9 {
    width: 75%;
  }

  .col-10 {
    width: 83.33%;
  }

  .col-11 {
    width: 91.66%;
  }

  .col-12 {
    width: 100%;
  }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  col-1 {
    width: 8.33%;
  }

  col-2 {
    width: 16.66%;
  }

  col-3 {
    width: 25%;
  }

  col-4 {
    width: 33.33%;
  }

  col-5 {
    width: 41.66%;
  }

  col-6 {
    width: 50%;
  }

  col-7 {
    width: 58.33%;
  }

  col-8 {
    width: 66.66%;
  }

  col-9 {
    width: 75%;
  }

  col-10 {
    width: 83.33%;
  }

  col-11 {
    width: 91.66%;
  }

  col-12 {
    width: 100%;
  }
}