.gradient-custom-2 {
  /* fallback for old browsers */
  background: #fccb90;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}

.gradient-custom-3 {
  background: linear-gradient(to right, rgba(46, 115, 218, 0.986), rgb(16, 20, 247));
  border-top-right-radius: .0rem;
  border-bottom-right-radius: .0rem;
}

@media (min-width: 768px) {
  .gradient-form {
    height: 50vh !important;
    background: #d1d0d0;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
  }
}

@media (min-width: 769px) {
  .gradient-custom-2 {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
  }
}

#login_bg {
  background-image: url();
  height: 100vh;
}

@media (min-width: 992px) {
  #intro {
    margin-top: -58.59px;
  }
}

body {
  background-color: #ffffff;
  font-size: 14px;
  height: 100vh;
}

/* #main-menu {
     height:725px ;
     overflow-y: scroll;
} */

#main-menu {
  height: 80vh;
  overflow-y: scroll;
}

.main-content {
  width: 98vw;
  height: calc(100vh - 11vw);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (width <=968px) {
  #main-menu {
    height: auto;
    overflow-y: auto;
    width: auto;
  }

  .main-content {
    width: 98vw;
    height: calc(100vh - 39vw);
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

}

.header {
  position: relative;
  z-index: 1;
  border-radius: 2px;
  border-top: none;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
  border-left: none;
  border-right: none;
  border-bottom: 4px solid #8CDDCD;
  margin-bottom: -0.70vw;
  background-color: #003471;
  max-height: 7vw;
}

.header2 {
  z-index: 1;
  border-radius: 2px;
  border-top: none;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin-bottom: -0.50vw;
  background-color: #000000;
  max-height: 6vw;
}

.header2 a.active {
  color: #53e7ca;
}

.header2 a {
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.page_title {
  position: relative;
  z-index: 1;
  border-radius: 2px;
  border-top: none;
  box-shadow: 0 5px 2px rgba(0, 0, 0, 0.05);
  border-left: none;
  border-right: none;
  border-bottom: 4px solid #8CDDCD;
  margin-bottom: 10px;
  text-align: center;
  max-height: 4vw;
}

.page-body .page-container .page_title h3 {
  text-transform: uppercase;
  font-weight: bold;
  color: rgb(158, 1, 1);
  font-size: 1vw;

}

@media (width <=968px) {
  .page-body .page-container .page_title h3 {
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(158, 1, 1);
    font-size: 2.5vw;

  }

}


.school_name {
  margin-top: 0.85vw;
  font-size: 0.75vw;
}

.school_name>h2 {
  font-weight: 150;
  margin: 0px;
  color: white;
  font-size: 1.25vw;
}


ul {
  padding-left: 0;
  list-style-type: none;
  margin-bottom: 0
}

* a {
  font-size: 14px
}


body .page-container .sidebar-menu #main-menu li a:hover {
  background-color: #166e64;
}

body .page-container .sidebar-menu #main-menu li ul>li>a:hover {
  background-color: #166e64;
}

body .page-container .sidebar-menu #main-menu li.opened.active>a {
  background: #166e64;
}

body .page-container .sidebar-menu #main-menu li ul>li>a:hover {
  background: #166e6462;
  font-weight: bold;
}

body .page-container .sidebar-menu #main-menu li.opened.active>a {
  color: #ffffff;
}

body .page-container .sidebar-menu #main-menu li.active>a {
  color: #ffbe32;
  font-weight: bold;
}

body .page-container .sidebar-menu #main-menu li>a {
  text-transform: uppercase;
  font-size: 1vw;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: rgb(255, 255, 255);
}

body .page-container .sidebar-menu #main-menu li>a>i {
  font-size: 1vw;
  color: rgb(242, 255, 62);
}

body .page-container .sidebar-menu #main-menu li>ul>li>a>span>i{

  font-size: 1vw;
  color: #51ff7d;
  content: icon;
}

body .page-container .sidebar-menu #main-menu li>ul>li>a{
    
   text-decoration: solid;
  font-size: 0.80vw;
  color: #ffffff;
}

body.page-body .main-content .panel.panel-primary>.panel-heading>.panel-title {
  font-size: 2vw;
  text-align: center;
  color: #005716;
}

.form-groups-bordered>.form-group {
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 15px;
  padding-top: 15px;
  margin-bottom: 0px;
}

.form-groups-bordered>.form-group:first-child {
  padding-top: 0;
}

.form-groups-bordered>.form-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

output {
  display: block;
  padding-top: 7px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #555555;
}

.btn.btn-info,
.btn.btn-primary {
  height: 2.5vw;
  font-size: 1vw;
  border-radius: 1vw;
  text-transform: capitalize;
  background-color: #3280f5;
  color: #f8f8f8;
  margin-bottom: 1vw;
  padding: 0.5vw;
}

.btn.btn-info:hover,
.btn.btn-primary:hover {
  height: 2.5vw;
  font-size: 1vw;
  border-radius: 1vw;
  text-transform: capitalize;
  background-color: #23549c;
  color: #f8f8f8;
}

.page-body .form-control,
.page-body .form-control.selectboxit,
.page-body .form-control.select2 {
  display: block;
  width: 100%;
  height: 2.75vw;
  padding: 0.6vw 0.5vw;
  font-size: 1vw;
  border-radius: 1vw;
  line-height: 1.42857143;
  color: #000000;
  text-transform: capitalize;
  background-color: #ffffff;
  background-image: none;
  border: 0.15vw solid #001e71;
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -moz-transition: border-color ease-in-out .15s, -moz-box-shadow ease-in-out .15s;
  -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
  border: 0.18vw solid #000000;
}

.form-control:hover {
  border: 0.18vw solid #000000;

}


.table-bordered {
  border: none;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
  border: none;
  color: #272727;
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td {
  background-color: #003471;
  border-bottom-width: 0px;
  color: #ffffff;
  font-size: 1vw;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-transform: capitalize;
  text-align: left;
}

.table-bordered>tbody>tr>th,
.table-bordered>tbody>tr>td {
  font-size: 1vw;
}

.table-bordered>tfoot>tr>th,
.table-bordered>tfoot>tr>td {
  background-color: #003471;
  border-top-width: 0.2vw;
  color: #ffffff;
}

.table-bordered>tbody>tr:nth-child(odd)>td,
.table-bordered>tbody>tr:nth-child(odd)>th {
  background-color: #cee5ff;
}

.table-bordered>tr>td {
  background-color: #f8f8f8;
  border-bottom-width: 2px;
  color: #000000;
}


.page-body .control-label {
  font-size: 1.25vw;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #000000;
  text-transform: capitalize;
}


@media (width <=968px) {
  body .page-container .sidebar-menu #main-menu li>ul>li>a>span>i{
  font-size: 3vw;
  color: #51ff7d;
  content: icon;
}
  body .page-container .sidebar-menu #main-menu li>ul>li>a{
   text-decoration: solid;
  font-size: 2.40vw;
  color: #ffffff;
}
  body .page-container .sidebar-menu #main-menu li>a {
    text-transform: uppercase;
    font-size: 3.5vw;
    color: rgb(255, 255, 255);
  }

  body .page-container .sidebar-menu #main-menu li>a>i {
  font-size: 4vw;
  color: rgb(242, 255, 62);
}


  body.page-body .main-content .panel.panel-primary>.panel-heading>.panel-title {
    font-size: 6vw;
    text-align: center;
    color: #005716;
  }

  .table-bordered>tfoot>tr>th,
  .table-bordered>tfoot>tr>td {
    background-color: #003471;
    border-top-width: 0.6vw;
    color: #ffffff;
  }

  .table-bordered>thead>tr>th,
  .table-bordered>thead>tr>td {
    background-color: #003471;
    border-bottom-width: 0px;
    color: #ffffff;
    font-size: 3vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: capitalize;
    text-align: left;
  }

  .table-bordered>tbody>tr>th,
  .table-bordered>tbody>tr>td {
    font-size: 3vw;
  }

  .page-body .control-label {
    font-size: 3.75vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #000000;
    text-transform: capitalize;
  }

  .page-body .form-control,
  .page-body .form-control.selectboxit,
  .page-body .form-control.select2 {
    display: block;
    width: 100%;
    height: 9vw;
    padding: 1.8vw 3vw;
    font-size: 3vw;
    border-radius: 3vw;
    line-height: 1.42857143;
    color: #000000;
    text-transform: uppercase;
    background-color: #ffffff;
    background-image: none;
    border: 0.45vw solid #001e71;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s, -moz-box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .form-control:focus {
    border: 0.54vw solid #000000;
  }

  .form-control:hover {
    border: 0.54vw solid #000000;

  }

  .btn.btn-info,
  .btn.btn-primary {
    height: 7.5vw;
    font-size: 3vw;
    border-radius: 3vw;
    text-transform: capitalize;
    background-color: #3280f5;
    color: #f8f8f8;
    margin-bottom: 3vw;
    padding: 1.5vw;
  }

  .btn.btn-info:hover,
  .btn.btn-primary:hover {
    height: 7.5vw;
    font-size: 3vw;
    border-radius: 3vw;
    text-transform: capitalize;
    background-color: #23549c;
    color: #f8f8f8;
    margin-bottom: 3vw;
    padding: 1.5vw;

  }


}



.panel.panel-primary {
  background-color: #ffffff;
  align-items: center;
}

.panel.panel-primary>.panel-heading {
  background-color: #e0edf5;
  display: flex;
  justify-content: center;
}


.main-menu2 .main-menu-header .user-details {
  display: inline-block;
}

.main-menu2 .main-menu-header .user-details #more-details {
  cursor: pointer
}

.main-menu2 .main-menu-header .user-details span {
  color: #fff;
  display: block;
  font-size: 14px;
  text-transform: capitalize
}

.main-menu2 .main-menu-header .user-details span i {
  font-size: 10px;
}

.main-menu2 .main-menu-header .user-details span:first-child {
  margin-bottom: 5px
}


.nav-left-new a {
  color: #ffffff;
}


.sidebar-menu .nav-left-new>li {
  padding: 0 10px 5px 0;
}

.sidebar-menu .nav-left-new>li {
  padding: 0 10px 5px 0;
}

.nav-left-new a:hover {
  color: rgb(26, 188, 156);
}

.nav.nav-tabs.bordered a {
  font-size: 1vw;
}

footer {
  font-size: 0.75vw;
}

@media (width <=968px) {
  .nav.nav-tabs.bordered a {
    font-size: 3vw;
  }

  footer {
    font-size: 3vw;
  }
}



.sidebar-menu .logo img {
  max-height: 3.5vw;
}

.sidebar-menu .sidebar-collapse i {
  font-size: 1vw;
}

.sidebar-menu header.logo-env {
  width: 5vw;
}

.page-container .sidebar-menu {
  z-index: 1000;
  width: 19vw;
}

.page-container .sidebar-menu .logo-env {
  z-index: 1000;
  padding: 1vw;
}

.page-container {
  position: absolute;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding-left: 19vw;
  width: 100%;
}

@media (width <=968px) {
  .sidebar-menu .logo img {
    max-height: 10.5vw;
  }

  .sidebar-menu .sidebar-collapse i {
    font-size: 3vw;
  }

  .page-container .sidebar-menu {
    z-index: 1000;
    width: 60vw;
  }

  .page-container .sidebar-menu .logo-env {
    z-index: 1000;
    padding: 3vw;
  }

  .page-container {
    position: absolute;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-left: 60vw;
    width: 100%;
  }

}


.main-menu2 .main-menu-header {
  align-items: center;
  background: #4a6076;
  display: flex;
  padding: 2vw;
  font-size: 1.4vw;

}

.nav-left-new {
  position: relative;
  z-index: 99;
  display: flex;
  left: 2vw;
  top: 0.5vw;
}

.header2 .nav-left-new a {
  font-size: 0.65vw;
  border-radius: 1vw;
  padding: 0.2vw;
  border: 0.1vw solid;

}

.nav-left-new>li {
  padding: 0 0vw 0vw 0.4vw;
  margin-bottom: 0.75vw;
}

@media (width <=768px) {

  .sidebar-menu .nav-left-new a {
    color: rgb(255, 255, 255);
    font-size: 2.5vw;
    border-radius: 0.5rem;
    padding: 2px 2px 2px 2px;
    background-color: rgba(255, 255, 255, 0.23);
  }

  .nav-left-new {
    position: relative;
    z-index: 99;
    display: flex;
    left: 4vw;
    top: 0.5vw;
  }

  .header2 .nav-left-new a {
    font-size: 2.5vw;
    border-radius: 1vw;
    padding-top: 0.5vw;
    border: 0.1vw solid;

  }

  .nav-left-new>li {
    padding: 0 2vw 0.5vw 0.2vw;
  }

}

.header .nav-left-new a {
  color: rgb(255, 255, 255);
  font-size: 0.75vw;
  border-radius: 0.3vw;
  padding: 0.2vw;
  background-color: rgba(255, 255, 255, 0.23);

}

.nav-left-new a:hover {
  color: rgb(26, 188, 156);
}


.form-control {
  text-transform: capitalize;
}

.form-control.select2 {
  text-transform: capitalize;
}