/*================================================================================
	Item Name: Robust - Responsive Admin Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


.dashboard .text-muted {
    font-size: 20px;
}

/* .badge.badge-online.badge-pill.float-right */

.badge.badge-online {
    background-color: #28a745;
}

.badge.badge-offline {
    background-color: #dc3545;
}

.badge.badge-inactive {
    background-color: #ffc107;
}

.badge.badge-not-working {
    background-color: #007bff;
}

.card-footer.border-top-blue-grey.border-top-lighten-5.text-muted {
    margin-top: 130px;
}

#minimal-statistics .row .col-xl-2.col-lg-6.col-12 {
    padding-left: 0px;
    padding-right: 1px;
}


/* Card Ribbon  */
.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 93px;
    height: 93px;
    text-align: right;
}

.ribbon span {
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 32px;
    transform: rotate(45deg);
    width: 125px;
    display: block;
    background: #79a70a;
    background: linear-gradient(#9bc90d 0%, #dc3545 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 17px; // change this, if no border
    right: -29px; // change this, if no border
}

.ribbon.offline span {
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 32px;
    transform: rotate(45deg);
    width: 125px;
    display: block;
    background: #1c1d19;
    background: linear-gradient(#79981b 0%, #da6b40 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 17px; // change this, if no border
    right: -29px; // change this, if no border
}

.ribbon span::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #79A70A;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}

.ribbon span::after {
    content: '';
    position: absolute;
    right: 0%;
    top: 100%;
    z-index: -1;
    border-right: 3px solid #79A70A;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}

#custom_table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#custom_table td,
#custom_table th {
    border: 1px solid #ddd;
    padding: 8px;
}

#custom_table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#custom_table tr:hover {
    background-color: #ddd;
}

#custom_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
}

/* .card.employee .card-profile-image{

} */

.report-cards{
    height: 20vh;
}

form .form-actions{
    border: none;
    padding: 0;
    margin-top: 0;
}

.nav-tabs .nav-link.active{
    border: none;
}

.card-view-ul{
    height: 50px;
}


/* Roboto */

.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  

  /* Toast Notification Starts */



  .toast-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 5px;
    margin: 2em auto;
    padding: 1rem;
    border: none;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    min-width: 150px;
    font-size: 1rem;
    outline: none;
    background: #3498db;
    color: #fff;
  }
  
  .toast-btn:hover {
    filter: brightness(0.8);
  }
  
  button.success-toast {
    background-color: #27ae60;
  }
  
  button.danger-toast {
    background-color: #c0392b;
  }
    
  button.info-toast {
    background-color: #2980b9;
  }
  
  button.warning-toast {
    background-color: #f39c12;
  }
  
  .toasts {
    position: absolute;
    top: 5rem;
    right: 1rem;
    z-index: 9999;
  }
    
  .toast-notification {
    width: 350px;
    margin-bottom: .75rem;
    background: #f8f8ff;
    border-radius: 2px;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
    overflow: hidden;
  }
  
  .hide-toast {
    display: none;
  }
  
  .toast-notification .toast-content {
    font-weight: 400;
    color: #353b48;
    padding: 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 1rem;
  }
  
  .toast-notification .toast-icon {
    background-color: #27ae60;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  
  .toast-notification .toast-icon i {
    font-size: 1.25rem;
  }
  
  .toast-notification .toast-progress {
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  
  .toast-notification .toast-progress-bar {
    background-color: #b7b7b7;
    height: 2px;
    animation: toastProgress 3s ease-in-out forwards;
  }
  
  .slide-in-slide-out {
    animation: slideInRight 0.3s ease-in-out forwards, slideOutRight 0.5s ease-in-out forwards 3s;
    transform: translateX(110%);
  }
  
  .slide-in-fade-out {
    animation: slideInRight 0.3s ease-in-out forwards, fadeOut 0.5s ease-in-out forwards 3s;
    transform: translateX(110%);
  }
  
  .wiggle-me {
    animation: wiggle 2s ease-in;
  }
  
  @keyframes slideInRight { 
    0% { transform: translateX(110%); }
    75% { transform: translateX(-10%); }
    100% { transform: translateX(0%); }
  }
  
  @keyframes slideOutRight { 
    0% { transform: translateX(0%); }
    25% { transform: translateX(-10%); }
    100% { transform: translateX(110%); }
  }
    
  @keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  
  @keyframes toastProgress {
    0% { width: 100%; }
    100% { width: 0%; }
  }
  
  @keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-13deg); }
    20% { transform: rotateZ(9deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(7deg); }
    35% { transform: rotateZ(-2deg); }
    40%, 100% { transform: rotateZ(0); }
  }

  /* Toast Notification Ends  */


  /* Toast Notifications 2 */



  /* Toast Notifications 2 Ends*/
  
  
/* Timeline  */
.qa-message-list{
  height: 265px;
  overflow: auto;
}
.message-item {
    margin-bottom: 25px;
    margin-left: 40px;
    position: relative;
}

.message-item .message-inner {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
    position: relative;
    width: 280px;
}

.message-item .message-inner:before {
    border-right: 10px solid #ddd;
    border-style: solid;
    border-width: 10px;
    color: rgba(0, 0, 0, 0);
    content: "";
    display: block;
    height: 0;
    position: absolute;
    left: -20px;
    top: 6px;
    width: 0;
}

.message-item .message-inner:after {
    border-right: 10px solid #fff;
    border-style: solid;
    border-width: 10px;
    color: rgba(0, 0, 0, 0);
    content: "";
    display: block;
    height: 0;
    position: absolute;
    left: -18px;
    top: 6px;
    width: 0;
}

.message-item:before {
    background: #fff;
    border-radius: 2px;
    bottom: -30px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    content: "";
    height: 100%;
    left: -30px;
    position: absolute;
    width: 3px;
}

.message-item:after {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    content: "";
    height: 15px;
    left: -36px;
    position: absolute;
    top: 10px;
    width: 15px;
}


.message-item .message-head {
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.message-item .message-head .avatar {
    margin-right: 20px;
}

.message-item .message-head .user-detail {
    overflow: hidden;
}

.message-item .message-head .user-detail h5 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.message-item .message-head .post-meta {
    float: left;
    padding: 0 15px 0 0;
}

.message-item .message-head .post-meta>div {
    color: #333;
    font-weight: bold;
    text-align: right;
}

.post-meta>div {
    color: #777;
    font-size: 12px;
    line-height: 22px;
}

.message-item .message-head .post-meta>div {
    color: #333;
    font-weight: bold;
    text-align: right;
}


.text-leave{
  color: red;
}

.text-cl{
  color: yellow;
}
.text-wfh{
  color: blue;
}
.text-hd-one{
  color: orange;
}
.text-hd-two{
  color: purple;
}