@use 'globals' as *;

.card.panel-details .card-body {
    justify-content: space-around;
    &-item {
        margin: 13px;
        padding: 9px 18px;
        border-bottom: thin solid;
        color: #858585;
    }
}
.content-wrapper {

    & .challenges {
        & .main-card--bottom {
            padding-left: 10px;
            padding-right: 10px;
        }

        & .challenge-row {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            padding: 5px 14px;
            font-size: 14px;
            border-radius: 5px;

            &.checked {
                background-color: #bbffbb;
            }

            &.not-checked {
                background-color: #ffe6e6;
            }
        }
    }

    & .cards-list {
        &.dashboard {
            & .list-box {
                &--inner {
                    background-color: #FFFFFF;
                    border: thin solid #E8E8ED;
                    color: #9C9EB2;
                    border-radius: 15px;
                    padding: 25px;
                    font-family: $open;

                    & .list-titles {
                        list-style: none;
                        padding: 0;
                        display: flex;
                        justify-content: space-between;

                        & li {
                            font-size: 12px;
                            line-height: 25px;
                        }

                        &--name {
                            width: 20%;
                        }

                        &--title {
                            width: 20%;
                        }

                        &--last {
                            width: 20%;
                        }

                        &--update {
                            width: 20%;
                        }

                        &--actions {
                            width: 20%;
                        }

                    }
                }

                &.last-edited {
                    & .list-box {
                        &--inner {
                            &---list {

                                & ul {
                                    & li {
                                        &:first-child {
                                            text-align: left;
                                            margin: 10px 0;

                                            & div {
                                                &:nth-child(1) {
                                                    padding-left: 118px;
                                                }

                                                &:nth-child(2) {
                                                    padding-left: 0;
                                                }

                                                &:nth-child(4) {
                                                    padding-left: 0;
                                                }
                                            }

                                        }
                                    }


                                }

                                &----person {
                                    width: 25%;
                                }

                                &----project {
                                    width: 40%;
                                }

                                &----actions {
                                    width: 10%;

                                }

                                &----date {
                                    width: 20%;
                                }

                                &----evaluators {
                                    width: 25%;
                                }

                                &----view {
                                    width: 5%;
                                    background-color: transparent;

                                    & a {
                                        background-color: #c6ffcd;
                                        width: 36px;
                                        height: 36px;
                                        border-radius: 50%;
                                        text-align: center;
                                        line-height: 36px;
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            & .stat-box--inner {
                border-radius: 15px;
                padding: 20px;
                margin-bottom: 30px;
                display: flex;
                flex-direction: column;
                height: 90%;
                justify-content: space-around;

            }


            & .list-box {
                &--inner {
                    &---list {
                        & li {
                            border: none;
                            padding: 2px 0;


                        }

                    }

                    &----person {
                        width: 25%;
                    }

                    &----evaluators {
                        width: 25%;
                    }

                    &----project {
                        width: 40%;
                    }

                    &----action {
                        width: 10%;
                    }

                    &----date {
                        width: 20%;
                    }

                    &----view {
                        width: 5%;
                    }
                }
            }
        }
    }

    & .advisor-card {
        margin: 8px 0;
        position: relative;

        &--inner {
            background: #fff;
            height: 100%;
            border-radius: 25px;
            border: thin solid #e8e8ed;
            padding: 24px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 30px;

            & .person-details {
                font-weight: bold;
            }

        }

        & + .main-card {
            & .main-card--inner {
                padding: 0 !important;

                & a {
                    & .main-card--add {
                        display: flex;
                        align-items: center;
                        gap: 20px;
                        justify-content: center;

                        &---plus {
                            margin: 0;
                            font-size: 35px;
                        }
                    }
                }
            }
        }
    }

    & #removeAdvisor {
        & button {
            background: transparent;
            position: absolute;
            width: inherit;
            right: 18px;
            top: 10px;
            color: #b1b1b1;
        }
    }

    & .main-card {
        margin: 12px 0;

        &.white {
            background-color: #fff;
        }

        &.with-chart {
            & .main-card {
                &--left {
                    width: 50%;
                }

                &--right {
                    width: 49%;
                }

                &--chart {
                    padding: 10px 20px;

                    & img {
                        max-height: 265px;
                    }
                }
            }
        }

        &.with-box {

        }

        &--inner {
            background: $white;
            border-radius: 15px;
            border: thin solid #E8E8ED;
            display: flex;
            flex-wrap: wrap;
            padding: 25px;

            & a {
            }
        }

        &--top {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            width: 100%;

            &---title {
                width: 95%;

                & h3 {
                    font-size: 16px;
                    line-height: 25px;
                    font-weight: bold;
                    font-family: $open;
                    color: #4a5feb;
                    min-height: 28px;
                    @media (max-width: 991px) {
                        min-height: 30px;
                    }
                }
                & a {
                    text-decoration: none;
                    border-bottom: thin solid #4a5feb;
                }
            }
            & span.domain {
                font-size: 14px;
            }

            &---options {
                width: 5%;
                text-align: center;

                & .options-toggler {
                    cursor: pointer;
                    color: $darkblue;
                    font-size: 20px;
                    line-height: 25px;

                    & i {

                    }
                }

                & .options-list {
                    opacity: 0;
                    height: 0;
                    visibility: hidden;

                    &.active {
                        opacity: 1;
                        height: auto;
                        visibility: visible;
                    }

                    & ul {
                        & li {
                            & a {
                                & i {

                                }
                            }
                        }
                    }
                }
            }

            &---status {
                width: 100%;

                & .status-indicator {
                    display: inline-block;
                    font-size: 12px;
                    line-height: 15px;
                    font-family: $open;
                    font-weight: 400;
                    padding: 8px 25px;
                    border-radius: 15px;
                    margin-bottom: 30px;
                    @media (max-width: 991px) {
                        margin-bottom: 5px;
                    }
                }
                & .role-indicator {
                    border-radius: 30px;
                    border: thin solid $darkblue;
                    display: inline-block;
                    padding: 7px 10px;
                    text-transform: uppercase;
                    font-size: 10px;
                    line-height: 11px;
                    font-weight: bold;
                    margin-bottom: 30px;
                    & i {
                        font-weight: 100;
                        margin-right: 5px;
                        font-size: 11px;
                    }
                }
            }
        }

        &--middle {
            margin: 0 auto 15px;
            //border: thin solid #ccc;
            border-radius: 15px;

            &.no-border {
                border: none;
            }

            &---description {
                font-size: 12px;
                line-height: 22px;
                font-family: $open;
                color: $grey;
                min-height: 50px;
            }
        }

        &--bottom {
            width: 100%;

            & .panel_chair {
                color: $darkblue;
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            & .progress {
                height: 7px;
                border-radius: 15px;
                margin-bottom: 15px;


                &-info {
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    line-height: 15px;
                    font-family: $open;
                    font-weight: 400;
                    margin-bottom: 16px;

                    & .percentage {

                    }

                    &.days-left {

                    }
                }

                & .progress-bar {

                }
            }

            & .submissions-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;

                & .call-phase {
                    border-radius: 30px;
                    display: inline-block;
                    padding: 7px 10px;
                    text-transform: uppercase;
                    font-size: 10px;
                    line-height: 11px;
                    font-weight: bold;
                    &.initialization {
                        color: #E419A7;
                        background-color: #F6CBF3;
                    }
                    &.submission {
                        color: #198F60;
                        background-color: #CBF6E5;
                    }
                    &.evaluation {
                        color: #FFFFFF;
                        background-color: #F8A412;
                    }
                    &.advisory_board {
                        color: #FFFFFF;
                        background-color: #4812f8;
                    }
                    &.completed {}
                    &.acceleration {}
                    &.suspended {}
                }
                & .submissions-count {
                    display: flex;
                    align-items: center;
                    gap: 15px;

                    &--list {
                        list-style: none;
                        padding: 0;
                        margin: 0;

                        & li {
                            width: 30px;
                            height: 30px;
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            position: relative;
                            left: -15px;
                            margin-right: -15px;
                            border-radius: 50%;
                            display: inline-block;

                            &:first-child {
                                left: 0;
                                margin-right: 0;

                            }
                        }
                    }

                    &--counter {
                        color: $grey;
                        font-size: 12px;
                        line-height: 15px;
                        font-family: $open;
                        font-weight: 400;

                        & span {
                            font-weight: bold;
                            font-size: 16px;
                        }
                    }
                }

                & .end-date {
                    color: $grey;
                    font-size: 12px;
                    line-height: 15px;
                    font-family: $open;
                    font-weight: 400;
                }


            }
        }

        &.active {
            & .main-card {
                &--top {
                    &---status {
                        & .status-indicator {
                            color: $active;
                            background-color: $activebg;
                        }
                    }
                }

                &--bottom {
                    & .progress {
                        background-color: $activebg;

                        &-bar {
                            background-color: $active;
                        }

                        &-info {
                            color: $active;
                        }
                    }
                }
            }
        }

        &.ongoing {
            & .main-card {
                &--top {
                    &---status {
                        & .status-indicator {
                            color: $ongoing;
                            background-color: $ongoingbg;
                        }
                    }
                }

                &--bottom {
                    & .progress {
                        background-color: $ongoingbg;

                        &-bar {
                            background-color: $ongoing;
                        }

                        &-info {
                            color: $ongoing;
                        }
                    }
                }
            }
        }

        &.completed {
            & .main-card {
                &--top {
                    &---status {
                        & .status-indicator {
                            color: $completed;
                            background-color: $completedbg;
                        }
                    }
                }

                &--bottom {
                    & .progress {
                        background-color: $completedbg;

                        &-bar {
                            background-color: $completed;
                        }

                        &-info {
                            color: $completed;
                        }
                    }
                }
            }
        }

        &.create {

            &.disabled {
                & .main-card {
                    &--inner {
                        border-color: #c3c3c3;
                        cursor: initial;
                    }

                    &--add {
                        &---plus {
                            font-size: 50px;
                            line-height: 64px;
                            color: #c3c3c3;
                            margin-bottom: 30px;
                        }

                        &---create {
                            font-family: $open;
                            font-weight: normal;
                            font-size: 14px;
                            line-height: 22px;
                            color: #c3c3c3;
                        }
                    }
                }
            }

            & .main-card {

                &--inner {
                    background: transparent;
                    border: 2px dashed $lightblue;
                    text-align: center;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    @media (max-width: 991px) {
                        min-height: 200px;
                    }

                    & a {
                        width: 100%;
                        border-radius: 15px;
                    }
                }

                &--add {
                    &---plus {
                        font-size: 50px;
                        line-height: 64px;
                        color: $lightblue;
                        margin-bottom: 30px;
                    }

                    &---create {
                        font-family: $open;
                        font-weight: bold;
                        font-size: 18px;
                        line-height: 22px;
                        color: $lightblue;
                    }
                }
            }
        }
    }

    & .tables-card {
        margin-bottom: 50px;

        & a {
            text-decoration: none;
        }

        &--inner {
            height: 100%;
            display: flex;
            background-color: $white;
            border: thin solid $grey;
            border-radius: 15px;
            padding: 20px;
            gap: 20px;
            transition: background-color 0.25s linear;

            &:hover {
                background-color: $blue;
                transition: background-color 0.25s linear;

                & .tables-card--inner {
                    &---details {
                        & h3 {
                            color: $white;
                            transition: color 0.25s linear;
                        }

                        & p {
                            color: $white;
                            transition: color 0.25s linear;
                        }
                    }
                }
            }


            &---icon {
                display: flex;
                flex: 0 0 auto;
                background-color: $cyan;
                color: $lightblue;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                align-items: center;
                justify-content: center;

                & i {

                }
            }

            &---details {
                flex: auto;

                & h3 {
                    color: $darkblue;
                    font-family: $open;
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                    transition: color 0.25s linear;
                }

                & p {
                    font-size: 12px;
                    line-height: 23px;
                    color: $grey;
                    font-family: $open;
                    min-height: 45px;
                    transition: color 0.25s linear;
                }
            }
        }
    }

    & .box-card {
        margin-bottom: 50px;

        &--inner {
            background-color: $blue;
            color: $white;
            border-radius: 15px;
            padding: 25px;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-flow: column;
            justify-content: space-between;


            &---title {
                font-size: 17px;
                line-height: 25px;
                color: $lightblue;
                font-family: $open;
                font-weight: 100;
            }

            &---date-person {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 15%;

                &--img {
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                }

                &--info {
                    width: 80%;
                    font-size: 12px;
                    line-height: 25px;
                    color: $lightblue;
                    padding-left: 4px;
                    font-family: $open;
                    font-weight: 100;

                    & .date {

                    }

                    & .name {

                    }
                }
            }

            &---project {
                font-family: $open;
                font-size: 12px;
                line-height: 25px;
                font-weight: 100;
                height: 40%;

                & strong {
                    font-weight: 600;
                }
            }

            &---view {
                & a {
                    display: flex;
                    color: $white;
                    align-items: center;
                    justify-content: space-between;
                    text-decoration: none;
                    border-bottom: thin solid $white;
                    padding-bottom: 4px;
                    font-size: 21px;

                    & span {
                        font-family: $open;
                        font-size: 12px;
                        line-height: 20px;
                        font-weight: bold;
                    }

                    & i {
                        font-size: 12px;
                    }
                }
            }

        }
    }

    & .list-box {
        margin: 60px 0 30px 0;
        @media (max-width: 991px) {
            margin-top: 10px;
        }

        &--inner {
            color: $grey;
            border-radius: 15px;
            padding: 0;
            font-family: $open;

            &---title {
                font-size: 18px;
                line-height: 25px;
                margin-bottom: 25px;
            }

            &---list {

                &.columns-num--8 {
                    & li:first-child {
                        &.advisory-area {
                            & .list-box--inner---list----project {
                                flex: none;
                                width: 680px;
                            }
                        }
                        & .index {
                            width: 15px;
                            flex: none;
                            margin: 0;
                        }
                        & .list-box--inner---list----project {
                            flex: none;
                            width: 450px;
                        }
                        & .list-box--inner---list----person {
                            flex: none;
                            width: 200px!important;
                        }
                        & .list-box--inner---list----date {
                            flex: none;
                            width: 150px;
                        }
                        & .list-box--inner---list----finalized {
                            flex: none;
                            width: 100px;
                            text-align: center;
                        }
                        & .list-box--inner---list----scores {
                            flex: none;
                            width: 140px;
                        }
                        & .list-box--inner---list----total {
                            &:hover{
                                cursor: default;
                            }
                            flex: none;
                            width: 75px;
                        }
                        & .list-box--inner---list----evaluators {
                            flex: none;
                            width: 200px;
                        }
                        & .list-box--inner---list----percentage {
                            flex: none;
                            width: 180px;
                        }
                        & .list-box--inner---list----scientific_area {
                            flex: none;
                            width: 110px;

                        }
                        & .list-box--inner---list----actions {
                            flex: none;
                            width: 147px;
                            text-align: center;
                        }
                    }

                    & .proposal-list-item {
                        &.advisory-area {
                            & .list-box--inner {
                                &---list {
                                    &----project {
                                        width: 680px;
                                    }
                                }
                            }
                        }

                        & .list-box--inner {
                            &---list {

                                &----project {
                                    flex: none;
                                    width: 450px;
                                }
                                &----person {
                                    flex:none;
                                    width: 200px!important;
                                    padding-left: 0;
                                }
                                &----date {
                                    flex:none;
                                    width: 150px;
                                }
                                &----finalized {
                                    flex:none;
                                    width: 100px;
                                }
                                &----scores {
                                    flex:none;
                                    width: 140px;
                                }
                                &----evaluators {
                                    flex:none;
                                    width: 200px;
                                }
                                &----percentage {
                                    flex:none;
                                    width: 180px;
                                    padding: 0 25px;
                                }
                                &----scientific_area {
                                    flex:none;
                                    width: 110px;
                                }
                                &----total {
                                    flex:none;
                                    width: 75px;
                                    &:hover{
                                        cursor: pointer;
                                    }
                                }
                                &----actions {
                                    flex: none;
                                    width: 150px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    text-align: center;

                                        & .action-icon {
                                            width: 36px;
                                            height: 36px;
                                            border-radius: 50%;
                                            line-height: 36px;
                                            transition: background-color 0.25s linear;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            &:hover {
                                                transition: background-color 0.25s linear;
                                            }
                                            &.icon-download {
                                                background-color: #198F60;
                                                &:hover {
                                                    background-color: #00d883;
                                                }
                                            }
                                            &.icon-mail {
                                                background-color: #0b1d51!important;
                                                &:hover {
                                                    background-color: #3761EE!important;
                                                }
                                                & i {
                                                    position: relative;
                                                    left: -2px;
                                                }
                                            }
                                            &.icon-view {
                                                background-color: #7555F8;

                                                &:hover {
                                                    background-color: #b4c4f9;
                                                }
                                            }
                                            &.icon-delete {
                                                background-color: #FF3366;
                                                &:hover {
                                                    background-color: #ffadc2;
                                                }
                                            }
                                            &.icon-email {
                                                background-color: #3761EE;
                                                &:hover {
                                                    background-color: #3da2e6;
                                                }
                                            }
                                        }
                                        & i {
                                            color: #fff;
                                        }

                                }
                            }
                        }
                        & .index {
                            width: 15px;
                            flex: none;
                            margin: 0;
                        }

                    }
                }
                & ul {
                    min-width: 1150px;
                    list-style: none;
                    padding: 0;
                    margin: 0;

                    & li {
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        line-height: 15px;
                        color: $grey;
                        margin-bottom: 20px;
                        gap: 10px;


                        &:first-child {
                            /*  List Header */
                            padding: 0 35px;


                            & .list-box--inner---list {

                                font-size: 12px !important;
                                font-weight: normal !important;
                                //&----project {
                                //    font-size: 12px;
                                //    line-height: 25px;
                                //
                                //    & i.fa-sort {
                                //        margin-left: 10px;
                                //        font-size: 13px;
                                //        cursor: pointer;
                                //    }
                                //
                                //}
                                //
                                //&----person {
                                //    width: 180px;
                                //
                                //    & i.fa-sort {
                                //        margin-left: 10px;
                                //        font-size: 13px;
                                //        cursor: pointer;
                                //    }
                                //}
                                //
                                //&----percentage {
                                //    color: $darkblue;
                                //    font-weight: 500;
                                //    width: 5%;
                                //
                                //    & a {
                                //        position: relative;
                                //        z-index: 99;
                                //    }
                                //
                                //    & i.fa-sort {
                                //        margin-left: 10px;
                                //        font-size: 13px;
                                //        cursor: pointer;
                                //    }
                                //}
                                //
                                //&----date {
                                //    padding-left: 25px;
                                //    width: 10%;
                                //    font-weight: normal;
                                //
                                //    & i.fa-sort {
                                //        margin-left: 10px;
                                //        font-size: 13px;
                                //        cursor: pointer;
                                //    }
                                //}
                                //
                                //&----action {
                                //    width: auto;
                                //    font-weight: normal;
                                //}
                                //
                                //&----evaluators {
                                //    width: 17%;
                                //}
                                //
                                //&----actions {
                                //    width: 5%;
                                //
                                //}

                            }

                            & .list-box--inner---list {
                                &----scientific_area {
                                    width: 214px;
                                }
                                &----percentage {
                                    flex: 0 0 120px;
                                }
                            }
                        }

                        &:not(:first-child) {
                            background-color: #fff;
                            padding: 25px 35px;
                            border: thin solid #E8E8ED;
                            border-radius: 15px;
                            transition: border-color 0.25s linear;

                            .index {
                                font-size: 15px;
                                font-weight: 700;
                                margin-right: 12px;
                            }


                            &.assigned {
                                background-color: rgb(203 178 65 / 15%);
                                border: thin solid #cbc941;
                            }
                            &.submitted, &.selectedByAdvisory {
                                background-color: rgba(65, 203, 107, 0.15);
                                border: thin solid #41cb6b;

                            }

                            &.rejected {
                                background-color: rgb(203 178 65 / 15%);
                                border: thin solid #cbc941;
                            }
                            &.not_rejected {
                                background-color: rgba(65, 203, 107, 0.15);
                                border: thin solid #41cb6b;
                            }


                            & .list-box--inner---list----project {
                                font-size: 14px;
                                line-height: 25px;
                                font-family: $open;
                                font-weight: bold;
                                color: $darkblue;


                                &.eligible.bottom {
                                    width: 120px !important;
                                }
                            }

                            & .list-box--inner---list----date {

                                font-weight: bold;



                            }

                            &:hover {
                                border-color: #3761EE;
                                transition: border-color 0.25s linear;
                            }

                            &.acronym {
                                width: 145px;

                            }

                            & .list-box--inner---list----person {
                                width: 180px;
                            }

                            & .dropdown {
                                width: 60px;
                                text-align: center;
                            }
                        }



                        & .left {
                            width: 50%;
                        }

                        & .right {
                            width: 30%;
                            display: flex;
                            justify-content: space-between;
                            color: $blue;

                            & .progress {
                                width: 80%;
                                height: 7px;

                                &-bar {
                                    background-color: $blue;
                                }
                            }
                        }

                    }
                }


                /*  List Inner  */
                &----index {
                    flex: 0 0 60px;
                    text-align: center;
                }

                &----project {
                    flex: 1 1 0;
                    line-height: 23px;

                    //&.title {
                    //    width: 35%;
                    //}
                    //
                    //&.acronym {
                    //    width: 145px !important;
                    //}

                    &.eligible {
                        text-align: center;

                        &.bottom {
                            font-size: 10px !important;
                        }
                    }
                }

                &----person {
                    flex: 1 0.5 0;
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    &-image {
                        width: 28%;
                        height: 38px;
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;

                        &--inner {
                            width: 50px;
                            height: 50px;
                            overflow: hidden;
                            border-radius: 50%;
                            margin: 0 auto;
                        }

                        & img {
                            max-width: 50px;
                            height: auto;
                        }
                    }

                    &-name {
                        font-size: 12px;
                        line-height: 19px;
                        color: #757788;
                        width: 72%;
                    }
                }

                &----percentage {
                    flex: 0 0 150px;
                    text-align: center
                }


                &----evaluators {
                    flex: 1 0.5 180px;
                    & .names-sep {
                        width: 1px;
                        height: 10px;
                        display: inline-block;
                        background: #9C9EB2;
                        &:last-child {
                            display: none;
                        }
                    }
                }

                &----panel {
                    text-align: center;

                    &-chair {
                        position: relative;

                        & a {
                            color: #757788;
                        }

                        & .chair-details {
                            position: absolute;
                            opacity: 0;
                            z-index: 99;
                            background: #fff;
                            padding: 20px;
                            border-radius: 15px;
                            font-size: 14px;
                            right: 0;
                            box-shadow: 0 0 10px;
                            top: 16px;
                            width: 300px;
                            transition: opacity 0.25s linear;

                            &.active {
                                opacity: 1;
                                transition: opacity 0.25s linear;
                            }

                            & span {
                                display: block;
                                margin-bottom: 10px;

                                & strong {
                                    font-weight: bold;
                                }
                            }

                            & .close-bubble {
                                position: absolute;
                                right: 14px;
                                top: 7px;
                                cursor: pointer;
                            }
                        }
                    }
                }

                &----scores {
                    flex: 0 0 160px;
                    font-size: 12px;
                    line-height: 25px;
                    text-align: center;
                }
                &----total {
                    &:hover{
                        cursor: pointer;
                    }
                    flex: 0 0 140px;
                    font-size: 12px;
                    line-height: 25px;
                    text-align: center;
                }

                &----date {
                    flex: 0 0 200px;
                    font-size: 12px;
                    line-height: 25px;
                    text-align: center;

                }

                &----acronym {
                    flex: 1 0.5 100px;
                    font-size: 12px;
                    line-height: 25px;

                }

                &----actions {
                    flex: none;
                    width: 150px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    & a {
                        &.action-icon {
                            width: 36px;
                            height: 36px;
                            border-radius: 50%;
                            line-height: 36px;
                            transition: background-color 0.25s linear;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            &:hover {
                                transition: background-color 0.25s linear;
                            }
                            &.icon-download {
                                background-color: #198F60;
                                &:hover {
                                    background-color: #00d883;
                                }
                            }
                            &.icon-view {
                                background-color: #7555F8;

                                &:hover {
                                    background-color: #b4c4f9;
                                }
                            }
                            &.icon-delete {
                                background-color: #FF3366;
                                &:hover {
                                    background-color: #ffadc2;
                                }
                            }
                            &.icon-email {
                                background-color: #3761EE;
                                &:hover {
                                    background-color: #3da2e6;
                                }
                            }
                        }
                        & i {
                            color: #fff;
                        }
                    }
                }

                &----view {
                    border-radius: 50%;
                    gap: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    cursor: pointer;
                    font-size: 21px;

                    & a, .list-box--inner---list----reject {
                        text-decoration: none;
                        background-color: #41cb6b;
                        color: #fff;
                        width: 30px;
                        height: 30px;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 50%;
                        transition: background-color 0.25s linear;
                        &:hover {
                            background-color: #3761EE;
                            transition: background-color 0.25s linear;
                        }
                        & i {
                            font-size: 14px;
                        }
                    }
                    & .list-box--inner---list----reject {
                        & i {
                            margin-left: -6px;
                        }
                    }
                }

                &----status {
                    flex: 0 0 100px;
                    text-align: center;
                    .dropdown{
                        margin: auto;
                    }
                }

                &----buttons {
                    flex: 0 0 85px;

                    & a {
                        background-color: #c6ffcd;
                        width: 36px;
                        height: 36px;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 36px;
                    }
                }

                & .dropdown {
                    & .dropdown-menu {
                        width: 240px;
                        min-width: inherit;

                        & li {
                            border: none;
                            padding: 10px;
                            margin: 0;

                            & form {
                                width: 100%;

                                & input {
                                    border: none;
                                    display: block;
                                    width: 100%;
                                    padding: 0.25rem 1rem;
                                    clear: both;
                                    font-weight: 400;
                                    color: #212529;
                                    text-align: inherit;
                                    text-decoration: none;
                                    white-space: nowrap;
                                    background-color: transparent;

                                    &:hover {
                                        color: #1e2125;
                                        background-color: #e9ecef;
                                    }
                                }
                            }
                        }

                        &.select-status {
                            & li {
                                cursor: pointer;
                                transition: color 0.25s linear;

                                &:hover {
                                    color: #000;
                                    transition: color 0.25s linear;
                                }
                            }
                        }
                    }
                }
            }
        }

    }


    & .stat-box {
        color: $white;

        &.upward {
            & .stat-box--inner {
                background-color: #DCF9ED;
                color: #198F60;

                &---stats {
                    & .indicator {
                        transform: rotate(45deg);
                    }
                }
            }
        }

        &.downward {
            & .stat-box--inner {
                background-color: #FFF8D6;
                color: #B89600;

                &---stats {
                    & .indicator {
                        transform: rotate(135deg);
                    }
                }
            }
        }

        &--inner {
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 30px;

            &---title {
                font-size: 17px;
                line-height: 24px;
                font-weight: normal;
                margin-bottom: 8px;
            }

            &---stats {
                display: flex;
                justify-content: space-between;
                align-items: center;

                & .counter {
                    font-size: 40px;
                    line-height: 54px;
                    font-weight: bold;
                }

                & .details {
                    font-size: 14px;
                    line-height: 19px;
                    display: flex;
                    justify-content: space-between;
                    gap: 4px;

                    &-percentage {
                        font-weight: bold;
                    }

                    &-metric {

                    }
                }
            }

            &---faces {
                display: flex;
                justify-content: space-between;
                margin-top: 40px;

                & .user-faces {
                    & ul {
                        list-style: none;
                        margin: 0;
                        padding: 0;

                        & li {
                            width: 30px;
                            height: 30px;
                            display: inline-block;
                            border-radius: 50%;
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center;
                            position: relative;
                            left: -6px;
                            margin-right: -15px;

                            &:first-child {
                                left: 0;
                            }
                        }
                    }
                }

                & .users-count {
                    font-weight: bold;
                    font-size: 24px;
                    line-height: 32px;
                }
            }
        }
    }

    & .search-header {
        max-width: 1570px;
        margin: 0 auto;
        justify-content: space-between;

        & > .form-field {
            @media (max-width: 991px) {
                padding: 0;
            }
        }

        & .form-field {
            &.filters-btn {
                text-align: right;
            }

            & input {
                font-size: 14px;
                line-height: 18px;
                font-family: $open;
                font-weight: 500;
                padding: 16px 20px!important;
                border: thin solid #ADC2FF;
                border-radius: 7px;
                height: auto!important;
            }
        }
    }
}