/*start general*/
html {
    width: 100% !important;
    overflow: auto;
    --body-color: #f6f6f6;
    --main-color: #FFF;
    --secondary-color: #222131;
    --input-color: #FFF;
}

html[dark="true"] {
    --body-color: #16191C;
    --main-color: #222131;
    --secondary-color: #FFF;
    --input-color: #C6C6C6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    font-family: 'Tajawal', sans-serif;
}

secondary-color body {
    width: 100%;
    background-color: var(--body-color);
    padding: 0 !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #979797;
    border-radius: 25px;
}

::-webkit-scrollbar-track {
    background-color: var(--main-color);
}

input[type="text"] {
    width: 180px;
}

select {
    width: 180px;
    cursor: pointer;
}

select[class=""] {
    width: 180px;
}

.orange {
    background-color: #F76C4F;
}

.color-orange {
    color: #F76C4F !important;
    border-color: #F76C4F;
    stop-color: #F76C4F;
}

.light-orange {
    background-color: rgba(247, 108, 79, .3) !important;
}

.yellow {
    background-color: #DF9E13 !important;
}

.color-yellow {
    color: #DF9E13 !important;
    border-color: #DF9E13;
    stop-color: #DF9E13;
}

.light-yellow {
    background-color: rgba(223, 158, 19, .3);
}

.bright-yellow {
    background-color: #E2C500;
}

.color-bright-yellow {
    color: #E2C500 !important;
    border-color: #E2C500;
    stop-color: #E2C500;
}

.light-bright-yellow {
    background-color: rgba(226, 197, 0, .3);
}

.blue {
    background-color: #4F86F7 !important;
}

h3.blue,
h4.blue {
    color: #4F86F7;
    background-color: transparent;
}

.color-blue {
    color: #4F86F7 !important;
    border-color: #4F86F7;
    stop-color: #4F86F7;
}

.light-blue {
    background-color: rgba(79, 134, 247, .3);
}

.bright-blue {
    background-color: #00C4FF;
}

.color-bright-blue {
    color: #00C4FF !important;
    border-color: #00C4FF;
    stop-color: #00C4FF;
}

.light-bright-blue {
    background-color: rgba(0, 196, 255, .3);
}

.primary {
    background-color: #4F86F7;
}

.color-primary {
    color: #4F86F7 !important;
    border-color: #4F86F7;
    stop-color: #4F86F7;
}

.light-primary {
    background-color: rgba(79, 134, 247, .3);
}

.black {
    background-color: #000;
}

.color-black {
    color: #000 !important;
    border-color: #000;
    stop-color: #000;
}

.light-black {
    background-color: rgba(0, 0, 0, .3);
}

.navy {
    background-color: #2C698D !important;
    color: #fff !important;
}

.color-navy {
    color: #2C698D !important;
    border-color: #2C698D;
    stop-color: #2C698D;
}

.light-navy {
    background-color: rgba(44, 105, 141, .3);
}

.green {
    background-color: #35C724;
}

.color-green {
    color: #35C724 !important;
    border-color: #35C724;
    stop-color: #35C724;
}


.light-green {
    background-color: rgba(53, 199, 36, .3);
}

.red {
    background-color: #F74F4F;
}

.color-red {
    color: #F74F4F !important;
    border-color: #F74F4F;
    stop-color: #F74F4F;
}


.light-red {
    background-color: rgba(247, 79, 79, .3);
}

a {
    text-decoration: none;
    /*color: #000;*/
}

a:hover {
    color: #000;
}

span.notification {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-25%, -25%);
    padding: 2px 7px;
    color: #FFF;
    background-color: red;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.main-content span.badge {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-25%, -25%);
    padding: 2px 7px;
    color: #FFF;
    background-color: red;
    font-size: 12px;
    font-weight: unset;
    line-height: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

html[dir="ltr"] span.notification {
    left: unset;
    right: 0;
}

html[dir="ltr"] .main-content span.badge {
    left: unset;
    right: 0;
}

span.notification:empty {
    display: none;
}

.side-bar .badge,
.main-content .modal .heading .badge {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    padding: 2px 7px;
    color: #FFF;
    background-color: #4F86F7;
    font-size: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    line-height: unset;
}

.side-bar .badge:empty,
.modal .badge {
    display: none;
}


.icon-wrapper {
    position: relative;
    width: 60px;
    border-radius: 15px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-wrapper::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 90%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 20px 10px 50px;
}

.main-content {
    flex: 1;
    background-color: var(--body-color);
}

.main-content .content-wrapper>div {
    border-radius: 10px;
    margin-bottom: 20px;
}

.main-content .content-wrapper>.title {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    animation: go-down .5s ease-out 0s alternate none running;
    color: var(--secondary-color);
}

.main-content .content-wrapper>.title>div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-content .content-wrapper>.title h3 {
    font-weight: bold;
    font-size: 24px;
}

.main-content .content-wrapper>.title .fiscal-year {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-content .content-wrapper>.title .fiscal-year p {
    margin-bottom: 0;
}

.main-content .content-wrapper>.title .fiscal-year select {
    background-color: #F6F6F6;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    padding: 7px;
    border-radius: 5px;
    border: none;
    outline: none;
}

.main-content .content-wrapper>.title .svg-inline--fa {
    font-size: 22px;
    color: var(--secondary-color);
}

.main-content .white-title {
    background-color: var(--main-color);
}

.main-content .white-title h3 {
    display: inline-block;
}

.multi-sections {
    display: flex;
    gap: 25px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.multi-sections.chart {
    justify-content: space-between;
}

.multi-sections .widget-box {
    width: 45%;
    min-width: 280px;
}

.inputs .full-input {
    width: 100%;
}

.inputs .full-input input {
    width: 100%;
    color: #000;
    background-color: var(--input-color);
    border: 1px solid #C6C6C6;
}

.inputs .full-input textarea {
    width: 100%;
    color: #000;
    background-color: var(--input-color);
    padding: 7px;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
}


.inputs .input-container input[type="file"] {
    cursor: pointer;
    color: #707070;
}

.inputs .input-container input[type="file"]::-webkit-file-upload-button {
    color: #2C698D;
    background-color: transparent;
    border: none;
    outline: none;
    font-weight: 500;
    margin-inline-end: 75px;
}

.inputs .input-container.file button {
    margin-inline-start: 20px;
}

.widget-box {
    width: 100%;
    background-color: var(--main-color);
    border-radius: 10px;
    padding: 0 !important;
    margin-bottom: 20px;
}

.widget-header {
    background-color: var(--main-color);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #E8E8E8;
    padding: 5px 10px;
}

.widget-header .widget-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--secondary-color);
}

.widget-header h4 {
    font-size: 22px;
    font-weight: bold;
    color: var(--secondary-color);
}


.widget-header .btn {
    border: none;
}

.widget-header .btn {
    color: #FFF;
    background-color: #2C698D;
}

.widget-header .btn:nth-child(2),
.widget-header .btn-group:nth-child(2) {
    margin-inline-start: auto;
}

.widget-header :not(.btn-group)>.btn:last-of-type {
    background-color: rgba(44, 105, 141, .2);
    color: #2C698D !important;
}

html[dark="true"] .widget-header .btn {
    color: #FFF !important;
}

.widget-header .btn .svg-inline--fa {
    color: inherit;
}

.btn-group {
    border-radius: 5px;
}

.btn-group .btn {
    color: #FFF !important;
    /*background-color: #4F86F7 ;*/
    height: auto !important;
    border: none;
}

.btn-group button:not(:first-child),
.btn-group a:last-child {
    border-radius: 0 5px 5px 0 !important;
}

:root[dir="rtl"] .btn-group button:not(:first-child),
.btn-group a:last-child {
    border-radius: 5px 0 0 5px !important;
}

.btn-group a:first-child {
    border-radius: 5px 0 0 5px !important;
}


:root[dir="rtl"] .btn-group a:first-child {
    border-radius: 0 5px 5px 0 !important;
}

.btn-group a:first-child:last-child {
    border-radius: 5px !important;
}

.btn-group button:first-child {
    border-radius: 5px !important;
}

.widget-box .widget-header .btn-group a:first-child:last-child {
    border-radius: 5px !important;
    width: auto !important;
}

.widget-box .widget-header .btn-group a:first-child:last-child .icon-edit::before {
    color: #FFF !important;
}

.widget-box .widget-header .accordion-button {
    width: fit-content;
    padding: 5px;
    gap: 15px;
    background: none;
    color: var(--secondary-color);
    box-shadow: none;
    cursor: pointer;
}

table.table-bordered a {
    color: #1A5DFA;
    padding: 5px 5px;
}

.widget-body {
    background-color: var(--main-color);
    padding: 1rem 1.25rem;
}

.widget-box .shown-items {
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
}

.light-blue-button {
    background-color: rgba(79, 134, 247, .1);
    color: #4F86F7;
    padding: 5px 15px;
    border: none;
}

.btn {
    transition: .25s linear;
    color: var(--secondary-color);
    /* background-color: #178CAF ;*/
    /*color: #FFF !important;*/
    /*border: none;*/
}

.btn:hover {
    box-shadow: 0 0.5em 0.5em -0.4em rgba(0, 0, 0, .5);
    transform: translateY(-0.25em);
}

.btn.blue,
.btn-primary {
    color: #FFF !important;
}

.blue-circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-inline-end: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blue-circle .inner-circle {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/*
table td > a.btn {
    background-color: rgba(79, 134, 247, .3);
    color: #4F86F7;
}*/

.widget-box .widget-body {
    width: 100%;
}

form {
    width: 100%;
}

.inputs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.hidden-inputs {
    display: none;
}

.input-container {
    margin: 15px 0;
    position: relative;
    /*min-width: 250px;*/
}

.input-container label {
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 10px;
}

.input-container a {
    color: #4F86F7 !important;
}

.input-container>input[type=text],
.controls>input[type=text],
.input-container .icon-input>input[type=text],
.input-container select,
.input-container .dropdown-toggle {
    width: 100%;
    color: #000;
    padding: 7px;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
    background-color: var(--input-color);
    outline-color: transparent;
}

/*td input[readonly] {
    max-width: 400px;
}*/

.widget-box .widget-body {
    width: 100%;
}

.widget-body .widget-main {
    width: 100%;
}

.widget-body table:not(.table-bordered) {
    width: 100%;

}

.widget-body table:not(.table-bordered) tbody tr {
    width: 100%;

}

.widget-body table:not(.table-bordered) tbody tr td {
    padding: 2px;
}


.hidden-inputs {
    display: none;
}

.tdcell,
td>label,
.widget-body table:not(.table-bordered) tbody th {
    color: var(--secondary-color);
    padding-inline-end: 15px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
}

.tdcell {
    text-align: end !important;
}

.widget-body table:not(.table-bordered) tbody td {
    color: var(--secondary-color);
}

input,
.span3 input,
.form-inline>input,
td>input,
.control-group input,
.icon-input>input,
td>select,
.form-inline>select,
.controls select,
td>.dropdown-toggle {
    color: #000;
    margin: 2px;
    padding: 7px;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
    background-color: var(--input-color);
    outline-color: transparent;
}

td>input[type="submit"] {
    width: fit-content !important;
    padding: 7px 35px;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: unset;
    width: auto !important;
    margin: 0 15px;
}

input[ondblclick] {
    background-image: url(../imgs/apps.png);
    background-position: calc(100% - 10px) 10px;
    background-size: 20px;
    background-repeat: no-repeat;
}

:root[dir="rtl"] input[ondblclick] {
    background-position: 5px 10px;
}

/*.widget-body table:not(.table-bordered) tbody .tdcell,
.widget-body table:not(.table-bordered) tbody th {
    min-width: 110px;
    text-align: center;
}*/

textarea {
    width: 100%;
    min-width: 270px;
    height: auto !important;
    color: #000;
    background-color: var(--input-color);
    padding: 7px;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
    min-height: 40px;
}

.select2-selection {
    padding: 3px 5px;
    border: 1px solid #c6c6c6;
    border-radius: 5px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select2-selection__rendered {
    min-height: 30px;
}


.select2-selection__arrow {
    position: static;
    height: unset;
    top: unset;
    display: flex;
    justify-content: center;
    align-items: center;
}

.select2-selection__arrow b {
    position: static;
}

.select2-container {
    margin: 0 !important;
    width: 180px;
    margin: 0 2px !important;


}

.select2-container .select2-selection--single {
    height: unset;
    min-height: 40px !important;
    background-color: var(--input-color);
}

input[type="submit"] {
    background-color: #178CAF !important;
    color: #FFF !important;
    border: none;
}

.input-container .icon-input .icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.input-container .icon-input .icon a {
    color: #999999;
}

.input-container .dropdown-toggle {
    color: #999999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-height: 40px;
}

/* form .input-container .dropdown-toggle.show{
    padding: 2px 5px;
} */

.dropdown-menu {
    padding: 0;
    max-height: unset;
}


.dropdown-menu input {
    padding: 0 5px;
    width: 100%;
    color: #000;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
}

.inputs .input-container .dropdown-toggle div {
    display: inline-block;
    flex: 1;
    padding: 3px;
    margin-top: 5px;
    height: 40px;
}

form .submit {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

form .submit .employees-more {
    text-decoration: underline;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

form .submit .employees-more:hover {
    color: #000;
}

form .submit button {
    color: var(--main-color);
    padding: 5px 20px;
}


form .dual-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

form .dual-inputs>input,
form .dual-inputs .icon-input>input {
    width: 160px;
    color: #000;
    background-color: var(--input-color);
    padding: 7px;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
}

form .dual-inputs .dropdown-toggle {
    width: 160px;
    color: var(--secondary-color);
    padding: 0px;
    border: 1px solid var(--main-color);
    outline: none;
    border-radius: 5px;
}

form .dual-inputs .dropdown-toggle.show {
    padding: 2px;
}

.dual-inputs .dropdown-menu {
    width: auto;
}

.dual-inputs .dropdown-menu input {
    padding: 0 5px;
    width: 100%;
    color: #000;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
}

form .dual-inputs .dropdown-toggle div {
    display: inline-block;
    width: 130px;
    padding: 7px;
}

table.table-bordered {
    text-align: center;
    margin-top: 20px;
}

table.table-bordered th {
    font-size: 16px;
    vertical-align: middle;
}

table.table-bordered td {
    vertical-align: middle;
}

table.table-bordered td,
table.table-bordered th {
    color: var(--secondary-color);
}

table.table-bordered .thead {
    background-color: rgba(79, 134, 247, .2) !important;
}

.img-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

table td .btn-mini {
    padding: 5px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: .25s linear;
}

table td .btn-mini:hover {
    transform: scale(1.02);
}

/*table td .btn-info {
    background-color: rgba(79, 134, 247, .3);
}*/

table td .btn-info .svg-inline--fa {
    color: #259BFF;
    font-size: 18px;
}

table td .btn-danger {
    background-color: rgba(247, 79, 79, .3) !important;
}

.btn-purple {
    background-color: rgba(79, 134, 247, .3);
}

table td .btn-danger .svg-inline--fa {
    color: #E23535;
    font-size: 18px;
}

.table> :not(caption)>*>* {
    box-shadow: none;
}

.table> :not(:last-child)> :last-child>* {
    border-color: var(--body-color);
}

.form-check {
    display: inline-block;
    margin: unset;
    margin-inline-end: 1em;
    color: var(--secondary-color);
}

h3.header,
h4.header,
.tdaddress {
    color: #178CAF !important;
    background-color: var(--body-color) !important;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 24px;
}

.alert {
    display: flex;
    align-items: center;
    gap: 5px;
}

.alert-attention {
    color: var(--secondary-color);
    background-color: rgba(247, 79, 79, .3);
}

.alert-error {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.calendars-ctrl {
    background-color: #178CAF !important;
}

.calendars a:hover {
    color: #FFF;
    background-color: #F5BC1C !important;
}

/*end general*/

/*start dropdowns*/

.dropdown-toggle {
    color: var(--secondary-color);
}

.dropdown-toggle:hover {
    color: var(--secondary-color);
}

.dropdown-toggle div {
    color: var(--secondary-color);
}

.dropdown-menu {
    min-width: 250px;
    background-color: var(--main-color);
    z-index: 100;
    padding: 0;
}

.dropdown-menu .list {
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-item {
    text-align: start;
    color: var(--secondary-color);
    border-bottom: 1px solid #C7C7C7;
}

.dropdown-item:last-child {
    border: none;
}

.dropdown-menu .dropdown-title {
    text-align: start;
    padding: 0.25em 1em;
    color: #4F86F7;
    border-bottom: 1px solid #4F86F7;
    font-weight: bold;
}

.dropdown-menu .read-all {
    width: 100%;
    background-color: #4F86F7 !important;
    color: #FFF;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
}

.dropdown-menu .dropdown-more {
    padding: 10px 25px;
}

.dropdown-menu .dropdown-more .dropdown-item {
    border: none;
    text-align: center;
}

.dropdown-menu .dropdown-more .dropdown-item span {
    margin-inline-end: 20px;
}

.dropdown-menu .dropdown-item .icon {
    margin-inline-end: 10px;
}

.borderless .dropdown-item {
    border: none;
}

/*end dropdowns*/


@keyframes go-down {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes stretch {
    0% {
        transform: scale(.3);
    }

    100% {
        transform: scale(1);
    }
}



/*start-nav*/

/*start dropdowns*/
.users {
    transition: .25s linear;
    z-index: 999;
}

.users:hover {
    transform: translatey(-1px);
}

.users .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

nav .dropdown-menu::after {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--main-color);
    position: absolute;
    top: -7px;
    right: 10px;
    transform: rotate(45deg);
    border-top: 1px solid var(--body-color);
    border-left: 1px solid var(--body-color);
}

.dropdown-menu .message {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dropdown-menu .message .icon-container {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-menu .message .icon-container .svg-inline--fa {
    font-size: 22px;
}

.dropdown-menu .message .message-info {
    max-width: 200px;
}

.dropdown-menu .message .message-info .title {
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: break-word;
}

.dropdown-menu .message .message-info .time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-menu .message .message-info .time .svg-inline--fa {
    font-size: 15px;
}

.dropdown-menu .message .message-info .time .text {
    font-size: 15px;
    margin: 0;
}

.dropdown-menu .notification {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dropdown-menu .notification .icon-container {
    width: 35px;
    height: 35px;
}

.dropdown-menu .notification .icon-container .svg-inline--fa {
    font-size: 22px;
}

.dropdown-menu .notification .notification-info {
    max-width: 200px;
}

.dropdown-menu .notification .notification-info .title {
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 15px;
    overflow-wrap: break-word;
}

.dropdown-menu .notification .notification-info .user {
    font-size: 14px;
    margin-bottom: 5px;
}

.dropdown-menu .notification .notification-info .time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-menu .notification .notification-info .time .svg-inline--fa {
    font-size: 15px;
}

.dropdown-menu .notification .notification-info .time .text {
    font-size: 15px;
    margin-bottom: 0;
}

.dropdown-user .list {
    max-height: unset;
}

:root[dir="rtl"] nav .dropdown-grid::after,
:root[dir="rtl"] .dropdown-user::after {
    right: unset;
    left: 10px;
}

nav .dropdown-grid::after,
.dropdown-user::after {
    left: unset;
    right: 10px;
}

.users .dropdown-menu .dropdown-item {
    border: none;
}

.dropdown-grid.show {
    max-width: 320px;
}

.dropdown-grid.show>div {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px;
    gap: 15px;
}

.dropdown-grid.show>div>li>a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .25s linear;
    color: var(--secondary-color);
}

.dropdown-grid.show>div>li>a:hover {
    transform: scale(1.03) translateY(-2px);
}

.dropdown-grid.show div p {
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
}


/*end dropdowns*/

/*start nav*/

nav {
    background-color: var(--main-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

nav .logo img {
    max-height: 35px;
}

.wide-sidebar nav .logo img {
    max-height: 60px;
}

nav .logo img.dark-logo {
    display: none;
}

html[dark="true"] nav .logo img.dark-logo {
    display: block;
}

html[dark="true"] nav .logo img.light-logo {
    display: none;
}

.menus-wrapper {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 10px;
}

nav .options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

nav .dark-mode {
    padding: 8px;
    border-radius: 5px;
    transition: .25s linear;
    cursor: pointer;
}

nav .dark-mode:hover {
    background-color: rgb(195, 195, 195, .4);
}

nav .dark-mode .svg-inline--fa {
    font-size: 20px;
    color: var(--secondary-color);
    cursor: pointer;
}

html nav .dark-mode .fa-sun-bright {
    display: none;
}

html[dark="true"] nav .dark-mode .fa-moon {
    display: none;
}

html[dark="true"] nav .dark-mode .fa-sun-bright {
    display: block;
}

nav .menus {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    height: 100%;
}

nav .menus .dropdown-toggle,
nav .menus [data-toggle="dropdown"] {
    padding: 10px;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: .25s linear;
    border-radius: 5px;
}

nav .menus .dropdown-toggle:hover,
nav .menus [data-toggle="dropdown"]:hover {
    background-color: rgb(195, 195, 195, .4);
}

nav .menus .dropdown-toggle .svg-inline--fa,
nav .menus [data-toggle="dropdown"] .svg-inline--fa {
    font-size: 18px;
    color: var(--secondary-color);
}

nav .lang a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

nav .lang .svg-inline--fa {
    color: var(--secondary-color);
}

nav .lang .text {
    color: var(--secondary-color);
}

:root[dir="rtl"] .ar-lang {
    display: none;
}

:root[dir="ltr"] .en-lang {
    display: none;
}

nav .dropdown-tasks .progress {
    background-color: #C3C3C3;
    width: 150px;
    height: 10px;
    margin: 10px 0;
    border-radius: 20px;
}

nav .search {
    border-radius: 10px;
    background-color: var(--body-color);
    padding: 2px 10px;
}

nav .search .search-box {
    padding-left: 5px;
    transition: .25s linear;
}

nav .search .search-box {
    transform: scale(1.01);
}

nav .search input {
    width: 400px;
    padding: 5px;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--secondary-color);
}

nav .search .fa-magnifying-glass {
    color: #707070;
    font-size: 18px;
    cursor: pointer;
}

nav .search .dropdown-search {
    display: none;
}

nav .dropdown-menu {
    position: relative;
    z-index: 999;
}

nav .search .dropdown-search-box {
    display: flex;
    align-items: center;
}

nav .search .dropdown-search .dropdown-menu .fa-magnifying-glass {
    padding-left: 5px;
}

/*end nav*/

/*start sidebar*/

.side-bar {
    background-color: var(--main-color);
}

.side-bar .menu-toggle {
    padding: 10px 20px;
    width: fit-content;
    text-align: center;
    cursor: pointer;
    display: none;
}

.side-bar .menu-toggle .fa-bars,
.side-bar .menu-toggle .fa-xmark {
    font-size: 32px;
    color: #707070;
    transition: .3s linear;
}

.side-bar .menu-toggle:hover .fa-bars,
.side-bar .menu-toggle:hover .fa-xmark {
    transform: scale(1.1);
}

.side-bar .nav-pills {
    min-height: calc(100vh - 60px);
}

.side-bar .nav-pills .nav-item {
    min-width: 5rem;
}

.side-bar .nav-pills .nav-item .nav-link {
    width: 100%;
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
}

.side-bar .nav-pills .nav-item .nav-link .svg-inline--fa {
    font-size: 24px;
    color: #707070;
}

.side-bar .nav-pills .nav-item .nav-link.show,
.side-bar .nav-pills .nav-item .nav-link:hover {
    background-color: var(--body-color);
}

.side-bar .nav-pills .nav-item .nav-link.show .menu-text,
.side-bar .nav-pills .nav-item .nav-link:hover .menu-text {
    color: #4F86F7;
}

.side-bar .nav-pills .nav-item .nav-link.show .svg-inline--fa,
.side-bar .nav-pills .nav-item .nav-link:hover .svg-inline--fa {
    color: #4F86F7;
}

.side-bar .nav-pills .nav-item .nav-link.show::before,
.side-bar .nav-pills .nav-item .nav-link:hover::before {
    content: '';
    background-color: #4F86F7;
    width: 5px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

html[dir="rtl"] .side-bar .nav-pills .nav-item .nav-link.show::before,
html[dir="rtl"] .side-bar .nav-pills .nav-item .nav-link:hover::before {
    left: unset;
    right: 0;
}

/* .side-bar .nav-pills .nav-item .nav-link{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
} */

.collapse-sidebar .side-bar .nav-pills .nav-item:hover .dropdown-menu {
    display: block;
    position: absolute;
    inset: 0px 0px auto auto;
    margin: 0px;
    transform: translate(-80px, 0px);
}

.side-bar .nav-pills .nav-item .nav-link span.menu-text {
    display: none;
}

.wide-sidebar .side-bar .nav-pills .nav-item .nav-link {
    justify-content: flex-start;
}

.wide-sidebar .side-bar .nav-pills .nav-item .nav-link span.menu-text {
    display: inline-block;
    margin-inline-start: 10px;
    font-size: 20px;
    color: #707070;
}

.side-bar .wide-icon .fa-angle-right {
    color: #707070;
    cursor: pointer;
}

:root[dir="rtl"] .side-bar .wide-icon .fa-angle-right {
    transform: rotate(180deg);
}

/*end sidebar*/


/*end-nav*/


/*start-home*/

.items {
    display: flex;
    justify-content: space-evenly;
    row-gap: 50px;
    column-gap: 25px;
    flex-wrap: wrap;
    padding: 0;
}

.item {
    width: 310px;
    height: 100%;
    padding: 30px 25px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: .25s linear;
    animation: stretch .5s ease-out 0s alternate none running;
}

.item:hover {
    transform: scale(1.02);
}

.item h5 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.item p {
    color: var(--secondary-color);
    margin-bottom: 0;
}

.item .icon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 55px;
    transform: translate(-25%, -50%);
}

html[dir="ltr"] .item .icon-wrapper {
    right: unset;
    left: 0;
    transform: translate(25%, -50%);
}

.icon-wrapper .svg-inline--fa {
    color: #FFF;
}

.item .icon-wrapper .svg-inline--fa {
    font-size: 30px;
}

/*end-home*/



/*start-manage*/

.manage .manage-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.manage .manage-card {
    width: 400px;
    background-color: var(--main-color);
    display: flex;
    padding: 20px;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px;
    transition: .25s linear;
    animation: stretch .5s ease-out 0s alternate none running;
}

.manage.tasks .manage-card,
.manage.charts .manage-card {
    width: 280px;
}

.manage .manage-card:hover {
    transform: scale(1.01);
}

.manage .manage-card.color-orange:hover {
    background-color: rgba(247, 108, 79, .1);
}

.manage .manage-card.color-blue:hover {
    background-color: rgba(79, 134, 247, .1);
}

.manage .manage-card.color-primary:hover {
    background-color: rgba(79, 134, 247, .1);
}

.manage .manage-card.color-green:hover {
    background-color: rgba(53, 199, 36, .1);
}

.manage .manage-card.color-navy:hover {
    background-color: rgba(44, 105, 141, .3);
}

.manage .manage-card.color-yellow:hover {
    background-color: rgba(223, 158, 19, .3);
}

.manage .manage-card .icon-wrapper {
    width: 55px;
    height: 55px;
}


.manage .manage-card .icon-wrapper .svg-inline--fa {
    font-size: 30px;
}

.manage .manage-card p {
    text-align: center;
    margin: 0;
}

.manage .manage-card .projects-num .num {
    font-family: 'Londrina Outline', cursive;
    font-size: 60px;
    font-weight: bold;
    line-height: .9em;
}

.manage .manage-card .projects-num .num2 {
    font-family: 'Londrina Outline', cursive;
    font-size: 60px;
    font-weight: bold;
    line-height: .9em;
}

.manage .manage-card .projects-num .disc {
    font-size: 24px;
    font-weight: bold;
    color: var(--secondary-color);
}

.manage .manage-card button {
    transition: .3s linear;
    font-weight: bold;
}

.manage .manage-card button:hover {
    color: inherit;
    transform: scale(1.02);
}

.panel {
    background-color: var(--main-color);
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.panel .panel-heading .row-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.panel .span3 {
    background-color: #4F86F7;
    position: relative;
    width: 120px !important;
    height: 55px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel .span3::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 90%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 20px 10px 50px;
}

.panel .span3 .icon {
    width: fit-content;
    font-size: 30px;
}

.panel .span3 .icon::before {
    color: #FFF;
}

.panel .huge {
    font-size: 40px;
    font-weight: bold;
    color: #4F86F7;
}

.panel .span9 div:last-child {
    font-weight: bold;
    color: #F74F4F;
}


.manage .widget-box .item {
    display: none;
    min-width: 250px;
    padding: 10px;
    border-radius: 10px;
    transition: .25s linear;
}

.manage .widget-box .item:first-child,
.manage .widget-box .item:nth-child(2),
.manage .widget-box .item:nth-child(3),
.manage .widget-box .item:nth-child(4),
.manage .widget-box .item.shown {
    display: block;
}

.manage .widget-box .item a {
    display: flex;
    align-items: center;
    gap: 15px;
}

.manage .widget-box .item:hover {
    transform: scale(1.01);
}

.manage .widget-box .item .item-content {
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 500;
    text-align: start;
}


.manage .widget-box .item .item-letter {
    width: 40px;
    height: 35px;
    padding-bottom: 5px;
    color: var(--main-color);
    border-radius: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

/*end-manage*/


/*start-self-service*/

.self-service .widget-box::before {
    content: '';
    height: 30px;
    width: 5px;
    background-color: #238CAF;
    position: absolute;
    left: 0;
    top: 15px;
    border-radius: 5px;
    transform: translateX(30%);
}

:root[dir="rtl"] .self-service .widget-box::before {
    left: unset;
    right: 0;
}

.self-service .multi-sections .widget-box {
    flex: 1;
}

/* 
.self-service .widget-box .title{
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #C7C7C7;
    display: flex;
    justify-content: space-between;
    align-items: center;
} */

.self-service .widget-box .title .buttons {
    display: flex;
    align-items: center;
}

.self-service .widget-box .title span {
    font-size: 18px;
    font-weight: bold;
}

.self-service .table-container {
    width: 100%;
    padding: 20px;
}

.self-service table.unbordered-table {
    min-width: 500px;
    text-align: center;
}

.self-service table.unbordered-table th {
    padding: 15px;
}

.self-service table.unbordered-table tbody th {
    color: #1A5DFA;
    font-weight: normal;
}

.self-service table.unbordered-table td {
    padding: 15px;
}

.self-service table.table-bordered {
    text-align: center;
    font-weight: normal;
}

.self-service table.table-bordered th {
    font-weight: normal;
}

table.table-bordered td,
table.table-bordered th {
    color: var(--secondary-color);
}

.self-service table.table-bordered thead tr {
    background-color: rgba(79, 134, 247, .2);
}

.self-service table.table-bordered thead th {
    font-size: 20px;
}

.self-service .table-bordered tr th:first-child,
.self-service table.table-bordered tr td:first-child {
    color: var(--secondary-color);
}

.self-service .widget-box .title button.blue svg {
    margin-inline-end: 15px;
}

.self-service .container-fluid {
    background-color: var(--body-color);
}

.self-service .container-fluid>div {
    margin-bottom: 30px;
}

.self-service .self-service-cards {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 30px;
}

.self-service .self-service-cards a {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

.self-service .self-service-cards.statistics {
    justify-content: space-between;
}

.self-service .self-service-card {
    display: flex;
    gap: 10px;
    justify-content: space-evenly;
    align-items: center;
    padding: 25px 15px;
    background-color: var(--main-color);
    border-radius: 15px;
    width: 100%;
    transition: .25s linear;
    animation: stretch .5s ease-out 0s alternate none running;
}

.self-service .self-service-cards.statistics .self-service-card {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.self-service .self-service-card:hover {
    transform: scale(1.01);
}

.self-service .self-service-card .icon .svg-inline--fa {
    font-size: 64px;
}

.self-service .self-service-card .devider {
    width: 1.5px;
    height: 100px;
}

.self-service .self-service-card .num-container {
    color: var(--secondary-color);
}

.self-service .self-service-card .num-container .num {
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}

.self-service .self-service-card .arrow-container {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-50%);
    border-radius: 5px;
}

.self-service .self-service-card .arrow-container .svg-inline--fa {
    color: #FFF;
}

.self-service .self-service-notifications .alerts {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.self-service .self-service-notifications .svg-inline--fa {
    font-size: 22px;
}

.self-service .self-service-notifications .alert {
    background-color: rgba(223, 158, 19, .12);
    padding: 10px;
    display: flex;
    gap: 15px;
    border: none;
    border-radius: 10px;
}

.self-service .self-service-notifications .alert button {
    background-color: transparent;
    border: none;
}

.self-service .user-data {
    flex: 1;
    height: fit-content;
}

.self-service .user-data .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto 25px;
}

.self-service .user-data .img-container .img {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 5px solid var(--main-color);
    border-radius: 50%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    overflow: hidden;
    margin-bottom: 15px;
}

.self-service .user-data .img-container .img img {
    width: 100%;
}

.self-service .user-data .img-container .user-name {
    font-size: 22px;
    font-weight: bold;
}

.self-service .user-data .info {
    padding: 5px 15px;
    width: 100%;
}

.self-service .user-data .info .icon {
    margin-inline-end: 10px;
}

.self-service .user-data .info .icon .svg-inline--fa {
    font-size: 18px;
    color: #238CAF;
}

.self-service .user-data .info .text {
    color: var(--secondary-color);
}

.self-service .user-data>button {
    margin: 25px 15px;
}

.benefits {
    width: 100%;
    min-width: 270px;
}

.benefit {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #C7C7C7;
}

.benefit:last-child {
    border-color: transparent;
}

.benefit .text {
    width: fit-content;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-color);
}

.benefit .num {
    color: #1A5DFA;
    background-color: rgba(79, 134, 247, .1);
    padding: 10px;
    font-weight: bold;
    border-radius: 5px;
}

.self-service .attendance-table .title button.blue {
    margin-inline-end: 20px;
}

.self-service .attendance-table table.table-bordered th .th-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.self-service .attendance-table table.table-bordered thead tr {
    background-color: rgba(79, 134, 247, .2);
}

.self-service .attendance-table table.table-bordered tr th:first-child {
    color: var(--secondary-color);
}

.self-service .attendance-table table tbody td:nth-child(2) {
    color: #35C724;
}

.self-service .attendance-table table tbody td:last-child {
    color: #F74F4F;
}

.task-details {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.task-details .task-title {
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: normal;
}

.self-service .orders {
    display: none;
}

.self-service b>div {
    background-color: #FFF;
}

.self-service .progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.self-service .progress-container .percentgae {
    color: var(--secondary-color);
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
}

.self-service .progress {
    width: 250px;
    justify-content: left;
    border-radius: 15px;
}

.self-service .progress .progress-bar {
    border-radius: 15px;
}

/*circular progress bar*/

.self-service .reviews .percent {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--main-color);
    z-index: 1000;
}

.self-service .reviews .percent .number {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.self-service .reviews .percent .number h2 {
    font-weight: 700;
    font-size: 20px;
    transition: 0.5s;
}

.self-service .reviews .percent .number h2 span {
    font-size: 24px;
    color: var(--secondary-color);
    transition: 0.5s;
}


.self-service .reviews .percent svg {
    position: relative;
    width: 82px;
    height: 82px;
    z-index: 1000;
    transform: rotate(-90deg);
}

.self-service .reviews .percent svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #DEDFDF;
    stroke-width: 5;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}

.self-service .reviews .percent svg circle:nth-child(2) {
    stroke-width: 8;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    stroke-dashoffset: calc(440 - (220 * 74) / 100);
    stroke: #1E85F1;
}

/*circular progress bar*/

.self-service .reviews .rating {
    padding: 20px;
    display: flex;
    gap: 20px;
    color: var(--secondary-color);
}

.self-service .reviews .rating .text p {
    font-size: 24px;
}

.self-service .reviews table .mark {
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    width: fit-content;
}

.self-service .reviews table tbody td:nth-child(2) {
    display: flex;
    justify-content: center;
}

.self-service .menu div {
    background-color: #FFF;
    z-index: 999;
}

.self-service .table-container {
    overflow-x: auto;
}

.self-service .salary,
.self-service .salary-details {
    flex: 1;
    width: auto;
    min-width: 270px;
}

.self-service .salary-details .table-container {
    overflow-x: visible;
}

:root[dir="ltr"] .self-service .salary-details .menu>div {
    transform: translateX(-180%)
}

:root[dir="rtl"] .self-service .salary-details .menu>div {
    transform: translateX(50%);
}

:root[dir="ltr"] .self-service .loans .menu>div {
    transform: translateX(-100%)
}

:root[dir="rtl"] .self-service .loans .menu>div {
    transform: translateX(30%);
}

.self-service .salary .benefits .benefit {
    width: 305px;
}

.self-service .salary .benefits .benefit .text {
    font-size: 14px;
}


.self-service .hidden {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    overflow: auto;
}

.self-service .hidden .benefit {
    width: 350px;
    padding: 20px 40px;
}

.self-service .hidden .benefit:last-child {
    border-color: #C7C7C7;
}

.self-service .hidden .benefit .color-blue {
    background-color: rgba(79, 134, 247, .1);
    padding: 5px;
    border-radius: 5px;
}

.self-service .shown {
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}


.self-service .hide {
    display: none;
}

.self-service .hidden .svg-inline--fa {
    color: #707070;
    font-size: 30px;
}

.self-service .salary-details .fa-print {
    font-size: inherit;
    color: inherit;
}

.self-service .salary-details .title button.blue {
    margin-inline-end: 20px;
}

.self-service .salary-details table .print-button {
    background-color: rgba(223, 158, 19, .12);
    color: #DF9E13;
}

.self-service .salary-details table thead th:first-child {
    color: var(--secondary-color);
}

.self-service .salary-details table tbody th:first-child {
    color: var(--secondary-color);
    font-weight: bold;
}

.self-service .salary-details table tbody td:nth-child(2) {
    font-weight: bold;
}

.self-service .salary-details table tbody td:nth-child(3) {
    color: #1A5DFA;
}

.self-service .team {
    flex: 1;
    min-width: 270px;
}

.self-service .team .teammates {
    width: 100%;
    padding: 15px;
    max-height: 525px;
    overflow-y: auto;
}

.self-service .team .teammate {
    padding: 10px;
    border: 1px solid #238CAF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    margin: 10px;
}

.self-service .team .teammate .teammate-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.self-service .team .teammate .teammate-info .teammate-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.self-service .team .teammate .teammate-info .teammate-img img {
    width: 100%;
}

.self-service .team .teammate .teammate-info .name-container p {
    margin: 0;
}

.self-service .stocks {
    flex: 1;
}

.self-service .files {
    flex: 1;
    min-width: 270px;
}

.self-service .submissions {
    flex: 1;
    min-width: 270px;
}

.self-service .submissions .content {
    height: 200px;
}

.self-service .prepare {
    min-width: 270px;
    width: auto;
    flex-direction: 1;
}

.self-service .prepare .widget-body {
    flex-direction: column;
}

.self-service .prepare .content {
    width: fit-content;
    padding: 20px;
    margin: 0px auto;
}

.self-service .prepare .details {
    border: 1px solid #238CAF;
    width: fit-content;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.self-service .prepare .enter-exit {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.self-service .prepare .enter-exit>div {
    color: var(--secondary-color);
}

.self-service .prepare .enter-exit p {
    margin-bottom: .5rem;
}

.self-service .prepare .enter-exit input[type="submit"] {
    width: 100%;
    margin: 10px 0;
    font-weight: bold;
}

.self-service .prepare .enter-exit .enter {
    background-color: rgba(53, 199, 36, .1);
    color: #35C724;
}

.self-service .prepare .enter-exit .exit {
    background-color: rgba(247, 79, 79, .1);
    color: #F74F4F;
}

.self-service .prepare .location {
    display: flex;
    gap: 10px;
}

.self-service .prepare .location span {
    color: var(--secondary-color);
}

.self-service .prepare .location .location-title {
    font-weight: bold;
}

.self-service .prepare .content>.btn {
    width: 100%;
    padding: 5px;
    background-color: #EC0E06;
    color: #FFF;
    border-radius: 10px;
}

/*media query*/

@media all and (max-width: 900px) {

    .self-service-notifications .alerts {
        padding: 15px;
    }

    .self-service-notifications .alert {
        font-size: 14px;
    }

    table.unbordered-table th {
        font-size: 12px;
        padding: 10px;
    }

    table.unbordered-table td {
        font-size: 12px;
        padding: 10px;
    }

    table.unbordered-table td button {
        font-size: 12px;
        padding: 5px 10px;
    }

    .aler.unbordered-tablet {
        font-size: 12px;
    }

    .benefit .progress {
        width: 200px;
    }
}

@media all and (max-width: 650px) {

    html {
        width: fit-content;
    }

    .widget-box .widget-body {
        padding: 1rem .25rem;
    }

    .benefit .progress {
        width: 150px;
    }

    .self-service .team .teammate .teammate-info .name-container h5 {
        font-size: 16px;
    }

    .self-service .team .teammate button {
        font-size: 12px;
    }
}

/*end-self-service*/


/*start-login*/

body {
    background-color: var(--main-color);
}

.login .logo {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 150px;
    z-index: 999;
}

.login .logo img {
    width: 100%;
}

.login {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.login .carousel-side {
    height: 100vh;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
}

.login .carousel-container {
    position: relative;
    animation: stretch .5s ease-out 0s alternate none running;
}


.login .owl-carousel {
    width: 600px;
}

.login .owl-carousel .item {
    width: 100%;
}

.login .owl-carousel .item img {
    display: block;
    width: 100%;
}

.login .prev {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.login .next {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.login .form-side {
    background-color: #2C698D;
    padding: 25px 75px 10px;
}

.login .form-side .title h3 {
    color: #FFF;
    text-align: center;
    font-weight: normal;
    margin-bottom: 25px;
    animation: go-down .5s ease-out 0s alternate none running;
}

.login .form-side h5 {
    color: #FFF;
    font-weight: bold;
    text-align: center;
}

.login .form-side .inputs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login .form-side .input-container {
    margin: 0;
    position: relative;
    width: 100%;
    color: #FFF;
}

.login .form-side .submit-container {
    text-align: center;
}


.login .form-side .submit-container input {
    margin-top: 10px;
}

.login .form-side .submit-container .form-group label {
    font-size: 16px;
}

.login .form-side .submit-container .form-group .controls>div {
    margin: auto;
}

.login .form-side .input-container label {
    color: #FFF;
    display: block;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 10px;
}

.login .form-side .input-container input {
    width: 100%;
    padding: 7px;
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: #FFF;
}

.login .form-side .input-container select {
    background-color: #FFF;
}

.login .form-side .input-container input[type="submit"] {
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #DF9E13 !important;
}

select {
    background-position: left;

}

.login .form-side .input-container .icon {
    position: absolute;
    bottom: -5px;
    transform: translateY(-50%);
    right: 15px;
    cursor: pointer;
    color: #707070;
}

.login .form-side .input-container .dropdown-toggle {
    background-color: #FFF;
    min-width: unset;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: #605858;
    box-sizing: border-box;
    justify-content: space-between;
}

.login .form-side .input-container .dropdown-toggle::after {
    margin-left: 3em;
}

.login .form-side .input-container .dropdown-menu {
    max-height: 150px;
}

.login .form-side .unauthorized {
    padding: 0 10px;
    border-radius: 10px;
    background-color: rgba(256, 100, 50, .5);
}

.login .remember {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.login .remember .form-check input {
    background-color: transparent;
    border: 2px solid #FFF;
}

.login .remember .form-check label {
    color: #FFF;
}

.login .remember a {
    color: #FFF;
}

.login .form-side .content {
    color: #FFF;
    font-size: 12px;
    text-align: center;
}

.login .form-side .hint {
    color: #FFF;
    text-align: center;
}

.login .form-side hr {
    width: 100%;
    background-color: #FFF;
    height: 1px;
    margin: 0;
    opacity: 1;
}

@media all and (max-width: 1200px) {
    .login .owl-carousel {
        width: 400px;
    }
}

@media all and (max-width: 920px) {

    .login .logo {
        width: 50px;
        top: 15px;
        left: 15px;
        padding: 5px;
        background-color: #FFF;
        border-radius: 5px;
    }

    .login .form-side {
        width: 100%;
        order: 0;
        padding: 20px;
    }

    .login .carousel-side {
        display: none;
    }
}

/*end-login*/

/*start-forget*/

.forget .carousel-side {
    flex: 3;
}

.forget .carousel-side .carousel-container {
    width: 65%;
}

.forget .carousel-side .carousel-container img {
    width: 100%;
}


.forget .form-side {
    padding: 50px 50px 10px;
    flex: 1;
}

.forget .form-side .inputs {
    gap: 0;
}

.forget .form-side .inputs span {
    margin-right: auto;
}

.forget .form-side p {
    color: #FFF;
    font-weight: 600;
    text-align: center;
}

.forget .form-side .input-container label {
    font-size: 16px;
    font-weight: bold;
}

.forget .form-side #PanelCaptcha1 {
    width: 100%;
    margin-bottom: 10px;
}

.forget .form-side #PanelCaptcha1 label {
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.forget .form-side #PanelCaptcha1 .controls {
    width: 100%;
    background-color: #FFF;
    padding: 10px;
    border-radius: 10px;
}

.forget .form-side .titlelogin {
    text-align: right;
    color: #2C698D;
    font-weight: 500;
    margin-bottom: 10px;
}

.forget .form-side #PanelCaptcha1 .controls input {
    border: 1px solid #2C698D;
}

.forget .form-side #PanelCaptcha1 .controls>div:first-child {
    margin: 0 auto;
}

.forget .form-side .alert {
    width: 100%;
}

.forget .form-side #ValidationSummary1 {
    width: 100%;
    background-color: #FFF;
    border-radius: 5px;
    margin-top: 10px;
}

/*end-forget*/


/*start-employees*/

.employees .widget-box::before {
    height: 40px;
    top: 10px;
}

.employees .widget-box .widget-header .widget-title {
    font-size: 22px;
}

.employees .widget-box .widget-header .widget-title .num {
    color: #707070;
    font-weight: normal;
}

.widget-box .widget-header .buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    flex-wrap: wrap;
}

.employees .btn {
    color: var(--secondary-color);
}

.employees .btn.blue {
    color: #FFF;
}

.employees .btn.yellow {
    color: #FFF;
}

.employees .btn.navy {
    font-size: 16px;
    padding: 5px 15px;
    color: #FFF;
}

.employees .btn .svg-inline--fa {
    margin-inline-start: 10px;
    font-size: 18px;
}

.employees .btn.light-navy {
    font-size: 16px;
    padding: 5px 15px;
}

.employees .table-container {
    overflow: auto;
}

.employees div.show {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.table-show {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.table-show .drop-down {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.table-show .dropdown-num {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.table-show .drop-down p {
    margin: 0;
}

.table-show .drop-down .dropdown-menu {
    min-width: unset;
}

.table-show .control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.table-show .control span {
    cursor: pointer;
}

.table-show .control .prev {
    color: #999999;
    cursor: pointer;
}

.table-show .control .next {
    color: var(--secondary-color);
    cursor: pointer;
}

.table-show .control .step {
    padding: 5px 10px;
    border-radius: 5px;
    color: var(--secondary-color);
}

.table-show .control .step.active {
    color: var(--main-color);
    background-color: #259BFF;
}

/*end-employees*/


/*start-stepper*/

.stepper .steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    padding: 25px;
    background-color: var(--main-color);
    border-radius: 10px;
    animation: stretch .7s ease-out 0s alternate none running;
}

.stepper .step-button {
    color: #999999;
    background-color: var(--main-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #999999;
    transition: .3s;
}

.stepper .step-button[aria-expanded="true"],
.stepper .step-button:hover {
    width: 60px;
    height: 60px;
    background-color: #0381ff;
    color: #fff;
}

.stepper .done {
    background-color: #0381ff;
    color: #fff;
}

.stepper .step-item {
    z-index: 10;
    text-align: center;
}

.stepper .step-title {
    color: #999999;
    padding-top: 15px;
}

.stepper #progress {
    -webkit-appearance: none;
    position: absolute;
    right: 90px;
    left: 80px;
    top: 55px;
    width: auto;
    z-index: 5;
    height: 0.1em;
    margin-bottom: 35px;
}

/* to customize progress bar */
.stepper #progress::-webkit-progress-value {
    background-color: #0381ff;
    transition: .5s ease;
}

.stepper #progress::-webkit-progress-bar {
    background-color: #999999;
}

.stepper .widget-box {
    background-color: transparent;
}

.stepper .widget-header {
    background-color: var(--main-color);
}

.stepper .widget-collapse {
    background-color: var(--main-color);
}

.stepper .card {
    background-color: transparent;
    border: none;
    animation: stretch .8s ease-out 0s alternate none running;
}

.stepper .card .widget-box {
    padding: 10px;
    border-radius: 10px;
}

.stepper .card .widget-header {
    width: 100%;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E8E8E8;
}

.stepper .card .widget-header .widget-title {
    font-size: 22px;
    font-weight: bold;
}

.stepper .card .widget-header .accordion-button {
    width: fit-content;
}

.stepper .card .collapse>div {
    width: 100%;
}

.stepper .buttons {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.stepper .prev {
    color: #259BFF;
    background-color: transparent;
    padding: 5px 10px;
    border: none;
    font-size: 16px;
}

.stepper .next {
    color: var(--secondary-color);
    background-color: #259BFF;
    padding: 5px 10px;
    border: none;
}

.stepper .numbering .text {
    margin-inline-end: 10px;
    color: var(--secondary-color);
}

.stepper form input[type='date']::webkit-datetime-edit {
    color: transparent;
}

.stepper #collapseFour .inputs {
    justify-content: center;
}

.stepper p.note {
    margin-top: 20px;
    color: #F76C4F;
    font-size: 18px;
}

.stepper #collapseFour .buttons {
    display: flex;
    justify-content: start;
}

/*end-stepper*/


/*start-new-project*/

.multi-forms {
    background-color: var(--main-color);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 50px;
}

.multi-forms .heading {
    display: flex;
    flex-wrap: wrap;
}

.multi-forms .heading .form-title {
    padding: 10px 15px;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #707070;
    cursor: pointer;
}

.new-project .multi-forms .heading .form-title {
    color: #707070;
}

.multi-forms .heading .form-title.active {
    color: #259BFF;
    border-bottom: 1px solid #259BFF;
}

.new-project .forms {
    padding: 20px;
    min-height: 300px;
}

.forms>div:not(:first-child) {
    display: none;
}

.new-project .forms>div:not(:first-child) form {
    max-width: 750px;
}

.new-project .forms>div .form-title {
    color: #259BFF;
    font-size: 14px;
    font-weight: bold;
}

.new-project .check-container {
    display: flex;
    gap: 20px;
    padding: 20px 0;
}

.new-project .inputs .buttons {
    width: 100%;
    display: flex;
    gap: 20px;
    padding-top: 25px;
}

.new-project .inputs .buttons .btn {
    padding: 2px 20px;
    font-weight: bold;
}

.new-project .forms>div.team form {
    max-width: 350px;
}

.new-project form .dual-inputs {
    width: 330px;
}

.new-project form .input-container .dual-inputs {
    min-width: 165px;
    width: 165px;
}

.new-project form .input-container .dual-inputs>input,
.new-project form .input-container .dual-inputs .icon-input>input {
    width: 160px;
}

.new-project form .input-container .dual-inputs .dropdown-toggle {
    width: 200px;
}

.new-project form .input-container .dual-inputs .dropdown-toggle div {
    width: 120px;
}

.new-project .employee-info {
    padding: 25px;
    background-color: var(--main-color);
    border-radius: 15px;
}

.new-project .employee-info form {
    max-width: 700px;
}

.new-project .employee-info .inputs {
    justify-content: flex-start;
    gap: 40px;
}

.new-project .employee-info .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.new-project .employee-info .buttons button {
    padding: 2px 25px;
}

.new-project .employee-info .buttons .print {
    display: flex;
    gap: 20px;
}

.new-project .employee-info .buttons .print .dropdown-toggle {
    color: #707070;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 2px 15px;
    border: 1px solid #707070;
    border-radius: 5px;
}

.new-project .employee-info .buttons .print .print-btn {
    color: #DF9E13;
    background-color: rgba(223, 158, 19, .1);
}

/*end-new-project*/


/*start-charts*/

.charts .input-container button.yellow {
    color: var(--secondary-color);
    padding: 5px 20px;
}

.charts .input-container input[type="date"] {
    color: #999999;
}

.charts .row-fluid {
    margin: 20px 0;
}

.charts .chart-wrapper {
    width: 45%;
    background-color: var(--main-color);
    min-width: 270px;
}

.charts .chart-wrapper .chart {
    height: 100%;
}

.charts .chart-wrapper .chart-topic {
    width: fit-content;
    min-width: 120px;
    padding: 5px 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px;
    color: var(--secondary-color);
}

.charts .chart-wrapper .chart-topic .circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.charts .chart-wrapper .widget-body {
    flex-direction: column;
    align-items: flex-start;
}

.charts .apexcharts-legend-series {
    padding: 5px 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
}

/*end-charts*/


/*start-policies*/

.policies .widget-box .widget-body {
    gap: 20px 40px;
}

.policies .widget-box .item {
    width: 350px;
    background-color: rgba(86, 100, 252, .2);
}

.policies .widget-box .item .svg-inline--fa {
    color: #5664FC;
    font-size: 30px;
}


/*end-policies*/


/*start-bill*/

.bill .table-container {
    overflow-x: auto;
}

.bill .categories form .inputs {
    justify-content: start;
    gap: 5px 25px;
}

.bill .categories form .input-container {
    min-width: unset;
}

.bill .categories form .desc>input {
    width: 300px;
}

.bill .categories form .input-container .dropdown-toggle>div {
    width: 150px;
}

.bill .categories form .btn-container {
    display: flex;
    align-items: flex-end;
    padding-bottom: 15px;
}

.bill .multi-forms form .table-container {
    padding: 20px 0;
}

.bill .multi-forms form table th {
    font-size: 16px;
    font-weight: 500;
}

.bill .multi-forms form table th,
.bill .multi-forms form table td {
    padding: 15px;
    max-width: 150px;
    text-align: center;
    vertical-align: middle;
}

.bill .multi-forms table tbody th {
    color: #4F86F7;
}

.bill .multi-forms form table .total {
    background-color: rgba(223, 158, 19, .2);
}

.bill .options form {
    width: 90%;
}

.bill .options .form-check {
    margin: auto 0;
}

.bill .options .payment-data {
    color: #259BFF;
    display: block;
    margin-bottom: 20px;
}

.bill .options button {
    background-color: #259BFF;
    padding: 2px 25px;
}

.bill .attachments .inputs {
    justify-content: flex-start;
    gap: 50px;
}

.bill .widget-box .widget-header .buttons .dropdown-toggle {
    background-color: #4F86F7;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 2px 15px;
    border-radius: 5px;
}

/*end-bill*/


/*start-currency*/

.currency {
    background-color: transparent;
    padding: 50px;
}

.currency .container-fluid {
    padding: 25px 75px;
}

.currency .inputs {
    gap: 10;
}

.currency .check-container {
    width: 100%;
}

.currency .check-container tr,
.currency .check-container td {
    display: flex;
    justify-content: center;
    align-items: center;
}

.currency .check-container tr {
    gap: 25px;
}

.currency .check-container td {
    gap: 10px;
}

.currency .input-container {
    flex: 1;
    max-width: 650px;
    margin: 0;
}

.currency .btn-container {
    width: 45%;
    margin-top: auto;
}

.currency .btn-container button {
    padding: 5px 50px;
}

.currency .table-container {
    padding: 10px 0;
    width: 100%;
}

.table-bordered table tr[style="background-color:#DFF0D8;"] {
    background-color: #FFF !important;
}

.currency table.table-bordered {
    border: none;
}

.currency table.table-bordered tr th:first-child,
.currency table.table-bordered tr td:first-child {
    color: var(--secondary-color);
}

.currency .table-bordered>tbody>tr:first-child {
    background-color: rgba(79, 134, 247, .2) !important;
}

.currency table th,
.currency table td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
}

.pagination {
    display: table-row;
}

.pagination table tr {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination table td,
.currency .table-bordered tr:last-child td {
    padding: 5px 10px;
    border-radius: 5px;
    color: var(--secondary-color);
    cursor: pointer;
}

.pagination table td:hover,
.pagination span,
.currency .table-bordered tr:last-child span {
    color: #FFF;
    background-color: #259BFF;
    padding: 5px 10px;
    border-radius: 5px;
}

.pagination table td:hover a {
    color: #FFF;
}


.currency .close-btn {
    padding: 2px 10px;
    background-color: #E8E8E8;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    font-size: 24px;
    color: #000;
}

/*end-currency*/

/*start-models*/


.models-multi-forms {
    background-color: var(--main-color);
    display: flex;
    justify-content: space-between;
    border-radius: 15px;
    margin: 0 !important;
    padding: 0 !important;
}

.models-multi-forms .heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #259BFF;
    min-height: 500px;
    border-radius: 0 15px 15px 0;
}

.models-multi-forms .heading .form-title {
    color: #FFF;
    background-color: #259BFF;
    padding: 10px 30px;
    border-bottom: 1px solid var(--main-color);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.models-multi-forms .heading .form-title:first-child {
    border-radius: 0 15px 0 0;
}

.models-multi-forms .heading .form-title.active,
.models-multi-forms .heading .form-title:hover {
    color: #259BFF;
    background-color: var(--main-color);
    border: 1px solid #259BFF;
}

.models-multi-forms .forms {
    flex: 1;
}

.models-multi-forms .forms>div {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.models-multi-forms .forms>div .devider {
    width: 1px;
    background-color: #259BFF;
}

.models-multi-forms .forms .benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.models-multi-forms .forms .benefits .benefit {
    background-color: var(--main-color);
    border-color: rgba(37, 155, 255, .5);
}

.models-multi-forms .forms .benefits .benefit:nth-child(odd) {
    border-inline-end: 1px solid #259BFF;
}

@media screen and (max-width: 1200px) {
    .models-multi-forms .forms .benefits {
        grid-template-columns: 1fr;
    }

    .models-multi-forms .forms .benefits .benefit:nth-child(odd) {
        border: none;
    }
}

@media screen and (max-width: 670px) {
    .models-multi-forms .forms .benefits .benefit {
        width: fit-content;
        gap: 10px;
        margin: 0;
    }
}


/*end-models*/
/*start-modal*/
.modal {
    background-color: var(--main-color);
    width: fit-content;
    height: 80%;
    max-width: 750px;
    min-width: 600px;
    margin: 1.75rem auto;
    border-radius: 15px;
    /* overflow: visible !important;*/
}

.modal.in {
    display: flex;
    flex-direction: column;
}

.modal .modal-header {
    border-color: #259BFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal .modal-header .blue {
    color: #259BFF !important;
    background-color: unset !important;
    order: 0;
    margin: 0;
}

.modal .modal-header button {
    color: var(--secondary-color);
    background-color: rgba(37, 155, 255, .5);
    margin: 0;
    padding: 5px 10px;
    order: 1;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
}

.modal-body {
    flex: 1;
    overflow-y: auto !important;
}

.modal-body .multi-forms {
    padding: 0;
}

.modal-body .multi-forms .heading {
    padding: 0;
    border-bottom: 1px solid rgba(112, 112, 112, .7);
}

.modal-body .multi-forms .heading .form-title {
    color: var(--secondary-color);
    padding: 5px;
    border: 1px solid rgba(112, 112, 112, .3);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.modal-body .multi-forms .heading .form-title.active {
    background-color: #EEEEEE;
    border-top: 4px solid #259BFF;
    color: #259BFF;
}

.modal-body .multi-forms .heading .form-title .badge {
    background-color: red;
}

.modal-body .multi-forms .forms>div {
    padding: 20px;
}

.modal-body .multi-forms .forms .table-container {
    overflow-x: auto;
}

.modal-body .multi-forms .forms .table-container th,
.modal-body .multi-forms .forms .table-container td {
    padding: 10px 40px;
    font-size: 12px;
}

.modal-body .multi-forms .forms .generalize {
    padding: 25px;
    border-bottom: 1px solid rgba(112, 112, 112, .7);
    color: var(--secondary-color);
}

.modal-body .multi-forms .forms .generalize:last-child {
    border: none;
}

.modal-body .multi-forms .forms .generalize .generalize-header {
    margin-bottom: 20px;
}

.modal-body .multi-forms .forms .generalize .generalize-body img {
    max-width: 70%;
}

.modal .modal-footer {
    background-color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
}

.modal .modal-footer .btn-primary {
    color: #FFF;
}

@media all and (max-width: 760px) {
    .modal {
        max-width: 80%;
    }
}



/*end-modal*/

.performance .widget-box {
    padding: 25px !important;
}

.performance .table-container {
    padding: 20px 0;
}

.performance .table-container table tbody tr:last-child {
    background-color: rgba(223, 158, 19, .2);
}

.performance .table-container table th,
.performance .table-container table td {
    padding: 15px 30px;
    text-align: center;
    vertical-align: middle;
}

.performance .table-container table th:nth-child(3),
.performance .table-container table td:nth-child(3) {
    color: #5664FC;
    font-weight: bold;
}

.performance .degree-due {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.performance .degree-due .degree {
    color: #707070;
    width: 60px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #707070;
}

.performance .degree-due .progress {
    height: 5px;
    flex: 1;
}

.performance .inputs button {
    padding: 5px 50px;
}

/*start sales*/

.sales .content-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.sales .content-wrapper>div {
    flex: 1;
    min-width: 450px;
}

.sales .widget-box {
    padding: 20px !important;
    margin: 20px 0;
}

.sales .widget-box .title {
    padding: 10px 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #C7C7C7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sales>div {
    overflow-x: auto;
}

.sales .widget-box .table-container {
    overflow-x: auto;
    min-height: 220px;
}

.sales .widget-box .title .buttons {
    display: flex;
    align-items: center;
}

.sales .widget-box .title span {
    font-size: 18px;
    font-weight: bold;
}

.sales .inputs {
    flex: 1;
}

.sales .inputs .icon-input-container {
    width: 100%;
}

.sales .inputs .icon-input-container input {
    max-width: unset;
}

.sales table td {
    min-width: 60px;
    font-size: 14px;
}

.sales table tbody tr:first-child {
    background-color: rgba(79, 134, 247, .2);
}

.sales table tbody tr:last-child {
    background-color: rgba(223, 158, 19, .2);
}

.sales table td input {
    width: 60px;
    border-radius: 10px;
    color: #000;
    background-color: var(--input-color);
    border: 1px solid var(--main-color);
    outline: none;
    padding: 2px;
}

.sales .widget-box .widget-header .btn:last-child {
    color: #FFF !important;
}

.sales .inputs .buttons {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.sales .buttons .btn {
    color: #FFF;
}

.sales .buttons .btn.yellow {
    padding: 5px 20px;
}

.sales .buttons .btn.blue {
    background-color: #4F86F7 !important;
    border: none;
    outline: none;
}

.sales .buttons .btn-group {
    margin-inline-start: 0;
}

.sales .buttons .btn-group a {
    border-radius: 0 5px 5px 0 !important;
}

.sales .buttons .btn-group button {
    border-radius: 5px 0 0 5px;
}

.sales .multi-forms {
    margin: 0;
}

.sales .multi-forms .forms-title h5 {
    font-weight: bold;
}

.sales .multi-forms .heading .form-title {
    border: 1px solid rgba(112, 112, 112, .3);
}

.sales .multi-forms .heading .form-title.active {
    color: var(--secondary-color);
}

.sales .multi-forms .forms {
    max-height: 500px;
    overflow-y: auto;
}

.sales .multi-forms .items {
    padding: 20px 0;
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
}

.sales .multi-forms .items .item {
    max-width: 140px;
    padding: 0;
    display: grid;
}

.sales .multi-forms .items .item .item-img {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 10px 0 0;
    background-repeat: no-repeat;
    background-position: center;
}

.sales .multi-forms .items .item .item-img {
    color: var(--main-color);
    font-size: 26px;
}

.sales .multi-forms .items .item .item-title {
    padding: 10px;
    color: var(--secondary-color);
    background-color: var(--body-color);
    font-size: 15px;
    font-weight: bold;
    border-radius: 0 0 10px 10px;
}

.sales .multi-forms .items .item .item-num {
    color: var(--secondary-color);
    background-color: var(--main-color);
    padding: 2px;
    border-radius: 8px;
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 12px;
}

.sales .modal .inputs .input-container {
    width: 330px;
}

.sales .modal .button-container {
    width: 100%;
}

.sales .dual-inputs>input:first-child {
    width: 100px;
}

.sales .dual-inputs>input:last-child {
    flex: 1;
}

.sales .modal .button-container button {
    padding: 5px 40px;
}

/*start mail*/

.mail .sections {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mail .section {
    width: fit-content;
    background-color: var(--main-color);
    border-radius: 10px;
    animation: stretch .5s ease-out 0s alternate none running;
}

.mail .section .section-body {
    padding: 15px;
}

.mail .section .title {
    padding: 10px;
    border-bottom: 1px solid #707070;
}

.mail .section .title .svg-inline--fa {
    color: #4F86F7;
}

.mail .section .title span {
    font-size: 22px;
    font-weight: bold;
    color: var(--secondary-color);
}

.mail .search-box {
    background-color: var(--main-color);
    border: 1px solid #707070;
    border-radius: 10px;
    width: 400px;
    padding: 0 5px;
    display: flex;
    align-items: center;
}

.mail .search-box input {
    color: var(--secondary-color);
    background-color: var(--main-color);
    border: none;
    outline: none;
    padding: 5px;
    flex: 1;
}

.mail .search-box .fa-magnifying-glass {
    color: #707070;
}

.mail .messages {
    padding: 0 10px;
    margin: 10px 0;
    max-height: 500px;
    overflow-y: auto;
}

.mail .message {
    color: var(--secondary-color);
    background-color: var(--body-color);
    padding: 10px 20px;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: rgb(17 12 46 /10%) 0px 1px 50px .1px;
}

.mail .message.active {
    background-color: #4F86F7;
    color: var(--main-color);
}

.mail .message.done {
    opacity: .6;
}

.mail .message-title {
    font-size: 18px;
    font-weight: bold;
}

.mail .message .message-hint {
    font-weight: 500;
    margin-bottom: 0;
}

.mail .message .message-date {
    position: absolute;
    top: 10px;
    left: 10px;
}

.mail .shown-message {
    flex: 1;
}

.mail .shown-message .user-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--secondary-color);
}

.mail .shown-message .user-info .user-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.mail .shown-message .user-info .user-img img {
    width: 100%;
}

.mail .shown-message .heading {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mail .shown-message .message-body {
    padding: 20px;
    border-bottom: 1px solid #707070;
    color: var(--secondary-color);
}

.mail .shown-message .message-body .message-content {
    margin: 20px 0;
}

.mail .inputs {
    justify-content: flex-end;
}

.mail .inputs button {
    padding: 2px 20px;
    border-radius: 20px;
}

.mail .attaches .title {
    border: none;
}

.mail .attaches .attaches-body {
    padding: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.mail .attaches .attaches-body .attach {
    width: 140px;
    height: 160px;
    border: 1px solid rgba(112, 112, 112, 0.6);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mail .attaches .attaches-body .attach .svg-inline--fa {
    font-size: 30px;
    color: #707070;
}

/*end mail*/

/*start advance*/

.advance .widget-box {
    padding: 10px 20px !important;
}

.advance .ar-container input {
    width: 70%;
    margin-inline-end: 10px;
}

.advance .steps {
    border-radius: 10px;
    background-color: var(--main-color);
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 90vw;
    overflow-x: auto;
}

.advance .steps::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.advance .steps .step {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.advance .steps .step.disabled {
    opacity: .5;
}

.advance .steps .step .step-line {
    flex: 1;
    height: 1px;
    background-color: #259BFF;
    min-width: 100px;
}

.advance .steps .step:first-child .step-line {
    display: none;
}

.advance .steps .step .step-body {
    color: var(--main-color);
    background-color: #259BFF;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    width: max-content;
}

.advance .order-status .status {
    font-size: 18px;
    font-weight: bold;
}

.advance .widget-box .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #C6C6C6;
}

.advance .widget-box .title span {
    font-size: 22px;
    font-weight: bold;
}

.advance .widget-box .procedures-container {
    padding-top: 10px;
}

.advance .widget-box .procedures {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.advance .widget-box .procedures .procedure {
    width: 150px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
   /* border: 1px solid;*/
    border-radius: 5px;
    font-weight: bold;
}

.advance .widget-box .procedures .procedure a {
    color: inherit;
}

.advance .widget-box .divider {
    width: 100%;
    height: 1px;
    background-color: #4F86F7;
    margin: 20px 0;
}

.advance .widget-box .tasks {
    padding: 10px 0;
}

.advance .widget-box .tasks .task {
    display: flex;
    gap: 10px;
}

.advance .widget-box .tasks .task .complete {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.advance .widget-box .tasks .task .complete .circle {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #4F86F7;
    border-radius: 50%;
}

.advance .widget-box .tasks .task .complete .svg-inline--fa {
    color: #5664FC;
}

.advance .widget-box .tasks .task .complete .line {
    flex: 1;
    width: 3px;
    background-color: #4F86F7;
}

.advance .widget-box .tasks .task:last-child .complete .line {
    display: none;
}

.advance .widget-box .tasks .task .task-body-wrapper {
    flex: 1;
    padding-bottom: 30px;
}

.advance .widget-box .tasks .task .task-body {
    padding: 35px;
    border-radius: 10px;
    background-color: #F1F1F1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.advance .widget-box .tasks .task .task-body .task-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.advance .widget-box .tasks .task .task-body .task-item .blue-circle {
    margin: 0;
}

.advance .widget-box .tasks .task .task-body .task-item .employee-name {
    padding: 2px 5px;
    border-radius: 5px;
}

.advance .widget-box .tasks .task .task-body .task-item .employee-title {
    font-weight: bold;
}

.advance .widget-box .tasks .task .task-body .task-item .procedure {
    display: flex;
    gap: 5px;
}

.advance .widget-box .tasks .task .task-body .task-item .procedure .procedure-title {
    font-weight: bold;
}

.advance .widget-box .tasks .task .task-body .task-item .procedure .procedure-item {
    padding: 0 35px;
    border: 1px solid;
    border-radius: 5px;
}

.advance .widget-box .tasks .task .task-body .message-box {
    background-color: rgba(36, 36, 36, .05);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 5px;
}

.advance .widget-box .tasks .task .task-body .icon {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.advance .widget-box .tasks .task .task-body .icon .svg-inline--fa {
    font-size: 18px;
    color: #707070;
}

.advance .widget-box .tasks .task .task-body .message-box input {
    width: auto;
    height: 100%;
    padding: 10px 5px;
    flex: 1;
    background-color: transparent;
    border: none;
    outline: none;
    min-width: 200px;
}

.advance .widget-box .tasks .task .task-body .message-box button {
    padding: 10px 30px;
    background-color: #5664FC;
}

.advance .widget-box .tasks .task .task-body .message-item {
    align-items: flex-start;
}

.advance .widget-box .tasks .task .task-body .task-item .circle {
    width: 35px;
    height: 35px;
    border: 1px solid #5664FC;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.advance .widget-box .tasks .task .task-body .message-item .svg-inline--fa {
    color: #5664FC;
}

.advance .widget-box .tasks .task .task-body .task-item .message-body {
    flex: 1;
    background-color: rgba(36, 36, 36, .03);
    padding: 5px 10px 10px;
    padding-inline-end: 75px;
    border-radius: 5px;
}

.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info {
    margin-bottom: 30px;
}

.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info .employee-name {
    font-size: 12px;
}

.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info .message-date {
    font-size: 13px;
    color: #303030;
    display: flex;
    gap: 10px;
}

.advance .widget-box .tasks .task .task-body .task-item .message-body .employee-info .message-date .icon {
    padding: 0;
}

.advance .widget-box .tasks .task .task-body .task-item .message-body .message-content {
    font-size: 16px;
    font-weight: 500;
}

.advance .widget-box .tasks .task .task-body .date {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #242424;
    font-size: 14px;
    display: flex;
    gap: 5px;
}

.advance .widget-box .tasks .task .task-body .date .icon {
    padding: 0;
}

.advance .widget-box .tasks .task .task-body .date .icon .svg-inline--fa {
    font-size: 12px;
}

.advance .widget-box .tasks .task .task-body .message {
    position: absolute;
    bottom: 10px;
    left: 15px;
    cursor: pointer;
}

.advance .widget-box .tasks .task .task-body .message .svg-inline--fa {
    color: #5664FC;
}

@media all and (max-width: 620px) {
    .advance .widget-box .tasks .task .task-body .date {
        font-size: 10px;
    }

    .advance .widget-box .tasks .task .task-body .date .icon .svg-inline--fa {
        font-size: 9px;
    }

    .advance .widget-box .tasks .task .task-body .task-item .message-body {
        padding: 10px;
    }
}

/*end advance*/

/*start latlng*/

.latlng {
    padding: 20px;
}

.latlng .inputs {
    padding: 10px;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: rgb(17 12 46 /10%) 0px 1px 50px .1px;
}

.latlng .inputs .input-container {
    text-align: start;
}

.latlng .inputs .input-container span {
    display: block;
    margin-bottom: 10px;
}

.latlng .inputs .btn-container {
    display: flex;
    align-items: flex-end;
}

.latlng .inputs .btn-container .btn {
    width: fit-content;
    color: #FFF;
    background-color: #238CAF !important;
    padding: 7px 50px;
    font-size: 16px;
    border: none;
    outline: none;
    cursor: pointer;
}

.latlng .inputs .icon-input {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
}

.latlng .inputs .icon-input input:first-child {
    width: 250px !important;
    border-radius: 5px 0 0 5px;
}

.latlng .inputs .icon-input input:last-child {
    width: fit-content !important;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

/*end latlng*/

/*start task-panel*/

.task-panel .cards-set {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.task-panel .card {
    flex: 1;
    min-width: 220px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #DFE1E3;
}

.task-panel .card .card-title {
    color: #FFF;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.task-panel .card .card-body {
    padding: 20px 10px;
}

.task-panel .dd .dd-list {
    padding: 0;
}

.task-panel .dd .dd-list h5 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    color: inherit;
}

.task-panel .dd .dd-list p {
    font-size: 14px;
}

.task-panel .dd .dd-placeholder {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #f2fbff;
    border: 1px dashed #b6bcbf;
    box-sizing: border-box;
    display: block;
    position: relative;
    font-size: 13px;
    line-height: 20px;
}

.task-panel .dd .dd-empty {
    background-color: #e5e5e5;
    min-height: 100px;
    border: 1px dashed #bbb;
}

.task-panel .dd .dd-item {
    position: relative;
    background-color: var(--main-color);
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgb(17 12 46 /10%) 0px 1px 50px .1px;
}

.task-panel .dd .heading {
    width: 100%;
    padding: 5px 15px;
    cursor: move;
}

.task-panel .dd-handle {
    color: #FFF;
}

.task-panel .dd-content {
    padding: 10px;
}

.task-panel .dd .content {
    padding: 10px;
}

.task-panel .dd .content .task-num {
    font-size: 16px;
}

.task-panel .dd .content .task-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}

.task-panel .dd .content .task-disc {
    font-size: 14px;
}

.task-panel .dd .content .dates {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-panel .dd .content .dates p {
    margin-bottom: 0;
}

/*end task-panel*/

/*start tasks*/

.task-details .wrapper {
    padding: 20px;
    background-color: #FFF;
    border-radius: 5px;
}

.task-details .details {
    background-color: var(--body-color);
    display: grid;
    grid-template-columns: repeat(8, auto);
    gap: 2px;
    border-radius: 5px;
    box-shadow: rgb(17 12 46 /10%) 0px 1px 50px .1px;
    margin-bottom: 20px;
}

.task-details .details .detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-details .details .detail>div {
    padding: 10px;
    background-color: var(--main-color);
}

.task-details .disc {
    flex: 1;
    color: #2C698D;
}

.task-details .more-details {
    padding: 10px;
    display: flex;
    gap: 10px;
    border-radius: 5px;
    box-shadow: rgb(17 12 46 /10%) 0px 1px 50px .1px;
    margin-bottom: 20px;
}

.task-details .data-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.task-details .replies {
    flex: 2;
    box-shadow: rgb(17 12 46 /10%) 0px 1px 50px .1px;
}

.task-details .replies-container {
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
}

.task-details .reply {
    background-color: var(--body-color);
    margin-bottom: 20px;
    padding: 10px 20px;
    border-radius: 5px;
}

.task-details .reply .reply-header {
    display: flex;
    justify-content: space-between;
}

.task-details .reply .reply-header .reply-title {
    gap: 10px;
}

.task-details .reply .reply-header>div {
    display: flex;
    align-items: center;
}

.task-details .reply .reply-header .reply-title .icon {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #2C698D;
    border-radius: 50%;
    font-size: 14px;
}

.task-details .reply .reply-header .reply-title .text {
    margin: 0;
    font-size: 22px;
}

.task-details .reply .reply-header .date {
    font-size: 14px;
    gap: 5px;
}

.task-details .reply .reply-header .date .text {
    color: #242424;
    margin: 0;
}

.task-details .reply .reply-comment {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-details .reply .reply-comment .quotation {
    color: #2C698D;
    padding: 0 10px 10px;
    font-size: 32px;
    font-weight: 800;
    align-self: flex-start;
    display: flex;
    align-items: center;
}

.task-details .reply .reply-body {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.task-details .reply .reply-body .info-container {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.task-details .reply .reply-body .info-container .info {
    min-width: 175px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.task-details .reply .reply-body .info-container .info .info-title {
    color: #FFF;
    background-color: #DF9E13;
    padding: 4px;
    border-radius: 5px;
    font-size: 14px;
}

.task-details .reply .reply-body .info-container .info .info-text {
    font-size: 16px;
}

.task-details .replies .inputs label,
.task-details .doc-modal label {
    display: block;
}

.task-details .replies .inputs .select2-selection--single,
.task-details .doc-modal .select2-selection--single {
    margin: 0;
}

.task-details .replies .inputs .button-container {
    width: 100%;
    text-align: end;
}

.task-details .doc {
    flex: 1;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: rgb(17 12 46 /10%) 0px 1px 50px .1px;
}

.task-details .doc .widget-body {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.task-details .doc .widget-body .text {
    text-align: center;
}

.task-details .doc .widget-body .btn {
    color: #FFF;
}

.task-details .doc-modal .input-container {
    flex: 1;
}

.task-details .doc-modal .select2 {
    width: 100% !important;
}

@media screen and (max-width: 1450px) {
    .task-details .details {
        grid-template-columns: repeat(4, auto);
    }
}

@media screen and (max-width: 1080px) {
    .task-details .details {
        grid-template-columns: repeat(2, auto);
    }

    .task-details .replies {
        flex: auto;
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .task-details .reply .reply-header .reply-title .icon {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }

    .task-details .reply .reply-header .reply-title .text {
        font-size: 14px;
    }

    .task-details .reply .reply-header .date {
        font-size: 10px;
    }
}

/*end tasks*/

/*start infobox*/

.infobox-container {
    background-color: var(--main-color);
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    align-content: space-between;
    justify-content: space-between;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(44, 105, 141, 1);
    animation: go-up 1s ease-out 0s alternate none running;
    font-size: 20px;
    margin: 20px 0px;
}

.infobox-container .infobox {
    width: auto !important;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    border: 1px solid rgba(44, 105, 141, .5);
}

.infobox-container .infobox .icon-container,
.infobox-container .infobox .infobox-icon {
    /* flex: 1;*/
    padding: 10px;
    border-radius: 5px;
}

.infobox-container .infobox .icon-container .svg-inline--fa,
.infobox-container .infobox .infobox-icon i {
    color: #2C698D;
    font-size: 36px;
}

.infobox-container .infobox .infobox-data {
    color: #2C698D;
    flex: 2;
    text-align: center;
}

:root[dark="true"] .infobox-container .infobox .infobox-data {
    color: #FFF;
}

.infobox-container .infobox .infobox-data-number {
    font-size: 24px;
    font-weight: bold;
}

@media all and (max-width: 1360px) {
    .infobox-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media all and (max-width: 1180px) {
    .infobox-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media all and (max-width: 992px) {
    .infobox-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .row-fluid .span2,
    .row-fluid .span3 {
        width: 32%;
        *width: 32%;
    }
}

@media all and (max-width: 720px) {
    .infobox-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .row-fluid .span2,
    .row-fluid .span3,
    .row-fluid .span4 {
        width: 45%;
        *width: 45%;
    }
}

@media all and (max-width: 500px) {
    .infobox-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .row-fluid .span2,
    .row-fluid .span3,
    .row-fluid .span4,
    .row-fluid .span5,
    .row-fluid .span6,
    .row-fluid .span7,
    .row-fluid .span8,
    .row-fluid .span9 {
        width: 100%;
        *width: 100%;
    }
}

/*end infobox*/

/*start media query*/

@media all and (max-width: 1392px) {
    nav .search .search-box {
        display: none;
    }

    nav .search {
        padding: 0;
    }

    nav .search .dropdown-search {
        display: block;
    }

    nav .search .dropdown-search>a>.fa-magnifying-glass {
        padding: 10px 20px;
    }
}

@media all and (max-width: 1005px) {
    nav .options {
        order: 4;
    }
}

@media all and (max-width: 980px) {
    .side-bar .nav-pills {
        display: none;
    }

    .side-bar .menu-toggle {
        display: block;
    }

    .side-bar {
        position: absolute;
        height: fit-content;
        z-index: 100;
        border-radius: 15px;
    }

    .side-bar .nav-pills {
        height: fit-content;
    }
}

@media all and (max-width: 880px) {
    nav .search {
        order: 3;
    }

    nav .options,
    nav .search {
        order: unset;
    }
}


@media all and (max-width: 720px) {

    nav .menus {
        gap: 10px;
    }

    nav .menus a {
        padding: 3px;
    }

    .wide-sidebar nav .logo img {
        max-height: 35px;
    }

    .modal {
        min-width: 300px;
    }

    .main-content .content-wrapper>.title h3 {
        font-size: 20px;
    }

    .item {
        width: 285px;
        height: 100%;
        padding: 30px 25px;
        border-radius: 15px;
        text-align: center;
        cursor: pointer;
        transition: .25s linear;
        animation: stretch .5s ease-out 0s alternate none running;
    }

    .manage .widget-box .item {
        width: 250px;
    }

    .widget-box .widget-title {
        font-size: 18px;
    }

    .self-service>div {
        margin-left: auto;
        margin-right: auto;
    }

    .self-service .loans {
        max-width: 420px;
    }
}

@media all and (max-width: 450px) {

    .self-service>div,
    .self-service .multi-sections .widget-box {
        max-width: 380px;
    }

    .self-service .team .teammate {
        flex-direction: column;
        gap: 10px;
    }

    .self-service .reviews .rating .text h4 {
        font-size: 20px;
    }

    .self-service .reviews .rating .text p {
        font-size: 16px;
    }
}

@media all and (max-width: 400px) {

    .self-service>div,
    .self-service .multi-sections .widget-box {
        max-width: 320px;
    }
}

@media all and (max-width: 350px) {

    .self-service>div,
    .self-service .multi-sections .widget-box {
        max-width: 270px;
    }
}

/*end media query*/

/******************** custom *************************/

.icon-trash::before {
    content: "\f1f8";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    color: #F74F4F;
}

.icon-edit::before {
    content: "\f044";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: #4F86F7;
}

.icon-print::before {
    content: '\f02f';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-table::before {
    content: '\f093';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-list::before {
    content: '\f0ca';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-star::before {
    content: '\f005';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    color: inherit;
}

.icon-credit-card::before {
    content: '\f09d';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: var(--secondary-color);
}

.icon-lock::before {
    content: '\f023';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: var(--secondary-color);
}

.icon-group::before {
    content: '\f0c0';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-time::before {
    content: '\e29e';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-dashboard::before {
    content: '\f0db';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-eye-open::before {
    content: '\f06e';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-calendar::before {
    content: '\f133';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-chevron-down::before {
    content: '\f078';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-user::before {
    content: '\f007';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.icon-bar-chart::before {
    content: '\e0e3';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.nav-tabs li {
    color: #707070;
    padding: 10px 5px;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #707070;
    cursor: pointer;
}

.nav-tabs li.active {
    border-bottom: 1px solid #259BFF;
}

.nav-tabs li.active a {
    color: #259BFF;
}

.control-group {
    margin: 5px;
}

.control-label {
    margin-bottom: 5px;
    color: var(--secondary-color);
}

.row-fluid .span12,
.span12 {
    width: 100% !important;
    *width: 99.94680851063829% !important;
    display: inline-block;
}

.row-fluid .span11,
.span11 {
    width: 91.45299145299145% !important;
    *width: 91.39979996362975% !important;
    display: inline-block;
}

.row-fluid .span10,
.span10 {
    width: 82.90598290598291% !important;
    *width: 82.8527914166212% !important;
    display: inline-block;
}

.row-fluid .span9,
.span9 {
    width: 74.35897435897436% !important;
    *width: 74.30578286961266% !important;
    display: inline-block;
}

.row-fluid .span8,
.span8 {
    width: 65.81196581196582% !important;
    *width: 65.75877432260411% !important;
    display: inline-block;

}

.row-fluid .span7,
.span7 {
    width: 57.26495726495726% !important;
    *width: 57.21176577559556% !important;
    display: inline-block;
}

.row-fluid .span6,
.span6 {
    width: 48.717948717948715% !important;
    *width: 48.664757228587014% !important;
    display: inline-block;
    flex-wrap: wrap
}

.row-fluid .span5,
.span5 {
    width: 40.17094017094017% !important;
    *width: 40.11774868157847% !important;
    display: inline-block;
    flex-wrap: wrap
}

.row-fluid .span4,
.span4 {
    width: 31.623931623931625% !important;
    *width: 31.570740134569924% !important;
    display: inline-block;
    flex-wrap: wrap
}

.row-fluid .span3,
.span3 {
    width: 23.076923076923077% !important;
    *width: 23.023731587561375% !important;
    display: inline-block;
    flex-wrap: wrap
}

.row-fluid .span2,
.span2 {
    width: 14.52991452991453% !important;
    *width: 14.476723040552828% !important;
    display: inline-block;
    flex-wrap: wrap
}

.row-fluid .span1,
.span1 {
    width: 5.982905982905983% !important;
    *width: 5.929714493544281% !important;
    display: inline-block;
    flex-wrap: wrap
}

/*[class^="span"] > * {
    width: 100%;
}*/

[class^="span"] .header {
    display: block;
}

.form-inline:not(table) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.menu-items-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.menu-item {
    height: unset;
    min-height: 150px;
    padding: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-item p {
    margin: 0 !important;
}

.menu-items-wrapper .span {
    flex: 1;
    min-width: 300px;
}

.menu-items-wrapper .canvas-container {
    max-width: 350px;
}

th[align="center"] {
    text-align: center !important;
}

.popupDatepicker {
    background-image: url(../imgs/calender.png);
    background-position: calc(100% - 10px) 10px;
    background-size: 20px;
    background-repeat: no-repeat;
}

:root[dir="rtl"] .popupDatepicker {
    background-image: url(../imgs/calender.png);
    background-position: 5px 10px;
}

.ContentPlaceHolder1_FreeTextBox1_OuterTable td {
    border: none !important;
}

.table-bordered tr:not(.pagination) td table tr:first-child {
    background-color: rgba(79, 134, 247, .2);
}

.table-bordered tr:not(.pagination) td table th,
.table-bordered tr:not(.pagination) td table td {
    text-align: center;
    padding: 5px;
    border: 1px solid #000 !important;
}

.bigger-175 {
    padding: 5px;
    border-radius: 5px;
    color: #FFF;
}

.btn-success {
    color: #FFF;
}

.itemdiv {
    background-color: var(--main-color);
    padding: 30px 20px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    margin: 10px;
}

.itemdiv .body {
    position: static;
    color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.itemdiv .name,
.itemdiv .name a {
    color: #178CAF;
    font-size: 16px;
}

.itemdiv .body .text {
    text-align: center;
    padding: 20px 0;
}

.itemdiv .body .row .span4 {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.itemdiv .body .row .span3 {
    font-weight: 500;
}

.itemdiv .body .row .span3 .label {
    font-weight: bold;
}


.itemdiv .body .text .row>* {
    width: unset;
}

.itemdiv .time {
    width: max-content;
    position: absolute;
    bottom: 5px;
    left: 50%;
    display: flex;
    gap: 5px;
    transform: translateX(-50%);
    font-size: 12px;
}

.itemdiv .time .green {
    background-color: transparent !important;
}

.profile-user-info {
    background-color: var(--main-color);
    padding: 10px;
    border-radius: 10px;
}

.ui-menu {
    background-color: #FFF;
    max-height: 350px;
    overflow-y: auto;
    border-radius: 5px;
}

.ui-menu .ui-menu-item:hover {
    background-color: #4F86F7;
}

.ui-menu .ui-menu-item-wrapper {
    width: 100%;
    display: inline-block;
}

.ui-menu .ui-menu-item:hover .ui-menu-item-wrapper {
    color: #FFF;
}

.select2-container--open .select2-dropdown {
    margin-left: -2px;
}

.profile-info-row {
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-info-name::after {
    content: ':';
    font-size: inherit;
}

.profile-info-value table div {
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input[readonly="readonly"] {
    background-color: #eeeded � !important;
    cursor: default;
}

input[class^="span"] {
    margin: 10px 2px;
}

table tr[style^="background"] td {
    color: #000;
}


.alert-errorM {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.alert-information {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.alert-attention {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

table {
    /*margin: auto;*/
    padding: unset;
}

.autocomplete_completionListElement {
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: 200px;
    text-align: right;
    list-style-type: none;
    z-index: 100000;
}

/* AutoComplete highlighted item */
.autocomplete_highlightedListItem {
    background-color: #ffff99;
    color: black;
    padding: 1px;
    z-index: 100000;
}

/* AutoComplete item */
.autocomplete_listItem {
    background-color: window;
    color: windowtext;
    padding: 1px;
    z-index: 100000;
}

.btn-info:hover {
    /*background-color: rgba(79, 134, 247, .3);*/
    /*color: #4F86F7;*/
}

input[disabled],
input[readonly="readonly"] {
    /* opacity: .5;*/
    background-color: #eee !important;
}

.modal.hide.in {
    display: none;
}

.modalPopup {
    position: absolute;
    background-color: #FFFFFF;
    top: 100px;
    left: 15%;
    z-index: 2001;
    padding: 10px 10px 10px 30px;
    min-width: 400px;
    max-width: 1000px;
    max-height: 500px;
    -moz-box-shadow: 3.5px 4px 5px #000000;
    -webkit-box-shadow: 3.5px 4px 5px #000000;
    box-shadow: 3.5px 4px 5px #000000;
    border-radius: 5px;
    -moz-border-radiux: 5px;
    -webkit-border-radiux: 5px;
    border: 5px solid #CCCCCC;
    overflow: scroll;
}

.Overlay {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 1000;
}

.modalBackground {
    background-color: Black;
    filter: alpha(opacity=90);
    opacity: 0.8;
}

html[dir="ltr"] .collapse-sidebar .side-bar .nav-pills .nav-item:hover .dropdown-menu {
    display: block;
    position: absolute;
    inset: 0px auto auto auto;
    margin: 0px;
    transform: translate(80px, 0px);
}

.Subgrid {
    z-index: 3000;
    background-color: white;
    padding-right: 5px;
    padding-left: 5px;
}

.Subgrid tr:first-child {
    background-color: white !important
}

.icon-bars::before {
    content: '\f0c9';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

/*���� ����� ���� ��������*/


html {
    --primary-color: #2c698d;
    --subContainer-linearRight: #008C4D;
    --chartsColor: #e19e14;
    --submit-hover: #1e89c7;
}

.sub-container {
    border-radius: 15px;
}

.sub-container>div:nth-child(1) {
    background-color: var(--primary-color);
    padding: 1.5rem;
    color: white;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
}

.sub-container>div:nth-child(2) {
    overflow-y: auto;
    max-height: 14rem !important;
}

.sub-container>div:nth-child(2)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.sub-container>div:nth-child(2)::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 25px;
}

.sub-container>div:nth-child(2)::-webkit-scrollbar-track {
    background-color: #D8D8D8;
    border-radius: 25px;
}

.sub-container-cards,
.sub-container-cards2 {
    display: flex;
    flex-direction: column;
}

.sub-container-cards,
.sub-container-cards2 {
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    transition: 0.3s all linear;
}

.sub-container-cards:hover,
.sub-container-cards2:hover {
    box-shadow: 0px 0px 15px rgb(133, 133, 133);
}

.sub-container-cards>div:nth-child(1),
.sub-container-cards2>div:nth-child(1) {
    background-color: var(--primary-color);
    border-radius: 0.5rem;
}

.sub-container-content div {
    color: #303030;
}

.sub-container-content>span {
    color: #000;
}

.sub-container-icons {
    color: var(--primary-color);
}

.sub-container-cards>div:nth-child(2)>div:nth-child(1) {
    display: flex;
    justify-content: space-between;
}

.fs-14 {
    font-size: 14px;
}

.end-date {
    color: red !important;
}

.new-project-btn {
    position: absolute;
    top: -30px;
    left: 15px;
    background-color: var(--chartsColor);
    color: #fff;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    transition: 0.15s all;
}

.new-project-btn:hover {
    box-shadow: 0px 0px 10px rgb(172, 172, 172);
    color: #fff;
    background-color: #f5a70c;
}

.new-project-btn:active {
    transform: translateY(1.25px);
}

@media (max-width: 1000px) {
    .sub-container-cards>div:nth-child(2)>div:nth-child(1) {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .sub-container-cards>div:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        max-height: fit-content !important;
        padding: 0.5rem 1.5rem;
    }

    .sub-container-cards>div:nth-child(2)>div:nth-child(1) {
        align-items: baseline !important;
        flex-direction: column !important;
    }

    .sub-container-cards2>div:nth-child(2) {
        align-items: baseline !important;
        flex-direction: column !important;
    }
}

/* The end of styling cards and main content */

/* The start of styling xx content */
.project-card-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    font-size: 1.125rem;
}

.project-card-section::before {
    content: "";
    position: absolute;
    padding: 3.5rem;
    border-radius: 50%;
    top: -4rem;
    border: 1px solid #0B7C6B;
    background: url('../imgs/logo.png') no-repeat center, #fff;
    background-size: 70px 70px;
}

.project-state-section>div {
    background-color: #fff;
    border-radius: 0.5rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0.5rem;
}

.project-state-section p {
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    margin: 0;
}

.project-state {
    border-radius: 0.5rem;
    width: 12rem;
    padding: 0.3rem 0px;
    text-align: center;
    border: 1px solid #186991;
    transition: 0.15s all;
}

.project-state.active {
    background-color: #D3DCFF;
}

.dot {
    font-size: 0.65rem;
    margin-left: 0.1rem;
}

.circle-green {
    color: var(--subContainer-linearRight);
}

.circle-red {
    color: #DC2525;
}

.circle-orange {
    color: #F59B24;
}

.circle-blue {
    color: #196793;
}

.project-state-section .row>div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-information-section {
    background-color: #fff;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0.5rem;
}

.project-information-section>p {
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    margin: 0;
}

.main-information {
    display: flex;
}

.more-information {
    display: flex;
}

.more-information div {
    border-left: 1px solid rgb(0, 140, 77);
    width: calc(100%/4);
    padding: 2rem 0rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.more-information div span:first-child {
    color: var(subContaniner-linearLeft);
}

.more-information div:last-child {
    border-left: none;
}

.seqeunce-dots {
    position: relative;
    height: 72%;
    width: 1px;
    padding: 1rem 0px;
    background-color: #c6c6c6;
    margin-left: 0.5rem;
    margin-top: 0.4rem;
}

.seqeunce-dots::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary-color);
    top: 0;
    left: -5px;
}

.seqeunce-dots::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary-color);
    bottom: 0;
    right: -5px;
}

.more-information>div span:first-child {
    font-weight: 500;
    color: var(--primary-color);
}

.date-section {
    display: flex;
    border-left: 1px solid #c6c6c6;
    padding: 1rem;
}

.date-section>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.date-section>div:nth-child(2)>div span:first-child {
    font-weight: 500;
    color: var(--primary-color);
}

.date-section>div:nth-child(2) div {
    display: flex;
}

.project-progress-section {
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0;
}

.project-progress-section>p {
    background-color: var(--primary-color);
    border-radius: 0.5rem;
}

.progress-content {
    display: flex;
    justify-content: space-between;
}

.progress-content>div {
    border-radius: 0.5rem;
    width: calc(100% / 2.3);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

.progress-content>div>p {
    color: #fff;
    border-radius: 0.5rem;
}

.w3-small {
    width: 80%;
}

.gold-color {
    background-color: var(--chartsColor);
}

.bars {
    font-weight: 500;
    background-color: var(--chartsColor);
}

.bar {
    background-color: var(--chartsColor);
}

.progress-bars>div {
    border-top: 1px solid #ccc;
    font-size: 1.125rem;
}

.financial-statistics>div {
    border-top: 1px solid #ccc;
    padding: 1rem 3rem;
    font-weight: 500;
}

.financial-statistics>div span:nth-child(2) {
    color: var(--chartsColor);
}

.financial-statistics>div span:nth-child(3) {
    color: var(--primary-color);
}

.chart-container {
    width: 40%;
}

#canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#replay {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.shadow {
    filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, .4));
}

.w3-container,
.w3-panel {
    padding: 0.02em 0.5rem !important;
}

@media (max-width: 767px) {
    .project-card-section {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
        padding-bottom: 1.5rem !important;
    }

    .project-card-section div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .project-card-section div span:nth-child(2) {
        margin: 0.5rem;
        text-align: center;
    }

    .main-information {
        flex-direction: column;
    }

    .date-section {
        min-height: 6rem;
        position: relative;
        border-bottom: 1px solid #c6c6c6;
        border-left: none;
        justify-content: center;
    }

    .seqeunce-dots {
        height: 100%;
        padding: 1.6rem 0px;
    }

    .date-section>div {
        border-left: none;
    }

    .date-section>div:nth-child(2)>div span {
        margin-right: 0.5rem;
    }

    .more-information {
        flex-direction: column;
    }

    .more-information div {
        padding: 1rem;
        width: 100%;
        flex-direction: row;
        border-bottom: 1px solid #c6c6c6;
        border-left: none;
    }

    .more-information div:last-child {
        border-bottom: none;
    }

    .more-information div hr {
        position: absolute;
        width: 1px;
        height: 100%;
        left: 50%;
    }

    .progress-content {
        flex-direction: column;
    }

    .progress-content>div {
        margin: 1rem 0px;
    }

    .progress-content {
        flex-direction: column;
    }

    .progress-content>div {
        width: 100%;
    }

    .progress-bars {
        font-size: 13px;
    }

    .financial-statistics>div {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .progress-bars>div {
        border-top: 1px solid #ccc;
        font-size: 0.9rem;
    }
}

@media (min-width: 768px) and (max-width: 1050px) {
    .financial-statistics>div {
        padding: 1rem;
        font-size: 14px;
    }
}



/* Styling page of adding new project */
.add-project-form {
    display: flex;
    flex-direction: column;
}

.add-project-form input {
    width: 100% !important;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    outline-color: var(--primary-color);
}

.add-project-form input[type="submit"] {
    width: 5rem !important;
    margin-top: 0.5rem;
    transition: 0.2s;
    align-self: flex-end;
    background-color: var(--primary-color) !important;
    /* position: absolute;
    bottom: 0;
    left: 10px; */
}

.add-project-form input[type="submit"]:hover {
    background-color: var(--submit-hover) !important;
    /* box-shadow: 0px 2px 7px 3px rgb(139, 139, 139); */
}

.add-project-form input[type="submit"]:active {
    transform: translateY(1.25px);
    /* box-shadow: -1px 1px 3px 1px rgb(139, 139, 139); */
}

.add-project-form * label {
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.add-project-form .row>div {
    margin: 0.5rem 0px;
}

.add-project-form label::after {
    content: "*";
    position: absolute;
    right: -8px;
    top: -1px;
    color: red;
}



/* Styling projectFile page */

/* Style the tab */
.describe-project-information {
    display: flex;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#myBtn {
    display: none;
    content: "";
    position: fixed;
    bottom: 20px;
    right: 0.5rem;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--chartsColor);
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
}


/*����� ����� ���� �������� ����*/

.sub-container>div:nth-child(1),
.project-card-section,
.project-state-section p,
.project-progress-section>P,
.progress-content>div>p {
    background-color: #1A6795;
}

.new-project-btn {
    top: -20px;
}

.sub-container {
    margin: 1.5rem 0px;
}

.table-bordered tr:not(.pagination) td table tr:first-child {
    background-color: rgb(0, 140, 77, 0.24);
}



.pagination table td:hover {
    background-color: transparent !important;
}

.pagination table td:hover a {
    color: red !important;
    color: #008b4e !important;
}

.pagination table td a:hover {
    color: #fff !important;
    background-color: #259BFF !important;
    border-radius: 5px;
}



.btn-info {
    color: #fff !important;
}

.total-projects {
    font-weight: 700;
    color: #1A6795;
}

.total-projects__number {
    font-size: 30px;
}

.projects-status>a>div {
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-align: center;
    width: 105px;
    height: 105px;
}

.project-status_number {
    font-weight: 700;
    color: inherit;
    padding: 0px 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid;
}

.project-status_description {
    font-weight: 500;
}

.project-status__late {
    flex: 1;
    color: #FFC000;
    background-color: rgba(255, 192, 0, 0.14);
}

.project-status__as-plan {
    color: #358C3B;
    background-color: rgba(53, 140, 59, 0.14);
}

.project-status__stumbling {
    color: #C00000;
    background-color: rgba(192, 0, 0, 0.14);
}

.project-status__completed {
    color: rgb(22, 188, 55);
    background-color: rgba(22, 188, 55, 0.14);
}

.project-status__notStarted {
    color: rgb(110, 110, 110);
    background-color: rgba(110, 110, 110, 0.14);
}

.project-costs>div {
    color: #2C698D;
    background-color: #EEEEEE;
    border-radius: 0.5rem;
    padding: 0.5rem 0rem;
    font-weight: 700;
}

.project-costs_cost>span {
    font-weight: 400;
}

a.go-to-projects {
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: #2C698D;
    background-color: rgba(44, 105, 141, 0.13);
    transition: 0.2s;
    font-weight: 700;
}

a.go-to-projects:hover {
    background-color: rgba(44, 105, 141, 0.3);
}

.sub-container>div:nth-child(2) {
    max-height: none !important;
}

.tab-buttons {
    background-color: inherit !important;
    left: -10px;
    width: 100%;
    border: 0 !important;
}

.tab-buttons button {
    border-bottom: 0 !important;
    font-weight: 500;
    font-size: 16px;
}

.tab-buttons button.active {
    border: 0 !important;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.tab-buttons button:hover {
    background-color: #02ae63 !important;
    color: #fff !important;
    border: 0 !important;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.tab-buttons .tablinks {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-icon {
    padding: 0.5rem;
    border-radius: 50%;
    border: 1px solid;
    color: #008b4e;
    background-color: rgba(255, 255, 255, 0.78);
}

.project-details {
    background-image: linear-gradient(to bottom, #008b4e, #1a6795);
    border-radius: 0.5rem;
    padding: 1rem !important;
}

.tab-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-right: 1.5rem;
}

.tab-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 2rem;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.tabcontent-section.active {
    border: 0px !important;
    background-color: #fff;
    border-radius: 0.5rem !important;
    padding: 0.5rem;
}


/*.charts {
    position: relative;
    width: 200px;
}*/

.more-information__icon {
    background-color: rgba(0, 140, 77, 0.367);
    color: rgba(0, 140, 77, 1);
    width: fit-content;
    padding: 0.5rem;
    font-size: 18px;
    border-radius: 0.5rem;
}

.execConclusion-projectPhase__content .phase {
    background-color: #fff;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);
    border-radius: 0.5rem;
    text-align: center;
    padding: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.execConclusion-projectPhase__content .phase.active {
    color: #fff;
    background-color: #048756;
}

.project-information-section>p {
    border-radius: 0;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    background-image: none !important;
    background-color: rgb(255, 255, 255);
    /* color: rgb(0, 140, 77) !important;*/
    border-bottom: 1px solid rgb(0, 140, 77);
    margin: 0px;
    padding: 1rem !important;
}

.project-information-section {
    margin-top: 1rem;
    background-color: rgb(0, 140, 77);
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0.5rem !important;
    border-radius: 0.5rem;
}

.main-information {
    display: flex;
    background-color: rgb(255, 255, 255);
}

#execConclusion>div.execConclusion-progress>div.execConclusion-progress__content.row>div:nth-child(2)>div.execConclusion-progress__content-header {
    background-color: #008C4D;
}



/*������� ������*/

.more-information div hr {
    width: 100%;
    background-color: #008C4D;
    opacity: 1;
    height: 0.5px;
}

.date-section {
    display: flex;
    border-left: 1px solid #008C4D;
    padding: 1rem;
}

.report-header {
    margin-top: 5rem;
    position: relative;
    padding: 3rem 12rem 3rem 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background-image: linear-gradient(to right, #008b4e, #1a6795);
    border-radius: 0.5rem;
    color: #fff;
    font-size: 18px;
}

.report-header svg {
    margin-left: 0.5rem;
}

.report-header__name {
    font-weight: 700;
}

.report-header::before {
    position: absolute;
    content: '';
    width: 120px;
    height: 120px;
    border: 5px solid #1a6795;
    border-radius: 50%;
    z-index: 99;
    background-color: #fff;
    top: -37%;
    right: 2%;
}

.index-content,
.report-goals,
.amana-projects,
.introduction,
.conclusionStatus,
.riskAndBackUp,
.lateProject,
.recommendations,
.workProcess {
    padding-top: 0.5rem;
    border-radius: 0.5rem;
    background-image: linear-gradient(135deg, #008b4e, #1a6795);
}

.index-content__content,
.report-goals__content,
.amana-projects__content,
.introduction__content,
.conclusionStatus-content,
.riskAndBackUp-content,
.lateProject-content,
.recommendations-content,
.workProcess-content {
    background-color: #fff;
    border-radius: 0.4rem;
    padding: 2.5rem 1.9rem;
}

.conclusionStatus-content__container,
.riskAndBackUp-content__container,
.lateProject-content__container,
.recommendations-content__container,
.workProcess-content__container {
    border-radius: 0.5rem;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);
}

.conclusionStatus-content__container-content,
.riskAndBackUp-content__container-content,
.lateProject-content__container-content,
.recommendations-content__container-content,
.report-execConclusion {
    padding: 2rem;
}

.conclusionStatus-content__container-header,
.riskAndBackUp-content__container-header,
.lateProject-content__container-header,
.recommendations-content__container-header {
    background-color: #1A6795;
    border-radius: 0.5rem;
    padding: 1rem 15rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
}

.report-content__header {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
}


.index-content__content-index {
    border: 1px solid #1A6795;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 0.7rem;
    overflow: hidden;
}


.index-content__content-index>span:nth-child(1) {
    padding: 1rem;
    text-align: center;
    background-color: #1A6795;
    border-radius: 0.4rem;
    right: -1px;
    color: #fff;
}

.index-content__content-index>span:nth-child(2) {
    font-weight: 700;
    color: #1A6795;
}

.introduction__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2.5rem 6rem;
}

.introduction__content>div {
    border: 1px solid #008b4e;
    overflow: hidden;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
}

.introduction__content>div>div {
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: #1A6795;
    z-index: 999;
}

.introduction__content>div>p {
    padding: 1rem 1rem 1rem 0px;
    margin: 0;
}

.report-goals__content {
    padding: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.report-goals__content-card {
    width: calc(100% / 3.2);
    border-radius: 0.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(to right, #008b4e, #1a6795);
    padding: 3rem;
    height:220px;
}

.report-goals__content-card svg {
    width: fit-content;
    top: -80px;
    border-radius: 50%;
    padding: 1rem;
    font-size: 25px;
    border: 10px solid #fff;
    background-image: linear-gradient(to right, #008b4e, #1a6795);
    color: #fff;
}

.report-goals__content-card span {
    color: #FFF;
    text-align: center;
    margin-top: -50px;
}

.amana-projects__content {
    padding: 3.5rem 2.5rem;
}

.amana-projects__content-card {
    background-color: #fff;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);
    border-radius: 0.5rem;
}

.amana-projects__content-card__title {
    background-color: #1a6795;
    color: #fff;
    font-weight: 700;
    border-radius: 0.5rem;
    display: flex;
    padding: 1rem;
    justify-content: center;
    align-items: center;
}

.amana-projects__content-card__content {
    padding: 2rem;
}



.conclusionStatus-content__header-status,
.riskAndBackUp-content__header-status,
.lateProject-content__header-status {
    background-color: #FFF;
    border-radius: 0.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0.5rem;
}

.conclusionStatus-content__header-status>div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.conclusionStatus-content__header-status__text {
    color: #1A6795;
}

.conclusionStatus-content__header-status__number {
    padding: 0.3rem 0.5rem;
    height: fit-content;
    border-radius: 0.5rem;
    border: 1px solid;
    font-weight: 700;
}

.conclusionStatus-content__header-status>div.asPlan {
    color: #96D257;
}

.conclusionStatus-content__header-status>div.stumbling {
    color: #EA0706;
}

.conclusionStatus-content__header-status>div.late {
    color: #FFCE38;
}

.conclusionStatus-content__table-container,
.riskAndBackUp-content__table-container,
.recommendations-content__table-container {
    border-radius: 0.5rem;
    border: 1px solid;
}

.conclusionStatus-content__table-container .table,
.riskAndBackUp-content__table-container .table,
.recommendations-content__table-container .table {
    margin: 0;
    table-layout: fixed;
}

.conclusionStatus-content__table-container .table thead,
.riskAndBackUp-content__table-container .table thead,
.recommendations-content__table-container .table thead {
    border-bottom: 0.3px solid #707070;
}

.conclusionStatus-content__table-container .table thead th,
.riskAndBackUp-content__table-container .table thead th,
.recommendations-content__table-container .table thead th {
    color: #008C4D;
    font-weight: 700;
    border-left: 0.3px solid #707070 !important;
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    text-align: center;
}

.conclusionStatus-content__table-container .table thead th:first-child,
.riskAndBackUp-content__table-container .table thead th:first-child,
.recommendations-content__table-container .table thead th:first-child {
    width: 50px;
}

.conclusionStatus-content__table-container .table thead th:nth-child(2) {
    text-align: start !important;
    padding-right: 2rem;
    width: 500px;
}

.conclusionStatus-content__table-container .table th:last-child {
    border-left: 0 !important;
    width: 290px;
}

.riskAndBackUp-content__table-container .table thead th:last-child,
.recommendations-content__table-container .table thead th:last-child {
    border-left: 0 !important;
}

.conclusionStatus-content__table-container .table th svg,
.riskAndBackUp-content__table-container .table thead th svg,
.recommendations-content__table-container .table thead th svg {
    position: absolute;
    top: -24px;
    font-size: 28px;
    background-color: #fff;
    border: 1px solid #1A6795;
    padding: 0.5rem;
    width: fit-content;
    border-radius: 50%;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.conclusionStatus-content__table-container .table td,
.riskAndBackUp-content__table-container .table td,
.recommendations-content__table-container .table td {
    border-left: 0.3px solid #707070;
    text-align: center;
    padding: 0.5rem;
    vertical-align: middle;
}

.conclusionStatus-content__table-container .table tr,
.riskAndBackUp-content__table-container .table tr,
.recommendations-content__table-container .table tr {
    border-bottom: 0.3px solid #707070;
}

.conclusionStatus-content__table-container .table tr:last-child,
.riskAndBackUp-content__table-container .table tr:last-child,
.recommendations-content__table-container .table tr:last-child {
    border: 0;
}

.conclusionStatus-content__table-container .table td:last-child,
.riskAndBackUp-content__table-container .table td:last-child,
.recommendations-content__table-container .table td:last-child {
    border-left: none;
    border-right: 0.3px solid #707070;
}

.conclusionStatus-content__table-container .table td:nth-child(2) {
    text-align: start;
}

.conclusionStatus-content__table-container .table td:nth-child(4) {
    border-left: 0px;
}

.status-td {
    display: flex;
    align-items: center;
    padding-right: 2rem !important;
    gap: 10px;
}

.status-td.asPlan div {
    background-color: #96D257;
}

.status-td.stumbling div {
    background-color: #cc0000;
}

.status-td.late div {
    background-color: #FFCE38;
}

.status-td>div {
    width: 14px;
    height: 14px;
    background-color: #000;
    border-radius: 0.25rem;
}

.conclusionStatus-content__table-container .table .charts {
    width: 80px;
    margin: auto;
}

.conclusionStatus-content__table-container .table .table-chart-value {
    font-size: 13px;
    font-weight: 700;
}

.riskAndBackUp-content__header-status__box,
.status__box,
.lateProject-content__header-status__box {
    width: 14px;
    height: 14px;
    border-radius: 0.25rem;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.11);
}

.riskAndBackUp-content__header-status__text {
    color: #000;
}

.riskAndBackUp-content__header-status>div,
.lateProject-content__header-status>div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status__box {
    margin: auto;
}

.high .riskAndBackUp-content__header-status__box,
.status__box.high {
    background-color: #FFC000;
}

.mid .riskAndBackUp-content__header-status__box,
.status__box.mid {
    background-color: #FFFF00;
}

.low .riskAndBackUp-content__header-status__box,
.status__box.low {
    background-color: #92D050;
}

.urgent .riskAndBackUp-content__header-status__box,
.status__box.urgent {
    background-color: #C00000;
}

.riskAndBackUp-content__table-container .table th:nth-child(3),
.riskAndBackUp-content__table-container .table th:nth-child(2) {
    width: 300px;
}

.table th:nth-child(2) {
    text-align: start !important;
    padding-right: 2rem;
}

.table th:nth-child(2) svg {
    margin-left: unset !important;
    margin-right: unset !important;
    left: 0 !important;
    right: 35px !important;
    text-align: start !important;
}

.lateProject-content__header-status__text {
    color: #000;
}

.notStarted .lateProject-content__header-status__box {
    background-color: #C7C7C7;
}

.late .lateProject-content__header-status__box {
    background-color: #FFC000;
}

.asPlan .lateProject-content__header-status__box {
    background-color: #358C3B;
}

.stumbling .lateProject-content__header-status__box {
    background-color: #C00000;
}

.lateProject-content__container-content__box {
    background-color: #29AA96;
    border-radius: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
}

.lateProject-content__container-content__box .number {
    color: #fff;
    padding-left: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lateProject-content__container-content__box .content {
    background-color: #fff;
    border-radius: 0.4rem;
    width: 100%;
    border: 1px solid #29AA96;
}

.orange-box {
    background-color: #FFC000;
    width: 14px;
    height: 14px;
    border-radius: 0.25rem;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.11);
}

.lateProject-content__container-content .charts {
    width: 60px !important;
}

.lateProject-content__container-content .table-chart-value {
    font-size: 12px;
}

.lateProject-content__container-content .title {
    color: #008C4D;
    font-weight: 700;
}

.lateProject-content__container-content__box .content>div>div {
    padding: 1rem 1rem 0.5rem 0rem;
    border-left: 0.3px solid #29AA96;
}

.lateProject-content__container-content__box .content>div>div:last-child {
    border-left: 0px;
}

.lateProject-content__container-content__box .content>div {
    border-bottom: 0.3px solid #29AA96;
}

.lateProject-content__container-content__box .content>div:last-child {
    border-bottom: 0px;
}

.lateProject-content__container-content__box .content>div>div ul {
    list-style: circle;
    padding-right: 1rem;
    padding-left: 0px;
}

.recommendations-content__container-content>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.recommendations-content__container-content>div:nth-child(1)>div>div:nth-child(1) {
    color: #2C698D;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 0.8rem;
}

.recommendations-content__container-content>div:nth-child(1)>div>div:nth-child(2) {
    border-radius: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #2C698D;
    border-right: 5px solid #2C698D;
}

.recommendations-content__container-content>div:nth-child(1)>div:nth-child(3)>div:nth-child(2) {
    color: #707070;
}

.recommendations-content__container-content>div:nth-child(1)>div:nth-child(3)>div:nth-child(2) ul {
    list-style: none;
}

.report-execConclusion-projectPhase {
    box-shadow: none;
}

.updates,
.outputStatus,
.backupNeeded {
    padding: 2rem;
}

.updates-title,
.outputStatus-title,
.backupNeeded-title {
    color: #1A6795;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
}

.updates-table-container,
.outputStatus-title-table-container,
.backupNeeded-title-table-container {
    border-radius: 0.5rem;
    border: 0.3px solid #707070;
}

.updates-table-container .table,
.outputStatus-title-table-container .table,
.backupNeeded-title-table-container .table {
    margin: 0;
    table-layout: fixed;
}

.updates-table-container .table thead,
.outputStatus-title-table-container .table thead,
.backupNeeded-title-table-container .table thead {
    border-bottom: 0.3px solid #707070;
}

.updates-table-container .table thead th,
.outputStatus-title-table-container .table th,
.backupNeeded-title-table-container .table th {
    border-left: 0.3px solid #707070 !important;
    color: #008C4D;
    vertical-align: middle;
}

.updates-table-container .table thead th:first-child,
.outputStatus-title-table-container .table th:first-child,
.backupNeeded-title-table-container .table th:first-child {
    width: 30px;
}

.updates-table-container .table thead th:last-child,
.outputStatus-title-table-container .table thead th:last-child,
.backupNeeded-title-table-container .table thead th:last-child {
    border-left: 0 !important;
}

.updates-table-container .table tbody td,
.outputStatus-title-table-container .table tbody td,
.backupNeeded-title-table-container .table tbody td {
    border-left: 0.3px solid #707070;
    padding: 1rem;
}

.updates-table-container .table tbody td:last-child,
.outputStatus-title-table-container .table td:last-child,
.backupNeeded-title-table-container .table tbody td:last-child {
    border-left: 0;
}

.updates-table-container .table tbody tr,
.outputStatus-title-table-container .table table tr,
.backupNeeded-title-table-container .table tbody tr {
    border-bottom: 0.3px solid #707070;
}

.updates-table-container .table tbody tr:last-child,
.outputStatus-title-table-container .table table tr:last-child,
.backupNeeded-title-table-container .table tbody tr:last-child {
    border-bottom: 0px;
}

.outputStatus-title-table-container .table th:nth-child(2) {
    padding: 0.5rem !important;
    text-align: center !important;
}

.updates-table-container .table thead th:nth-child(2) {
    width: 50%;
}

.nav-link,
a {
    color: #707070;
}

.report-content>* {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
}

.describe-project-information,
.employee-file {
    display: flex;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.tab {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: -0.5rem;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    border-bottom: 1px solid #fff;
}

.tab button:last-child {
    border-bottom: none;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #1e72a3;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #f6f6f6;
    color: var(--primary-color);
}

.tabcontent-section {
    width: 100%;
    flex: 1;
}

.tabcontent-section.active {
    border: 1px solid var(--primary-color);
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-right: none;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
}

.tabcontent-section>div>div>.row>div>input {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
    outline-color: var(--primary-color) !important;
}

.tabcontent-section>div>div>.row>div>label::after {
    content: "*";
    position: absolute;
    right: -8px;
    top: -1px;
    color: red;
}

.tabcontent-section>div>div>.row>div>label {
    font-weight: 500;
}

.tabcontent-section>div>div>.row>div {
    margin: 0.5rem 0px;
}

.tabcontent-section div textarea {
    min-width: 100%;
}

@media (min-width: 768px) and (max-width: 1000px) {
    .tabcontent-section form {
        font-size: 14px;
    }
}

@media (max-width:767px) {
    .describe-project-information {
        flex-direction: column;
    }

    .tab {
        flex-direction: row;
        overflow-x: auto;
        border-bottom-right-radius: 0rem;
        border-top-left-radius: 0.5rem;
    }

    .tab::-webkit-scrollbar {
        height: 3px;
    }

    .w-80vw {
        width: 80vw;
    }

    .tab button {
        border-bottom: none;
        border-left: 1px solid #ccc;
    }

    .tabcontent-section.active {
        border-bottom-right-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        border-top-left-radius: 0rem;
        border-top: 0rem;
        border-right: 1px solid var(--primary-color);
    }
}



.sub-container>div:nth-child(1),
.project-card-section,
.project-state-section p,
.project-progress-section>P,
.progress-content>div>p {
    background-color: #1a6795;
}

.sub-container-cards>div:nth-child(1) {
    background-color: #1a6795;
}

.total-projects {
    font-weight: 700;
    color: #1A6795;
}

.total-projects__number {
    font-size: 30px;
}

.projects-status>div {
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-align: center;
}

.project-status_number {
    font-weight: 700;
    color: inherit;
    padding: 0px 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid;
}

.project-status_description {
    font-weight: 500;
}

.project-status__late {
    flex: 1;
    color: #FFC000;
    background-color: rgba(255, 192, 0, 0.14);
}

.project-status__as-plan {
    color: #358C3B;
    background-color: rgba(53, 140, 59, 0.14);
}

.project-status__stumbling {
    color: #C00000;
    background-color: rgba(192, 0, 0, 0.14);
}

.project-status__completed {
    color: rgb(22, 188, 55);
    background-color: rgba(22, 188, 55, 0.14);
}

.project-status__notStarted {
    color: rgb(110, 110, 110);
    background-color: rgba(110, 110, 110, 0.14);
}

.project-costs>div {
    color: #2C698D;
    background-color: #EEEEEE;
    border-radius: 0.5rem;
    padding: 0.5rem 0rem;
    font-weight: 700;
}

.project-costs_cost>span {
    font-weight: 400;
}

a.go-to-projects {
    border-radius: 0.5rem;
    padding: 0.5rem;
    color: #2C698D;
    background-color: rgba(44, 105, 141, 0.13);
    transition: 0.2s;
    font-weight: 700;
}

a.go-to-projects:hover {
    background-color: rgba(44, 105, 141, 0.3);
}

.sub-container>div:nth-child(2) {
    max-height: none !important;
}

.tab-buttons {
    background-color: inherit !important;
    left: -10px;
    width: 100%;
    border: 0 !important;
}

.tab-buttons button {
    border-bottom: 0 !important;
    font-weight: 500;
    font-size: 16px;
}

.tab-buttons button.active {
    border: 0 !important;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.tab-buttons button:hover {
    background-color: #02ae63 !important;
    color: #fff !important;
    border: 0 !important;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

.tab-buttons .tablinks {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-icon {
    padding: 0.5rem;
    border-radius: 50%;
    border: 1px solid;
    color: #008b4e;
    background-color: rgba(255, 255, 255, 0.78);
}

.project-details,
.employee-file {
    background-image: linear-gradient(to bottom, #008b4e, #1a6795);
    border-radius: 0.5rem;
    padding: 1rem !important;
}

.employee-file {
    background-image: none;
    background-color: #1a6795;
}

.tab-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-right: 1.5rem;
}

.tab-title {
    width: 90%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 2rem;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.tabcontent-section.active {
    border: 0px !important;
    background-color: #fff;
    border-radius: 0.5rem !important;
    padding: 0.5rem;
}

.generalInfo__description {
    border: 1px solid #008b4e;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.08);
    font-weight: 500;
    flex: 1;
}

.generalInfo__label {
    font-weight: 500;
}

/*.charts {
    position: relative;
    width: 200px;
}*/

.chart-value {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    font-size: 30px;
    z-index: 999999999999999;
    color: #008b4e;
    margin: 0 !important;
}

.technicalInfo-chart,
.financialInfo-chart {
    position: absolute;
    border: 1px solid #008b4e;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 1rem;
    top: -35%;
    width: fit-content;
    background-color: #fff;
}

#technicalInfo,
#financialInfo {
    padding: 2rem;
    margin-top: 8rem;
}

.technicalInfo-content,
.financialInfo-content {
    position: relative;
    border: 1px solid #008b4e;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.technicalInfo-statistics,
.financialInfo-report {
    width: 100%;
    padding: 8rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.financialInfo-report {
    padding: 8rem 2rem 0rem;
}

.progress-bars>div {
    border: 0px !important;
    gap: 5rem;
}

.bar {
    background-color: rgb(41, 170, 150);
}

.progress {
    border-radius: 0.5rem;
    justify-content: end;
}

.progress-value {
    color: rgb(41, 170, 150);
    font-weight: 500;
}

.progress-title {
    color: rgb(41, 170, 150);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.financialInfo-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.financialInfo-report>div {
    display: flex;
}

.financialInfo-report__number {
    border-radius: 0.5rem;
    padding: 0.2rem 1rem;
    font-weight: 700;
    background-color: rgba(41, 170, 150, 0.11);
    color: rgb(41, 170, 150);
}

.financialInfo-expenses {
    border-collapse: separate;
    border-spacing: 0px 0.85rem;
}

.financialInfo-expenses td {
    width: fit-content;
}

.financialInfo-expenses td:nth-child(1) {
    color: rgb(41, 170, 150);
    font-weight: 700;
}

.financialInfo-expenses td:nth-child(2) {
    text-align: center;
}

.financialInfo-expenses td:nth-child(3) {
    text-align: end;
}

/* .svg-inline--fa .fa-primary {
    fill: var(--fa-primary-color,#008C4D);
    opacity: var(--fa-primary-opacity,1);
} */
.table> :not(caption)>*>* {
    border-bottom-width: 0px;
}

.projectRequests__container {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    flex-wrap: wrap;
}

.projectRequests__link,
.addNewRisk {
    background-color: #29AA96;
    border-radius: 0.5rem;
    color: #fff;
    transition: 0.2s;
    display: flex;
    width: 14rem;
}

.addNewRisk {
    transition: 0.25s;
    align-items: center;
    width: 100%;
    background-color: transparent;
    background-image: linear-gradient(to left, #29AA96, rgba(223, 158, 19, 0.6), rgba(223, 158, 19, 0));
}

.addNewRisk:hover {
    color: #fff;
    box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.3);
}

.projectRequests__link:hover {
    color: #fff;
    background-color: #2cbca7;
}

.projectRequests__link span {
    padding: 0.5rem;
}

.projectRequests__icon {
    padding: 0.8rem;
    background-color: #2cbca7;
    box-shadow: -2px 3px 6px 0 rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    right: -10px;
}

.riskHistory-table__container {
    border: 0.3px solid #707070;
    border-radius: 0.5rem;
    margin-top: 2rem;
}

.riskHistory-table {
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 0px !important;
}

.riskHistory-table .tab-icon {
    position: absolute;
    top: -20px;
    background-color: rgba(255, 255, 255, 1);
    ;
}

.riskHistory-table thead th {
    color: #008b4e;
    padding: 1rem;
}

.riskHistory-table> :not(:last-child)> :last-child>* {
    border-right: 0.3px solid #707070;
    border-bottom: 0.3px solid #707070;
}

.riskHistory-table thead th:first-child {
    width: 7rem;
    border-right: 0px !important;
}

.riskHistory-table tbody tr {
    border-bottom: 0.3px solid #707070;
}

.riskHistory-table tbody tr:last-child {
    border-bottom: 0px;
}

.riskHistory-table tbody td {
    border-right: 0.3px solid #707070;
}

.riskHistory-table tbody td:first-child {
    border-right: 0px;
}

.riskHistory-table tbody td.red {
    background-color: #C00000 !important;
    color: #fff;
}

.riskHistory-table tbody td.yellow {
    background-color: #FFFF00 !important;
}

.riskHistory-table tbody td.green {
    background-color: #92D050 !important;
}

.riskHistory-table tbody td.orange {
    background-color: #FFC000 !important;
}

.changeRequests-table tbody td {
    font-weight: 700;
    font-size: 15px;
}

.changeRequests-table tbody td:last-child {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

#documentLibrary .tab-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 0.5rem !important;
}

#documentLibrary .tab-buttons button {
    color: #028953;
    border: 1px solid #028953 !important;
    border-left: 0px !important;
}

#documentLibrary .tab-buttons button:first-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#documentLibrary .tab-buttons button:last-child,
#documentLibrary .tab-buttons button:last-child:hover {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-left: 1px solid #028953 !important;
}

#documentLibrary .tab-buttons button:hover {
    border-radius: 0px;
    border: 1px solid #028953 !important;
    border-left: 0px !important;
}

#documentLibrary .tab-buttons button.active {
    border-radius: 0px !important;
    background-color: #028953;
    color: #fff !important;
    border: 1px solid #028953 !important;
    border-left: 0px !important;
}

.tabSubcontent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    display: none;
}

.contracts-container>a {
    text-decoration: none;
    padding: 2rem;
    border-radius: 0.5rem;
    color: #038756;
    font-weight: 500;
    background-color: rgba(0, 140, 77, 0.17);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
    transition: 0.4s;
}

.contracts-container>a:hover {
    font-size: 18px !important;
    transform: scale(1.05);
    box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.17);
}

.more-information__state {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

.more-information__state.as-plan {
    background-color: rgba(53, 140, 59, 0.14);
}

.more-information__state.late {
    background-color: rgba(255, 191, 0, 0.14);
}

.more-information__state.stumbling {
    background-color: rgba(192, 0, 0, 0.14);
}

.more-information__state.notStarted {
    background-color: rgb(217, 217, 217);
}

.more-information__state.completed {
    background-color: rgba(22, 188, 55, 0.14);
}

.more-information__state.as-plan .fa-circle {
    color: #358C3B;
}

.more-information__state.late .fa-circle {
    color: rgba(255, 191, 0, 1);
}

.more-information__state.stumbling .fa-circle {
    color: rgba(192, 0, 0, 1);
}

.more-information__state.notStarted .fa-circle {
    color: #6E6E6E;
}

.more-information__state.completed .fa-circle {
    color: rgba(22, 188, 55, 1);
}

.execConclusion-status_text {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

.execConclusion-status_text.as-plan {
    color: rgba(53, 140, 59, 1);
    background-color: rgba(53, 140, 59, 0.14);
}

.execConclusion-status_text.notStarted {
    color: #6E6E6E;
    background-color: rgb(217, 217, 217);
}

.execConclusion-status_text.completed {
    color: rgba(22, 188, 55, 1);
    background-color: rgba(22, 188, 55, 0.14);
}

.execConclusion-status_text.stubling {
    color: rgba(192, 0, 0, 1);
    background-color: rgba(192, 0, 0, 0.14);
}

.execConclusion-status_text.late {
    color: rgba(255, 191, 0, 1);
    background-color: rgba(255, 191, 0, 0.14);
}

.execConclusion-header {
    padding: 1rem 0px;
    border-radius: 0.5rem;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.execConclusion-header_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    color: #1A6795;
}

.execConclusion-header_title .fa-chart-simple {
    padding: 0.5rem;
    background-color: rgba(4, 135, 87, 0.16);
    border-radius: 0.5rem;
}

.execConclusion-progress {
    margin: 2rem 0px;
    padding: 0.4rem;
    border-radius: 0.5rem;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);
}

.execConclusion-progress__header {
    background-color: #1A6795;
    padding: 0.8rem;
    text-align: center;
    font-size: 18px;
    border-radius: 0.5rem;
    color: #fff;
}

#execConclusion>div.execConclusion-progress>div.execConclusion-progress__content.row>div:nth-child(2)>div.execConclusion-progress__content-header {
    background-color: #048756;
}

.execConclusion-progress__content-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #1A6795;
}

.execConclusion-progress__content-header svg {
    font-size: 18px;
}

.execConclusion-projectPhase {
   /* padding: 0.8rem;*/
    border-radius: 0.5rem;
    /*box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);*/
}

.execConclusion-projectPhase__header {
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: #1A6795;
    color: #fff;
}

.execConclusion-projectPhase__content {
    margin: 0.8rem 0px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #F2F2F2;
}

.execConclusion-projectPhase__content {
    display: flex;
    gap: 10px;
}

.execConclusion-projectPhase__content>div {
    width: calc(100%/2);
}

.execConclusion-projectPhase__phase-nested {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0.5rem;
}

.execConclusion-projectPhase__phase-nested>div {
    height: 100%;
}

.execConclusion-projectPhase__phase-two .execConclusion-projectPhase__phase-nested>.phase:nth-child(2) {
    width: 170px;
}

.execConclusion-projectPhase__phase-three .execConclusion-projectPhase__phase-nested>.phase:nth-child(4) {
    width: 145px;
}

.execConclusion-projectPhase__content>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.execConclusion-projectPhase__phase-three .execConclusion-projectPhase__phase-nested .phase:nth-child(5),
.execConclusion-projectPhase__phase-three .execConclusion-projectPhase__phase-nested .phase:last-child {
    height: 55px;
}

.execConclusion-progress__content-statistics {
    margin-top: 3.5rem !important;
    background-color: #F2F2F2;
    border-radius: 0.5rem;
    position: relative;
}

.execConclusion-progress__content-statistics .charts {
    position: relative;
    width: 150px;
    margin: 0 auto !important;
    background-color: #fff;
    border: 1px solid #008b4e;
    border-radius: 50%;
    top: -50px !important;
}

.execConclusion-progress__content-statistics .charts .chart-value {
    font-size: 20px;
}

.execConclusion-progress__content-statistics .charts canvas {
    padding: 0.5rem;
}

.execConclusion-progress__content-info {
    padding: 0rem 0.5rem 0px 0.5rem;
    gap: 10px;
}

.execConclusion-progress__content-subInfo {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    gap: 5px;
    color: #048756;
}

.execConclusion-progress__content-subInfo>span {
    font-weight: 700;
}

.execConclusion-progress__content-subInfo>div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.execConclusion-progress__content-subInfo>div>span:nth-child(1) {
    padding: 0.2rem;
    text-align: center;
    border-radius: 0.5rem;
    background-color: rgba(4, 135, 87, 0.16);
}

.execConclusion-progress__content-subInfo>div>span:nth-child(2) {
    color: #000;
}

.execConclusion-progress__content-subInfo svg {
    font-size: 20px;
    width: fit-content;
    padding: 0.3rem;
    border: 1px solid #008b4e;
    border-radius: 50%;
}

.date-div {
    color: #008b4e;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 90%;
    position: relative;
}

.date-div>div {
    position: absolute;
    content: "";
    height: 100%;
    width: 2px;
    background-color: rgba(0, 140, 77, 0.088);
}

.total-projects-header {
    background-color: #fff;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
}

.total-projects-content {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 20px;
    font-weight: 700;
    padding: 1rem 3rem;
    border-radius: 0.5rem;
    background-color: rgba(26, 103, 149, 0.11);
    color: #1A6795;
    font-size: 22px;
}

.total-projects-content .fa-calendar-lines-pen {
    font-size: 40px;
}

.total-project-status {
    background-color: #fff;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-project-status .status {
    width: fit-content;
    border-radius: 0.5rem;
    overflow: hidden;
}

.total-project-status .status .status-number {
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #fff;
    background-color: inherit;
}

.total-project-status .status .status-title {
    padding: 0.5rem 1rem 0.5rem 2rem;
    background-color: #fff !important;
    color: #6E6E6E;
}

.total-project-status .status.green {
    border: 1px solid #16BC37;
    background-color: #16BC37;
}

.total-project-status .status.grey {
    border: 1px solid #d9d9d9;
    background-color: #d9d9d9;
}

.total-project-status .status.darkGreen {
    border: 1px solid #358C3B;
    background-color: #358C3B;
}

.total-project-status .status.purple {
    border: 1px solid #7C3BC6;
    background-color: #7C3BC6;
}

.total-project-status .status.gold {
    border: 1px solid #FFC000;
    background-color: #FFC000;
}

.total-project-status .status.red {
    border: 1px solid #C00000;
    background-color: #C00000;
}

.sub-container-cards2__container {
    padding: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    padding-top: 0.5rem;
    padding-left: 1px;
    padding-right: 1px;
    padding-bottom: 1px;
    box-shadow: 0px 4px 15px 0 rgba(0, 0, 0, 0.10);
}

.sub-container-cards2__container.status_4 {
    background-color: #FFC000;
}

.sub-container-cards2__container.status_2 {
    background-color: #16BC37;
}

    .sub-container-cards2__container.status_3 {
        background-color: #358C3B;
    }

    .sub-container-cards2__container.status_5 {
        background-color: #C00000;
    }

    .sub-container-cards2__container.status_1 {
        background-color: #D9D9D9;
    }

.sub-container-cards2__container.purple {
    background-color: #7C3BC6;
}

.sub-container-cards2 {
    background-color: #FFF;
}

.sub-container-cards2>div:nth-child(1) {
    background-color: #fff !important;
    font-weight: 700;
    color: #303030 !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.sub-container-content {
    padding: 0.5rem;
}

.sub-container-cards2__container.gold .sub-container-cards2>div:nth-child(1) {
    border-bottom: 0.3px solid #FFC000;
}

.sub-container-cards2__container.purple .sub-container-cards2>div:nth-child(1) {
    border-bottom: 0.3px solid #7C3BC6;
}

.sub-container-cards2__container.red .sub-container-cards2>div:nth-child(1) {
    border-bottom: 0.3px solid #C00000;
}

.sub-container-cards2__container.green .sub-container-cards2>div:nth-child(1) {
    border-bottom: 0.3px solid #16BC37;
}

.sub-container-cards2__container.darkGreen .sub-container-cards2>div:nth-child(1) {
    border-bottom: 0.3px solid #358C3B;
}

.sub-container-cards2__container.grey .sub-container-cards2>div:nth-child(1) {
    border-bottom: 0.3px solid #D9D9D9;
}

.sub-container-cards2__container.gold .sub-container-content {
    border-bottom: 0.3px solid #FFC000;
    border-left: 0.3px solid #FFC000;
}

.sub-container-cards2__container.purple .sub-container-content {
    border-bottom: 0.3px solid #7C3BC6;
    border-left: 0.3px solid #7C3BC6;
}

.sub-container-cards2__container.red .sub-container-content {
    border-bottom: 0.3px solid #C00000;
    border-left: 0.3px solid #C00000;
}

.sub-container-cards2__container.green .sub-container-content {
    border-bottom: 0.3px solid #16BC37;
    border-left: 0.3px solid #16BC37;
}

.sub-container-cards2__container.darkGreen .sub-container-content {
    border-bottom: 0.3px solid #358C3B;
    border-left: 0.3px solid #358C3B;
}

.sub-container-cards2__container.grey .sub-container-content {
    border-bottom: 0.3px solid #D9D9D9;
    border-left: 0.3px solid #D9D9D9;
}

.sub-container-cards2__container .sub-container-content:last-child {
    border-bottom: 0px;
}

.sub-container-cards2 .charts {
    margin: 0 auto;
    width: 150px;
}

.sub-container-cards2__container.gold .dashboard-chart-value {
    color: #FFC000;
}

.sub-container-cards2__container.purple .dashboard-chart-value {
    color: #7C3BC6;
}

.sub-container-cards2__container.green .dashboard-chart-value {
    color: #16BC37;
}

.sub-container-cards2__container.red .dashboard-chart-value {
    color: #C00000;
}

.sub-container-cards2__container.grey .dashboard-chart-value {
    color: #b3b1b1;
}

.sub-container-cards2>div:nth-child(2)>div:nth-child(1) {
    width: 50%;
}

.dashboard-chart-value {
    font-size: 16px;
}

@media (max-width: 768px) {

    .technicalInfo-statistics,
    .financialInfo-report {
        padding: 5rem 0rem 1rem;
    }

    .progress-bars>div {
        flex-direction: column;
        gap: 8px;
        width: 100% !important;
    }

    .charts {
        width: 100px;
    }

    .chart-value {
        font-size: 16px;
    }

    .technicalInfo-chart {
        top: -15%;
        padding: 0.5rem;
    }

    .financialInfo-chart {
        top: -12%;
    }


    .tab-container {
        padding-right: 0px;
        padding-left: 0.5rem;
    }

    #technicalInfo,
    #financialInfo {
        padding: 0;
        margin-top: 4rem;
    }

    .res-table thead {
        display: none;
    }

    .res-table,
    .res-table tbody,
    .res-table tr,
    .res-table td {
        display: block;
        width: 100%;
        font-size: 14px;
    }

    .res-table td {
        display: flex;
        justify-content: center;
        position: relative;
        text-align: center;
        /* border-bottom: 1px solid #707070 !important; */
    }

    .res-table tr:nth-child(even) {
        background-color: #efefef;
    }

    .res-table td {
        border-left: none;
    }

    .emp-report-table .table-container .table td {
        border-left: 0px !important;
    }

    .riskHistory-table td {
        padding-left: 50%;
        text-align: left;
        position: relative;
        text-align: center;
        border-right: 0px !important;
        border-bottom: 1px solid #707070 !important;
    }

    .riskHistory-table td::after {
        content: attr(aria-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-size: 14px;
        font-weight: bold;
        text-align: left;
    }

    .riskHistory-table tr:nth-child(even) {
        background-color: #ccc !important;
    }

    .financialInfo-expenses td:nth-child(3) {
        text-align: center;
    }

    .date-div {
        gap: 20px;
    }

    .tab-buttons button.active {
        border-top-right-radius: 40px;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 0px;
    }

    .execConclusion-projectPhase__content {
        flex-direction: column;
        gap: 30px;
        padding: 1rem;
    }

    .execConclusion-projectPhase__phase-nested {
        flex-direction: column;
    }

    .execConclusion-projectPhase__phase-nested>div {
        width: 100%;
    }

    .execConclusion-projectPhase__content>div,
    .execConclusion-projectPhase__phase-three .execConclusion-projectPhase__phase-nested>.phase:nth-child(4),
    .execConclusion-projectPhase__phase-two .execConclusion-projectPhase__phase-nested>.phase:nth-child(2) {
        width: 100%;
    }

    .execConclusion-projectPhase__phase-title {
        background-color: #6E6E6E !important;
        color: #fff;
        margin-bottom: 0.3rem;
    }

    .execConclusion-projectPhase__phase-three .execConclusion-projectPhase__phase-nested .phase:nth-child(5),
    .execConclusion-projectPhase__phase-three .execConclusion-projectPhase__phase-nested .phase:last-child {
        height: initial;
    }

    .execConclusion-progress__content-statistics .charts {
        width: 100px;
    }

    .execConclusion-progress__content-statistics .charts .chart-value {
        font-size: 15px;
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*input[type=number] {
    -moz-appearance: textfield;
}*/

.accordion-button::after {
    margin-left: 0 !important;
    margin-inline-start: auto;
    color: #979797;
    background-image: url('/assets/v2/imgs/chevron-down-solid.svg');
}

.accordion-header {
    border-bottom: 0.3px solid #E8E8E8;
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: initial;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('/assets/v2/imgs/chevron-down-solid.svg');
    transform: rotate(-180deg);
}

.accordion-button:focus {
    box-shadow: none;
}

#BtnSupJop {
    border: 1px solid #1A6795 !important;
    background-color: transparent !important;
    color: #1A6795 !important;
}

#loadImg,
#removeImg {
    cursor: pointer;
    color: #238CAF;
}

.img-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-area {
    padding: 1rem 0;
    text-align: center;
    background-color: #F3F3F3;
    border-radius: 0.5rem;
    color: #707070;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.img-area * {
    margin: 0;
    width: fit-content;
}

.img-area svg {
    font-size: 70px;
}

.img-container>* {
    width: 70%;
}

.employee-info label {
    font-weight: 500;
}

.employee-info input {
    width: 100% !important;
}

.employee-file .tab-container .tab-buttons svg {
    padding: 0.5rem;
    border-radius: 50%;
    border: 1px solid;
    color: #1a6795;
    background-color: rgba(255, 255, 255, 0.78);
}

.employee-file .tab-container .tab-buttons .tablinks:hover {
    background-color: #1e89c7 !important;
}

.employee-file .tabcontent-section input,
.employee-file .tabcontent-section {
    width: 100%;
    margin: 0;
}

.employee-file .tabcontent-section select {
    color: #777;
    padding: 7px;
    border: 1px solid #C6C6C6;
    outline: none;
    border-radius: 5px;
    background-color: var(--input-color);
    outline-color: transparent;
    width: 100%;
}

.employee-file #execConclusion select option {
    color: #000;
}

.employee-file #execConclusion input[type='submit'] {
    width: fit-content;
    padding: 0.5rem 5rem;
}

#jobInfo .row>div.col-sm-12:first-child>div {
    gap: 50%;
}

@media (max-width : 768px) {
    .tab-container {
        overflow: hidden;
    }

    .employee-file {
        flex-direction: column;
    }

    .tab button {
        border-left: 0;
    }
}

/* Custom style for checkbox */
.employee-file input[type="checkbox"] {
    padding: 0.1rem !important;
    appearance: none !important;
    background-color: #fff !important;
    margin: 0 !important;
    font: inherit !important;
    color: currentColor !important;
    border: 0.15em solid #1a6795 !important;
    border-radius: 0.15em !important;
    transform: translateY(-0.075em) !important;
    display: grid !important;
    place-content: center !important;
    width: fit-content !important;
    height: fit-content !important;
}

.employee-file input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    background-color: #1a6795;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.employee-file input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.employee-file input[type="checkbox"]:focus {
    outline-offset: max(2px, 0.15em);
}

.employee-file input[type="radio"] {
    -ms-transform: scale(1.5);
    /* IE 9 */
    -webkit-transform: scale(1.5);
    /* Chrome, Safari, Opera */
    transform: scale(1.5);
    margin-inline-end: 0.5rem !important;
}

.employee-file input[type='radio']:checked:after {
    width: 10px;
    height: 10px;
    border-radius: 15px;
    top: -6px;
    left: -2px;
    position: relative;
    background-color: #1A6795;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}

.employee-file input[type="radio"]+label {
    color: #999999 !important;
}

#ContentPlaceHolder1_UpdatePanel1>div>table td,
#ContentPlaceHolder1_UpdatePanel2>div>table td {
    padding: 0.5rem !important;
}

#ContentPlaceHolder1_UpdatePanel1>div>table td:nth-child(odd),
#ContentPlaceHolder1_UpdatePanel2>div>table td:nth-child(odd) {
    text-align: end;
}

#ContentPlaceHolder1_UpdatePanel1>div>table td input,
#ContentPlaceHolder1_UpdatePanel2>div>table td input {
    width: 100% !important;
}

#ContentPlaceHolder1_Allowance1_BtnAddallowance,
#ContentPlaceHolder1_Deduction1_BtnAddDeduction {
    border: 1px solid #1A6795 !important;
    color: #1A6795 !important;
    background-color: transparent !important;
}

#ContentPlaceHolder1_UpdatePanel10>div>div.col-sm-12.d-flex.justify-content-end.align-items-end.gap-3 input,
#ContentPlaceHolder1_btnSave_Attendance,
#ContentPlaceHolder1_btnsaveDependents {
    width: fit-content !important;
    padding-left: 2rem;
    padding-right: 2rem;
    border: 0 !important;
}

#ContentPlaceHolder1_UpdatePanel10>div>div.col-sm-12.d-flex.justify-content-end.align-items-end.gap-3 input:nth-child(2) {
    background-color: #E4D2D2 !important;
    color: #E23535 !important;
}

input[type="radio"]:checked+label {
    color: #1A6795 !important;
}

.grid-input {
    background-image: url('../assest/grid.svg');
    background-repeat: no-repeat;
    background-position: 1% 50%;
    background-size: 20px;
}

.borderd-btn {
    border: 1px solid #1A6795;
    color: #1A6795;
}

.emp-report-title {
    font-size: 22px;
    color: #1A6795;
}

.bordered-input {
    border-color: #1A6795;
}

.emp-report-table .table-container {
    border: 0.3px solid #707070;
    border-radius: 0.5rem;
}

.emp-report-table .table-container .table {
    border-collapse: collapse;
    column-width: auto;
    table-layout: fixed;
    margin: 0;
}

.emp-report-table .table-container .table thead {
    background-color: rgba(26, 103, 149, 0.13);
    color: #1a6795;
    border-bottom: 0.3px solid #707070;
}

.emp-report-table .table-container .table th:not(th:first-child) {
    text-align: center;
}

.emp-report-table .table-container .table th:not(th:last-child) {
    border-left: 0.3px solid #707070;
}

.emp-report-table .table-container .table td {
    padding: 0.5rem 1rem;
    vertical-align: middle;
}

.emp-report-table .table-container .table td:not(td:last-child) {
    border-left: 0.3px solid #707070;
}

.emp-report-table .table-container .table td:not(td:first-child) {
    text-align: center;
}

.emp-report-table .table-container .table .sumOfData {
    color: #1a6795;
    font-weight: 700;
}

.emp-report-table .table-container .table tr:not(tr:last-child) {
    border-bottom: 0.3px solid #707070;
}

.fa-trash {
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.7rem;
    color: #E23535;
    background-color: rgba(226, 53, 53, 0.1);
    transition: 0.3s;
}

.fa-trash:hover {
    transform: scale(1.1);
}

div.total-salary {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 20px;
    padding: 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    color: #DF9E13;
    background-color: rgba(223, 158, 19, 0.15);
}

.finish-btn {
    background-color: rgba(228, 210, 210, 1);
    color: #E23535;
}

#attachments>div>div {
    color: #1A6795;
    border: 1px solid #1A6795;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: 0.2s;
    font-weight: 700;
}

#attachments>div>div svg {
    padding: 0.5rem;
    font-size: 20px;
    border-radius: 0.5rem;
    transition: 0.2s;
}

#attachments>div>div:hover svg {
    color: #fff;
    background-color: #1a6795;
}

#attachments>div>div:hover {
    background-color: rgba(26, 103, 149, 0.2);
    border-color: #fff;
}

.tab-insights {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #fff;
}

.tab-insights .progress {
    justify-content: start;
    flex: 1;
}

.tab-insights .progress-bar {
    background-color: #58DD30 !important;
}

.tab-insights>div {
    align-items: center;
    display: flex;
    gap: 10px;
}

.applicant-header {
    border-radius: 0.5rem;
}

.applicant-tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.applicant-tab {
    position: relative;
    border-radius: 0.5rem;
    border: 0.3px solid currentColor;
    transition: 0.3s;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    width: 130px;
}

    .applicant-tab::after {
        position: absolute;
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        left: 39%;
        top: -15%;
        background-color: currentColor;
        background-image: url('../imgs/noun-employees-1510422.svg');
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 20px;
        padding: 0.5rem;
    }

    .applicant-tab:hover {
        transform: translateY(-1.5px);
        box-shadow: 0 0.5em 0.5em -0.4em rgb(0 0 0 / 50%);
    }

    .applicant-tab span:nth-child(1) {
        margin-top: 20px;
        font-weight: 600;
        font-size: 17px;
    }

    .applicant-tab span:nth-child(3) {
        border-radius: 0.5rem;
        color: #fff;
        padding: 0.1rem 0.5rem;
        width: 100%;
        text-align: center;
    }

        .applicant-tab span:nth-child(3)::after {
            content: '\203A';
            margin-inline-start: 0.5rem;
            color: #fff;
            font-weight: 600;
        }

.recruit-levels > button:first-child {
    border-radius: 0.5rem;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
}

.recruit-levels > button:nth-child(2) {
    border: 0.5rem;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    background-color: #2C698D !important;
}

    .recruit-levels > button:nth-child(2).show, .recruit-levels > button:nth-child(2):hover {
        background-color: #134968 !important;
    }

#experience_years_filter, #salary_filter {
    border: 0px;
}

.recruit-levels ul li {
    display: flex;
    transition: 0.2s;
}

    .recruit-levels ul li a {
        color: #2C698D;
        padding: 0.5rem;
        margin: 0px;
        display: flex;
        justify-content: start;
        width: 100%;
        height: 100%;
    }

    .recruit-levels ul li:hover {
        background-color: #eee;
    }

.applicant-tab.applicant1 {
    color: #2C698D;
}

.applicant-tab.applicant2 {
    color: #75930D;
}

.applicant-tab.applicant3 {
    color: #95601A;
}

.applicant-tab.applicant4 {
    color: #DF9E13;
}

.applicant-tab.applicant6 {
    color: #C90318;
}

.applicant-tab.applicant5 {
    color: #1A9522;
}

.applicant-tab.applicant1 span:nth-child(3) {
    background-color: #2C698D;
}

.applicant-tab.applicant2 span:nth-child(3) {
    background-color: #75930D;
}

.applicant-tab.applicant3 span:nth-child(3) {
    background-color: #95601A;
}

.applicant-tab.applicant4 span:nth-child(3) {
    background-color: #DF9E13;
}

.applicant-tab.applicant6 span:nth-child(3) {
    background-color: #C90318;
}

.applicant-tab.applicant5 span:nth-child(3) {
    background-color: #1A9522;
}

/*.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-bottom-left-radius: 0.5rem !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2c698d;
    color: #fff;
}*/

.applicant-content {
    border-radius: 0.5rem;
}

    .applicant-content .form-control {
        border-bottom-left-radius: 0px !important;
        border-top-left-radius: 0px !important;
        width: 100%;
        margin: 0 !important;
    }

    .applicant-content .form-outline {
        flex: 1;
    }

.applicant-content__filter {
    overflow: hidden;
    border-radius: 0.5rem;
    border: 0.3px solid #2C698D;
}

.applicant-content__filter-title {
    background-color: #2C698D;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

.accordion-button::after {
    margin-inline-end: unset;
    margin-inline-start: auto;
}

.accordion-item.applicant-filter {
    border: 0;
}

    .accordion-item.applicant-filter .accordion-button:not(.collapsed) {
        color: #2C698D;
        background-color: transparent;
        box-shadow: none;
    }

.applicant-description {
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    padding: 1.5rem 0.5rem 0.8rem 1rem;
}

body > div > div.applicant-content.d-flex.flex-column.gap-4.p-4.bg-white > div.d-flex.align-items-center.gap-3 > div.applicant-content__filter > div.applicant-content__filter-content.p-2.d-flex.flex-column.gap-4 > div.applicant-tabs-content.d-flex.gap-4 > div > div > select {
    border: 1px solid #707070;
    border-radius: 0.5rem;
    padding: 0.3rem;
}

.applicant-description .row > div:nth-child(2) > div:nth-child(1) > div span {
    border-radius: 0.5rem;
    padding: 0.2rem 0.5rem;
    text-align: center;
    vertical-align: middle;
}

.applicant-description .row > div:nth-child(2) > div:nth-child(1) > div > span:nth-child(1) {
    color: #238CAF;
    background-color: rgba(35, 140, 175, 0.21);
}

.applicant-description .row > div:nth-child(2) > div:nth-child(1) > div > span:nth-child(2) {
    color: #FBB040;
    background-color: rgba(251, 176, 64, 0.21);
}

.applicant-description .row > div:nth-child(2) > div:nth-child(2) > div > span:nth-child(1) {
    font-weight: 500;
    color: #2C698D;
}

.applicant-actions {
    justify-content: space-between;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

    .applicant-actions button,
    .applicant-actions > a {
        border: 0;
        padding: 0.5rem;
        color: #fff;
        border-radius: 0.5rem;
        font-size: 15px;
        text-align: center;
    }

        .applicant-actions button:nth-child(1) {
            background-color: #2C698D;
        }

        .applicant-actions > a:nth-child(2) {
            background-color: #DF9E13;
        }

        .applicant-actions > a:nth-child(3) {
            border: 1px solid #DF9E13;
            background-color: #fff;
            color: #DF9E13;
        }

.browse-profile {
    transition: 0.2s;
    color: #2C698D;
}

    .browse-profile:hover {
        color: #DF9E13;
    }
div.color-navy .BtnActionStatus_1 {
    background-color: rgba(79, 134, 247, 0.21) !important;
    border: 0;
    
}

div.color-navy .BtnActionStatus_3 {
    background-color: rgba(247, 26, 19, 0.21) !important;
    border: 0;
}

div.color-navy .BtnActionStatus_5 {
    background-color: rgba(53, 199, 36, 0.21) !important;
    border: 0;
}

div.color-navy .BtnActionStatus_4 {
    background-color: rgba(44, 105, 141, 0.21) !important;
    border: 0;
}

div.color-navy .BtnActionStatus_7 {
    background-color: rgba(223, 158, 19, 0.21) !important;
    border: 0;
}

div.color-navy .BtnActionStatus_6 {
    background-color: rgba(247, 108, 79, 0.21) !important;
    border: 0 ;
}

div.color-navy .BtnActionStatus_2 {
    background-color: rgba(174, 82, 82, 0.21) !important;
    border: 0;
}

.BtnActionStatus_1 {
    color: #4F86F7 !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.BtnActionStatus_3 {
    color: #F71A13 !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.BtnActionStatus_5 {
    color: #35C724 !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.BtnActionStatus_4 {
    color: #2C698D !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.BtnActionStatus_7 {
    color: #DF9E13 !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.BtnActionStatus_6 {
    color: #F76C4F !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.BtnActionStatus_2 {
    color: #AE5252 !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.procedure :hover {
    transform: translateY(-0.25em);
}

.applicant-profile {
    position: relative;
    border: 0.3px solid #238CAF;
    border-radius: 0.5rem;
    padding: 70px 40px !important;
}

    .applicant-profile::after {
        position: absolute;
        content: '';
        background-image: url('/assets/avatars/profile-pic.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid #238CAF;
        border-radius: 50%;
        width: 130px;
        height: 130px;
        left: 50%;
        margin-left: -65px;
        top: 0%;
        margin-top: -65px;
    }

.applicant-profile-info {
    margin: 0 !important;
    background-color: rgba(35, 140, 175, 0.21);
    border-radius: 0.25rem;
    vertical-align: middle;
    padding: 0.5rem;
    color: #238CAF;
}

.applicant-profile .row > div > div > div > * {
    color: #238CAF;
    font-weight: 500;
}

.applicant-type {
    background-color: rgba(251, 176, 64, 0.21);
    color: #FBB040;
    border-radius: 0.5rem;
    vertical-align: middle;
    text-align: center;
    padding: 0.5rem;
}

.applicant-cv {
    width: fit-content;
    border-radius: 0.25rem;
    background-color: #238CAF;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    padding: 0.5rem 3rem;
    transition: 0.2s;
}

    .applicant-cv:hover {
        color: #72d7f9;
    }

@media (max-width: 500px) {
    .applicant-profile {
        padding: 50px 16px !important;
    }
}
.e-request-header-logo > div > span,
#LblFormName {
    color: #2C698D;
}

.e-request-header-title {
    color: #2C698D;
    font-weight: 600;
    font-size: 26px;
    padding: 1rem;
    background-color: rgba(44, 105, 141, 0.15);
    border-radius: 0.5rem;
}

.e-request-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    padding: 1rem;
    font-size: 22px;
    background-color: #2C698D;
}

    .e-request-card-title i {
        font-size: 35px;
    }

.e-request-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.e-request-card-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

.main-info-subCard {
    width: 100%;
    color: #2C698D;
    border-radius: 0.5rem;
    box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.08);
    padding: 0;
}

    .main-info-subCard > i {
        color: #fff;
        padding: 0.8rem;
        background-color: #2C698D;
        vertical-align: middle;
        text-align: center;
        border-radius: 0.4rem;
        font-size: 21px;
    }

    .main-info-subCard > div {
        padding-inline-start: 0.7rem;
    }

.e-request-alert {
    background-color: rgba(44, 105, 141, 0.15);
    border-radius: 0.5rem;
}

    .e-request-alert > div:nth-child(1) {
        background-color: #2C698D;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.4rem;
    }

    .e-request-alert > div i {
        color: #fff;
        font-size: 25px;
        padding: 2rem 1rem;
    }

    .e-request-alert > div:nth-child(2) > p {
        color: #2C698D;
        font-weight: 500;
    }

.e-request-attendece-info {
    page-break-before: always;
}

    .e-request-attendece-info h3 {
        color: #2C698D;
        font-size: 22px;
        margin: 0;
    }

    .e-request-attendece-info .row > div > div {
        padding: 0.5rem;
        color: #2C698D;
        box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.08);
        border-radius: 0.5rem;
    }

.e-request-card-content table tr > td:nth-child(2) > div,
.e-request-card-content table tr > td:nth-child(3) > div {
    background-color: rgba(44, 105, 141, 0.15);
    border-radius: 0.5rem;
    color: #2C698D;
    padding: 0.8rem 1rem;
    width:auto;
    height:auto;
}

.e-request-card-content table tr > td:nth-child(1) > div i {
    border-radius: 50%;
    background-color: #DFE8EE;
    color: #2C698D;
    padding: 1rem;
    font-size: 30px;
}


/*.e-request-card-content table tr td:nth-child(2) {
    text-align: center;
}*/

table tr.admin-approved div div.admin-link-line {
    position: relative;
    color: #2C698D;
}

.e-request-card-content table tr td:nth-child(3) {
    text-align: end;
}

table tr.admin-approved div div.admin-link-line:not(div:last-child):after {
    position: absolute;
    content: '';
    background-color: #2C698D;
    width: 2px;
    height: 110px;
    bottom: -110px;
    left: 50%;
}

td.e-request-note {
    padding-inline-start: 6rem;
}

    td.e-request-note p {
        border-radius: 0.5rem;
        padding: 1rem;
        color: #2C698D;
        background-color: rgba(44, 105, 141, 0.15);
    }

        td.e-request-note p:empty {
            display: none;
        }

#PrintDV > div > main > div.e-request-card.application-acceptable.gap-0 > div.e-request-card-content.d-flex.flex-column.gap-3 > table tr:nth-last-child(2) .admin-link-line::after {
    display: none;
}

#PrintDV > div > main > div.e-request-card.application-acceptable.gap-0 > div.e-request-card-content.d-flex.flex-column.gap-3 > table > tbody > tr.admin-approved:last-child {
    background-color: red;
}

.e-request-card.application-acceptable {
    display: inline-table;
}

    .e-request-card.application-acceptable .e-request-card-content > table {
        border-collapse: separate;
        border-spacing: 15px 30px;
        table-layout: fixed;
        min-width: 900px;
    }

.QR-container {
    border: 0.3px solid #2C698D;
    border-radius: 0.5rem;
}

.e-request-QR {
    border-radius: 0.5rem;
    box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.08);
    color: #2C698D;
    font-weight: 600;
}

.e-request-sign > div:not(div:first-child) > div {
    border-radius: 0.5rem;
    box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    color: #2C698D;
}

.e-request-img {
    width: 250px;
    height: 100px;
}

@media print {
    .e-request-card-content .row > div {
        width: 33.33333333%;
    }

    div.col-sm-12:has(div.e-request-QR) {
        width: 100%;
    }

    .e-request-sign div:not(div:first-child) {
        width: 50%;
    }

    .main-info-subCard {
        font-size: 14px;
    }

        .main-info-subCard > i {
            padding: 0.5rem;
            font-size: 17px;
        }

    .e-request-attendece-info .row > div:nth-child(1),
    .e-request-attendece-info .row > div:nth-child(2) {
        width: 50%;
    }

    .e-request-attendece-info .row > div:last-child {
        width: 100%;
    }

    .e-request-card.application-acceptable .e-request-card-content > table {
        table-layout: auto;
        border-spacing: 15px 48px;
    }
}

@media not print {
    @media (max-width: 425px) {
        .e-request-img {
            height: 80px;
            width: 100px;
        }

        .e-request-header-logo {
            padding: 0.8rem 1rem !important;
        }

            .e-request-header-logo > div {
                font-size: 14px;
            }

        .e-request-header-title {
            font-size: 22px;
        }

        .e-request-card-title {
            font-size: 17px;
        }

            .e-request-card-title i {
                font-size: 28px;
            }

        .e-request-attendece-info .row > div:nth-child(3) > div {
            flex-direction: column;
        }

        .e-request-QR {
            flex-direction: column;
            padding: 0.8rem;
        }

            .e-request-QR p {
                text-align: center;
            }

        .e-request-header-logo {
            padding: 0.5rem !important;
        }

            .e-request-header-logo div {
                font-size: 15px;
            }
    }

    @media (max-width: 768px) {
        .e-request-card-content table tr td > div {
            font-size: 14px;
        }
    }
}

.e-request-content .tdcell {
    color: #2C698D;
    font-weight: 700 !important;
    text-align: inherit !important;
}

3.e-request-content #CustomUITable td {
    border-bottom: 1px solid #2C698D;
    padding: 10px;
    text-align:inherit;
}

.e-request-content .span12 {
    color: #2C698D;
}










/*---------------------------*/
.classified-report-container > * {
    font-size: 20px;
    font-weight: 500;
    border: 1px solid;
}

.waves-img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 275px;
}

.classified-report.report-header {
    height: 800px;
    margin: 0;
    padding: 0;
    display: block;
   /* page-break-after: always;
    page-break-before: always;*/
}

.classified-report .index-content__content-index {
    border: 0px !important;
}

    .classified-report .index-content__content-index > span:nth-child(1) {
        background-image: linear-gradient(to left, #008b4e, #1a6795);
    }

.classified-report.report-header::before {
    top: 33px;
    right: 55px;
    background-image: url(../imgs/image_2022-10-13_174320332-removebg-preview.png);
    background-position: center;
}

.classified-report.report-header > div {
    gap: 65px;
    padding-top: 65px;
}

.index-bg {
    position: relative;
    background-image: linear-gradient(to bottom, #008b4e, #1a6795);
    width: 570px;
    height: 570px;
    border-radius: 50%;
}

    .index-bg::before {
        content: '';
        position: absolute;
        width: 195px;
        height: 195px;
        background-color: #fff;
        background-repeat: no-repeat;
        z-index: 99;
        border-radius: 50%;
        border: 1px solid #0B7C6B;
        background-image: url(../imgs/image_2022-10-13_174320332-removebg-preview.png);
        background-position: center;
        background-size: 250px;
    }

    .index-bg::after {
        content: '';
        position: absolute;
        background-image: url('../imgs/tabBg.png');
        border-radius: 50%;
        width: 500px;
        height: 500px;
        bottom: 0;
        left: 50%;
        margin-left: -250px;
    }

/*.classified-report.index-content {
    margin-top: 63px;
}*/

.classified-report-chapter {
    flex-direction: column;
    padding: 0;
    gap: 0;
}

    .classified-report-chapter > .content {
        align-self: baseline;
        height: 730px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 33px;
        color: #000;
        padding-right: 55px;
        justify-content: center;
        background-color: #fff;
        border-radius: 0.5rem;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

        .classified-report-chapter > .content > div {
            width: fit-content;
        }

            .classified-report-chapter > .content > div > span {
                font-size: 40px;
                font-weight: 500;
            }

            .classified-report-chapter > .content > div > div {
                background-image: linear-gradient(to bottom, #008b4e, #1a6795);
                width: 100%;
                height: 15px;
                border-radius: 0.5rem;
            }

.classified-report-footer {
    background-image: linear-gradient(to bottom, #008b4e, #1a6795);
    width: 100%;
    color: #fff;
    font-weight: 400;
    padding: 1.5rem 3rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.classified-report.introduction .introduction__content {
    padding: 27px 33px;
}

.classified-report-title {
    background-image: linear-gradient(to right, #008b4e, #1a6795);
    color: #fff;
    position: relative;
    height: fit-content;
    width: 100%;
    border: 0px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 95px;
    border-radius: 0.5rem;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

    .classified-report-title > hr {
        width: 418px;
        height: 1px;
        background-color: #fff;
        opacity: 1;
        border: none;
        border-radius: 0.5rem;
    }

    .classified-report-title > span {
        font-size: 22px;
        font-weight: 600;
    }

    .classified-report-title > svg {
        font-size: 31px;
    }

.text-gray {
    color: #707070;
}

.classified-section-content {
    background-color: #fff;
    padding: 27px 32px;
    border-radius: 0.5rem;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.classified-status-box {
    width: 31px;
    height: 31px;
    border-radius: 0.5rem;
}

    .classified-status-box.box0 {
        background-color: #D9D9D9;
    }

    .classified-status-box.box1 {
        background-color: #358C3B;
    }

    .classified-status-box.box2 {
        background-color: #FFC000;
    }

    .classified-status-box.box3 {
        background-color: #C00000;
    }

.classified-report.report-goals__content .report-goals__content-card > span {
    font-size: 20px !important;
}

.statistics-title {
    background-image: linear-gradient(to bottom, #008b4e, #1a6795);
    border-radius: 0.5rem;
    color: #fff;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 0px 0.5rem;
}

.classified-statistics > * {
    font-size: 8px !important;
}

.classified-statistics .sub-container-cards2 .charts {
    width: 80px;
}

    .classified-statistics .sub-container-cards2 .charts .dashboard-chart-value {
        font-size: 12px;
    }

.classified-statistics .classified-report-title {
    padding: 1rem;
}

    .classified-statistics .classified-report-title > span {
        font-size: 15px !important;
    }

.classified-section-content .conclusionStatus-content__container-header {
    background-color: #E4E4E4;
    padding: 2rem;
}

.classified-section-content .conclusionStatus-content__header-status {
    background-color: transparent;
}

    .classified-section-content .conclusionStatus-content__header-status div {
        color: #000 !important;
        font-weight: 400;
    }

    .classified-section-content .conclusionStatus-content__header-status .asPlan .conclusionStatus-content__header-status__number {
        color: #358C3B;
        font-weight: 600;
        font-size: 35px;
        border-width: 3px;
    }

    .classified-section-content .conclusionStatus-content__header-status .late .conclusionStatus-content__header-status__number {
        color: #FFCE38;
        font-weight: 600;
        font-size: 35px;
        border-width: 3px;
    }

    .classified-section-content .conclusionStatus-content__header-status .stumbling .conclusionStatus-content__header-status__number {
        color: #C00000;
        font-weight: 600;
        font-size: 35px;
        border-width: 3px;
    }

    .classified-section-content .conclusionStatus-content__header-status > div {
        gap: 15px;
    }

.classified-table {
    border-collapse: separate;
    border-spacing: 10px;
}

    .classified-table td {
        text-align: center;
        vertical-align: middle;
        padding: 8px 15px;
        box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 0.5rem;
        font-size: 17px;
    }

        .classified-table td:nth-child(1) {
            background-color: transparent !important;
            box-shadow: none;
        }

            .classified-table td:nth-child(1) div {
                background-color: #fff;
                color: #358C3B;
                border: 3px solid #358C3B;
                border-radius: 50%;
                font-size: 35px;
                padding: 0 !important;
                width: 50px !important;
                height: 50px !important;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        .classified-table td:nth-child(2) {
            text-align: start;
            font-size: 15px;
        }

    .classified-table th:not(th:first-child) {
        color: #fff;
        background-image: linear-gradient(to right, #008b4e, #1a6795);
        text-align: center;
        vertical-align: middle;
        border-radius: 0.5rem;
        font-size: 17px;
    }


.titltdcolor {
    color: #fff;
    background-image: linear-gradient(to right, #008b4e, #1a6795);
    text-align: center;
    vertical-align: middle;
    border-radius: 0.5rem;
    font-size: 17px;
    height:30px;
}


    .classified-table th:nth-child(2) svg {
        left: auto !important;
        right: auto !important;
    }

    .classified-table th svg {
        font-size: 30px;
    }

    .classified-table td .chart-value {
        font-size: 10px;
        top: 50%;
        margin-top: -26px !important;
    }

    .classified-table td .charts {
        width: 60px;
    }

.grey-bg {
    background-color: #F2F2F2;
}

.classified-table td .status__box {
    width: 24px;
    height: 24px;
}

.classified-risk-table {
    border-spacing: 15px 25px;
}

    .classified-risk-table td {
        padding: 0.5rem;
    }

        .classified-risk-table td:not(td:nth-child(4), td:nth-child(6)) {
            text-align: start;
        }

.status__box {
    width: 31px;
    height: 31px;
}

    .status__box.box0 {
        background-color: #92D050;
    }

    .status__box.box1 {
        background-color: #358C3B;
    }

    .status__box.box2 {
        background-color: #FFC000;
    }

    .status__box.box3 {
        background-color: #C00000;
    }

    .status__box.box4 {
        background-color: #D9D9D9;
    }

.classified-risk-footer {
    padding-inline: 340px;
}

.classified-late-footer {
    padding-inline: 50px;
}

.classified-late-table {
    border-spacing: 5px 24px;
}

    .classified-late-table td .charts {
        width: 80px;
        margin: auto !important;
    }

    .classified-late-table td .chart-value {
        margin-top: -35px !important;
    }

    .classified-late-table td {
        padding: 0.6rem;
    }

.classified-recommendation-table {
    border-spacing: 22px 24px;
}

    .classified-recommendation-table td {
        padding: 0.5rem;
    }

        .classified-recommendation-table td:nth-child(2),
        .classified-recommendation-table td:nth-child(3) {
            text-align: start;
        }

.classified-project-card {
    margin-top: 5px;
}

    .classified-project-card > div:nth-child(1) {
        position: relative;
        flex-basis: 215px;
        flex-grow: 0;
        flex-shrink: 0;
        background-image: linear-gradient(to right, rgba(0, 140, 77, 0.8), rgba(26, 103, 149, 0.88)), url('../imgs/tabBg.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }

        .classified-project-card > div:nth-child(1)::before {
            content: '';
            position: absolute;
            width: 140px;
            height: 140px;
            background-color: #fff;
            background-image: url('../imgs/image_2022-10-13_174320332-removebg-preview.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border: 1px solid #0B7C6B;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            margin-left: -70px;
            margin-top: -70px;
        }

    .classified-project-card > div:nth-child(2) {
        border-radius: 0.5rem;
        border-left: 1px solid #707070;
        border-bottom: 1px solid #707070;
        border-bottom-right-radius: 0px;
    }

        .classified-project-card > div:nth-child(2) > .classified-report-title {
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0.5rem !important;
        }

.classified-project-card-title {
    color: #fff;
    font-weight: 600;
    background-color: #00305C;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
}

.print-style {
    page-break-after: always;
    page-break-before: always;
    page-break-inside: avoid;
}

.classified-project-level {
    background-color: #F2F2F2;
    width: 340px;
    padding: 6px 12px;
}

    .classified-project-level span {
        background-color: #fff;
        padding: 0.3rem 0.5rem;
        border-radius: 20px;
        color: #000;
        text-align: center;
        font-size: 10px;
    }

        .classified-project-level span.current {
            background-color: #00305C;
            color: #fff;
        }

.classified-project-text {
    border: 1px solid #fff;
    border-radius: 0.5rem;
    padding: 1rem 0.5rem;
    color: #fff;
}

.classified-project-card.classified-project-card2 {
    display: flex;
    /* flex-direction: column;
    gap: 30px; */
}

    .classified-project-card.classified-project-card2 > div:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        padding: 1rem;
        flex-basis: 215px;
        flex-grow: 0;
        flex-shrink: 0;
    }

        .classified-project-card.classified-project-card2 > div:nth-child(1)::before {
            top: 15%;
        }

.classified-phase {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
}

    .classified-phase.nested {
        font-size: 12px;
        flex: 1;
    }

    .classified-phase.active {
        color: #fff;
        background-color: #048756;
    }

.classified-projectPhase-content {
    margin: 0.2rem 0px;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #F2F2F2;
}
.classified-statistics-container {
    margin-top: -50px;
    padding: 0.5rem !important;
}
.classified-statistics-container * {
    font-size: 8px;
}

.classified-statistics-container > div > div {
    background-color: #fff;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
}

.classified-statistics-container span:nth-child(1) {
    width: 100%;
    background-color: #248867;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    color: #fff;
    font-weight: 600;
}

.classified-statistics-container > div > div svg {
    background-color: #fff;
    color: #248867;
    border: 1px solid #248867;
    border-radius: 50%;
    padding: 0.5rem;
}

.classified-update-tab > div:first-child {
    flex-basis: 215px;
    flex-grow: 0;
    flex-shrink: 0;
    background-image: linear-gradient(to bottom, rgba(0, 140, 77, 1), rgba(26, 103, 149, 1));
    padding: 10px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.classified-update-table {
    flex: 1;
}

    .classified-update-table thead {
        background-color: #00516B;
        color: #fff;
    }

        .classified-update-table thead th {
            text-align: center !important;
            vertical-align: middle;
            border-left: 0.3px solid rgba(161, 161, 161, 0.5);
        }

            .classified-update-table thead th:nth-child(2) {
                text-align: center !important;
            }

            .classified-update-table thead th:last-child {
                border-top-left-radius: 0.5rem;
                border-bottom-left-radius: 0.5rem;
            }

    .classified-update-table tbody td {
        padding: 1.5rem;
        text-align: center;
        vertical-align: middle;
        border-left: 0.3px solid rgba(161, 161, 161, 0.5);
        background-color: #f2f2f2;
    }

        .classified-update-table tbody td:nth-child(2) {
            text-align: start;
        }

    .classified-update-table tbody tr:not(tr:last-child) {
        border-bottom: 0.3px solid rgba(161, 161, 161, 0.5);
    }

    .classified-update-table tbody td:last-child {
        border-left: 0;
    }

    .classified-update-table tbody tr:last-child td:last-child {
        border-bottom-left-radius: 0.5rem;
    }

.classified-output-table th div {
    background-color: #1A6795;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.65rem;
}

.classified-output-table th {
    padding-inline-start: 5px;
    padding-inline-end: 0px;
}

    .classified-output-table th:nth-child(2) {
        padding: 0.5rem;
    }

.classified-output-table tr:nth-child(odd) {
    background-color: #fff;
}

.classified-output-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.classified-output-table td {
    text-align: center;
    vertical-align: middle;
    padding: 1rem;
}

    .classified-output-table td:nth-child(1) {
        font-weight: 600;
    }

.classified-report-ending.classified-report.report-header::before {
    width: 130px;
    height: 130px;
}

.classified-technical-statistics span:nth-child(1) {
    background-color: #00516B;
}

.classified-technical-statistics-header-text:has(.fa-money-bill-trend-up) {
    background-color: #248867;
}

.classified-technical-statistics-header-text:has(.fa-gears) {
    background-color: #00516B;
}

.classified-technical-statistics-header-text:has(.fa-list-check) {
    background-color: #00516B;
}

.classified-technical-statistics-header-text:has(.fa-clipboard-list) {
    background-color: #00516B;
    color: #fff;
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.classified-project-info {
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.16);
    border-radius: 0.5rem;
    padding: 0.8rem;
}

    .classified-project-info table {
        table-layout: fixed;
    }

        .classified-project-info table td {
            color: #00305C;
            font-size: 12px;
            vertical-align: middle;
            text-align: center;
        }

            .classified-project-info table td div {
                background-color: #F2F2F2;
                border-radius: 20px;
                padding: 0.3rem;
            }

.classified-charts .execConclusion-progress__content-statistics .charts {
    width: 80px;
}

    .classified-charts .execConclusion-progress__content-statistics .charts .chart-value {
        font-size: 12px;
    }

.break-avoid {
    page-break-inside: avoid;
}

.break-before {
    page-break-before: always;
}

.break-after {
    page-break-after: always;
}

@media print {
    .report-content {
        gap: 0 !important;
    }

    .classified-table td {
        padding: 8px 25px;
    }

    .classified-section-content .conclusionStatus-content__header-status > div > * {
        font-size: 14px;
    }
}