.workedTime {
    margin-left: 10px;
}

.projectDiv {
    margin: 5px;
    flex: 1;
    margin: 0 !important;
}

.oddBackground {
    background-color: #e7eff7;
    border-color: transparent;
    color: white;
}

.evenBackground {
}

.timesheetContainer {
    display: flex; 
    flex-flow: wrap;
}

.homeContainer {
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    height: 87%;

}

.workedTimeContainer {
    font-weight: bold;
    margin-left: 5%;
    display: flex;
}

.home_office_label {
    display: block;
    width: 50px;
    height: 20px;
    background-color: #551759;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 0 50px #477a85;
}

.home_office_label::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #cca5cf;
    position: absolute;
    border-radius: 70px;
    top: 5px;
    left: 5px;
    transition: 0.5s;
}

.home_office_check:checked + .home_office_label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%); 
}

.user-place-icons-container {
    font-weight: bold;
    margin-left: 5%;
    display: flex;
}

.home_office_check[type=checkbox] {
    width: 0;
    height: 0;
    visibility: hidden;
}

.ubication-icon-container {
    position: absolute;
    top: 0;
    right: 0;
}

.user-card-container {
    display: inline-flex;
    border-color: #d2e5ec !important;
    border-radius: .4em;
}

.home-icon {
    display: none;
    background-color: rgba(234, 234, 234, 0.7);
}

.office-icon {
    display: none;
    background-color: rgba(234, 234, 234, 0.7);
}

.projectsContainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-color: #4d97b2 !important;
    border-radius: .6em !important;
}

.projectCard {
    display: flex;
    flex-direction: column;
    border-color: #1566b6 !important;
    min-height: 170px;
    min-width: 150px;
}

.projectCardHeader {
    background-color: #5b93cb !important;
    font-weight: bold;
    color: #d0e0f0;
    padding: .5rem;
    border-radius: .2em .2em 0 0 !important;
}

.homeCard {
    border-color: #1566b6 !important;
    height: 100%;
    min-width: 170px;
}

.lunchCard {
    margin-top: 50px;
    border-color: #1566b6 !important;
    width: 100%;
    min-height: 170px;
}

.userImage {
    border-radius: .25em;
}

.lunchContainer {
    display: flex;
    flex-direction: column;
    flex-flow: wrap;

}

.lunchCardContent {
    width: 100%; 
    height: 78%;
}

.homeCardContent {
    width: 100%; 
    height: 92%;
}

.userInfoButton {
    margin-bottom: 2rem;
    margin-right: 0;
    margin-left: auto;
}

.headerSpace {
    display: flex;
}

#mood-smile {
    cursor: pointer;
    margin-left: 2rem;
}

#mood-smile a {
    color: black;
}

#mood-smile:hover a{
    color: #1d8127;
}

#mood-normal {
    cursor: pointer;
    margin-left: 2rem;
}

#mood-normal a {
    color: black;
}

#mood-normal:hover a{
    color: #ffd43b;
}

#mood-angry {
    cursor: pointer;
    margin-left: 2rem;
}

#mood-angry a {
    color: black;
}

#mood-angry:hover a{
    color: #e64441;
}

.moodContainer {
    display: flex;
}

.timesheetTooltip{
    position: absolute;
    background-color: #fff;
    color: #333;
    padding: 0.5rem;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 2.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 1s; /* Smooth background color transition */
}

div.container-notification {
    text-align: center;
}

.table-container {
    width: 100%;
    height: 68vh;
    overflow: auto;
}

.problem-status-table {
    border-collapse: separate;
    width: 100%;
}


.is-flex {
    display: flex;
}
.is-flex-wrap-wrap {
    flex-wrap: wrap;
    justify-content: space-around;
}
  
.is-flex-centered {
    justify-content: center;
    align-items: center;
}
  
.is-full-height {
    height: calc(91vh);
}
.is-flex-direction-column {
    flex-direction: column
}

.is-full-width {
    width: 100%;
}

.performance-title {
    text-align: center;
    font-size: 3em;
    margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
    .performance-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .performance-data-container {
        margin-top: 40px;
    }
}

.performance-container {
    display: flex;
    justify-content: space-evenly;
}


.performance-table {
    min-width: 500px;
    overflow-x: auto;
}


tr:nth-of-type(even) {
    background-color: #EEEEEE;
}

.performance-data-container {
    min-width: 500px;
    display: none;
}

.table-overflow-x{
    max-height: 69rem;
    overflow-y: scroll;
}

.wallet-tooltip {
    position: absolute;
    background-color: #fff;
    color: #333;
    padding: 1rem;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1;
    transform: translateX(-50%);
    min-height: 3.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 1s; /* Smooth background color transition */
}

.prizes-tooltip {
    position: absolute;
    background-color: #fff;
    color: #333;
    padding: 0.5rem;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1;
    min-width: 20%;
    transform: translateX(-50%);
    min-height: 3.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 1s; /* Smooth background color transition */
}

.top-users-activity-programe {
    position: absolute;
    background-color: #fff;
    color: #333;
    padding: 1rem;
    border-radius: 5px;
    font-size: 14px;
    z-index: 1;
    transform: translateX(-50%);
    min-height: 3.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 1s; /* Smooth background color transition */
}
.datacounts-problem-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
    margin: 1rem;
    margin-bottom: 5rem !important;
}

.headerProblem {
    text-align: center;
}

.table-header {
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.5;
    color: #212529;
}

.datacount-header {
    text-align: center;
}

.loader {
    border-radius: 50% !important;
    width: 120px !important;
    height: 120px !important;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite !important;
    border: 16px solid #f3f3f3 !important;
    border-top: 16px solid #3498db !important;
    position: absolute !important;
    margin: 0 auto !important;
    top: 35%;
    margin-left: 45% !important;
}

.loader-datacounts {
    border-radius: 50% !important;
    width: 120px !important;
    height: 120px !important;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite !important;
    border: 16px solid #f3f3f3 !important;
    border-top: 16px solid #3498db !important;
    margin-left: 212%; 

}

.breadcrumb-list-item {
    margin-top: 0em !important;
}

.breadcrumb-item {
    border-radius: 5px;
    padding-left: .75em !important;
    padding-right: .75em !important;

}

.breadcrumb {
    font-size: 1.5rem !important;
    line-height: 2 !important;
}

.problems-title {
    text-align: center;
    font-size: 3em;
    margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
    .container-problems {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .problem-data-container {
        margin-top: 40px;
    }
}

.container-problems {
    display: flex;
    justify-content: space-evenly;
}


.problems-table {
    min-width: 500px;
    overflow-x: auto;
}


.problem-id {
    cursor: pointer;
}

.prolem-id:hover {
    color: aqua;
}

.problem-data-container {
    min-width: 500px;
    display: none;
    max-height: 69rem;
    overflow-y: scroll;
}

.problem-graph-container {
    width: 100%;
    height: 400px;
}

.problem-table-container {
    margin-top: 20px;
}

.problem-error{
    display: none;
    text-align: center;
    font-weight: 600;
    font-size: 28px;
}

.problem-status-header {
    text-align: center;
}

.nn-management-header {
    text-align: center;
}

.breadcrumb-nav {
    background-color: #ebeff2a1;
    border-radius: 5px;
}

.breadcrumb-nn-list {
    margin-top: 0em !important;
    margin-left: 0em !important;
}

.breadcrumb-item-active {
    background-color: #ecf0f1 !important;
    border-color: #646464 !important;
    z-index: 2 !important;
}

.users-header {
    text-align: center !important;
}

.user-element {
    text-align: center !important;
    line-height: 2.5rem !important;
}

.user-element:visited {
    color: #14a7d0;
}

.tagged-data {
    margin: 32px;
    text-align: center;
}

.edit-tagged-data {
    margin: 32px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    width: 20%;
}

.users-img-header {
    text-align: center !important;
}

.tagged-image {
    width: 70% !important;
    height: 70% !important;
    margin: auto !important;
    display: block;
}

.edit-tagged-icon {
    color: #177f9f !important;
}

.edit-tagged-icon:hover {
    color: #21b1dd !important;
}

.performance-graphs-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 2rem;
    height: 30rem;
}

.toggle-switch {
    display: flex;
    align-items: center;
    user-select: none;
}

.slider {
    position: relative;
    width: 43px;
    height: 25px;
    background-color: #ccc;
    border-radius: 25px;
    cursor: pointer;
}

.slider:before {
    content: "";
    position: absolute;
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.4s;
}

.toggle-switch input {
    display: none;
}

.toggle-switch input:checked + .slider {
    background-color: #2196F3;
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(17px);
}

.graph-selection-slider {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.column-graph-option {
    margin-left: 1rem;
}

.line-graph-option {
    margin-right: 1rem;
}

.datacount-headers {
    text-align: center !important;
}

.datacounts-tr {
    background-color: #EEEEEE;
}


.datacount-table-container {
    display: none;
}

.datacount-double-header {
    line-height: 1 !important;
}

.flow-sweet-alert {
    width: 80rem !important;
}

.total-rec-tag-class {
    text-align: center !important;
}

.total-column-line {
    background-color: #c8d5ea;
}

.problem-creation-header {
    text-align: center;
    margin-bottom: 2rem;
}

.error_message_container {
    margin-left: 14.1615%; 
    margin-top: 3rem; 
    width: 71.667%; 
    padding: 1.5rem; 
    background-color: #fddfdf; 
    border: 1px solid #e04f4f; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     border-radius: 5px;
}

.header-error-message {
    color: #e04f4f;
}

.error-message {
    color: #e04f4f; 
    font-weight: bold;
}

.success_message_container {
    margin-left: 14.1615%; 
    margin-top: 3rem; 
    width: 71.667%; 
    padding: 1.5rem; 
    background-color: #f2f2f2; 
    border: 1px solid #b0e57c; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
    border-radius: 5px;
}

.success_message_header {
    color: #4CAF50;
}

.success_li {
    color: #333; 
    font-weight: bold;
}

.metadata-input {
    margin-top: .5rem;
    max-width: 20rem;
    margin-right: 1rem;
}

.metadata-button {
    margin-top: 1rem;

}

.key-value-pair {
    margin-bottom: 1rem;
    margin-top: 1rem;
    margin-left: 1rem;
}

.datacounts-header {
    margin-top: 0px !important;
    text-align: center;
}

.true-token-elements-container {
    width: 40%;
    margin-top: 5%;
}

.false-token-elements-container {
    width: 40%;
    margin-top: 5%;
}

.token-ident {
    cursor: pointer;
    color: #4d759d;
}

.annotators-performance-header {
    max-width: 1152px;
    margin: 0 auto;
    position: relative;
    width: auto;
    margin-bottom: 2rem !important;
}

.annotators-performance-image {
    width: 90%;
    margin: 0 auto;
}

.extra-options {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: white;
}

.dwnl-bttn-container {

}

.userInfoButton-datacounts {
    margin-bottom: 2rem;
    margin-left: 2rem;
}

.datacounts-problem-table thead tr:nth-child(1) th {
    background-color: white;
    border: 1px solid black !important;
    position: sticky;
    top: 0;
    z-index: 15;
  }

  .datacounts-problem-table thead tr:nth-child(2) th {
    background-color: white;
    border: 1px solid black !important;
    position: sticky;
    top: 30;
    z-index: 15;
  }

  .problem-status-table thead tr:nth-child(1) th {
    background-color: white;
    border: 1px solid black !important;
    position: sticky;
    top: 0;
    z-index: 15;
  }

  .problem-status-table thead tr:nth-child(2) th {
    background-color: white;
    border: 1px solid black !important;
    position: sticky;
    top: 54.5;
    z-index: 15;
  }