.bodyface{
  background-color:white;
}
  :root{
  --clr-accent-400: hsl(224, 100%, 50%);
}


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  .cardhover {
    border: 4px solid white; /* might stick! */
  }

.cardhover:hover {
  border: 4px solid rgb(48, 87, 227); /* might stick! */
  border-radius: 10px;
  /* transform:scale(1.02); */
  transition: 0.3s ease-in-out;

}

.btn-group {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 5px;

}
.btn-group button{
  width: 100% !important;
}

.card-body{
  width: 100%;
  padding: 5px !important;
}
.card-text{
  position: absolute;
  top: 20px;
  right: 20px;
}
.card-title{
  display: inline-block;
  position: relative;
  bottom: 30px;
  left: 10px;
  /* content: "";
  position: relative;
  height: 3px;
  transition: all 1s;
  width: max-content;
  bottom: 78px;
  left: 272px; */
}
.card-title::after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 4px;
  border-top-right-radius: 10px;
  bottom: 0;
  left: 0;
  background-color: #0d6efd;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  /* content: "";
  position: absolute;
  height: 10px;
  right: calc(var(--padding) * -100);
  bottom: 0;
  width: 100%;
  /* width: calc(100% + var(--padding)); */
  /* background:var(--clr-accent-400); */
}

.card-title:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

 body {
     background-color: #f9f9fa
 }

 .flex {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 auto;
     flex: 1 1 auto
 }

 @media (max-width:991.98px) {
     .padding {
         padding: 1.5rem
     }
 }

 @media (max-width:767.98px) {
     .padding {
         padding: 1rem
     }
 }

 .padding {
     padding: 5rem
 }

 .card {
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -ms-box-shadow: none
 }

 .pl-3,
 .px-3 {
     padding-left: 1rem !important
 }

 .card {
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-color: #fff;
     background-clip: border-box;
     border-radius: 0
 }

 .card .card-title {
     color: #000000;
     margin-bottom: 0.625rem;
     font-size: 2.875rem;
     font-weight: 500
 }

 .card .card-description {
     margin-bottom: .875rem;
     font-weight: 400;
     color: #76838f
 }

 p {
     font-size: 0.875rem;
     margin-bottom: .5rem;
     line-height: 1.5rem
 }

 .table-responsive {
     display: block;
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar
 }

 .table,
 .jsgrid .jsgrid-table {
     width: 100%;
     max-width: 100%;
     margin-bottom: 1rem;
     background-color: transparent
 }

 .table thead th,
 .jsgrid .jsgrid-table thead th {
     border-top: 0;
     border-bottom-width: 1px;
     font-weight: 500;
     font-size: .9rem!important;
     text-transform: uppercase
 }

 .table td,
 .jsgrid .jsgrid-table td {
     font-size: 0.875rem;
     padding: .475rem 0.4375rem;
 }


 .mt-10{
         padding: 0.875rem 0.3375rem !important;
 }

 button{
     outline: 0 !important;
 }

 .form-control:focus {

        box-shadow: 0 0 0 0rem rgba(0,123,255,.25) !important;

 }

 table:not(#faqs) th{
  font-size: 20px;

 }


  .table-responsive{}
  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }

  }
  @media (min-width: 576px){
.row-cols-sm-2>* {
    flex: 0 0 auto;
    width: 50%;
}
  }
  @media (max-width: 767px){
    .row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 100%;
    }
      }

      body {
        background-color: #f9f9fa
    }

    .flex {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }


    @media (max-width:991.98px) {
        .padding {
            padding: 1.5rem
        }
    }

    @media (max-width:767.98px) {
        .padding {
            padding: 1rem
        }
    }
    .deleteOM{
      display: flex;
      align-items: center;
      gap: 3px;
   }
   .content-right{
    background-color: #efefef;
   }

   .header-container{
    padding-left: 19px;
    font-weight: 700;
    font-family: muli, sans-serif;
   }

   .btn-OM{
    display: flex;
    gap: 5px;
   }

   .btn-OM a{
    width: 100%;
   }


@media (max-width:576px) {
    .sidebar {
        height: 100vh;
    }
    #collapseSidebar {
        display: none;
    }

   #collapseSidebarMobile {
       display: block;
   }


}

@media (min-width: 600px) and (max-width: 1350px) {
    .sidebar {
        width: 220px;
    }
}




#collapseSidebar {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    z-index: 20;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    background-color: #4b5563;
    color: #fff;
    border: none;
    border-radius: 0 0.375rem 0.375rem 0;
    transition: background-color 0.2s ease;
}

#collapseSidebar:hover {
    background-color: #6b7280;
}

#collapseSidebar .arrowBtn,
#collapseSidebar svg {
    width: 0.85rem;
    height: auto;
}

#collapseSidebarMobile{
    display: none;
    margin: auto;
    border-radius: 0px 0px 11px 11px;
    width: 30%;
    background-color: #4b5563;
    color: #fff;
}

.isHidden {
    display: none;
}

.invisibleSidebar {
    width: 0;
    visibility: hidden;
    padding: 0 !important;
}

.invisibleSidebarMobile {
    height: 0;
    visibility: hidden;
    padding: 0 !important;
}

.noWidth{
    width: 0;
}

.noHeight{
    height: 0;
}

.center-fifty {
    margin: auto;
    width: 80%;
}
.pilot-icons {
    width: 25px !important;
    height: 25px;
}

.login-modal .modal-dialog {
    max-width: 520px;
    margin: 1rem auto;
}

.login-modal .modal-content {
    border-radius: 0.9rem;
}

.login-modal .form-control {
    min-height: 3rem;
}

@media (max-width: 576px) {
    .login-modal .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100% - 1.5rem);
    }

    .login-modal .modal-header,
    .login-modal .modal-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}