:root {
  --theme-green: #007336;

  --theme-blue: #39c0de;

  --theme-orange: #f26622;
}

body {
  margin: 0;

  padding: 0;
}

.navigation-menu li a.nav-link {
  #toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;

    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
  }

  #toast #img {
    width: 50px;
    height: 50px;

    float: left;

    padding-top: 16px;
    padding-bottom: 16px;

    box-sizing: border-box;

    background-color: #111;
    color: #fff;
  }

  #toast #desc {
    color: #fff;

    padding: 16px;

    overflow: hidden;
    white-space: nowrap;
  }

  #toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
      fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
      fadeout 0.5s 4.5s;
  }

  @-webkit-keyframes fadein {
    from {
      bottom: 0;
      opacity: 0;
    }

    to {
      bottom: 30px;
      opacity: 1;
    }
  }

  @keyframes fadein {
    from {
      bottom: 0;
      opacity: 0;
    }

    to {
      bottom: 30px;
      opacity: 1;
    }
  }

  @-webkit-keyframes expand {
    from {
      min-width: 50px;
    }

    to {
      min-width: 350px;
    }
  }

  @keyframes expand {
    from {
      min-width: 50px;
    }

    to {
      min-width: 350px;
    }
  }

  @-webkit-keyframes stay {
    from {
      min-width: 350px;
    }

    to {
      min-width: 350px;
    }
  }

  @keyframes stay {
    from {
      min-width: 350px;
    }

    to {
      min-width: 350px;
    }
  }

  @-webkit-keyframes shrink {
    from {
      min-width: 350px;
    }

    to {
      min-width: 50px;
    }
  }

  @keyframes shrink {
    from {
      min-width: 350px;
    }

    to {
      min-width: 50px;
    }
  }

  @-webkit-keyframes fadeout {
    from {
      bottom: 30px;
      opacity: 1;
    }

    to {
      bottom: 60px;
      opacity: 0;
    }
  }

  @keyframes fadeout {
    from {
      bottom: 30px;
      opacity: 1;
    }

    to {
      bottom: 60px;
      opacity: 0;
    }
  }

  text-transform: uppercase;

  font-weight: 600;

  line-height: 3;

  padding-inline: 20px !important;

  position: relative;

  font-size: 14px;

  color: black;
}

.navigation-menu li a.nav-link.active {
  color: var(--theme-green);

  font-weight: 700;
}

.navigation-menu li a.nav-link.active:after {
  content: "";

  width: 90%;

  border-bottom: 4px solid var(--theme-green);

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);
}

.user_dropdown {
  transform: translateX(-40%);

  padding: 15px;

  background-color: var(--theme-green);

  top: 35px !important;
}

.user_dropdown:before {
  position: absolute;

  content: "";

  width: 0;

  height: 0;

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  border-bottom: 10px solid var(--theme-green);

  top: -10px;

  right: 10px;
}

.user_dropdown li a {
  color: white;

  padding-inline: 0;
}

.user_dropdown li.active a,
.login-btn {
  color: var(--theme-orange);
}

.text-theme {
  color: var(--theme-green);
}

.user-login-card {
  max-width: 40%;

  padding: 30px;
}

.form-control {
  border-color: var(--theme-blue);

  color: black;

  padding: 15px 20px;
  height: auto;
  border-radius: 10px;
}

.send-otp-btn {
  color: var(--theme-orange);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid var(--theme-blue);
  background: var(--theme-orange);
  color: #fff;
  min-width: 25%;
}

.send-otp-btn:hover {
  background: var(--theme-blue);
}
.custom-margin-bottom {
  margin-bottom: 8rem;
}

.show-password {
  position: absolute;

  top: 50%;

  right: 5%;

  transform: translate(-50%, -50%);
}

.submit-btn {
  background-color: var(--theme-blue);

  border-color: var(--theme-blue);

  text-transform: uppercase;
}

.start-program-card,
.end-program-card {
  max-width: 50%;
}

.upload__btn-box,
.end_program,
#endTime,
.change-password-card {
  max-width: 60%;

  margin: auto;
}

/* ============================== Image preview css ==================================*/

.upload__img-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.upload__img-box {
  width: calc(100% / 3);
  padding: 0 10px;
  margin-bottom: 25px;
  position: relative;
}

.upload__img-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--theme-orange);
  position: absolute;
  top: 0;
  right: -10%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  cursor: pointer;
  color: white;
}

.img-bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-bottom: 100%;
  max-width: 100%;
}

video.img-bg {
  padding-bottom: 0;
}

.upload__btn {
  font-weight: 400;
  color: #797979;
  padding: 20px;
  width: 100%;
  text-align: center;
  border: 1px dashed;
}

.user-profile-nav li a {
  display: block;
  padding: 10px 25px;
  color: dimgrey;
  text-decoration: none;
}

.user-profile-nav li a svg {
  margin-right: 10px;
}

.user-profile-nav li a:hover {
  background-color: #ffceb6;
}

.user-profile-img svg {
  fill: var(--theme-orange);
  width: 180px;
  height: 165px;
}

.user-profile-img {
  border-radius: 50%;

  width: 130px;

  height: 130px;

  overflow: hidden;

  display: flex;

  margin: auto;

  margin-bottom: 20px;
}

.opertor-profile-img {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: darkblue;
}

.program-details-card svg {
  border: 1px solid #e5e5e5;

  width: 30px;

  height: 30px;

  padding: 5px;

  border-radius: 10px;
}

.program-details-card h6 {
  font-size: 14px;
}

.program-details-card p {
  font-size: 11px;
}

#program-tab button {
  color: var(--theme-orange);

  border: 0;

  padding: 5px 20px;

  border-radius: 10px;
}

#program-tab button.active {
  background: var(--theme-orange);

  color: white;
}

.gallery-card img {
  height: 300px;
  width: 100%;
}

.status-btn {
  background-color: var(--theme-orange);

  border-radius: 15px;

  padding: 3px 8px;

  font-size: 14px;
}

#Datatable tr td,
#Datatable tr th {
  text-align: left;
  text-wrap: nowrap;
}

.bottom-bar {
  display: flex;

  font-size: 14px;

  align-items: center;

  justify-content: flex-end;

  margin-top: 10px;
}

.bottom-bar select {
  border: 0 !important;
}

.bottom-bar .length-box,
.bottom-bar .info-box,
.bottom-bar .pagination-box {
  margin-inline: 5px;
}

.filter-date-card {
  max-width: 90%;
}

.user-login-card .form-control {
  padding: 15px 20px;
  height: auto;
  border-radius: 10px;
}

.user-login-card .form-control:focus {
  outline: none;
  box-shadow: none;
}

.user-login-card select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  background: url("../images/icons/dropdown.png") right 20px center no-repeat;
  background-size: 23px;
}

.user-login-card .col-md-12.mt-5 {
  padding: 0;
}

.user-login-card .submit-btn {
  padding: 10px;
  border-radius: 5px;
  color: #000000;
  font-weight: 500;
}

/* ------------- toast css start --------------*/

#toast {
  visibility: hidden;
  max-width: 50px;
  height: 50px;
  margin: auto;
  background-color: var(--theme-orange);
  color: #fff;
  text-align: center;
  border-radius: 2px;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 50%;
  font-size: 17px;
  white-space: nowrap;
}

#toast #img {
  background-color: var(--theme-orange);
  color: #fff;
  width: 50px;
  height: 50px;
  float: left;
  box-sizing: border-box;
  color: #fff;
}

#toast #img svg {
  width: 30px;
  height: 30px;
}

#toast #desc {
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px;
}

#toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
    fadeout 0.5s 2.5s;
  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
    fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 50%;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 50%;
    opacity: 1;
  }
}

@-webkit-keyframes expand {
  from {
    min-width: 50px;
  }

  to {
    min-width: 350px;
  }
}

@keyframes expand {
  from {
    min-width: 50px;
  }

  to {
    min-width: 350px;
  }
}

@-webkit-keyframes stay {
  from {
    min-width: 350px;
  }

  to {
    min-width: 350px;
  }
}

@keyframes stay {
  from {
    min-width: 350px;
  }

  to {
    min-width: 350px;
  }
}

@-webkit-keyframes shrink {
  from {
    min-width: 350px;
  }

  to {
    min-width: 50px;
  }
}

@keyframes shrink {
  from {
    min-width: 350px;
  }

  to {
    min-width: 50px;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 50%;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 50%;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

/* ------------- toast css end ---------------*/

.user-login-card,
.start-program-card,
.end-program-card,
.change-password-card {
  margin-bottom: 6rem !important;
}

/*.............register toast..........*/
.toasty {
  visibility: hidden;
  max-width: 50px;
  height: 50px;
  /*margin-left: -125px;*/
  margin: auto;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 30px;
  font-size: 17px;
  white-space: nowrap;
}

.toasty .img {
  width: 50px;
  height: 50px;
  float: left;
  padding-top: 10px;
  box-sizing: border-box;
  background-color: #111;
  color: #fff;
}

.toasty .desc {
  color: #fff;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.toasty.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
    fadeout 0.5s 2.5s;
  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
    fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes expand {
  from {
    min-width: 50px;
  }

  to {
    min-width: 350px;
  }
}

@keyframes expand {
  from {
    min-width: 50px;
  }

  to {
    min-width: 350px;
  }
}

@-webkit-keyframes stay {
  from {
    min-width: 350px;
  }

  to {
    min-width: 350px;
  }
}

@keyframes stay {
  from {
    min-width: 350px;
  }

  to {
    min-width: 350px;
  }
}

@-webkit-keyframes shrink {
  from {
    min-width: 350px;
  }

  to {
    min-width: 50px;
  }
}

@keyframes shrink {
  from {
    min-width: 350px;
  }

  to {
    min-width: 50px;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 60px;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 60px;
    opacity: 0;
  }
}

.alert-danger,
.alert-success {
  display: block;
  margin: 5px 0 10px;
  padding: 5px;
}

.alert-black.alert-danger {
  background: #000000;
  color: #fff;
  border: 0;
}
.registred_success_card {
  width: 35%;
  margin: auto;
  box-shadow: 0 0 10px 0 #39ac3b;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
#progress-container {
  position: fixed;
  width: 200px;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  background: #ccc;
  border-radius: 10px;
}
#preloader {
  background-color: #0000009e;
  padding: 0;
  margin: 0;
  height: 100%;
  position: fixed;
  z-index: 99999;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
}
#preloader .lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
#preloader .lds-ripple div {
  position: absolute;
  border: 4px solid var(--theme-orange);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
#preloader .lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

nav[aria-label="Page navigation example"] {
  margin: 15px;
  margin-left: auto;
}

nav[aria-label="Page navigation example"] p {
  font-size: 14px;
  color: #000 !important;
  font-weight: 600;
  margin-right: 10px;
  margin-bottom: 0;
}

nav[aria-label="Page navigation example"] div {
  align-items: center;
}

nav[aria-label="Page navigation example"] ul.pagination {
  margin: 0;
}

nav[aria-label="Page navigation example"]
  ul.pagination
  li.page-item
  .page-link {
  padding: 5px 10px;
  line-height: 1;
  font-size: 14px;
  color: #000;
}

nav[aria-label="Page navigation example"]
  ul.pagination
  .page-item.active
  .page-link {
  color: #fff;
  background-color: #34afca;
  border-color: #33acc6;
}

#Datatable th,
#Datatable td {
  padding: 8px 10px;
}

#Datatable tbody tr:last-child > * {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
#Datatable tbody tr > *,
#Datatable tbody tr > * {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
#Datatable tbody tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.035);
}
.navbar-brand {
  max-width: 20%;
}
@media screen and (max-width: 991px) {
  .w-75 {
    width: 100% !important;
  }
  .user-login-card,
  .start-program-card,
  .end-program-card,
  .change-password-card {
    max-width: 60%;
  }
  .user_name {
    display: none;
  }
  .navbar-brand {
    max-width: 35%;
  }
}
@media screen and (max-width: 767px) {
  .filter-date-card {
    max-width: 100%;
  }
  .border-right {
    border-right: 0 !important;
  }
  .w-75 {
    width: 85% !important;
  }
  .user-login-card,
  .start-program-card,
  .end-program-card,
  .change-password-card {
    max-width: 80%;
  }
  .navbar-brand {
    max-width: 45%;
  }
  .user_dropdown {
    transform: translateX(-60%);
    top: 45px !important;
  }
  .navigation-menu li a.nav-link.active:after{
    width: 30%;
    left: 20%;
  }
  .navigation-menu li a.nav-link {
    padding-block: 5px !important;
  }
  .custom-margin-bottom {
    margin-top: 2rem !important;
  }
  .upload__img-close{
    right: -5%;
  }
  .upload__img-box {
    width: calc(100% / 2);
  }
}
@media screen and (max-width: 480px) {
  .w-75 {
    width: 100% !important;
  }
  .border-right {
    border-right: 0 !important;
  }
  .user-login-card,
  .start-program-card,
  .end-program-card,
  .change-password-card {
    max-width: 100%;
  }
  .navbar-brand {
    max-width: 55%;
  }  
}