:root {
  --bs-primary: #772651;
  --bs-secondary: #ad6e8b;
  --bs-light: #ffffff;
  --sidebar-bg: #4c0c2e;
  --error-color: #ff4d4d;
  --sidebar-width: 300px;
  --sidebar-collapsed-width: 80px; 
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #772651;
  --bs-btn-border-color: #772651;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5e173d;
  --bs-btn-hover-border-color: #5e173d;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5e173d;
  --bs-btn-active-border-color: #5e173d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #772651;
  --bs-btn-disabled-border-color: #772651;
}

.btn-outline-primary {
  --bs-btn-color: #772651;
  --bs-btn-border-color: #772651;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #772651;
  --bs-btn-hover-border-color: #772651;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #772651;
  --bs-btn-active-border-color: #772651;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #772651;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #772651;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-disabled-color:#B4B4B4 !important; 
  --bs-btn-disabled-bg:transparent !important;
  --bs-btn-disabled-border-color:#B4B4B4 !important;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ad6e8b;
  --bs-btn-border-color: #ad6e8b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #63594e;
  --bs-btn-hover-border-color: #63594e;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #63594e;
  --bs-btn-active-border-color: #63594e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ad6e8b;
  --bs-btn-disabled-border-color: #ad6e8b;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
}

body.login {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
   
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  background: url("../img/login_bg.svg") no-repeat;
  background-size: cover;
}

.login .title {
  line-height: 0.9;
  font-size: 1.4em;
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 1em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-top: 3px solid #772651 !important;
}

.login-container .logo img {
  display: block;
  margin: 0 auto 1.5rem;
}

.login-container .form-group {
  margin-bottom: 1.5rem;
}

.login-container .btn-primary {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.2rem;
}
 
.login .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: transparent !important;
  color: white;
  padding: 0.5rem 0;
}

@media (min-width: 992px) {
  body {
      flex-direction: row;
      background: linear-gradient(to bottom, #ffffff 95%, #e5e5e5 100%);
    } 
}
.sidebar {
    width: inherit;
    /* background-color: var(--sidebar-bg); */
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    border-radius: 0em 0em 4em 0em;
    background: #4c0c2e url("../img/sidebar_bg.svg") no-repeat bottom left;
}

@media (max-width: 991.98px) {
  .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      transform: translateX(-100%);
      z-index: 999;
      padding-top: 60px;
  }
  .sidebar.show {
      transform: translateX(0);
  }

  .header {
      height: 60px !important;
  }
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}
@media (min-width: 992px) {
  .sidebar.collapsed {
      transform: none;
  }
}
.sidebar .logo {    
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    width: auto;
}

#logo {
    padding: 1.3rem !important;
    min-width: 250px !important;
}

@media (max-width: 768px){
  #logo{
    padding: 2rem !important;
  }
}
.sidebar .nav-item {
  padding: 0.3rem 0;
}
.sidebar .nav-link {
  color: white;
  display: flex;
  align-items: center;
  font-size: 1.1em;
  padding: .5em 1.5em;
}

.sidebar .nav-link:hover {
  background-color:var(--bs-secondary);
}
.sidebar .nav-link i {
  margin-right: 0.5rem;
}
.sidebar.collapsed .nav-link {
  justify-content: center;
}
.sidebar.collapsed .nav-link span {
  display: none;
}
.content {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.header {
  height: 65px;
  background-color: var(--bs-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  flex-shrink: 0;
}

.card {
  border-radius: 0.75em;
  border-top: 3px solid #772651 !important;
}
.footer {
  height: 60px; 
  color: #772651;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
  background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.header .navbar-nav {
  align-items: center;
}
.header .nav-link {
  color: white;
}
.header .dropdown-menu {
  background-color: white;
  border: none;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
}
.header .dropdown-menu a {
  color: var(--bs-primary);
}
.header .dropdown-menu a:hover {
  background-color: var(--bs-secondary);
  color: white;
}
main {
  padding: 1rem;
  flex-grow: 1;
}
.card {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
  margin-top: .5rem;
}

 
#sidebarToggle i {
  font-size: 1.5em;
}


.active>.page-link, .page-link.active {
  z-index: 3;
  color: var(--bs-light);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.page-link { 
  color: var(--bs-primary); 
}

.task-table th, .review-table th {
text-align: center;
vertical-align: middle;
}
.task-table th:first-child, 
.review-table th:first-child {
  text-align: left;
  }

  .review-table th:nth-child(2) {
    text-align: left;
    }

    .review-table td:nth-child(3), .review-table td:nth-child(4) {
      text-align: center;
      }
.task-table th, 
.task-table td {
  padding:.2em
}

.task-table td {
  font-size: .9em;
}

.task-table td .btn-sm {
  padding:.2em .3em
}

.task-table tr th:last-child {
  width:28%;
}

.task-table td .btn-sm.btn-danger,
.task-table td .btn-sm.btn-primary
{ 
  width: 49%; 
}

.task-table td .btn-sm { 
  width: 45%;
  float: left;
  margin-right: .3em;
}

.task-table td .btn-sm.btn-danger { 
  width: 49%; 
}

.task-table tr td:nth-child(2),
.task-table tr td:nth-child(3)  { 
  text-align: center;
}



.review-table tr th:last-child {
  width:25%;
}

.review-table tr td:last-child {
    text-align: center;
} 

.review-table tr td:last-child .btn {  
   width: 47.5%; 
   margin-bottom: 7px;
}

.review-table tr td:last-child .btn:first-child {  
  margin-right: 4px; 
}

.review-table tr td:last-child .btn:last-child {  
  width: 100%; 
}

.review-table th {
  background-color: #f8f8f8;
}

.card.review { 
  border-top: 3px solid #FFC107 !important;
}

.supervisor.link {
  font-size: .7em !important;
  color: #a0a0a0;
  text-decoration: none;
  margin-top: .3em;
}

.supervisor.link:hover { 
  color: var(--bs-primary); 
   
}

.location {
  font-size: .75em !important;
  margin-top: .2em;
}

@media screen and (min-width: 1367px) and (-webkit-min-device-pixel-ratio:1.25) {
  .task-table tr th:last-child {
    width: 48%;
  }

/* .review-table tr th:last-child {
    width: 35%;
  } */
}
 
@media (max-width: 1366px) {
   
}

@media screen and (min-width: 1250px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .review-table tr th:last-child {
    width: 45%;
}
}



@media (max-width:768px){ 
  .system-logo{
    width:150px;
  }

  .task-table tr th:last-child {
    width:46%;
  }
  
  .task-table td .btn-sm {
    margin-bottom: .3em;
    margin-top: .3em;
    font-size: .83em;
     
  }

  .supervisor-table td .btn-sm {
    margin-bottom: .5em; 
    width: 100%; 
  }

 


  .review-table tr:last-child td {
    text-align: center;
  }

  .review-table td .btn { 
     
    margin-right: .5em;
    margin-bottom: .8em;
    width: 125px;
  }

  .review-table td .btn:last-child { 
    margin-top: 0; 
    margin-bottom: .3em;
    width: 180px;
  }

  .review-table tr td .btn {
    width: 100% !important; 
}

   
}

.notstarted { 
  color:#3b3b3b;
  font-size: 1.2em;
  border-radius: 100%; 
  margin:0 7px; 
  display: block;
  float: left;
}

.inprogress { 
  color:#772651;
  font-size: 1.2em;
  border-radius: 100%; 
  margin:0 7px; 
  display: block;
  float: left;
}

.suspended { 
  color:#c95f09;
  font-size: 1.5em;
  border-radius: 100%; 
  margin:0 7px; 
  display: block;
  float: left;
}

.rejected { 
  color:#cc0000;
  font-size: 1.2em;
  border-radius: 100%; 
  margin:0 7px; 
  display: block;
  float: left;
}

.waiting { 
  color:#333333;
  font-size: 1.2em;
  border-radius: 100%; 
  margin:0 7px; 
  display: block;
  float: left;
}

/* timeline styles 28/11/2024*/
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
     
}

    .timeline::after {
        content: '';
        position: absolute;
        width: 4px;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, #ffffff 0%,#772651 25%,#772651 75%,#ffffff 100%);
    }

.timeline-event {
    display: flex;
    align-items: center;
    margin: 10px 0;
    position: relative;
}

    .timeline-event:nth-child(odd) .content {
        text-align: left;
        order: 1;
        margin-right: auto;
    }

    .timeline-event:nth-child(odd) .dot {
        left: 50%;
    }

    .timeline-event:nth-child(even) .content {
        text-align: left;
        order: 0;
        margin-left: auto;
    }

    .timeline-event:nth-child(even) .dot {
        left: 50%;
    }

    .timeline-event .content {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px 20px;
        max-width: 46%;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .timeline-event .dot {
        width: 20px;
        height: 20px;
        background: var(--bs-primary);
        border-radius: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    /* history ui fixes 8 Dec. */ 
    .timeline-event h6, 
    .timeline-event p {
        margin-bottom: 0.3rem;
    }

    /* ui updates 10 Dec. */
    .text-5 {
        font-size: 2em
    }

    /*  Added by Montassar */
    .slow-spin {
        -webkit-animation: fa-spin 8s infinite linear;
        animation: fa-spin 8s infinite linear;
    }

.op-rejected > td {
    background-color: #ffcfcf;
}

#cogs {
    margin-top: 100px;
    margin-bottom: 100px;
    color: #772651;
    text-align: center;
}


.mtoast {
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}


.progress-bar {
    background-color: #ad005c;
}

.bg-secondary {
    background-color: #ad6e8bc4 !important;
}

.progress, .progress-stacked {
    border-radius: 0%;
}