/*Roboto Font*/
@font-face {
    font-family: roboto;
    src: url(../fonts/roboto/Roboto-Regular.ttf);
}

  /*NunitoSans Font*/
  @font-face {
      font-family: nonito;
      src: url(../fonts/nunito-sans/NunitoSans-Regular.ttf);
  }

   @font-face {
       font-family: nonito_bold;
       src: url("../fonts/nunito-sans/NunitoSans-Bold.ttf");
   }

  /*Ubuntu Font*/
   @font-face {
       font-family: ubuntu;
       src: url("../fonts/ubuntu/Ubuntu-R.ttf");
   }

  /*Ubuntu Font Bold*/
   @font-face {
       font-family: ubuntu_bold;
       src: url("../fonts/ubuntu/Ubuntu-B.ttf");
   }

  /*Link Tag Style Remove*/
a { color: inherit;
    text-decoration: inherit !important;
}

a:hover { color: inherit;
    text-decoration: none !important;
}

/*Body*/
body {
    font-family: ubuntu !important;
    width: 100%;
    /*height: 100vh;*/
    background: #ffffff;
}

* {
    font-family: ubuntu !important;
}

h1 ,h2 , h3, h5, h6, p, span, a, b, u, th, button, label, input, select, strong, .alert {
    font-family: ubuntu !important;
}


   .login-form-container {
       display: flex;
       justify-content: center;
       height: 100vh;
       align-items: center;
       background-size: 100% 100% !important;
       background: url(../../../assets/images/login-new/login-shape.png) no-repeat;
   }


.m-1-hr-tag {
    /*width: -webkit-fill-available;*/
    margin: 6px 0;
    border-top: 1px solid #bdbdbd;
}

/*Text Field Margin*/
  .margin-input {
      margin-bottom: 0 !important;
  }

/*Table Tag Padding*/
  table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {
      padding-right: 10px !important;
  }

/*Check-boxes*/
  .checkbox input[type=checkbox]:active {
      background-color: red !important;
  }

/*Inputs*/
  input {
      color: #757575 !important;
      background-color: #FFFFFF !important;
  }

/* Input Group Addons*/
  .input-group-addon {
      color: #757575;
      border: 1px solid #7575754a;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      background-color: #FFFFFF;
  }

/*Selectors*/
  select {
      color: #757575 !important;
      background: #FFFFFF !important;
  }

/*Tables*/
  .table {
      border-top: 1px solid #e3eaef;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      border-radius: 4px !important;
  }

  .table-user-image {
      width: 50px;
      height: 50px;
      border: 2px solid white;
      border-radius: 50%;
      -webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
      box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
  }

   /*!*Table Lines*!*/
   /*table.dataTable {*/
   /*    border: none;*/
   /*}*/

   .dataTables_wrapper table tfoot tr th {
       border-top: 1px solid #e3eaef !important;
   }

   /*Table TBody*/
   .table-striped>tbody>tr:nth-of-type(odd) {
       background-color: #f1f3fa;
   }


/*Top Padding*/
  .top-navbar-xlarge body {
      /*padding: 80px !important;*/
  }

/*Toggle Button*/
  input:checked + .slider {
      background-color:  #747FF3 !important;
  }

/*Table Menu Color*/
  .dataTables_wrapper table thead tr th {
      color: #747FF3 !important;
  }

/*Pagination Color*/
  .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
      z-index: 2;
      color: #fff;
      background-color: #747FF3;
      border-color: #747FF3;
      cursor: default;
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

   .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
       border-radius: 4px;
       /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
   }

/*Date Time Picker Active Color*/
  .datepicker table tr td.active.active {
      background: #747FF3!important;
  }

/*Panel Body*/
  .panel-body {
      padding: 16px 20px !important;
  }

/*Home Nav Bar*/
.home-nav-bar {
    color: white;
    border: none;
    /*background-color: #09AF00;*/
    /*background-color: #323A45;*/
    /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
    background: #ffffff;
    box-shadow: 0 0px 0px rgba(0,0,0,0.16), 0 -1px 6px rgba(0,0,0,0.23);

    /*background: linear-gradient(90deg, rgba(30,68,126,1) 0%, rgba(120,192,244,1) 66%, rgba(120,192,244,1) 67%, rgba(30,68,126,1) 100%);*/
}

   .navbar.navbar-size-large {
       min-height: 64px !important;
       max-height: 64px !important;
   }

   .navbar-size-large .navbar-brand {
       height: 64px !important;
       line-height: 64px !important;
       padding: 0 15px;
       font-size: 1.43rem;
   }

/*Nav Bar Register Link*/
#register li a {
    color: white;
}

/*Nav Bar Brand*/
.navbar.navbar-size-large .navbar-brand-logo .svg {
    width: 135px;
    height: unset;
}

   .navbar.navbar-size-large .navbar-brand-logo .svg svg {
       padding-top: 10px;
   }

/*Nav Bar Nav List Link*/
.navbar.navbar-size-large .navbar-nav>li>a {
    font-size: 1.1rem;
    line-height: 80px !important;
}

/*Nav Bar Nav List*/
.navbar-default .navbar-nav.navbar-nav-bordered.navbar-right:last-of-type {
    vertical-align: center;
    padding-right: 10px;
}

/*Nav Bar Nav List Borders*/
.navbar-default .navbar-nav.navbar-nav-bordered.navbar-right:last-of-type,
.navbar-default .navbar-nav.navbar-nav-bordered>li {
    border: none;
}

/*Nav Bar Nav List Hover Active Focus*/
.navbar-default .navbar-nav.navbar-nav-bordered>li:hover {
    background-color: transparent;
}

/*Side Menu Toggle*/
#sideMenuToggle {
    display: none;
}

/*Home Nav Bar Fixed Top*/
.navbar-fixed-top {
    top: -12px;
}

/*Home Nav Bar Mobile Toggle*/
.navbar-toggle {
    margin-top: 20px;
    margin-bottom: 0;
    background-color: white;
}

/*Nav Bar Logo*/
.home-nav-bar .navbar-header .navbar-brand-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    background-color: #01112D;
}

/*Home Nav Bar Brand Logo Hover*/
.navbar-brand.navbar-brand-primary:after, .navbar-brand.navbar-brand-primary:hover:after {
    background: none;
}

/*Notifications Dropdown Toggle Badge Color*/
.navbar-default .navbar-nav>li.notifications a.dropdown-toggle .badge.badge-danger {
    background: #ff6708;
}

/*Alerts*/

/*Success Alerts*/
.alert-success {

}

/*Warning Alert*/
  .alert-danger {
      position: absolute;
      z-index: 1002;
      float: none;
      top: 36%;
      left: 27%;
      color: #FFFFFF;
      width: 50%;
      border-radius: 22px;
      line-height: 2;
      /* height: auto; */
      /* padding: 20% 0; */
      font-size: 4rem;
      font-weight: bolder;
      text-transform: capitalize;
      margin: 0 auto;
      text-align: center;
      /* border: transparent; */
      /* background-color: rgba(255, 255, 255, 0.2) !important; */
      background-color: #de362d;
      /*backdrop-filter: blur(10px);*/
      overflow: hidden;
      -webkit-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);
      -moz-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);
      box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);
  }

/*.alert-danger {*/
/*    position: absolute;*/
/*    z-index: 1002;*/
/*    float: none;*/
/*    top: 0;*/
/*    color: #ff0000;*/
/*    width: 100%;*/
/*    height: 100vh;*/
/*    padding: 20% 0;*/
/*    font-size: 4rem;*/
/*    font-weight: bolder;*/
/*    text-transform: capitalize;*/
/*    margin: 0 auto;*/
/*    text-align: center;*/
/*    border: transparent;*/
/*    background-color: rgba(255, 255, 255, 0.2) !important;*/
/*    backdrop-filter: blur(10px);*/
/*    overflow: hidden;*/
/*}*/

/*Success Alert*/
  .alert-success {
      position: absolute;
      z-index: 1002;
      float: none;
      top: 36%;
      left: 27%;
      color: #FFFFFF;
      width: 50%;
      border-radius: 22px;
      line-height: 2;
      /* height: 100vh; */
      /* padding: 20% 0; */
      font-size: 2rem;
      font-weight: bolder;
      text-transform: capitalize;
      margin: 0 auto;
      text-align: center;
      border: transparent;
      background-color: #747FF3;
      /* background-color: rgba(255, 255, 255, 0.2) !important; */
      /* backdrop-filter: blur(10px); */
      overflow: hidden;
      -webkit-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);
      -moz-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);
      box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);
  }


/*  .alert-success {*/
/*      position: absolute;*/
/*      z-index: 1002;*/
/*      float: none;*/
/*      top: 36%;*/
/*      left: 27%;*/
/*      color: #FFFFFF;*/
/*      width: 50%;*/
/*      border-radius: 22px;*/
/*      line-height: 2;*/
/*      !* height: 100vh; *!*/
/*      !* padding: 20% 0; *!*/
/*      font-size: 4rem;*/
/*      font-weight: bolder;*/
/*      text-transform: capitalize;*/
/*      margin: 0 auto;*/
/*      text-align: center;*/
/*      border: transparent;*/
/*      background-color: #747FF3;*/
/*      !* background-color: rgba(255, 255, 255, 0.2) !important; *!*/
/*      !* backdrop-filter: blur(10px); *!*/
/*      overflow: hidden;*/
/*      -webkit-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);*/
/*      -moz-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);*/
/*      box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);*/
/*  }*/


/*.alert-success {*/
/*    position: absolute;*/
/*    z-index: 1002;*/
/*    float: none;*/
/*    top: 33%;*/
/*    left: 40%;*/
/*    color: #FFFFFF;*/
/*    width: 20%;*/
/*    border-radius: 22px;*/
/*    line-height: 4;*/
/*    !*height: 100vh;*!*/
/*    !*padding: 20% 0;*!*/
/*    font-size: 4rem;*/
/*    font-weight: bolder;*/
/*    text-transform: capitalize;*/
/*    margin: 0 auto;*/
/*    text-align: center;*/
/*    border: transparent;*/
/*    background-color: #747FF3;*/
/*    !*background-color: rgba(255, 255, 255, 0.2) !important;*!*/
/*    !*backdrop-filter: blur(10px);*!*/
/*    overflow: hidden;*/
/*    -webkit-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);*/
/*    -moz-box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);*/
/*    box-shadow: 0px 0px 60px -6px rgba(0,0,0,0.65);*/
/*}*/


/*Logout link A*/
#logout-form a {
    color: #ff7d6c;
    font-weight: bolder;
    font-size: 16px;
    margin-left: 12px;
    margin-bottom: 10px;
}

/*Logout link A Hover*/
#logout-form a:hover,
#logout-form a:focus,
#logout-form a:active {
    color: red;
}

/*Main Menu Nav Bar Notification Icon*/
#main-nav .navbar-right .notifications i {
    color: #01112D;
}
   /*Main Menu Nav Bar Notification Counter*/
   #main-nav .navbar-right .notifications span {
       padding: 3px 1px;
       font-size: 10px;
       height: 16px;
       width: 16px;
       vertical-align: super;
   }

/*Main Menu Nav Bar Notification Icon Hover*/
#main-nav .navbar-right li:hover i,
#main-nav .navbar-right li:focus i,
#main-nav .navbar-right li:active i {
    color: black !important;
}

/*Main Menu Nav Bar Right User Icon*/
#main-nav .navbar-right .user {
    color: #01112D;
}

/*Main Menu Nav Bar Right User Icon Hover*/
#main-nav .navbar-right:hover .user,
#main-nav .navbar-right:focus .user,
#main-nav .navbar-right:active .user {
    color: black;
}

/*Side Bar Menu*/
#sidebar-menu {
    display: block;
    top: 52px !important;
    left: 0 !important;
    height: calc(100vh - 96px);
    /*background-color: #525463;*/
    /*border-radius: 8px;*/
    background-color: #01112D;
    width: 250px !IMPORTANT;
    /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
    -webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
    box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
    transition: 0.5s;
}


  .sidebar-mini-reveal .category, .sidebar-mini-reveal .sidebar-block {
      opacity: 1;
      border: none;
  }

  /*Side Bar Line Image*/
  .sidebar .sidebar-block {
      background-repeat: no-repeat !important;
      background: url("../images/dashboard/side-bar-bg.png");
  }

  .sidebar ul {
      border: none;
      margin-bottom: 20px;
  }

   .sidebar ul li:nth-child(1) a {
      border-top: 1px solid #a7a7a72e;
   }

   .sidebar ul li:nth-child(1) a:hover,
   .sidebar ul li:nth-child(1) a:active,
   .sidebar ul li:nth-child(1) a:focus {
       border-top: 1px solid #a7a7a72e !important;
   }

/*Side Bar Profile Image*/
  #side-bar-image {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid #ffffff;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

/*Side Bar Profile*/
  .sidebar .profile {
      padding:15px 0;
  }

/*Side Bar Profile Text*/
  .sidebar .profile .sidebar-profile-text {
      color: #bfbfbf;
      font-size: 16px;
  }

/*Side Bar Menu Icons*/
  .sidebar:not([class*=sidebar-mini]) .sidebar-menu.sm-icons-right li>a i, .sidebar[class*=sidebar-mini-reveal] .sidebar-menu.sm-icons-right li>a i {
      position: absolute;
      right: inherit !important;
      top: 16.52px;
      margin-right: 0;
  }

/*Side Bar Block*/
  .sidebar .sidebar-block {
      padding: 0 !important;
  }

/*Side Bar Collapse Icon*/
  .sidebar-menu li.hasSubmenu>a:before {
      right: 22px !important;
      content: "\f105" !important;
  }

/*Side Bar Menu Text*/
  .sidebar.sidebar-skin-dark .sidebar-menu a span {
      position: relative;
      top: 3px;
      right: -30px !important;
  }

   .sidebar.sidebar-skin-dark .sidebar-menu a {
       border-bottom: 1px solid #a7a7a72e;
       border-left: 0;
       border-right: 0;
   }

/*Side Bar Menu Link Color And Icon Color*/
.sidebar.sidebar-skin-dark .sidebar-menu a, .sidebar.sidebar-skin-dark .sidebar-menu i {
    /*color: white;*/
    /*color: #757575;*/
    color: #afafaf;
    font-weight: 500;
}

  /*Side Bar Menu Link Active*/
  /*  .sidebar.sidebar-skin-dark .sidebar-menu li.active>a, .sidebar.sidebar-skin-dark .sidebar-menu li.active>a i {*/
  /*      color: #747FF3;*/
  /*  }*/

   .sidebar.sidebar-skin-dark .sidebar-menu li.active>a,
   .sidebar .sidebar-menu li.active>a,
   .sidebar.sidebar-skin-dark .sidebar-menu li.active>a {
       color: #ffffff;
       border-bottom: 1px solid #a7a7a72e;
       background:#010b1d;
   }

  /*Side Bar Menu Link Color And Icon Color Hover*/
.sidebar.sidebar-skin-dark .sidebar-menu>li>a:hover {
    /*background:#2488FF;*/
    /*background:#09AF00;*/
    color: #747FF3;
    background:#FFFFFF;
}

/*Side Bar Menu Link Color And Icon Color Hover*/
.sidebar.sidebar-skin-dark .sidebar-menu a:hover, .sidebar.sidebar-skin-dark .sidebar-menu i:hover {
    /*background: #2488FF;*/
    /*background: #09AF00;*/
    color: #747FF3;
    /*background: #747FF3;*/
    border: none;
}

  /*Side Bar Sub Menu Color*/
  .sidebar-menu li.hasSubmenu ul li a:hover {
      color: white !important;
      background-color: #1a3e7f;
  }

  .sidebar-menu li.hasSubmenu ul li.active>a {
      color: white;
  }

/*Side Bar Menu Dropdown Menu Color*/
.sidebar.sidebar-skin-dark .sidebar-menu li.open>ul {
    background: #0e2652;
    border: none;
    box-shadow: inset 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

/*Side Bar Menu Dropdown Color When Menu Open Hover, Focus and Active*/
   .nav>.sidebar.sidebar-skin-dark .sidebar-menu>li>a:hover,
 .sidebar.sidebar-skin-dark .sidebar-menu>li>a:hover {
    /*background: #2488FF;*/
    /*background: #09AF00;*/
    /*color: #747FF3;*/
    color: #bfbfbf;
    border-bottom: 1px solid #a7a7a72e;
    background:#011334;
}

   .nav>.sidebar.sidebar-skin-dark .sidebar-menu>li.open>a, .nav>.sidebar.sidebar-skin-dark .sidebar-menu>li>a:focus,.sidebar.sidebar-skin-dark .sidebar-menu>li.open>a, .sidebar.sidebar-skin-dark .sidebar-menu>li>a:focus {
       border-bottom: 1px solid #a7a7a72e;
       background:#011334;
   }

   .side-link-active {
       color: #bfbfbf;
       border-bottom: 1px solid #a7a7a72e;
       background:#011334;
   }

   /*Register*/
   .register-form-container {
       display: flex;
       justify-content: flex-end;
       height:100vh;
       align-items: center;
       padding: 0;
   }

   .register-form-container .register-form-inner {
       display: flex;
       align-items: center;
       height:100vh;
       background: #ffffff;
   }

/*Main Dashboard*/
  .main-dashboard .panel-body {
       padding: 10px !important;
       /* background: transparent !important; */
       background-size: cover !important;
       height: 70vh;
       background-position: right !important;
       background-repeat: no-repeat !important;
       background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url(../images/dashboard/bg.png);
  }

/*Dashboard Main Menu Card*/
.main-dashboard .dashboard-menu-card {
    margin-top: 1.5rem;
    cursor: pointer;
}

/*Main Dashboard Row*/
  .main-dashboard .row [class*=col-] {
      padding: 0 0px;
  }

/*Dashboard Main Menu Card Inner*/
.main-dashboard .dashboard-menu-card .dashboard-menu-card-inner {
    float: none;
    margin: 0 auto;
    /*border-right: 1px solid #e3eaef;*/
    /*border-bottom: 1px solid #e3eaef;*/
    /*border-radius: 4px;*/
    border: 1px solid #e3eaef;
    padding-bottom: 10px;
    min-height: 115px;
    background-color: #FFFFFF;
    /*-webkit-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);*/
    /*-moz-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);*/
    /*box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);*/
}

   /*.main-dashboard .dashboard-menu-card .dashboard-card-1 {*/
   /*    border-right: 1px solid #e3eaef;*/
   /*    border-left: none !important;*/
   /*}*/

   /*.main-dashboard .dashboard-menu-card .dashboard-card-2 {*/
   /*    border: 1px solid #e3eaef;*/
   /*}*/

   /*.main-dashboard .dashboard-menu-card .dashboard-card-3 {*/
   /*    border: 1px solid #e3eaef;*/
   /*}*/

   /*.main-dashboard .dashboard-menu-card .dashboard-card-4 {*/
   /*    border-left: 1px solid #e3eaef;*/
   /*    border-right: none !important;*/
   /*}*/

/*Dashboard Main Menu Card Inner Title*/
.main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-card-text {
    color: #98a6ad;
}

/*Dashboard Main Menu Card Inner Counter*/
.main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-title .dashboard-menu-title-count h1 {
    color: #6c757d;
    font-size: 4rem;
    margin: 0;
    font-weight: bolder;
}

/*Dashboard Main Menu Card Inner Chart Text*/
.main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-title .chart-text {
    color: #616161;
    margin-bottom: 2rem;
}

/*Dashboard Main Menu Card Image Inner*/
.main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-image .dashboard-menu-image-inner {
    float: none;
    margin: 1rem auto;
}

/*Chart*/
#dashboardChart {
    width: 100% !important;
    height: 250px !important;
}

/*Login Page*/
.login-form-page {
    /*margin-top: 2.5rem;*/
}

/*Login Page Title Hat Image*/
.login-form-page .login-side-title .login-side-hat-image {
    position: absolute;
    left: 142px;
    /*z-index: -1;*/
    top: -52px;
}

/*Login Page Side Text*/
.login-form-page .login-side-text {
    float: none;
    margin: 0 auto;
}




   .login-form .login-input {
       width: 100%;
       outline: none;
       border: none;
       box-shadow: none;
       border-bottom: 1px solid #ddd;
       font-size: 16px;
       height: 34px;
       margin: 0;
       padding: 0 15px;
       transition: 0.3s;
       /*background-color: #ffffff !important;*/
       background-color: -internal-light-dark(rgb(255, 255, 255)) !important;
   }

   .login-form .login-input:-webkit-autofill,
   .login-form .login-input:-webkit-autofill:hover,
   .login-form .login-input:-webkit-autofill:focus,
   .login-form .login-input:-webkit-autofill:active  {
       /*-webkit-text-fill-color: #FFFFFF !important;*/
       -webkit-box-shadow: 0 0 0 30px white inset !important;
   }

   .login-form .login-input:-webkit-autofill {
       background-color: #ffffff !important;
   }

   .login-form .login-show-password {
       position: absolute;
       top: 7px;
       right: 20px;
   }


   .login-form .login-input-lbl {
       color: #757575;
       font-size: 16px;
       font-weight: normal;
       position: absolute;
       pointer-events: none;
       left: 20px;
       top: 7px;
       transition: 0.2s ease all;
       -moz-transition: 0.2s ease all;
       -webkit-transition: 0.2s ease all;
   }

   .login-form .login-input:focus ~ .login-input-lbl {
       color: #5260EB;
       font-weight: 600;
       top: -20px;
       font-size: 14px;
   }

   #user_name.used ~ .login-input-lbl,
   #password.used ~ .login-input-lbl {
       color: #5260EB;
       top: -20px;
       font-size: 14px;
   }

   .bar {
       position: relative;
       display: block;
       width: 100%;
   }
   .bar:before, .bar:after {
       content: '';
       height: 2px;
       width: 0;
       bottom: 0;
       position: absolute;
       background: #5260EB;
       transition: 0.2s ease all;
       -moz-transition: 0.2s ease all;
       -webkit-transition: 0.2s ease all;
   }
   .bar:before {
       left: 50%;
   }
   .bar:after {
       right: 50%;
   }
   .login-form .login-input:focus ~ .bar:before, .login-form .login-input:focus ~ .bar:after {
       width: 50%;
   }


/*Login Page Side Image*/
.login-form-page .login-side-image {
    float: none;
    margin: 0 auto;
}

/*Login Page Form*/
.login-form-page .login-form {
    /*margin-top: 1.5rem;*/
    padding-left: 6%;
    padding-right: 6%;
    height: fit-content;
    border-radius: 22px;
    /*background-color: white;*/
    /*box-shadow: 2px 2px 10px 4px rgba(0, 0, 255, .2);*/
}

/*Login Page Form Title*/

   .login-form-page .login-form .login-form-title .login-form-title-text {
       color: #1A7FB5;
       font-weight: 800;
       margin-bottom: 6rem;
   }

   .login-form-page .login-form .login-form-title .login-form-title-sub {
       color: #787677;
       font-weight: bolder;
       margin-bottom: 4rem;
   }

/*Login Page Form User Name && User Password && Options*/
.login-form-page .login-form .login-form-user-name,
.login-form-page .login-form .login-form-user-password {
    margin-top: 2rem;
}

/*Login Page Form User Name && User Password*/
.login-form-page .login-form .login-form-user-name,
.login-form-page .login-form .login-form-user-password {
    /*padding-bottom: 4px;*/
    /*border-bottom: 1px solid #707070;*/
}

/*Login Page Form User Name && User Password Hover, Focus And Active*/
.login-form-page .login-form .login-form-user-name:hover,
.login-form-page .login-form .login-form-user-name:focus,
.login-form-page .login-form .login-form-user-name:active,
.login-form-page .login-form .login-form-user-password:hover,
.login-form-page .login-form .login-form-user-password:focus,
.login-form-page .login-form .login-form-user-password:active {
    /*border-bottom: 1px solid #2b98fd;*/
}

/*Login Page Form User Icon && Password Icon*/
.login-form-page .login-form .login-form-user-name .login-user-icon,
.login-form-page .login-form .login-form-user-password .login-user-password-icon {
    border-right: 1px solid #707070;
}

/*Login Page Form User Icon && Password Icon Hover, Focus And Active*/
.login-form-page .login-form .login-form-user-name:hover .login-user-icon,
.login-form-page .login-form .login-form-user-name:focus .login-user-icon,
.login-form-page .login-form .login-form-user-name:active .login-user-icon,
.login-form-page .login-form .login-form-user-password:hover .login-user-password-icon,
.login-form-page .login-form .login-form-user-password:focus .login-user-password-icon,
.login-form-page .login-form .login-form-user-password:active .login-user-password-icon {
    border-right: 1px solid #2b98fd;
}

/*Login Page Form User Icon SVG && Password Icon SVG && Eye Icon*/
.login-form-page .login-form .login-form-user-name .login-user-icon svg,
.login-form-page .login-form .login-form-user-password .login-user-password-icon svg,
.login-form-page .login-form .login-form-user-password .login-user-password-text-field-eye svg {
    width: 100%;
}

/*Login Page Form User Icon SVG && Password Icon SVG Hover, Focus And Active Effects*/
.login-form-page .login-form .login-form-user-name:hover svg,
.login-form-page .login-form .login-form-user-name:focus svg,
.login-form-page .login-form .login-form-user-name:active svg,
.login-form-page .login-form .login-form-user-password:hover svg,
.login-form-page .login-form .login-form-user-password:focus svg,
.login-form-page .login-form .login-form-user-password:active svg,
.login-form-page .login-form .login-form-user-password:hover .login-user-password-text-field-eye svg,
.login-form-page .login-form .login-form-user-password:focus .login-user-password-text-field-eye svg,
.login-form-page .login-form .login-form-user-password:active .login-user-password-text-field-eye svg {
    fill: #2b98fd;
}

/*!*Login Page Form User Name TextField && User Password TextField*!*/
/*.login-form-page .login-form .login-form-user-name .login-user-name-text-field input,*/
/*.login-form-page .login-form .login-form-user-password .login-user-password-text-field input {*/
/*    width: 100%;*/
/*    border: none;*/
/*}*/

/*Login Page Form User Name TextField && User Password TextField Placeholder Hover, Focus And Active Effects*/
.login-form-page .login-form .login-form-user-name:hover .login-user-name-text-field input::placeholder,
.login-form-page .login-form .login-form-user-password:hover .login-user-password-text-field input::placeholder {
    color: #2b98fd;
}

/*Login Page Form Options Remember Me*/
.login-form-page .login-form .login-form-options .login-form-remember-me input,
.login-form-page .login-form .login-form-options .login-form-remember-me label {
    margin: 0 !important;
    font-weight: lighter;
}

/*Login Page Form Options Forget Password*/
.login-form-page .login-form .login-form-options .login-forget-password {
    float: right;
    margin-right: 0;
    text-align: right;
}

/*Login Page Form Login Button*/
   .login-form-page .login-form .login-form-login-button {
       display: flex;
       justify-content: center;
       margin-top: 2rem;
   }

.login-form-page .login-form .login-form-login-button button {
    width: fit-content;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 22px;
    padding: 10px 4rem;
    /*margin-top: 1.5rem;*/
    /*margin-bottom: 5rem;*/
    text-transform: capitalize !important;
    background: rgb(26,125,180);
    background: linear-gradient(90deg, rgba(26,125,180,1) 0%, rgba(27,82,182,1) 100%);
}

/*Login Page Form Login Register Text*/
.login-form-page .login-form .login-form-register-text {
    margin: 0;
}

/*Login Page Form Login Register Text h6*/
.login-form-page .login-form .login-form-register-text h6 {
    text-align: center;
}

/*Login Page Form Login Register Link*/
.login-form-page .login-form .login-form-register-Link {
    text-align: center;
    align-content: center;
    margin-top: 2rem;
    /*float: none;*/
    /*margin: 2rem auto;*/
}

/*Login Page Form Login Register Link a*/
.login-form-page .login-form .login-form-register-Link a {
    width: fit-content;
    color: #1192EE;
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid #1192EE;
    border-radius: 22px;
    padding: 10px 3rem;
    /*margin-top: 1.5rem;*/
    /*margin-bottom: 5rem;*/
    text-transform: capitalize !important;
    background: #ffffff;
}



/*Brown Circles*/
.brown-circles {
    position: absolute;
}

/*Brown Circles Left Circle*/
.brown-circles .left-brown-circle {
    position: fixed;
    z-index: -1;
    left: -106px;
    bottom: -70px;
}

/*Brown Circles Left Circle SVG && Right Circle SVG*/
.brown-circles .left-brown-circle svg,
.brown-circles .right-brown-circle svg {
    width: 100%;
}

/*Brown Circles Right Circle*/
.brown-circles .right-brown-circle {
    position: fixed;
    z-index: -1;
    right: -470px;
    bottom: -45px;
}

/*Footer*/
.footer {
    color: #888;
    background: #ECEFF1;
}

/*Role Table Permissions Column*/
#permissionsCol {
    max-width: 200px !important;
    white-space: nowrap;
    overflow: hidden;
}

/*Main Content Table Panel*/

.panel-bottom {
    margin-bottom: 60px !important;
}

/*Panel Bottom Button*/
.panel .panel-body .panel-body-buttons {
    float: right;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.panel .panel-body .dt-buttons,
.dt-buttons {
    display: inline-block;
    margin-bottom: 20px;
}

.panel .panel-body .dt-buttons .dt-button,
.dt-buttons .dt-button {
    color: #747FF3;
    text-transform: uppercase;
    font-weight: bolder;
    padding: 5px 20px;
    line-height: 2rem;
    margin-left: 10px;
    min-width: 100px;
    border-radius: 22px;
    border: 1px solid #747FF3;
    background-color: #FFFFFF;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

  .panel .panel-body .dt-buttons .dt-button:hover,
  .panel .panel-body .dt-buttons .dt-button:active,
  .panel .panel-body .dt-buttons .dt-button:focus {
      color: white;
      background-color: #747FF3;
  }

  .dt-buttons .dt-button:hover,
  .dt-buttons .dt-button:active,
  .dt-buttons .dt-button:focus {
      color: white;
      background-color: #747FF3;
  }

/*.panel .panel-body .dt-buttons .buttons-copy {*/
/*    color: #2196F3;*/
/*    font-weight: bolder;*/
/*    border: 1px solid #2196F3;*/
/*    background-color: white;*/
/*    transition: .2s;*/
/*}*/

/*.panel .panel-body .dt-buttons  .buttons-csv {*/
/*    display: none !important;*/
/*    background-color: #8DC63F;*/
/*    transition: .2s;*/
/*}*/

/*.panel .panel-body .dt-buttons  .buttons-excel {*/
/*    color: #30BCAD;*/
/*    font-weight: bolder;*/
/*    border: 1px solid #30BCAD;*/
/*    background-color: white;*/
/*    transition: .2s;*/
/*}*/

/*.panel .panel-body .dt-buttons  .buttons-pdf {*/
/*    color: #AA66CD;*/
/*    font-weight: bolder;*/
/*    border: 1px solid #AA66CD;*/
/*    background-color: white;*/
/*    transition: .2s;*/
/*}*/

/*.panel .panel-body .dt-buttons  .buttons-print {*/
/*    color: #EE4A89;*/
/*    font-weight: bolder;*/
/*    border: 1px solid #EE4A89;*/
/*    background-color: white;*/
/*    transition: .2s;*/
/*}*/

/*  .panel .panel-body .dt-buttons .buttons-copy:hover,*/
/*  .panel .panel-body .dt-buttons .buttons-copy:focus,*/
/*  .panel .panel-body .dt-buttons .buttons-copy:active {*/
/*      color: white;*/
/*      background-color: #2196F3;*/
/*  }*/

/*  .panel .panel-body .dt-buttons .buttons-excel:hover,*/
/*  .panel .panel-body .dt-buttons .buttons-excel:focus,*/
/*  .panel .panel-body .dt-buttons .buttons-excel:active {*/
/*      color: white;*/
/*      background-color: #30BCAD;*/
/*  }*/

/*  .panel .panel-body .dt-buttons .buttons-pdf:hover,*/
/*  .panel .panel-body .dt-buttons .buttons-pdf:focus,*/
/*  .panel .panel-body .dt-buttons .buttons-pdf:active {*/
/*      color: white;*/
/*      background-color: #AA66CD;*/
/*  }*/

/*  .panel .panel-body .dt-buttons .buttons-print:hover,*/
/*  .panel .panel-body .dt-buttons .buttons-print:focus,*/
/*  .panel .panel-body .dt-buttons .buttons-print:active {*/
/*      color: white;*/
/*      background-color: #EE4A89;*/
/*  }*/

/*Check boxes*/
.checkbox {
    margin: 0 !important;
}

/*Chat Close Button*/
   .chat-msg-box .chat-close-btn {
       cursor: pointer;
       position: absolute;
       z-index: 1;
       top: 0;
       right: 0;
       padding: 3px;
       width: 35px;
       height: 35px;
       border-radius: 0 50% 0 50%;
       background-color: #747FF3;
   }

   .chat-msg-box .chat-close-btn .chat-close-btn-text {
       color: white;
       margin: 0;
   }


   .chat-msg-box .chat-back-btn {
       cursor: pointer;
       position: absolute;
       display: flex;
       justify-content: center;
       text-align: center;
       align-items: center;
       z-index: 1;
       top: 0;
       right: 0;
       padding: 3px;
       width: 35px;
       height: 35px;
       border-radius: 0 50% 0 50%;
       background-color: #747FF3;
   }

/*Red Stars in The Forms*/
form label sup {
    color: red;
}

/*Lessons and Exams*/
   .lessons-and-exams .tab-content {
       padding: 0;
   }

/*Student Lessons and Exams Tabs List*/
.lessons-and-exams .panel-body .tab-content .tab-pane .lesson-list,
.lessons-and-exams .panel-body .tab-content .tab-pane .exam-list {
    color: #747FF3 !important;
    font-weight: bolder;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/*!*Student Lessons and Exams Tabs List Link*!*/
/*.lessons-and-exams .panel-body .tab-content .tab-pane .lesson-list li a,*/
/*.lessons-and-exams .panel-body .tab-content .tab-pane .exam-list li a {*/
/*    color: #5d5d5d;*/
/*    font-size: 2rem;*/
/*    font-weight: bolder;*/
/*    border-bottom: 1px solid #858585;*/
/*}*/

/*!*Student Lessons and Exams Tabs List Link*!*/
/*.lessons-and-exams .panel-body .tab-content .tab-pane .lesson-list li a:hover,*/
/*.lessons-and-exams .panel-body .tab-content .tab-pane .exam-list li a:hover {*/
/*    color: black;*/
/*    border-bottom: 1px solid black;*/
/*}*/

/*Student Lessons and Exams Time Table*/
.lessons-and-exams .panel-body .time-table-header {
    margin-top: 2rem;
}

/*Chat Box*/

/*Chat Box Button*/
.chat-box-button {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1500;
    border: none;
}

.chat-box-button img {
    width: 100px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/*Chat Box Button*/
.chat-box-button button {
    width: 85px;
    height: 85px;
    color: white;
    padding: 0;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    transition: .2s;
}

/*Chat Box Button*/
.chat-box-button button:hover,
.chat-box-button button:focus,
.chat-box-button button:active {
    transform: scale(1.2);
   background-color: transparent;
}

/*Chat Box Button*/
.chat-box-button button svg {
    width: 100%;
}

/*Chat Box Container*/
.chat-box {
    display: none;
    margin: 0 auto;
    position: fixed;
    /*bottom: 480%;*/
    top: 6%;
    left: 20%;
    z-index: 2500;
    padding: 0;
    background-color: white;
    border-radius: 22px;
    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
}

 .chat-box .row {
    margin: 0;
}

/*Chat List Box*/
 .chat-box .chat-list-box {
    padding: 16px;
    /*background-color: #1b2831;*/
    /*border-top-left-radius: 22px;*/
    /*border-bottom-left-radius: 22px;*/
}

/*Search Box*/
 .chat-box .chat-list-box .chat-search-box {
    padding-bottom: 12px;
    border-bottom: 1px solid #bababa;
}

.chat-box .chat-list-box .chat-search-box .input-group {
    border-radius: 22px;
    padding: 0 16px;
    background-color: #747FF3;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

/*Search Box Input Add-On*/
 .chat-box .chat-list-box .chat-search-box .input-group span,
 .chat-box .chat-list-box .chat-search-box .input-group input {
    border: none;
    color: white !important;
    background-color: #747FF3 !important;
}

/*Search Box Input Add-On SVG*/
 .chat-box .chat-list-box .chat-search-box .input-group span svg {
    fill: white;
    width: 15px;
    height: 15px;
}

/*Search Box Input Placeholder*/
 .chat-box .chat-list-box .chat-search-box .input-group input::placeholder {
    color: white;
}

/*Chat List Title*/
 .chat-box .chat-list-box .chat-list-title h5 {
    margin: 10px 0 0 0;
    font-weight: bolder;
    padding-bottom: 5px;
    border-bottom: 1px solid #bababa;
}

/*Chat List Contact*/
 .chat-box .chat-list-box .chat-contact {
    cursor: pointer;
    margin-top: 20px;
    /*padding-bottom: 5px;*/
    border-bottom: 1px solid #bababa;
}

/*Chat List Contact Image*/
 .chat-box .chat-list-box .chat-contact .chat-contact-image-container .chat-contact-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/*Chat List Contact Active Status*/
 .chat-box .chat-contact-active-status {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border: .5px solid #47434f;
    border-radius: 50%;
    background-color: #747FF3;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
}

/*Chat List Contact Name*/
 .chat-box .chat-list-box .chat-contact .chat-contact-name h4 {
    color: #5e5e5e;
    margin: 0;
    font-weight: bolder;
}

/*Chat Message Box*/
 .chat-box .chat-msg-box {
    padding: 16px;
    border-left: 1px solid #1b2831;
}

/*Chat Message Box Contact*/
 .chat-box .chat-msg-box .chat-msg-contact-container {
    padding-bottom: 7px;
    border-bottom: 1px solid #bababa;
}

/*Chat Message Box Contact Title*/
 .chat-box .chat-msg-box .chat-msg-contact-container .chat-msg-contact-details .chat-msg-contact h3 {
    color: #747474;
    margin: 0;
    font-weight: bolder;
}

/*Chat Message Box Messages*/
 .chat-msg-box .chat-msg-contact-messages {
    margin-top: 10px;
}

/*Chat Message Box Messages Container*/
 .chat-msg-box .chat-msg-contact-messages .chat-message-container {
    margin-bottom: 10px;
}


/*Chat Message Box Messages Container*/
  .chat-msg-box .chat-msg-contact-messages .chat-friend .msg-container-message {
      padding: 10px;
      border: 1px solid #bababa;
      border-radius: 22px;
      background-color: rgb(248, 248, 248);
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

/*Chat Message Box Messages Container*/
 .chat-msg-box .chat-msg-contact-messages .chat-user .msg-container-message {
    padding: 10px;
    border: 1px solid #bababa;
    border-radius: 22px;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

/*Chat Message Box Messages Container*/
 .chat-msg-box .chat-msg-contact-messages .chat-message-container .msg-container-message p {
    margin: 0;
    line-height: 20px;
}

/*Chat Message Box Messages Container*/
 .chat-msg-box .chat-msg-contact-messages .chat-user {
    float: right;
}

/*Send Area*/
 .chat-msg-box .chat-msg-contact-send-area .input-group {
    border-radius: 22px;
    padding: 0 16px;
    background-color: #747FF3;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

/*Send Area Input*/
 .chat-msg-box .chat-msg-contact-send-area .input-group input {
    color: white !important;
    border: none;
    background-color: #747FF3 !important;
     margin-bottom: 0 !important;
}

/*Send Area Input Button*/
 .chat-msg-box .chat-msg-contact-send-area .input-group .input-group-btn button {
    border: none;
    background-color: #747FF3;
}

/*Send Area Input Button SVG*/
 .chat-msg-box .chat-msg-contact-send-area .input-group .input-group-btn button svg {
    fill: white;
    width: 20px;
    height: 20px;
}


/*Send Area Input Placeholder*/
 .chat-msg-box .chat-msg-contact-send-area .input-group input::placeholder {
    color: white;
}

 /*Error Message*/
 .error-msg {
     color: red;
 }

/*Menu Panel Add Button*/
 .panel .panel-heading .menu-add {
     position: absolute;
     top: 5px;
     right: 20px;
 }

 .panel {
     border: none;
     background-color: #ffffff;
 }

 .panel .panel-body {
     color: #757575;
     /*font-family: roboto;*/
     background-color: #FFFFFF;
     border-radius: 8px;
     /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
     /*-webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);*/
     /*box-shadow: 0 0 35px 0 rgba(154,161,171,.15);*/
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
 }

 .panel .panel-heading {
     margin-bottom: 1rem;
     padding-left: 4px;
     padding-bottom: 15px;
     background-color: white;
     /*border-bottom: 1px solid #09AF00;*/
     border: none;
     border-radius: 8px;
     /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
     /*-webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);*/
     /*box-shadow: 0 0 35px 0 rgba(154,161,171,.15);*/
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
 }

.panel .panel-heading .panel-title {
    color: #757575;
    font-size: 16px;
    /*width: max-content;*/
    padding: 10px 15px;
    font-family: roboto;
    font-weight: bolder;
    /*border-radius: 4px 22px 22px 4px;*/
    /*background-color: #09AF00;*/
    /*background-color: #09AF00;*/
    /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
}

  .panel .panel-heading .panel-title .panel-title-icon {
      margin-right: 15px;
  }

.panel .panel-heading .menu-add .input-group a {
    /*color: #00CAAB;*/
    color: #747FF3;
    min-width: 100px;
    font-weight: bolder;
    margin-top: 6px;
    margin-right: 10px;
    border-radius: 22px;
    /*border: 1px solid #00CAAB;*/
    border: 1px solid #747FF3;
    background-color: white;
    text-transform: capitalize;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transition: .2s;
}

  .panel .panel-heading .menu-add .input-group a i {
      margin-right: 10px;
  }

/*Table Add Button Animation*/
.panel .panel-heading .menu-add .input-group a:hover {
    color: white;
    background-color: #747FF3;
}

.panel .panel-body .form-group label {
    align-self: center;
    padding: 8px;
    color: #757575;
    text-transform: capitalize !important;
    margin-bottom: 0;
}

.panel .panel-body input,
.panel .panel-body select {
    padding: 8px 12px;
    border-radius: 4px;
    border: 0.5px solid #7575754a;
    margin-bottom: 8px;
    background-color: white;
    /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
}

/*Selector Active color*/
  .select2-results .select2-highlighted {
      color: #fff;
      background-color: #747FF3 !important;
  }

.panel .panel-body .form-group .checkbox input {
    width: 15px;
    height: 15px;
    border: 1px solid #747FF3;
    background-color: white;
}

/*Input Groups*/
  .panel .panel-body .form-group .input-group {
      margin-bottom: 8px;
  }

.panel .panel-body .form-group .select2-choice,
.panel .panel-body .form-group .select2-choices,
.panel .panel-body .form-group textarea {
    border-radius: 4px;
    border: .5px solid #7575754a;
    margin-bottom: 8px !important;
    background-color: white;
    /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
}

.panel .panel-body .btn-success {
    color: #FFFFFF !important;
    border-radius: 4px;
    font-weight: bolder;
    min-width: 100px;
    font-size: 14px;
    margin: 0;
    vertical-align: middle;
    text-overflow: ellipsis;
    text-transform: capitalize;
    border: none;
    background-color: #747FF3 !important;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/*Button Add Answer*/
  .panel .panel-body .btn-a-r {
      border-radius: 4px;
      min-width: 64px;
      font-size: 14px;
      border: none;
      vertical-align: middle;
      text-overflow: ellipsis;
      text-transform: capitalize;
      font-weight: bolder;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

/*Panel Body Table Buttons*/
.table tbody tr td .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #656565;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    /* padding: 10px 14px !important; */
    background-color: white;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/*Panel Body Table Buttons*/
.panel .panel-body .table tbody tr td .btn-info:hover,
.panel .panel-body .table tbody tr td .btn-info:focus,
.panel .panel-body .table tbody tr td .btn-info:active {
    color: white;
    /*background-color: #028CEE;*/
    background-color: #747FF3;
}

  /*Panel Body Table Buttons*/
  .panel .panel-body .table tbody tr td .btn-view:hover,
  .panel .panel-body .table tbody tr td .btn-view:focus,
  .panel .panel-body .table tbody tr td .btn-view:active {
      color: white;
      /*background-color: #09AF00;*/
      background-color: #AA66CD;
  }

/*Panel Body Table Buttons*/
.panel .panel-body .table tbody tr td .btn-danger:hover,
.panel .panel-body .table tbody tr td .btn-danger:focus,
.panel .panel-body .table tbody tr td .btn-danger:active {
    color: white;
    background-color: #EE0216;
}

.table tbody tr td .btn-view:hover,
.table tbody tr td .btn-view:focus,
.table tbody tr td .btn-view:active {
    color: white;
    background-color: #AA66CD;
}

  /*Student Dashboard View Button*/
  .student-dashboard-btn-view {
      color: #747FF3;
      border: 1px solid #747FF3;
      border-radius: 50%;
      /*float: right;*/
      margin-right: 10px;
      padding: 10px 14px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .student-dashboard-btn-view:hover,
  .student-dashboard-btn-view:focus,
  .student-dashboard-btn-view:active {
      color: white;
      background-color: #747FF3;
  }

  /*Student Dashboard Accordion*/
  .student-dash-accordion {
      /*margin-top: 2rem;*/
  }

   .student-dash-accordion .student-dash-accordion-panel .student-dash-accordion-panel-heading .panel-title a {
       width: 100%;
       font-weight: 600;
       /*margin-bottom: 2px;*/
       padding: 18px 15px;
       border: 1px solid #a8a8a8;
       border-radius: 4px;
       /*background-color: #05668d;*/
       background-color: #ffffff;
       box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 5px 0 rgba(0, 0, 0, 0.12);
   }

   .student-dash-accordion .student-dash-accordion-panel .student-dash-accordion-panel-heading .panel-title a:hover,
   .student-dash-accordion .student-dash-accordion-panel .student-dash-accordion-panel-heading .panel-title a:active {
       color: #ffffff !important;
       background-color: #0077b6 !important;
   }

   .student-dash-accordion .student-dash-accordion-panel .student-dash-accordion-panel-heading .panel-title a,
   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-panel-child .student-dash-accordion-panel-child-heading .panel-title a,
   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-last-child .student-dash-accordion-panel-last-child .student-dash-accordion-panel-last-child-heading .panel-title a {
       color: #757575;
       position: relative;
       /*display: flex;*/
       /*justify-content: space-between;*/
   }

   .breakdown {
       position: absolute;
       right: 40px;
   }

   .student-dash-accordion .student-dash-accordion-panel .panel-collapse .panel-body {
       padding: 15px 0 !important;
   }

   .student-dash-accordion .student-dash-accordion-panel .panel-collapse .panel-body .student-request-lecture-card-deck {
       padding: 2rem 0;
   }

   .student-dash-accordion .student-dash-accordion-panel .student-dash-accordion-panel-body,
   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-panel-child .student-dash-accordion-panel-child-body {
       /*border-left: 1px solid #a8a8a8;*/
       /*border-right: 1px solid #a8a8a8;*/
   }

   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-panel-child .student-dash-accordion-panel-child-heading .panel-title a {
       font-weight: 500;
       /*margin-bottom: 2px;*/
       padding: 12px 15px 12px 64px;
       border: 1px solid #a8a8a8;
       border-radius: 4px;
       /*background-color: #028090;*/
       background-color: #eaeaea;
       box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 5px 0 rgba(0, 0, 0, 0.12);
   }

   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-panel-child .student-dash-accordion-panel-child-heading .panel-title a:hover,
   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-panel-child .student-dash-accordion-panel-child-heading .panel-title a:active {
       color: #ffffff !important;
       background-color: #0096c7 !important;
   }


   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-last-child .student-dash-accordion-panel-last-child .student-dash-accordion-panel-last-child-heading .panel-title a {
       /*margin-bottom: 2px;*/
       padding: 12px 15px 12px 135px;
       border: 1px solid #a8a8a8;
       border-radius: 4px;
       /*background-color: #00a896;*/
       background-color: #eaeaea;
       box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 5px 0 rgba(0, 0, 0, 0.12);
   }

   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-last-child .student-dash-accordion-panel-last-child .student-dash-accordion-panel-last-child-heading .panel-title a:hover,
   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-last-child .student-dash-accordion-panel-last-child .student-dash-accordion-panel-last-child-heading .panel-title a:active {
       color: #ffffff !important;
       background-color: #00b4d8 !important;
   }

   .student-dash-accordion .student-dash-accordion-child .student-dash-accordion-last-child .student-dash-accordion-panel-last-child .student-dash-accordion-panel-last-child-body {
       padding: 10px 0;
       border: unset;
       /*border-left: 1px solid #a8a8a8;*/
       /*border-right: 1px solid #a8a8a8;*/
       box-shadow: unset;
       -webkit-box-shadow: unset;
   }

   .student-dash-accordion-panel-heading-title a[aria-expanded="true"] {
       color: #ffffff !important;
       border: 1px solid transparent !important;
       background-color: #0077b6 !important;
   }

   .student-dash-accordion-panel-heading-title a[aria-expanded="false"] {
       color: #757575 ;
       background-color: #ffffff ;
   }

   .student-dash-accordion-panel-child-heading a[aria-expanded="true"] {
       color: #ffffff !important;
       border: 1px solid transparent !important;
       background-color: #0096c7 !important;
   }

   .student-dash-accordion-panel-child-heading a[aria-expanded="false"] {
       color: #757575 ;
       background-color: #efefef ;
   }

   .student-dash-accordion-panel-last-child-heading a[aria-expanded="true"] {
       color: #ffffff !important;
       border: 1px solid transparent !important;
       background-color: #00b4d8 !important;
   }

   .student-dash-accordion-panel-last-child-heading a[aria-expanded="false"] {
       color: #757575 ;
       background-color: #ffffff ;
   }

   /*.heading-active {*/
   /*    background-color: #0096c7 !important;*/
   /*}*/


   .student-dash-accordion .panel-title a:before {
       font-family: 'Glyphicons Halflings';
       content: "\2212";
       float: left;
       color: #757575;
       margin-right: 10px;
       transition: .2s;
   }

   .student-dash-accordion .panel-title a.collapsed:before {
       content: "\002B";
   }

   .student-dash-accordion .panel-title a:hover:before,
   .student-dash-accordion .panel-title a:hover:after,
   .student-dash-accordion .panel-title a:active:before,
   .student-dash-accordion .panel-title a:active:after,
   .student-dash-accordion .panel-title a[aria-expanded="true"]:before,
   .student-dash-accordion .panel-title a[aria-expanded="true"]:after {
       color: #ffffff !important;
   }

   .student-dash-accordion .panel-title a:after {
       font-family: 'Glyphicons Halflings';
       content: "\e114";
       float: right;
       color: #757575;
       transition: .2s;
   }

   .student-dash-accordion .panel-title a.collapsed:after {
       content: "\e080";
   }


/*Panel Body Buttons*/
.panel .panel-body .panel-body-buttons button {
    height: max-content;
    min-width: 100px;
    border: none;
    border-radius: 4px;
    font-weight: bolder;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        margin-right: 33px;
}

/*Panel Body Buttons Cancel Button*/
  .panel .panel-body .panel-body-buttons .btn-default {
      border-radius: 4px;
      font-weight: bolder;
      font-size: 14px;
      vertical-align: middle;
      text-overflow: ellipsis;
      text-transform: uppercase;
      border: none !important;
      color: #757575;
      min-width: 100px;
      background-color: #F2F4F6;
      box-shadow: 0 0px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 0px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

/*Panel Body Buttons Done Button*/
.panel .panel-body .panel-body-buttons .btn-primary {
    color: white;
    min-width: 100px;
    /*background-color: #09AF00;*/
    background-color: #747FF3;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

   .btn-primary {
       color: white;
       min-width: 100px;
       font-weight: bold;
       /*background-color: #09AF00;*/
       background-color: #747FF3;
       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }

   .btn-primary:hover,
   .btn-primary:active,
   .btn-primary:focus {
       color: white;
       background-color: #747FF3;
   }

/*Data Table Search Box Label*/
div.dataTables_wrapper div.dataTables_filter label {
    font-weight: bolder;
}

/*Data Table Search Box*/
div.dataTables_wrapper div.dataTables_filter input {
    margin-bottom: 10px;
    border-radius: 22px;
}

/*Data Table Pagination Buttons*/
.pagination>li a {
    border-radius: 4px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/*Lesson Create List Create Lesson Card*/
.panel-card .panel-card-panel {
    border: none !important;
    border-radius: 4px;
    transition: .2s;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/*Lesson Create List Create Lesson Card Font*/
.panel-card .panel-card-panel .panel-body h3,
.panel-card .panel-card-panel .panel-body h4,
.panel-card .panel-card-panel .panel-body span,
.panel-card .panel-card-panel .panel-body label {
    color: #656565;
}

/*Create Lesson Card Image*/
  .panel .panel-body .panel-card .panel-card-panel .create-lesson-card-image img {
      width: 100%;
      /*position: relative;*/
      /*left: -10%;*/
      margin-top: 20px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

/*Lesson Create List Create Lesson Card Footer*/
.panel .panel-body .panel-card .panel-card-panel .panel-card-panel-footer .create-lesson-card-view-btn,
.panel .panel-body .tab-content .table .btn-block {
    color: white;
    float: right;
    border-radius: 4px;
    /*background-color: #028CEE !important;*/
    background-color: #747FF3 !important;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/*Lesson Create List Create Lesson Card Footer Delete Button*/
.panel .panel-body .panel-card .panel-card-panel .panel-card-panel-footer .create-lesson-card-delete-btn {
    color: #656565;
    border: none;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transition: .2s;
}

/*Lesson Create List Create Lesson Card Footer Delete Button Hover*/
.panel .panel-body .panel-card .panel-card-panel .panel-card-panel-footer .create-lesson-card-delete-btn:hover,
.panel .panel-body .panel-card .panel-card-panel .panel-card-panel-footer .create-lesson-card-delete-btn:focus,
.panel .panel-body .panel-card .panel-card-panel .panel-card-panel-footer .create-lesson-card-delete-btn:active {
    color: white;
    background-color: #EE0216;
}

.table tbody td {
    text-align: center;
}

/*Student Package List Expire Label*/
.panel .panel-body .table tbody td .expire-label {
    text-transform: uppercase;
    border-radius: 22px;
    min-width: 80px;
    color: #EE4A89;
    font-size: 10px;
    text-align: center;
    vertical-align: center;
    background-color: white;
    border: 1px solid #EE4A89;
}

/*Student Package List Ongoing Label*/
.panel .panel-body .table tbody td .ongoing-label {
    text-transform: uppercase;
    border-radius: 22px;
    font-size: 10px;
    min-width: 80px;
    text-align: center;
    vertical-align: center;
    background-color: white;
    color: #028CEE;
    border: 1px solid #028CEE;
}

/*My Profile Profile Image*/
#pro-img {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/*Student View Dashboard Lecture Image*/
.panel .lecture-image-content {
    height: 160px;
    margin: 0 auto;
    text-align: center;
    overflow: inherit;
    /*height: inherit !important;*/
    transition: .2s;
}

.lecture-image-content-img-container {
    height: 160px;
    padding: 0 !important;
    overflow: hidden;
}

.lecture-image-content-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px 4px 0 0;
}

/*Student View Lecture Image Content Image*/
   .panel .lecture-image-content .lecture-image {
       position: absolute;
       top: -24px;
       right: -16px;
   }

/*Student View Lecture Image Panel Body*/
.panel .lecture-package-panel-body {
    height: 110px;
    text-transform: capitalize;
    padding: 8px 15px;
    border-radius: 0 0 8px 8px;
    background-color: #FFFFFF;
    transition: .2s;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 5px 0 rgba(0, 0, 0, 0.12);
}

/*.lecture-package-panel-card-body {*/
/*    padding: 16px;*/
/*    border-radius: 0 0 8px 8px;*/
/*    background-color: #FFFFFF;*/
/*}*/

/*Student View Lecture Image*/
.panel .lecture-image-content .lecture-image img {
    border: 2px solid white;
}

/*Select Package Form*/
.select-package-form {
    margin: 0;
}

/*Select Packages*/
.select-package .panel-heading {
    color: #656565;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #c8c8c8;
}

.select-package-form .select-package .btn-show-payment {
    color: white !important;
    float: right;
    border-radius: 22px;
    min-width: 80px;
    padding: 5px 0;
    margin-top: 10px;
    border: none !important;
    background-color: #747FF3 !important;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.select-package-form .select-package .package-payment-method {
    margin-top: 20px;
}

.select-package-form .select-package .package-payment-method select {
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

.select-package-form .select-package .pay-btn-content {
    margin-top: 10px;
    text-align: center;
}

.select-package-form .select-package .pay-btn-content .pay-now-btn {
    color: white !important;
    border-radius: 22px;
    min-width: 100px;
    background-color: #747FF3 !important;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/*Label Success*/
   .panel-card .label-success {
       /*color: white;*/
       /*border-radius: 50%;*/
       /*!* line-height: 2.5; *!*/
       /*padding: 10px 13px !important;*/
       /*background-color: #747FF3;*/
   }

   .panel .student-dashboard-success-label {
       position: absolute;
       display: block;
       top: 10px;
       font-weight: 500;
       right: 10px;
       width: 40px;
       height: 22px;
       padding: unset !important;
       border-radius: 22px;
       border: 2px solid #FFFFFF;
       background: #149b12;
       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }

.panel-card .label-success i {
    color: white;
}

/*.panel-card .pending-label {*/
/*    position: absolute;*/
/*    display: block;*/
/*    top: 10px;*/
/*    right: 10px;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    padding: unset !important;*/
/*    !* color: #ff6708 !important; *!*/
/*    border-radius: 50%;*/
/*    !* text-transform: capitalize; *!*/
/*    !* font-size: 14px !important; *!*/
/*    border: 2px solid #FFFFFF;*/
/*    background-color: #ff6708;*/
/*    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
/*    animation: blink 2s linear infinite;*/
/*    transition: 0.2s;*/
/*}*/

   .panel .student-dashboard-pending-label {
       position: absolute;
       display: block;
       top: 10px;
       right: 10px;
       width: 20px;
       height: 20px;
       padding: unset !important;
       /* color: #ff6708 !important; */
       border-radius: 50%;
       /* text-transform: capitalize; */
       /* font-size: 14px !important; */
       border: 2px solid #FFFFFF;
       background-color: #ff6708;
       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
       -webkit-animation:blinkP 1s linear infinite;
       -moz-animation:blinkP 1s linear infinite;
       animation: blinkP 1s  infinite;
       transition: 0.2s;
   }

   @keyframes blinkP {
       0%{
           background: #FFFFFF;
       }
       15%{
           background: #ff6708;
       }
       100%{
           background: #FFFFFF;
       }
   }


/*Student Dashboard Search Form*/
.panel .student-dash-search-form {
    /*margin-top: 10px;*/
    margin-bottom: 32px;
    padding: 20px 0;
    border-radius: 8px;
    background-color: #FFFFFF;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

   .panel .student-dashboard-inner {
       margin-bottom: 6rem;
       padding: 2rem 0;
       border-radius: 8px;
       background: #FFFFFF;
       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
   }

.panel .student-dash-search-form fieldset{
    color: #757575 !important;
}

/*Student Dashboard Search Form Input Field*/
.panel .student-dash-search-form input {
    background-color: white;
    border-radius: 8px;
    border: 1px solid rgba(155, 155, 155, 0.85);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}

   .panel .student-dash-search-form input::placeholder {
       color: #878585;
   }

   /*.student-dashboard-container {*/
   /*    padding: 15px;*/
   /*    margin-bottom: 4rem;*/
   /*    border-radius: 8px;*/
   /*    background: white;*/
   /*}*/

   .student-dashboard-pagination {
       margin-bottom: 4rem;
   }

/*student-dash-search-form-btn*/
.panel .student-dash-search-form-btn {
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px !important;
    border: 1px solid rgba(155, 155, 155, 0.85);
}

   /*student-dash-search-form-btn-search*/
   .panel .student-dash-search-form-btn-search {
       color: white !important;
       /*font-size: 12px;*/
       font-weight: bold;
       text-transform: uppercase;
       border-radius: 8px !important;
       border: 1px solid #4C9DD5 !important;
       background: #4C9DD5 !important;
   }


/*Student Request lecture Card*/
  .panel .student-request-lecture-card {
      /*padding-left: 0;*/
      margin: 20px 0;
      transition: .2s;
  }

   .panel .student-request-lecture-card:hover .panel .lecture-image-content,
   .panel .student-request-lecture-card:hover .panel .student-request-lecture-card,
   .panel .student-request-lecture-card:hover #package_name,
   .panel .student-request-lecture-card:hover .panel .lecture-package-panel-body {
       transform: scale(1.002);
       box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
   }

/*Lecture Request Button*/
  .panel .lecture-request-btn {
      color: #4C9DD5;
      font-weight: bolder;
      text-transform: capitalize !important;
      border: 1px solid #4C9DD5;
      font-size: 14px !important;
      border-radius: 8px;
      background-color: white;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: .2s;
  }

  /*Lecture Request Button*/
  .panel .lecture-request-btn:hover,
  .panel .lecture-request-btn:focus,
  .panel .lecture-request-btn:active {
      color: white;
      background-color: #4C9DD5;
  }

/*Lecture Comments Button*/
  .panel .lecture-comments-btn {
      color: #757575;
      /*float: right;*/
      /*font-weight: bolder;*/
      /*text-transform: capitalize;*/
      border: 1px solid #757575;
      /*font-size: 14px !important;*/
      border-radius: 50%;
      /*min-width: 128px;*/
      padding: 10px 14px;
      background-color: white;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: .2s;
  }

  /*Lecture Comments Button*/
  .panel .lecture-comments-btn:hover,
  .panel .lecture-comments-btn:focus,
  .panel .lecture-comments-btn:active {
      color: white;
      background-color: #757575;
  }

/*Student Request Content*/
  .panel .student-request-content {
      background-color: white;
      border: none;
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

/*Student Request Icon*/
  .panel .student-request-content .student-request-icon {
      margin-bottom: 1px;
      border-radius: 50%;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

/*Student Request Row Alignment*/
  .panel .panel-body .student-request-content .student-request-alignment {
      /*margin-top: 8px;*/
      display: flex;
      justify-content: center;
  }

/*  Student Request Title*/
  .panel .panel-body .student-request-content .student-request-title {
      color: #656565;
      font-size: 16px;
      font-weight: bolder;
      text-align: left;
      text-transform: capitalize;
  }

  .panel .panel-body .student-request-content .student-request-title .link-text-color {
      font-size: 14px;
      word-break: break-word;
  }

  .panel .panel-body .student-request-content .student-request-title span {
      margin-bottom: 10px;
  }

      /*Student Request Accept Button*/
  .panel .panel-body .student-request-content .student-request-accept-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2196F3;
      font-size: 16px;
      background-color: white;
      text-transform: capitalize;
      margin: 15px 5px 5px 5px;
      padding: 0;
      width: 40px;
      min-width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #2196F3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

/*Student Request Cancel Button*/
  .panel .panel-body .student-request-content .student-request-cancle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #EE0216;
      font-size: 16px;
      background-color: white;
      text-transform: capitalize;
      padding: 0;
      margin: 15px 5px 5px 5px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #EE0216;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: .2s;
  }


/*Student Request Accept Button Hover Focus Active*/
  .panel .panel-body .student-request-content .student-request-accept-btn:hover,
  .panel .panel-body .student-request-content .student-request-accept-btn:focus,
  .panel .panel-body .student-request-content .student-request-accept-btn:active {
      color: white;
      background-color: #2196F3;
  }

  /*Student Request Cancel Button Hover Focus Active*/
  .panel .panel-body .student-request-content .student-request-cancle-btn:hover,
  .panel .panel-body .student-request-content .student-request-cancle-btn:focus,
  .panel .panel-body .student-request-content .student-request-cancle-btn:active {
      color: white;
      background-color: #EE0216;
  }

/*Lecture Lessons Row Titles*/
  .panel .panel-body .lecture-lessons-row-titles {
      text-align: center;
      padding: 0;
      /*margin: 0;*/
      border-radius: 22px;
      text-transform: capitalize;
      background-color: #525463;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  .panel .panel-body .lecture-lessons-row-titles .row-title {
      border-left: 1px solid white;
      border-right: 1px solid white;
  }

  .panel .panel-body .lecture-lessons-row-titles .row-title h4 {
      color: white;
      font-weight: bolder;
  }

/*Lecture Lessons*/
  .panel .panel-body .lecture-lessons {
      text-align: center;
      text-transform: capitalize;
      border-bottom-left-radius: 22px;
      border-bottom-right-radius: 22px;
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0), 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14);
  }

/*Lecture Lessons Row*/
  .panel .panel-body .lecture-lessons .lecture-lessons-row {
      margin: 0;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
  }

/*Lecture Lesson Name*/
  .panel .panel-body .lecture-lessons .lecture-lessons-row .lecture-lesson-name {
      font-weight: bolder;
  }

/*Student View Lesson Button*/
  .panel .panel-body .lecture-lessons .status .student-view-lesson-btn {
      /*color: #2196F3;*/
      color: white;
      background-color: #2196F3;
      /*border: 1px solid #2196F3;*/
      border-radius: 22px;
      /*font-weight: bolder;*/
      text-transform: capitalize;
      border: none;
      min-width: 100px;
      margin-bottom: 8px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

/*Expire Button*/
  .panel .panel-body .expire-btn {
      color: #EE0216;
      background-color: transparent !important;
      text-transform: capitalize;
      /*border-radius: 22px;*/
      /*min-width: 100px;*/
      /*border: 1px solid #EE0216;*/
      /*box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0), 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14);*/
  }

/* Lessons And Exams*/
  .lessons-and-exams .panel .lessons-exam-heading {
      /*margin-bottom: 2px;*/
  }

/*Lessons And Exams List Item*/
  .lessons-and-exams .panel .panel-body .lessons .lesson-list .lessons-list-item {
      margin-bottom: 10px;
  }

  /*Lessons And Exams List Item Link*/
  .lessons-and-exams .panel .panel-body .lessons .lesson-list .lessons-list-item a {
      color: #757575 !important;
      font-weight: lighter;
      font-size: 16px;
      text-decoration: none !important;
      text-transform: capitalize;
  }

   /*Lessons And Exams List Item Link*/
   .lessons-and-exams .panel .panel-body .lessons .lesson-list .lessons-list-item a span {
       margin-right: 14px;
   }

/*All Lessons*/
  .all-lessons .page-section {
      padding: 0;
  }

  #all-lesson {
      padding: 0;
  }

/*All Lesson Page Section Media Grid*/
  .all-lessons .page-section .media-grid {
      /*padding: 10px 0;*/
  }

/*Lesson Number Icon*/
  .all-lessons .page-section .lesson-number-icon {
      border-radius: 50%;
      border: 2px solid white;
      background-color: #747FF3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

/*All Lessons Title Container*/
  .all-lessons .all-lessons-title-container {
      padding: 10px 20px;
      border-radius: 8px;
      background-color: #FFFFFF;
      -webkit-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);
      -moz-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);
      box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);
  }

/*All Lesson Title*/
  .all-lessons .page-section .all-lesson-title-inner {
      /*padding: 10px 40px;*/
      /*width: max-content;*/
      /*background-color: #09AF00;*/
      /*border-radius: 0 22px 22px 0;*/
      /*border: none;*/
      /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
  }


  .all-lessons .page-section .all-lesson-title-inner .all-lesson-title {
      color: #757575;
      text-transform: capitalize;
  }

      /*All Lessons Sub Lessons*/
  .all-lessons .all-lesson-sub-lessons {
      padding: 10px;
      border-radius: 8px;
      background-color: #FFFFFF;
      -webkit-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);
      -moz-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);
      box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);
  }

  /*All Lesson Sub Lesson Title*/
  .all-lessons .all-lesson-sub-lessons .all-lesson-sub-lessons-title {
      padding: 10px;
      border: 1px solid #747FF3;
      border-radius: 4px;
  }

  /*All Lessons Sub Title*/
  .all-lessons .all-lesson-sub-lessons .all-lesson-sub-lessons-text .sub-lesson-text-headline {
      color: #757575;
      font-weight: bolder;
      text-transform: capitalize;
  }

  /*All Lessons Sub Lesson Icon*/
  .all-lessons .all-lesson-sub-lessons .all-lessons-sub-icon {
      background-color: #747FF3 !important;
      border: 1px solid white;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  #subLessonBtnOpen {
      position: absolute !important;
      right: 24px;
      top: 0;
      z-index: 1;
      color: white;
      cursor: pointer;
      background-color: #30BCAD;
      min-width: 100px;
      text-align: center;
      font-weight: bolder;
      font-size: 14px;
      text-transform: capitalize;
      padding: 10px 0;
      border: 1px solid #FFFFFF;
      border-radius: 0 0 22px 22px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
      transition: .2s;
  }

      /*All Lesson Sub Lesson Open Button*/
  /*.all-lessons .all-lesson-sub-lessons .all-lesson-sub-lessons-btn-open {*/
  /*    position: absolute;*/
  /*    color: white;*/
  /*    cursor: pointer;*/
  /*    background-color: #30BCAD;*/
  /*    min-width: 100px;*/
  /*    text-align: center;*/
  /*    font-weight: bolder;*/
  /*    font-size: 14px;*/
  /*    text-transform: capitalize;*/
  /*    padding: 10px 0;*/
  /*    border-radius: 0 0 22px 22px;*/
  /*    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
  /*}*/

  /*All Lesson Sub Lesson close Button*/
  .all-lessons .all-lesson-sub-lessons .all-lesson-sub-lessons-btn-close {
      position: absolute;
      z-index: 22;
      right: -1px;
      color: white;
      cursor: pointer;
      background-color: #EE4A89;
      min-width: 100px;
      text-align: center;
      font-weight: bolder;
      font-size: 14px;
      text-transform: capitalize;
      padding: 10px 0;
      border-radius: 0 0 22px 22px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
      transition: .2s;
  }

      /*All Lesson Sub Lesson Collapse*/
  .all-lessons .all-lesson-sub-lessons .all-lesson-sub-lessons-collapse {
      margin-top: 20px;
      border: 1px solid #747FF3;
      padding: 10px;
  }

      /*All Lessons Sub Lessons Collapse Menus*/
  .all-lessons .all-lesson-sub-lessons .all-lesson-sub-lessons-collapse .container-fluid h3 {
      /* color: #09AF00; */
      color: #656565;
      padding: 2px 10px;
      /* font-weight: bolder; */
      width: max-content;
      border: 1px solid #656565;
      font-size: 16px;
      text-transform: capitalize;
      border-radius: 22px;
      box-shadow: 0 1px 1px -2px rgba(0, 0, 0, 0), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.14);
  }

      /*Lesson Image*/
   #lesson-img-size {
       border-radius: 4px;
       border: none;
       width: 100%;
       /*object-fit: cover;*/
       height: 215px;
       margin-top: 20px;
       margin-bottom: 20px;
       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
   }

      /*Edit Lesson Active Checkbox*/
  .panel .panel-body .edit-lesson-active-checkbox {
      padding: 0;
  }

  /*Edit Lesson Image Upload Section*/
  .panel .panel-body .edit-lesson-image-upload-section {
      margin-bottom: 20px;
  }

  /*Edit Lesson Image Upload Edit Button*/
  .panel .panel-body .edit-lesson-image-delete-btn {
      color: #EE0216;
      text-transform: capitalize;
      margin-left: 20px;
      margin-bottom: 10px;
      border-radius: 22px;
      background-color: white;
      min-width: 85px;
      border: 1px solid #EE0216;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: .2s;
  }

  /*Edit Lesson Image Upload Edit Button Hover Focus Active*/
  .panel .panel-body .edit-lesson-image-delete-btn:hover,
  .panel .panel-body .edit-lesson-image-delete-btn:focus,
  .panel .panel-body .edit-lesson-image-delete-btn:active {
      color: white;
      background-color: #EE0216;
  }

  /*Edit Lesson Active Checkbox Input*/
  .panel .panel-body .edit-lesson-active-checkbox input {
      margin-top: 10px;
      margin-bottom: 0;
  }

  /*Student Comments Modal Content*/
  .students-comments-modal .modal-content {
      padding: 20px;
  }

  /*Student Comments Modal Content Header*/
  .students-comments-modal .modal-header {
      margin-bottom: 10px;
      padding-bottom: 10px;
  }

  /*Student Comments Modal Title*/
  .students-comments-modal .modal-title {
      color: #656565;
      font-weight: bolder;
      font-family: roboto;
      font-size: 16px;
      text-transform: capitalize;
      display: inline-block;
  }

  /*!*Student Comments Modal Add Comments*!*/
  /*.students-comments-modal .modal-body .student-comments-modal-add-comments {*/
  /*    border-bottom: 1px solid #656565;*/
  /*}*/

  /*.students-comments-modal .modal-body .students-comments-modal-hr {*/
  /*    width: 100%;*/
  /*    border: 1px solid rgba(151, 151, 151, 0.38);*/
  /*}*/

  /*Students Comments Modal Add Comments Button*/
  .students-comments-modal .modal-body .student-comments-modal-add-comments .student-comments-modal-add-comments-btn {
      float: right;
      color: white;
      margin: 10px 0;
      min-width: 100px;
      border: none;
      text-transform: capitalize;
      border-radius: 4px;
      font-weight: bolder;
      background-color:  #2196F3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*Students Comments Modal Comments*/
  .students-comments-modal .modal-body .comments span {
      color: #4b4b4b;
      font-size: 14px;
      font-family: roboto;
      font-weight: bolder;
      text-transform: capitalize;
  }

  /*Students Comments Modal Footer*/
  .students-comments-modal .modal-footer {
      padding-top: 10px;
      border-top: 1px solid rgba(151, 151, 151, 0.38);
  }

  /*Students Comments Modal Close Button*/
  .students-comments-modal .modal-footer .students-comments-modal-close-btn {
      color: white;
      font-weight: bolder;
      min-width: 104px;
      border: none;
      text-transform: capitalize;
      background-color: #a0a0a0;
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*Student Comment Name Text*/
  .student-comment-name-text {
      color: #09AF00 !important;
      margin-right: 10px;
      /*padding: 5px 10px;*/
      /*border: 1px solid #09AF00;*/
      /*border-radius: 6px;*/
  }

  /*Student Comment Name*/
  .student-comment-name {
      text-transform: capitalize !important;
  }

  /*Student Comment Text*/
  .students-comments-modal .modal-body .comments p {
      color: #656565 !important;
      text-transform: capitalize;
  }

  /*Student My Exam Box*/
  .my-exam-start-box {
      padding: 15px !important;
      border-radius: 22px;
      border: 1px solid #656565;
  }

  /*.paper-marking-heading {*/
  /*    margin-bottom: 0 !important;*/
  /*}*/

  .paper-marking-exam {
      margin-top: 10px;
  }

  .paper-marking-exam .paper-marking-exam-title .paper-marking-exam-title-container {
      align-content: center;
      width: 54%;
      margin: 0 auto;
      border-radius: 22px;
      border: 1px solid #747FF3;
      background-color: #FFFFFF;
      transition: .2s;
  }

  /*Subject Wise Exam*/
  .paper-marking-exam .paper-marking-exam-title .paper-marking-exam-title-text {
      color: #747FF3;
      font-weight: bolder;
      margin: 0;
      padding: 10px 20px;
      /*width: max-content;*/
      border: none;
      /*background-color: #efb43b;*/
      /*background-color: #747FF3;*/
      /*border-radius: 4px 22px 22px 4px;*/
      /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
  }

  .paper-marking-exam .paper-marking-exam-title .paper-marking-exam-title-count-text {
      color: #747FF3;
      font-weight: bolder;
      margin: 0;
      padding: 10px 14px;
      width: max-content;
      /*border-radius: 8px;*/
      /*!*background-color: #efb43b;*!*/
      /*background-color: #747FF3;*/
      /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
  }

  /*Subject Wise Exam Cards*/
  .paper-marking-exam .paper-marking-exam-cards {
      margin-top: 10px;
  }

  .paper-marking-exam .paper-marking-exam-cards {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      padding: 10px !important;
      /*border: 1px solid #656565;*/
      border-radius: 4px;
      margin-left: 10px;
      background-color: white;
      /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
      /*transition: .2s;*/
  }

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-text {
      color: #656565;
  }

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-offline,
  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-online {
      /*transition: .5s;*/
  }

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-offline {
      border-left: 1px solid #757575;
  }

  /*.paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-online:hover {*/
  /*    border-left: 1px solid #747FF3;*/
  /*}*/

  /*.paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-offline:hover {*/
  /*    border-left: 1px solid #747FF3;*/
  /*}*/

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-offline:hover .paper-marking-exam-card-text {
      color: #747FF3;
  }

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card-online:hover .paper-marking-exam-card-text {
      color: #747FF3;
  }

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card:after {
      content: "";
      background: rgba(255,255,255,0.3);
      display: block;
      position: absolute;
      border-radius: 50%;
      padding-top: 240%;
      padding-left: 240%;
      margin-top: -120%;
      margin-left: -120%;
      opacity: 0;
      transition: all 1s;
  }

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card:active:after {
      padding-top: 0;
      padding-left: 0;
      margin-top: 0;
      margin-left: 0;
      opacity: 1;
      transition: 0s;
  }

  /*.paper-marking-exam-card-link div:hover ,*/
  /*.paper-marking-exam-card-link div:active,*/
  /*.paper-marking-exam-card-link div:focus {*/
  /*    color: black;*/
  /*    background-color: red;*/
  /*    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
  /*}*/

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card .paper-marking-exam-card-text {
      color: #656565;
  }

  .paper-marking-exam .paper-marking-exam-cards .paper-marking-exam-card .paper-marking-exam-card-counter {
      font-size: 4rem;
      font-weight: bolder;
      margin-top: 0;
  }

  /*My Exam*/
  .my-exam .panel-body select {
      border: none;
      border-radius: 4px;
      background-color: white;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*My Exam Tabs*/
  .my-exam-tabs .my-exam-tabs-list .my-exam-tabs-list-link a {
      color: rgba(101, 101, 101, 0.49);
      font-size: 1.1rem;
      font-weight: bolder;
      border-width: 1px 1px 0px 1px;
      border-color: #6565652b;
      border-radius: 4px;
      transition: .2s;
  }

  /*Up Coming Exams*/
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-upcoming-exam-link.active>a,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-upcoming-exam-link.active>a:focus,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-upcoming-exam-link.active>a:hover {
      color: white;
      /*background-color: #30BCAD;*/
      background-color: #747FF3;
      /*border: none;*/
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*Completed Exams*/
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-completed-exam-link.active>a,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-completed-exam-link.active>a:focus,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-completed-exam-link.active>a:hover {
      color: white;
      /*background-color: #AA66CD;*/
      background-color: #8DC63F;
      /*border: none;*/
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*Expired Exams*/
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-expired-exam-link.active>a,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-expired-exam-link.active>a:focus,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-expired-exam-link.active>a:hover {
      color: white;
      /*background-color: #EE4A89;*/
      background-color: #30BCAD;
      /*border: none;*/
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*Reschedule Exams*/
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-reschedule-exam-link.active>a,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-reschedule-exam-link.active>a:focus,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-reschedule-exam-link.active>a:hover {
      color: white;
      background-color: #AA66CD;
      /*background-color: #AA66CD;*/
      /*border: none;*/
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*Rejected Exams*/
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-rejected-exam-link.active>a,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-rejected-exam-link.active>a:focus,
  .my-exam-tabs>.my-exam-tabs-list>.my-exam-rejected-exam-link.active>a:hover {
      color: white;
      background-color: #EE4A89;
      /*background-color: #AA66CD;*/
      /*border: none;*/
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*My Exam Cards*/
  .my-exam .my-exam-cards .card {
      border: none;
      margin-top: 20px;
      border-radius: 4px;
      background-color: white;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*My Exams Buttons*/
  .my-exam button {
      text-transform: capitalize;
      border: none;
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*My Exams Inputs*/
  .my-exam .chat-box {
      border: none;
      background-color: white;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }


  /*My Exam Tabs Animation*/
  /*.my-exam-tabs .my-exam-tabs-list .my-exam-upcoming-exam-link a:hover,*/
  /*.my-exam-tabs .my-exam-tabs-list .my-exam-upcoming-exam-link a:focus,*/
  /*.my-exam-tabs .my-exam-tabs-list .my-exam-upcoming-exam-link a:active {*/
  /*    color: white;*/
  /*    background-color: #30BCAD;*/
  /*}*/

  /*!*Online Exam Starter*!*/
  /*.online-exam-starter .*/

  /*Exam Management Modal*/
  .exam-management-modal .modal-dialog {
      margin: 60px auto;
  }

  .exam-management-modal .modal-dialog .modal-content {
      padding: 0 15px 0 15px;
  }

  /*Exam Management Modal Close Button*/
  .exam-management-modal .modal-footer .modal-close-btn {
      color: white;
      font-weight: bolder;
      min-width: 104px;
      border: none;
      text-transform: capitalize;
      background-color: #a0a0a0;
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*Exam Management Modal Title*/
  .exam-management-modal .modal-header .modal-title {
      color: #757575;
      font-size: 16px;
      font-weight: bolder;
      /*width: max-content;*/
      border: none;
      /*background-color: #09AF00;*/
      padding: 5px 20px;
      border-radius: 0 22px 22px 0;
  }

  /*Modal-sub-text*/
  .modal-sub-text {
      color: #919191;
      font-weight: bolder;
  }

  /*Modal Content Text*/
  .modal-content-text {
      color: #656565;
      font-size: 14px;
      font-weight: bolder;
  }

  /*Exam Add Another Quection Button*/
  .panel .panel-body .add-more-q-off, .panel .panel-body .add-more-q, .panel .panel-body .add-more-q-edt {
      font-weight: bolder;
      text-transform: capitalize;
      background-color: #747FF3;
      border-radius: 4px;
      margin-bottom: 20px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*Form Group Sup*/
  .form-group sup {
      color: red;
  }

  /*Exam Creation Sub Title Content*/
  .mcq-exam-creation-sub-title-content {
      margin-bottom: 20px;
      border-bottom: 1px solid #AA66CD;
  }

  /*Exam Creation Sub Title*/
  .mcq-exam-creation-sub-title {
      color: #AA66CD;
      font-size: 22px;
      font-weight: bolder;
  }

  .essay-exam-creation-sub-title-content {
      margin-bottom: 20px;
      border-bottom: 1px solid #EE4A89;
  }

  .essay-exam-creation-sub-title {
      color: #EE4A89;
      font-weight: bolder;
      font-size: 22px;
  }

  /*Exam Creation row Remove Button*/
  .remove-row-btn {
      color: #d9534f;
      font-weight: bolder;
      background-color: white;
      border-radius: 4px;
      margin-left: 5px;
      border: 1px solid #d9534f;
      padding: 8px 15px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .remove-row-btn:hover,
  .remove-row-btn:active,
  .remove-row-btn:focus {
      color: #FFFFFF;
      background-color: #d9534f;
  }

  /*Exam Creation Bottom Edit Button*/
  .btn-a-edit {
      background-color: #2196F3;
  }

  .my-exam-tabs-content {
      padding: 0 10px;
  }

  /*My Exam Tab List*/
  .my-exam-tabs-list {
      padding: 10px;
      margin-bottom: 15px;
      border-radius: 8px;
      background: #FFFFFF;
  }

  /*My Exam Tabs Tab Content*/
  .my-exam-tabs .tab-content {
      padding: 0 !important;
      background: transparent !important;
  }

  /*My Exam UP Coming Exam Crad*/
  .upcoming-exam-cards-container {
      /*margin-top: 20px;*/
  }

  .upcoming-exam-cards-container .upcoming-exam-card-separator {
      margin-top: 15px;
      margin-bottom: 15px;
  }

  .upcoming-exam-cards-container .upcoming-exam-card-separator .upcoming-exam-card-separator-online {
      color: #EE4A89;
      font-weight: bolder;
      font-size: 14px;
  }

  .upcoming-exam-cards-container .upcoming-exam-card-separator .upcoming-exam-card-separator-offline {
      color: #747FF3;
      font-weight: bolder;
      font-size: 14px;
  }

  .my-exam-form-container {
      color: #757575 !important;
      border-radius: 8px;
      padding: 10px !important;
      background-color: #FFFFFF;
  }

  .upcoming-exam-cards-container .upcoming-exam-card-separator .upcoming-exam-card-separator-online .upcoming-exam-card-separator-online-color,
  .upcoming-exam-cards-container .upcoming-exam-card-separator .upcoming-exam-card-separator-offline .upcoming-exam-card-separator-offline-color {
      margin-left: 10px;
  }

  .upcoming-exam-card {
      padding: 5px 10px;
      border-radius: 8px;
      margin-top: 15px;
      /*margin-bottom: 15px;*/
      background-color: #FFFFFF;
      /*-webkit-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);*/
      /*-moz-box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);*/
      /*box-shadow: 5px 10px 60px -60px rgba(0,0,0,0.71);*/
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .upcoming-exam-card .card-title {
      /*border-radius: 0 0 8px 8px;*/
      margin-bottom: 10px;
      border-bottom: 1px solid #525463;
      /*background-color: #525463;*/
      /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
  }

  .upcoming-exam-card .card-title .card-title-text {
      color: #757575;
      font-size: 14px;
      height: 1.2rem;
      overflow: hidden;
      font-weight: bolder;
  }

  .upcoming-exam-card p {
      text-transform: capitalize;
  }

  .upcoming-exam-card .card-content-sub-title-container {
      height: 1.2rem;
      overflow: hidden;
  }

  .upcoming-exam-card .student-my-exam-view-btn {
      color: #747FF3;
      font-weight: bolder;
      float: right;
      border: 1px solid #747FF3;
      margin-bottom: 10px;
      border-radius: 4px;
      text-transform: capitalize;
      background-color: #FFFFFF;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .upcoming-exam-card .student-my-exam-view-btn:hover,
  .upcoming-exam-card .student-my-exam-view-btn:focus,
  .upcoming-exam-card .student-my-exam-view-btn:active {
      color: #FFFFFF;
      background-color: #747FF3;
  }

  .upcoming-exam-card .card-content-sub-title {
      color: #696969;
  }

  /* Completed Exam */
  .completed-exam-chekbox-container {
      margin-top: 20px;
      margin-bottom: 20px;
  }

  .student-my-exam-pagination {
      float: right;
  }

  .student-my-exam-pagination .page-item>active {
      background-color: #747FF3;
  }

  .student-my-exam-pagination .page-item>active a {
      font-weight: bolder;
  }

  /*Expire Exam Card*/
  .expire-exam-card {
      border: none;
      padding: 0 15px;
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  .expire-exam-card .expire-exam-card-btn-content {
      border-top: 1px solid #afafaf;
  }

  .expire-exam-card .card-title {
      color: #656565;
      font-size: 16px;
      font-weight: bolder;
      margin: 10px 0;
      text-transform: capitalize;
  }

  .expire-exam-card .expire-exam-card-btn-content .expire-exam-card-btn {
      color: white;
      float: right;
      font-weight: bolder;
      margin-top: 10px;
      margin-bottom: 10px;
      background-color: #2196F3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*!*Reschedule Exam Card Deck*!*/
  /*.reschedule-exam-card-deck {*/
  /*    margin-top: 15px;*/
  /*}*/


  /*Start Exam Button*/
  .start-exam-button {
      position: relative;
      color: white;
      font-weight: bolder;
      font-size: 16px;
      border: none;
      padding: 10px 20px;
      border-radius: 22px;
      background-color: #FCA22B;
      text-transform: capitalize;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: .2s;
  }

  .start-exam-button:hover,
  .start-exam-button:focus,
  .start-exam-button:active {
      background-color: #FC652A;
  }

  .start-exam-button[disabled],
  .start-exam-button[disabled].active,
  .start-exam-button[disabled].focus,
  .start-exam-button[disabled]:hover {
      background-color: #FCA22B;
  }

  /*Start Exam Time Count*/
  .start-exam-time-count {
      color: #656565;
      font-weight: bolder;
      font-size: 16px;
      margin-bottom: 0;
      /*margin-top: 10px;*/
  }

  .start-exam-time-count-counter {
    color: #2196F3;
    font-weight: bolder;
    font-size: 24px;
    margin-bottom: 0;
    margin-top: 10px;
  }

  .start-exam-question-text-content-container {
      margin-top: 20px;
      margin-bottom: 20px;
      border-radius: 8px;
      background-color: #FFFFFF;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

.exam-paper-txt-area-list-item {
    list-style-type: none;
}

  /*Start Exam Question Text Content*/
  .start-exam-question-text-content {
      padding: 20px 0;
      border-bottom: 1px solid #656565;
  }

  /*Start Exam Question Text*/
  .start-exam-question-text-content .start-exam-question-text {
      color: #656565;
      font-weight: bolder;
      font-size: 16px;
      padding: 8px 0;
  }

  /* Start Exam Button Question Save Button */
  .start-exam-save-btn {
    color: #747FF3;
    font-weight: bolder;
    float: right;
    font-size: 16px;
    border: 1px solid #747FF3;
    border-radius: 4px;
    min-width: 100px;
    text-transform: capitalize;
    background-color: white;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: .2s;
  }

  .start-exam-save-btn:hover,
  .start-exam-save-btn:focus,
  .start-exam-save-btn:active {
      color: white;
      border: none;
      background-color: #747FF3;
  }

  /* Exam Answers */
  .start-exam-answers {
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* Exam Answers List Style Type */
  .start-exam-answers li {
    list-style-type: decimal;
  }

  .start-exam-answers .online-paper-checkbox {
      margin-left: 10px;
      margin-right: 20px;
  }

  .start-exam-answers li .answer_checked {
      margin-left: 10px;
      margin-right: 20px;
  }

  /* Start Exam Image */
  .start-exam-image {
      width: 50%;
  }

  /* Start Exam Finished Button */
  .start-exam-finished-btn {
      color: white;
      font-weight: bolder;
      font-size: 16px;
      /*margin-top: 20px;*/
      /*margin-bottom: 100px;*/
      border: none;
      border-radius: 22px;
      min-width: 120px;
      float: right;
      text-transform: capitalize;
      /*background-color: #2196F3;*/
      background-color: #747FF3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*.start-exam-button:after {*/
  /*    content: "";*/
  /*    position: absolute;*/
  /*    left: 0;*/
  /*    bottom: 0;*/
  /*    width: 0;*/
  /*    height: 0;*/
  /*    border-left: 20px solid white;*/
  /*    border-top: 20px solid transparent;*/
  /*    border-bottom: 20px solid transparent;*/
  /*}*/

  /*.start-exam-button:before {*/
  /*    content: "";*/
  /*    position: absolute;*/
  /*    right: -20px;*/
  /*    bottom: 0;*/
  /*    width: 0;*/
  /*    height: 0;*/
  /*    border-left: 20px solid #09AF00;*/
  /*    border-top: 20px solid transparent;*/
  /*    border-bottom: 20px solid transparent;*/
  /*}*/

  /*Exam Creation Finished Button*/
  .exam-creation-finished-btn {
      /*display: none;*/
      color: white;
      font-weight: bolder;
      border: none;
      border-radius: 4px;
      min-width: 100px;
      margin-bottom: 20px;
      text-transform: uppercase;
      background-color: #747FF3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .exam-creation-finished-btn:hover,
  .exam-creation-finished-btn:active,
  .exam-creation-finished-btn:focus {
      background-color: #747FF3;
  }

  /*Add More Question Button*/
  .add-more-q,
  .add-more-q-e,
  .add-more-q-e-edt {
      color: white;
      border: none;
      font-weight: bolder;
      border-radius: 4px;
      min-width: 100px;
      text-transform: uppercase;
      background-color: #747FF3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*Essay Exam Creation Save Button*/
  .btn0-essay {
      margin-bottom: 20px;
  }

  /*Is Create MCQ && Essay questuins*/
  .isCreateMCQ,
  .isCreateEssay {
      /* display: none; */
      color: #656565;
      font-size: 22px;
      font-weight: bolder;
      text-transform: capitalize;
  }

  .cls-form-q {
      /* display: none; */
  }

  /*Paper Marking Panel*/
  .paper-marking-panel .panel-heading {
      /*margin-bottom: 0 !important;*/
  }

  /*Paper Marking Panel Title*/
  .paper-marking-panel .paper-marking-panel-title {
      color: #656565;
      width: max-content;
      font-weight: bolder;
      font-size: 18px;
      margin-top: 0;
      margin-bottom: 20px;
      padding: 10px 20px;
      border: 0.5px solid #656565;
      border-radius: 0 22px 22px 0;
  }

  /*Paper Marking Panel Filter Button*/
  .paper-marking-panel .paper-marking-filter-btn {
      color: white;
      font-weight: bolder;
      border: none;
      border-radius: 4px;
      min-width: 100px;
      text-transform: uppercase;
      /*background-color: #2196F3;*/
      background-color: #747FF3;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  /*Paper Making Panel Selectors And Inputs*/
  /*.panel select,*/
  /*.panel input {*/
  /*    border-radius: 4px !important;*/
  /*    border: none !important;*/
  /*    background-color: white !important;*/
  /*    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14) !important;*/
  /*}*/

  /*!*Online Exam Paper Checkbox*!*/
  /*.online-paper-checkbox {*/
  /*    margin-right: 1;*/
  /*}*/

  /*Add Question Panel*/
  .add-question-panel .panel-heading {
      margin: 0 !important;
  }

  /*Add Question Panel Link List Link*/
  .add-question-tab-list>.add-question-tab-list-link> a {
      color: #929292;
      font-size: 16px;
      font-weight: bolder;
      min-width: 100px;
      text-align: center;
      border: 1px solid #87878754;
      border-left-color: #87878754 !important;
      border-bottom: transparent;
      transition: .2s;
  }

  .add-question-tab-list>.add-question-tab-list-link> a:hover {
      border: 1px solid #87878754;
      border-bottom: transparent;
  }

      /*Add Question Panel Link List MCQ Link*/
  .add-question-tab-list>.add-question-tab-list-link-mcq.active>a,
  .add-question-tab-list>.add-question-tab-list-link-mcq.active>a:focus,
  .add-question-tab-list>.add-question-tab-list-link-mcq.active>a:hover {
      color: white;
      background-color: #AA66CD;
      border: 1px solid #AA66CD;
      border-left-color: #AA66CD !important;
      /*min-width: 100px;*/
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }

  /*Add Question Panel Link List Essay Link*/
  .add-question-tab-list>.add-question-tab-list-link-essay.active>a,
  .add-question-tab-list>.add-question-tab-list-link-essay.active>a:focus,
  .add-question-tab-list>.add-question-tab-list-link-essay.active>a:hover {
      color: white;
      background-color: #EE4A89;
      border: 1px solid #EE4A89;
      border-left-color: #EE4A89 !important;
      /*min-width: 100px;*/
      border-radius: 4px;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);
  }


  /*Table Row*/
  th {
      text-align: center !important;
  }

  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
      border: none;
      vertical-align: middle !important;
  }


  /*My Lesson Progress Bar*/
   .my-lesson-progress {
       padding: 5px 135px;
   }

   .my-lesson-progress .progress {
       border-radius: 22px;
       background-color: #efefef;
   }

   .my-lesson-progress .progress .progress-bar {
       line-height: unset;
       background-color: #e63946;
   }

  /*Student My Lesson Table*/
  .student-my-lesson-table {
      /*border-radius: 22px;*/
  }

  /*Student My Lesson Table Th Left*/
  .student-my-lesson-table-th-left {
      /*border-bottom-left-radius: 22px;*/
  }

  /*Student My Lesson Table Th Right*/
  .student-my-lesson-table-th-right {
     /*border-bottom-right-radius: 22px;*/
  }

  /*Student Result Charts*/
  .my-result-exam-wise-panel-body {
      margin-top: 20px;
  }

  /*My Result Chart Title*/
  .my-result-chart-title {
      color: #757575;
  }

  /*Student My Result*/
  .student-my-result-title,
  .student-my-result-text {
      color: #757575;
      font-weight: bolder;
  }

  .student-my-result-title {
      padding-bottom: 10px;
      border-bottom: 1px solid #757575;
  }

  /*Paper Marking Student Name List Container*/
  .student-name-list-name {
      padding: 20px 20px !important;
  }

  .student-name-list {
      background-color: #FFFFFF;
      /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
  }

  .student-name-list .student-name-list-name .btn-student-name {
      color: #747FF3;
      min-width: 100%;
      font-weight: bolder;
      border-radius: 22px;
      font-size: 16px;
      text-transform: capitalize;
      border: 1px solid #747FF3;
      background-color: #FFFFFF;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .student-name-list .student-name-list-name .btn-student-name:hover,
  .student-name-list .student-name-list-name .btn-student-name:focus,
  .student-name-list .student-name-list-name .btn-student-name:active {
      color: #FFFFFF;
      background-color: #747FF3;
  }

  /*.student-paper-result-form {*/
  /*    border-radius: 8px;*/
  /*    background-color: #FFFFFF;*/
  /*    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.14);*/
  /*}*/

  /*Student Paper View Question*/
  #paperQuestion {
      /*margin-left: 5px !important;*/
      border-radius: 8px;
      /*padding: 0 30px;*/
      /*background-color: rgba(116, 127, 243, 0.51) !important;*/
      background: none !important;
  }

  #paperQuestion .markingPaper_div {
      color: #747FF3;
      font-weight: bolder;
      font-size: 20px;
      margin-top: 0;
      padding-bottom: 5px;
      text-transform: capitalize;
      border-bottom: 1px solid #757575;
  }

  .div-result-sett-on {
      margin-top: 20px;
      padding-left: 5px !important;
      border-left: 1px solid #747FF3;
  }

  /*Student Paper Marking Container*/
  .student-paper-marking-container {
      padding: 0 20px;
  }

  /*Student Paper Marking Sub Text*/
  .paper-marking-paper-sub-text {
      color: #757575;
      font-size: 16px !important;
      font-weight: bolder;
  }


  .paper-marking-paper-sub-text-answer {

  }

  /*View My Exam Paper*/

  /*View My Exam Paper Text*/
  .view-exam-paper-text {
      color: #757575;
      font-weight: bolder;
  }

  /*View My Exam Pass Label*/
  .view-my-exam-pass-label {
      color: #FFFFFF;
      min-width: 100px;
      border: none;
      border-radius: 22px;
      background-color: #747FF3;
  }

  /*View My Exam Fail Label*/
  .view-my-exam-fail-label {
      color: #FFFFFF;
      min-width: 100px;
      border: none;
      border-radius: 22px;
      background-color: #bd362f;
  }

  /*View My Exam Question*/
  .view-my-exam-question {
      color: #757575 !important;
  }

  /*View My Exam Question Check*/
  .view-my-exam-question-icon-check {
      color: #747FF3 !important;
      margin-left: 10px;
      padding: 1px;
      border-radius: 50%;
      border: 1px solid #747FF3;
  }

  /*View My Exam Question Wrong*/
  .view-my-exam-question-icon-wrong {
      color: #bd362f !important;
      margin-left: 10px;
      padding: 1px 3px;
      border-radius: 50%;
      border: 1px solid #bd362f;
  }

  /*Paper Marking*/

  /*Paper Marking Pending Selector*/
  .paper-marking-pending-selector {
      padding: 10px 15px !important;
      margin-right: 12px;
      width: 368px;
  }

  /*Chat*/
  .chat-msg-contact-send-area {
      position: absolute;
      left: 0;
      bottom: 10px;
      padding: 2px 24px !important;
  }

/*Chat Message Dummy*/
  .chat-msg-dummy-content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
  }

    .chat-msg-dummy-content .chat-msg-dummy-content-text {
        color: #757575;
        font-size: 40px;
        font-weight: bolder;
        line-height: 1;
    }

    /*Answer Sheet Download Button*/
  .answer-sheet-download-container {
      float: right;
  }

    .answer-sheet-download {
        color: #FFFFFF;
        width: max-content;
        margin-right: 10px;
        margin-bottom: 20px;
        border-radius: 4px;
        background-color: #747FF3 !important;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }

    .answer-sheet-download .markingPaper_div {
        font-size: 14px;
    }


   /* Create Lesson Card*/

   /*create-lesson-card-title*/
   .create-lesson-card-title {
       height: 75px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2; /* number of lines to show */
       -webkit-box-orient: vertical;
   }

   /*create-lesson-card-sub-title*/
   .create-lesson-card-sub-title {
       height: 50px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2; /* number of lines to show */
       -webkit-box-orient: vertical;
   }

  /*Footer*/
  [class*=bottom-footer] .footer {
      z-index: 2;
}

    /*Package Details*/
   .package-view-more-profile-img-container {
       padding: 0 !important;
       height: 280px;
       overflow: hidden;
   }

   #more_details_date {
       margin-top: 2rem;
   }

   .package-view-more-profile-img-container .package-view-more-profile-img {
       width: 100% !important;
       height: 100% !important;
       margin: unset !important;
       border-radius: 8px 0 0 0 !important;
       object-fit: cover !important;
   }

   /*package-view-more-ending-duration*/
   .packages-view-more-duration-container .package-view-more-ending-duration span{
       float: right;
   }

   /*package-view-more-sub-lesson*/
   .package-view-more-sub-lesson {
       color: #676565;
       margin-top: 4rem;
   }

   /*package-view-more-buttons*/
   .package-view-more-buttons {
       /*padding: 0 6rem !important;*/
   }

   /*student-sub-title-color*/
   .student-sub-title-color {
       color: #6E6A6B !important;
   }

   /*Width 100%*/
   .w-100 {
       width: 100% !important;
   }

   .fs-14 {
       font-size: 14px !important;
   }

   .fs-16 {
       font-size: 16px !important;
   }
   .fs-18 {
       font-size: 18px;
   }
   .fs-20 {
       font-size: 20px;
   }
   .fs-22 {
       font-size: 22px;
   }
   .fs-24 {
       font-size: 24px;
   }
   .fs-26 {
       font-size: 26px;
   }
   .fs-28 {
       font-size: 28px;
   }

   .font-bold {
       font-family: ubuntu_bold !important;
       font-weight: bold !important;
   }

   .m-0 {
       margin: 0 !important;
   }

   .mt-0 {
       margin-top: 0 !important;
   }

   .mt-1rem {
       margin-top: 1rem !important;
   }

   .mt-2rem {
       margin-top: 2rem !important;
   }

   .mb-1rem {
       margin-bottom: 1rem !important;
   }

   .mb-2rem {
       margin-bottom: 2rem !important;
   }

   .mb-0 {
       margin-bottom: 0 !important;
   }

   .ml-0 {
       margin-left: 0 !important;
   }

   .mr-0 {
       margin-right: 0 !important;
   }

   .p-0 {
       padding: 0 !important;
   }

   .pt-0 {
       padding-top: 0 !important;
   }

   .pb-0 {
       padding-bottom: 0 !important;
   }

   .pl-0 {
       padding-left: 0 !important;
   }

   .pr-0 {
       padding-right: 0 !important;
   }

    /*Padding Left 15px*/
   .pl-10 {
       padding-left: 10px;
   }

   .hr-tag {
       height: 1px;
       margin: 1rem 0;
       border-top: 1px solid #949494;
   }

   .float-left {
       float: left !important;
   }

   .float-right {
       float: right !important;
   }

   .center-items {
       display: flex;
       justify-content: center;
   }

   .opacity-1 {
       opacity: 1 !important;
   }

/*-------------Package Select Tab Container-------------*/

   .package-tab-container {
       margin-bottom: 4rem;
   }

   .package-tab-container .panel-body .package-tab-nav-pills-content {
       display: flex;
       justify-content: center;
       padding: 0 8rem;
   }

   .package-tab-nav-pills .package-tab-nav-pills-list-item .package-tab-nav-pills-list-item-link {
       color: #FFFFFF;
       font-size: 16px;
       font-family: ubuntu_bold;
       border-radius: 8px;
       background: #8a8a8a;
   }

   .package-tab-nav-pills .package-tab-nav-pills-list-item .package-tab-nav-pills-list-item-link:hover,
   .package-tab-nav-pills .package-tab-nav-pills-list-item .package-tab-nav-pills-list-item-link:focus,
   .package-tab-nav-pills .package-tab-nav-pills-list-item .package-tab-nav-pills-list-item-link:active {
       background: #166EAE;
   }

   .package-tab-container .panel-body .package-tab-content {
       margin: 2rem 0;
   }

   .package-tab-container .panel-body .package-tab-content .package-tab-content-tab-pane .package-tab-content-tab-pane-inner {
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
   }

   .package-tab-container .panel-body .package-tab-content .package-tab-content-tab-pane .package-tab-content-tab-pane-card {
       flex: 0 1 20%;
       padding: 0 10px;
       margin-bottom: 15px;
   }

   .package-tab-container .panel-body .package-tab-content .package-tab-content-tab-pane .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner {
       padding: 15px 20px;
       border-radius: 8px;
       border: 1px solid #daecf1;
       background: #F6FAFB;
   }

   .package-tab-container .panel-body .package-tab-content .package-tab-content-tab-pane .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .most-popular-text-content {
       display: flex;
       width: 100%;
       justify-content: center;
   }

   .package-tab-container .panel-body .package-tab-content .package-tab-content-tab-pane .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .most-popular-text-content .most-popular-text {
       position: absolute;
       color: #6E6A6B;
       top: -2.8%;
       font-family: ubuntu;
       margin: 0;
       padding: 2px 8px;
       border-radius: 8px;
       border: 1px solid #c0d8de;
       background: #daecf1;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-title .package-tab-card-title-text {
       color: #3A74C0;
       font-size: 24px;
       height: 4rem;
       font-family: ubuntu;
       margin-top: 0;
       /* margin-bottom: 1.2rem; */
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2; /* number of lines to show */
       -webkit-box-orient: vertical;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-price .package-tab-card-price-bold {
       color: #166EAE;
       font-size: 20px;
       font-weight: bold;
       font-family: ubuntu_bold !important;
       
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-price-desc {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 1; /* number of lines to show */
       -webkit-box-orient: vertical;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-price-desc .package-tab-card-price-desc-text {
       color: #6E6A6B;
       font-size: 12px;
       font-family: ubuntu;
       margin: 0;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-price-desc .package-tab-card-price-desc-text .package-tab-card-price-desc-text-price {
       color: #514e4e;
       font-size: 16px;
       font-weight: bold;
       font-family: ubuntu_bold !important;
       margin: 0 0 0 2px;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-pay-btn-content .package-tab-card-pay-btn {
       color: #166EAE;
       width: 100%;
       margin-top: 1.2rem;
       border-radius: 22px;
       border: 1px solid #166EAE;
       background: #F6FAFB;
       text-transform: capitalize;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-pay-btn-content .package-tab-card-pay-btn:hover,
   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-pay-btn-content .package-tab-card-pay-btn:active,
   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-pay-btn-content .package-tab-card-pay-btn:focus {
       color: #FFFFFF;
       background: #166EAE;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-description {
       height: 305px;
       /*overflow-x: hidden;*/
       /*overflow-y: scroll;*/
   }

   /* width */
   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-description::-webkit-scrollbar {
       width: 4px;
   }

   /* Track */
   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-description::-webkit-scrollbar-track {
       border-radius: 10px;
   }

   /* Handle */
   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-description::-webkit-scrollbar-thumb {
       background: #6E6A6B;
       border-radius: 4px;
   }

   /* Handle on hover */
   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-description::-webkit-scrollbar-thumb:hover {
       background: #514e4e;
   }
   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-description .package-tab-card-description-text {
       color: #6E6A6B;
       font-family: ubuntu;
       margin-bottom: 0;
   }

   .package-tab-content-tab-pane-card .package-tab-content-tab-pane-card-inner .package-tab-card-description .package-tab-card-description-text p {
       height: 28px;
       margin-bottom: 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2; /* number of lines to show */
       -webkit-box-orient: vertical;
   }

/*-------------Package Select Tab Container-------------*/

/*-------------Package Billing-------------*/

   .package-billing-form-content {
       padding: 2rem;
   }

   .package-billing-form .package-billing-btn-container {
       padding-left: 25px;
       margin-top: 1rem;
   }

   .package-billing-form .package-billing-price-label {
       color: #3c3939;
       padding: 8px 0;
       font-size: 17px;
       font-family: ubuntu_bold;
       /*font-weight: bold;*/
   }

   .package-billing-form .package-billing-btn-container .package-billing-btn-content {
       padding: 0 30px 0 8px;
   }

   .package-billing-form .package-billing-btn-container .pkg-billing-btn {
       color: white;
       font-size: 18px;
       font-weight: bold;
       font-family: ubuntu_bold;
       border-radius: 12px;
       background: #166EAE;
       text-transform: capitalize;
       transition: 0.2s;
   }

   .package-billing-form .package-billing-btn-container .pkg-billing-btn:hover,
   .package-billing-form .package-billing-btn-container .pkg-billing-btn:active,
   .package-billing-form .package-billing-btn-container .pkg-billing-btn:focus {
       background: #013C96;
   }

   .package-billing-previous-btn-container .package-billing-previous-btn {
       color: #166EAE;
       font-size: 14px;
       padding: 8px 16px;
       font-weight: bold;
       font-family: ubuntu_bold;
       border-radius: 12px;
       border: 2px solid #166EAE;
       background: #FFFFFF;
   }

/*-------------Package Billing-------------*/


/*-------------Bank Transfer-------------*/
   .bank-transfer-form-content {
       padding: 2rem 4rem;
   }

   .bank-transfer-form-content .bank-transfer-account-details .row {
       display: flex;
       justify-content: center;
   }

   .bank-transfer-form-content .bank-transfer-account-details .bank-transfer-account-details-text {
       color: #6E6A6B;
       font-size: 14px;
       font-family: ubuntu;
   }

   .bank-transfer-form-content .bank-transfer-btn-container {
       margin-top: 1.2rem;
   }

   .bank-transfer-form-content .bank-transfer-form-content-text {
       margin-top: 8px;
   }

   .bank-transfer-form-content .bank-transfer-blue-btn {
       color: white !important;
       font-size: 14px;
       font-weight: bold;
       font-family: ubuntu_bold;
       border-radius: 12px;
       background-color: #166EAE !important;
       text-transform: capitalize;
       transition: 0.2s;
   }

   .bank-transfer-form-content .bank-transfer-blue-btn:hover,
   .bank-transfer-form-content .bank-transfer-blue-btn:active,
   .bank-transfer-form-content .bank-transfer-blue-btn:focus {
       background: #013C96 !important;
   }

   .bank-transfer-form-content .bank-transfer-btn-container .bank-transfer-cancle-btn {
       color: #5f5b5c;
       font-size: 16px;
       text-transform: capitalize;
       background: transparent;
   }

   .bank-transfer-form-content .bank-transfer-file-uploader input {
       padding: 8px;
       margin: 0;
   }

   .bank-transfer-form-content .bank-transfer-file-uploader input[type=file] {
       position: absolute;
       left: 0;
       top: 0;
       opacity: 0;
   }

   .bank-transfer-form-content .bank-transfer-submit-btn {
       margin-top: 1.5rem;
   }

/*-------------Bank Transfer-------------*/

/*-------------------------------------------------------------------------------------------Media Queries--------------------------------------------------------------------------------------------------*/


   @media screen and (max-width: 319px) {
       * {
           display: none !important;
       }

       body {
           display: flex;
           justify-content: center;
           align-items: center;
           background-color: white !important;
       }

       body:before {
           content: 'Try in Big Screen!';
           color: #1d2124;
           font-weight: 600;
       }
   }


   /*!*Landscape*!*/
   /*!* Mobile Devices *!*/
   /*@media (max-height: 575px) and (max-width: 1024px) and (orientation: landscape) {*/
   /*    * {*/
   /*        display: none !important;*/
   /*    }*/

   /*    body {*/
   /*        display: flex;*/
   /*        justify-content: center;*/
   /*        align-items: center;*/
   /*        background-color: white !important;*/
   /*    }*/

   /*    body:before {*/
   /*        content: 'Try in Big Screen!';*/
   /*        color: #1d2124;*/
   /*        font-weight: 600;*/
   /*    }*/
   /*}*/



/*Mobile*/
@media screen and (min-width: 320px) and (max-width: 575px) {

    /*Nav Bar Toggle*/
    .navbar .toggle {
        height: 38px;
    }

    /*Side Menu Toggle*/
    #sideMenuToggle {
        align-items: center;
        height: 64px;
        padding-top: 14px;
        padding-left: 0;
        display: inline-block;
    }

    /*Warning Alert*/
    .alert-danger {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #ff0000;
        width: 100vw;
        height: 100%;
        padding: 88% 0;
        font-size: 1.5rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Success Alert*/
    .alert-success {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #00e600;
        width: 100vw;
        height: 100%;
        padding: 88% 0;
        font-size: 1.5rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Nav Bar Mobile Logo SVG*/
    .navbar .navbar-brand-logo .svg {
        height: unset;
        margin-top: 12px;
        /*height: 20px;*/
        /*!*margin-top: 12px;*!*/
        /*width: 100px;*/
    }

    /*Body Content*/
    .top-navbar body, .top-navbar-large body, .top-navbar-xlarge body {
        padding-top: 70px;
    }

    /*Dashboard Main Menu Card Image Inner*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-image .dashboard-menu-image-inner {
        margin: 1rem auto;
    }

    /*Dashboard Main Menu Card Inner Counter*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-title .dashboard-menu-title-count h1 {
        font-size: 5rem;
    }

    /*Login Form*/
    .login-form-page {
        margin-top: 0 !important;
    }

    #login_body {
        background-size: 100% 100% !important;
        background: url(../../../assets/images/login-new/login-bg.jpg) no-repeat;
    }

    /*Login Form Title Hat Image*/
    .login-form-page .login-side-title .login-side-hat-image {
        left: 6px;
        top: -68px;
    }

    /*Login Page Form Title*/
    .login-form-page .login-form .login-form-title {
        margin-top: 0;
    }

    /*Login Page Form User Name TextField && User Password TextField*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input {
        line-height: 36px;
        font-size: 1.5rem !important;
    }

    /*Login Page Form User Name TextField && User Password TextField Place Holders*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input::placeholder,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input::placeholder {
        font-size: 1.5rem !important;
    }

    /*Login Page Form User Name && User Password && Options*/
    .login-form-page .login-form .login-form-user-name,
    .login-form-page .login-form .login-form-options {
        margin-top: 0;
    }

    /*Login Page Form User Password Eye Icon*/
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field-eye {
        margin-top: 2%;
        padding: 0;
    }

    /*Login Page Form Options Remember Me && Forget Password*/
    .login-form-page .login-form .login-form-options .login-form-remember-me div,
    .login-form-page .login-form .login-form-options .login-forget-password p {
        margin-top: 1rem;
        text-align: center !important;
    }

    /*Login Page Form Login Button*/
    .login-form-page .login-form .login-form-login-button button {
        margin-top: 0;
        margin-bottom: 0;
    }

    /*Login Page Form Login Register Link*/
    .login-form-page .login-form .login-form-register-Link {
        margin: 1rem auto;
    }

    /*Brown Circles*/
    .brown-circles {
        display: none;
    }
}

/*Tab Horizontal*/
@media (min-width: 576px) and (max-width: 767px) {

    /*Nav Bar Toggle*/
    .navbar .toggle {
        height: 38px;
    }

    /*Side Menu Toggle*/
    #sideMenuToggle {
        display: inline;
    }

    /*Nav Bar Logo*/
    .home-nav-bar .navbar-header .navbar-brand-logo {
        /*margin-top: 10px;*/
    }

    /*Warning Alert*/
    .alert-danger {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #ff0000;
        width: 100%;
        height: 100%;
        padding: 85% 0;
        font-size: 2.5rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Success Alert*/
    .alert-success {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #00e600;
        width: 100%;
        height: 100%;
        padding: 85% 0;
        font-size: 2.5rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Dashboard Main Menu Card Image Inner*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-image .dashboard-menu-image-inner {
        margin: 1rem auto;
    }

    /*Dashboard Main Menu Card Inner Counter*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-title .dashboard-menu-title-count h1 {
        font-size: 5rem;
    }

    /*Login Form*/
    .login-form-page {
        margin-top: 0 !important;
    }

    /*Login Form Title Hat Image*/
    .login-form-page .login-side-title .login-side-hat-image {
        left: 106px;
        top: -70px;
    }

    /*Login Page Form*/
    .login-form-page .login-form {
        float: none !important;
        margin: 5rem auto !important;
    }

    /*Login Page Form Title*/
    .login-form-page .login-form .login-form-title {
        margin-top: 0;
    }

    /*Login Page Form User Name TextField && User Password TextField*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input {
        line-height: 70px;
        font-size: 2rem !important;
    }

    /*Login Page Form User Name TextField && User Password TextField Place Holders*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input::placeholder,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input::placeholder {
        font-size: 2rem !important;
    }


    /*Login Page Form User Name && User Password && Options*/
    .login-form-page .login-form .login-form-user-name,
    .login-form-page .login-form .login-form-options {
        margin-top: 0;
    }

    /*Login Page Form User Password Eye Icon*/
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field-eye {
        margin-top: 2%;
        padding: 0;
    }

    /*Login Page Form Options Remember Me && Forget Password*/
    .login-form-page .login-form .login-form-options .login-form-remember-me div,
    .login-form-page .login-form .login-form-options .login-forget-password p {
        margin-top: 1rem;
        text-align: center !important;
    }

    /*Login Page Form Login Button*/
    .login-form-page .login-form .login-form-login-button button {
        margin-top: 0;
        /*margin-bottom: 1rem;*/
    }

    /*Login Page Form Login Register Link*/
    .login-form-page .login-form .login-form-register-Link {
        margin: 1rem auto;
    }

    /*Brown Circles*/
    .brown-circles {
        display: none;
    }
}

/*Tab Vertical*/
@media screen and (min-width: 768px) and (max-width: 991px) {

    /*Nav Bar Logo*/
    .home-nav-bar .navbar-header .navbar-brand-logo {
        /*margin-top: 10px;*/
    }

    /*Nav Bar Toggle*/
    .navbar .toggle {
        margin-top: 5px;
        line-height: 76px;
    }

    /*Side Menu Toggle*/
    #sideMenuToggle {
        display: inline-flex;
        height: 64px;
        align-items: center;
    }

    /*Warning Alert*/
    .alert-danger {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #ff0000;
        width: 100%;
        height: 100vh;
        padding: 64% 0;
        font-size: 3.2rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Success Alert*/
    .alert-success {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #00e600;
        width: 100%;
        height: 100vh;
        padding: 64% 0;
        font-size: 3.2rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Dashboard Main Menu Card Image Inner*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-image .dashboard-menu-image-inner {
        margin: 1rem auto;
    }

    /*Dashboard Main Menu Card Inner Counter*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-title .dashboard-menu-title-count h1 {
        font-size: 4rem;
    }

    /*Login Form*/
    .login-form-page {
        margin-top: 0 !important;
    }

    /*Login Form Title Hat Image*/
    .login-form-page .login-side-title .login-side-hat-image {
        left: 144px;
        top: -52px;
    }

    /*Login Page Form*/
    .login-form-page .login-form {
        float: none !important;
        margin: 5rem auto !important;
    }

    /*Login Page Form Title*/
    .login-form-page .login-form .login-form-title {
        /*margin-top: 2rem;*/
    }

    /*Login Page Form User Name TextField && User Password TextField*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input {
        line-height: 70px;
        font-size: 2rem !important;
    }

    /*Login Page Form User Name TextField && User Password TextField Place Holders*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input::placeholder,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input::placeholder {
        font-size: 2rem !important;
    }


    /*Login Page Form User Name && User Password && Options*/
    .login-form-page .login-form .login-form-user-name,
    .login-form-page .login-form .login-form-options {
        margin-top: 2rem;
    }

    /*Login Page Form User Password Eye Icon*/
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field-eye {
        margin-top: 2%;
        padding: 0;
    }

    /*Login Page Form Options Remember Me && Forget Password*/
    .login-form-page .login-form .login-form-options .login-form-remember-me div,
    .login-form-page .login-form .login-form-options .login-forget-password p {
        margin-top: 1rem;
        text-align: center !important;
    }

    /*Login Page Form Login Button*/
    .login-form-page .login-form .login-form-login-button button {
        margin-top: 0;
        /*margin-bottom: 1rem;*/
    }

    /*Login Page Form Login Register Link*/
    .login-form-page .login-form .login-form-register-Link {
        margin: 1rem auto;
    }

    /*Brown Circles*/
    .brown-circles {
        display: none;
    }
}

/*Large Tabs*/
@media screen and (min-width: 992px) and (max-width: 1199px) {

    /*Warning Alert*/
    .alert-danger {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #ff0000;
        width: 100%;
        height: 100vh;
        padding: 62% 0;
        font-size: 4rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Success Alert*/
    .alert-success {
        position: absolute;
        z-index: 1002;
        float: none;
        top: 0;
        color: #00e600;
        width: 100%;
        height: 100vh;
        padding: 62% 0;
        font-size: 4rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 0 auto;
        text-align: center;
        border: transparent;
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

    /*Dashboard Main Menu Card Inner Counter*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-title .dashboard-menu-title-count h1 {
        font-size: 4rem;
    }

    /*Login Form*/
    .login-form-page {
        margin-top: 0 !important;
    }

    /*Login Form Title Hat Image*/
    .login-form-page .login-side-title .login-side-hat-image {
        left: 144px;
        top: -52px;
    }

    /*Login Page Form*/
    .login-form-page .login-form {
        float: none !important;
        /*margin: 5rem auto !important;*/
    }

    /*Login Page Form Title*/
    .login-form-page .login-form .login-form-title {
        /*margin-top: 2rem;*/
    }

    /*Login Page Form User Name TextField && User Password TextField*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input {
        line-height: 70px;
        font-size: 2rem !important;
    }

    /*Login Page Form User Name TextField && User Password TextField Place Holders*/
    .login-form-page .login-form .login-form-user-name .login-user-name-text-field input::placeholder,
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field input::placeholder {
        font-size: 2rem !important;
    }


    /*Login Page Form User Name && User Password && Options*/
    .login-form-page .login-form .login-form-user-name,
    .login-form-page .login-form .login-form-options {
        /*margin-top: 2rem;*/
    }

    /*Login Page Form User Password Eye Icon*/
    .login-form-page .login-form .login-form-user-password .login-user-password-text-field-eye {
        margin-top: 2%;
        padding: 0;
    }

    /*Login Page Form Options Remember Me && Forget Password*/
    .login-form-page .login-form .login-form-options .login-form-remember-me div,
    .login-form-page .login-form .login-form-options .login-forget-password p {
        margin-top: 1rem;
        text-align: center !important;
    }

    /*Login Page Form Login Button*/
    .login-form-page .login-form .login-form-login-button button {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    /*Brown Circles*/
    .brown-circles {
        display: none;
    }
}



@media screen and (min-width: 1366px) and (max-width: 1439px) {

    /*Main Dashboard*/
    .main-dashboard .panel-body {
        height: 65vh;
    }

    /*Dashboard Card Text Icon*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-card-text i {
        font-size: 22px;
    }

    /*Dashboard Card Text*/
    .main-dashboard .dashboard-menu-card .dashboard-menu-card-inner .dashboard-menu-card-text b {
        font-size: 14px;
    }

    /*Side Menu Toggle*/
    #sideMenuToggle {
        display: none;
    }

    /*Login Form*/
    .login-form-page {
        margin-top: 0 !important;
    }

    #sidebar-menu,.home-nav-bar .navbar-header .navbar-brand-logo {
        width: 216px !IMPORTANT;
    }

/*Paper Marking Pending*/
    .paper-marking-pending-selector {
        width: 336px !important;
    }

    /*Paper Marking Exam Title Container*/
    .paper-marking-exam .paper-marking-exam-title .paper-marking-exam-title-container {
        width: 60% !important;
    }

    .create-lesson-card-title {
        height: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;
    }

    .create-lesson-card-sub-title {
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
}