[dir="rtl"] .rtl{
    text-align : right;
}
[dir="rtl"] .ltr{
    direction: ltr;
    text-align: right;
}
.icon {
    width: 30px;
    height: 30px;
    fill : #198754;
}
.icon-small{
    width: 15px;
    height: 15px;
}
.icon-gray{
    fill: rgba(0,0,0,.55);
}
body.bussy:before{
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    background-color: black;
    opacity: 0.6;
    z-index: 10000;
}
.loading:after,
body.bussy:after{
    content : url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath fill="%23ffffff" d="M12 4c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM24.719 16c0 0 0 0 0 0 0-1.812 1.469-3.281 3.281-3.281s3.281 1.469 3.281 3.281c0 0 0 0 0 0 0 1.812-1.469 3.281-3.281 3.281s-3.281-1.469-3.281-3.281zM21.513 24.485c0-1.641 1.331-2.972 2.972-2.972s2.972 1.331 2.972 2.972c0 1.641-1.331 2.972-2.972 2.972s-2.972-1.331-2.972-2.972zM13.308 28c0-1.487 1.205-2.692 2.692-2.692s2.692 1.205 2.692 2.692c0 1.487-1.205 2.692-2.692 2.692s-2.692-1.205-2.692-2.692zM5.077 24.485c0-1.346 1.092-2.438 2.438-2.438s2.438 1.092 2.438 2.438c0 1.346-1.092 2.438-2.438 2.438s-2.438-1.092-2.438-2.438zM1.792 16c0-1.22 0.989-2.208 2.208-2.208s2.208 0.989 2.208 2.208c0 1.22-0.989 2.208-2.208 2.208s-2.208-0.989-2.208-2.208zM5.515 7.515c0 0 0 0 0 0 0-1.105 0.895-2 2-2s2 0.895 2 2c0 0 0 0 0 0 0 1.105-0.895 2-2 2s-2-0.895-2-2zM28.108 7.515c0 2.001-1.622 3.623-3.623 3.623s-3.623-1.622-3.623-3.623c0-2.001 1.622-3.623 3.623-3.623s3.623 1.622 3.623 3.623z"%3E%3C/path%3E%3C/svg%3E');
    position: fixed;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation: rotate 1s steps(8) infinite;
            animation: rotate 1s steps(8) infinite;
    z-index: 10001;
}
.loading{
    position: relative;
    min-height: 3em;
}
.loading:not(:empty):after{
    display: none;
}
.loading:empty:after{
    position: absolute;
    content : url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"%3E%3Cpath fill="%23ddd" d="M12 4c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM24.719 16c0 0 0 0 0 0 0-1.812 1.469-3.281 3.281-3.281s3.281 1.469 3.281 3.281c0 0 0 0 0 0 0 1.812-1.469 3.281-3.281 3.281s-3.281-1.469-3.281-3.281zM21.513 24.485c0-1.641 1.331-2.972 2.972-2.972s2.972 1.331 2.972 2.972c0 1.641-1.331 2.972-2.972 2.972s-2.972-1.331-2.972-2.972zM13.308 28c0-1.487 1.205-2.692 2.692-2.692s2.692 1.205 2.692 2.692c0 1.487-1.205 2.692-2.692 2.692s-2.692-1.205-2.692-2.692zM5.077 24.485c0-1.346 1.092-2.438 2.438-2.438s2.438 1.092 2.438 2.438c0 1.346-1.092 2.438-2.438 2.438s-2.438-1.092-2.438-2.438zM1.792 16c0-1.22 0.989-2.208 2.208-2.208s2.208 0.989 2.208 2.208c0 1.22-0.989 2.208-2.208 2.208s-2.208-0.989-2.208-2.208zM5.515 7.515c0 0 0 0 0 0 0-1.105 0.895-2 2-2s2 0.895 2 2c0 0 0 0 0 0 0 1.105-0.895 2-2 2s-2-0.895-2-2zM28.108 7.515c0 2.001-1.622 3.623-3.623 3.623s-3.623-1.622-3.623-3.623c0-2.001 1.622-3.623 3.623-3.623s3.623 1.622 3.623 3.623z"%3E%3C/path%3E%3C/svg%3E');
}
@-webkit-keyframes rotate {
    to {-webkit-transform: translate(-50%, -50%) rotate(360deg);transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate {
    to {-webkit-transform: translate(-50%, -50%) rotate(360deg);transform: translate(-50%, -50%) rotate(360deg); }
}

.btn {
    display: inline-block;
    margin: 5px;
}

.btn-primary {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
.btn-primary:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}
.btn-primary.disabled, .btn-primary:disabled{
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: #f4f4f4;
}
.attendance-table input[type="radio"]{
    position: absolute;
    opacity: 0;
    pointer-events : none;
}
.attendance-table .bi{
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: #b4b4b4;
}

.attendance-table input[type="radio"]:checked + label .bi-person-check-fill { color: #00a76d; }
.attendance-table input[type="radio"]:checked + label .bi-person-check { color: #ff9800; }
.attendance-table input[type="radio"]:checked + label .bi-person-x-fill { color: #dc0001; }

a.delete{
    background: #d53535;
    border-radius: 50%;
    font-size: 1.2rem;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    color: #fff;
    float: right;
}
[dir="rtl"] a.delete{
    float: left;
}

.isDirty .cke{
    outline: 2px solid red;
}

.sticky{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    margin: 0;
    padding: 10px 0;
    background-color: #fff;
    box-shadow: 0px 2px 2px rgba(0,0,0,.5);
}
#save-all{
    display: block;
    max-width: 300px;
    margin: 0 auto;
}
.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.badge.badge-danger{ background-color: #842029; }
.badge.bg-pending-dept-approval{ background-color: #d38805; }
.badge.bg-canceled{ background-color: #842029; }
.badge.bg-activated{ background-color: #096215; }
.badge.bg-draft{ background-color: #909090; }
.badge-sm { font-size: .7em; }


.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
  }
  
  .badge-success {
    color: #fff;
    background-color: #28a745;
  }
  
  .badge-warning {
    color: #212529;
    background-color: #ffc107;
  }
  
  .badge-danger {
    color: #fff;
    background-color: #dc3545;
  }
  
  .badge-info {
    color: #fff;
    background-color: #17a2b8;
  }
  
  .badge-primary {
    color: #fff;
    background-color: #007bff;
  }
  
  .badge-secondary {
    color: #fff;
    background-color: #6c757d;
  }
  
  .badge-light {
    color: #212529;
    background-color: #f8f9fa;
  }
  
  .badge-dark {
    color: #fff;
    background-color: #343a40;
  }

  @media only screen and (max-width: 800px) {
    .table-responsive,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
      display: block;
    }
  
    .table-responsive thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
  
    .table-responsive tr {
      border: 1px solid #ccc;
      margin-bottom: 15px;
    }
  
    .table-responsive td {
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
      white-space: normal;
      text-align: left; /* Default to left */
    }
  
    .table-responsive td:before {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      text-align: left; /* Default to left */
      font-weight: bold;
    }
  
    .table-responsive td:before {
      content: attr(data-title);
    }
  
    /* Adjust for RTL */
    [dir="rtl"] .table-responsive td {
      text-align: right;
      padding-right: 50%;
      padding-left: 0;
    }
  
    [dir="rtl"] .table-responsive td:before {
      left: auto;
      right: 6px;
      padding-right: 0;
      padding-left: 10px;
      text-align: right;
    }
      
      .table-responsive .collapsible:not(.non-clickable)  {
        background-color: #f9f9f9; 
      }
  }