/*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: 200px;
}

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 {
    padding: 10px 0;
    border-radius: 10px;
    margin-bottom: 30px;
}

.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) !important;
    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;
    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;
    margin: 0 15px;
}

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

:root[dir="rtl"] input[ondblclick], :root[dir="rtl"] input[has-double-click="true"] {
    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: 200px !important;
    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 .purple {
    background-color: rgba(79, 134, 247, .3);
}*/

table td .purple .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: flex-start;
    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: 350px;
    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;
}

.purple: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;
}



.purple {
    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 {
    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;
}

.input-container .check-container label {
    margin-bottom: 0;
}

.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;
}



#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 */
td input[type="checkbox"]+label {
    margin-inline-start: 5px;
}

/*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: inline-grid !important;
    place-content: center !important;
    width: 18px !important;
    height: 18px !important;
}
*/
/*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%);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

 input[type="checkbox"]:focus {
    outline-offset: max(2px, 0.15em);
}

.employee-file input[type="radio"] {
    -ms-transform: scale(1.5);
   
    -webkit-transform: scale(1.5);
 
    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;
        display: none;
    }
*/
.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;
}


div.color-navy .BtnActionStatus_8 {
    background-color: rgba(183, 77, 56, 0.21) !important;
    border: 0;
}
.BtnActionStatus_8 {
    color: #B74D38 !important;
    font-weight: 500;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.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;
}

.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;
    }
}

/* grid-layout style, Date: 4/6/2023 */
.multi-inputs {
    width: 100%;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 30px;
}

.double-inputs {
    width: 100%;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 25px;
}

.three-inputs {
    width: 100%;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 30px;
}

.six-inputs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px 25px;
}

.thirds-inputs {
    width: 100%;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 4fr 13fr;
    gap: 10px 25px;
}

.full-input {
    width: 100%;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 0;
}

.input-container {
    color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start !important;
    align-self: flex-end;
    font-weight: 500;
    margin: 0;
}

.input-container input:not([type="radio"]):not([type="checkbox"]),
.input-container textarea,
.input-container .icon-input>input,
select,
.input-container .dropdown-toggle {
    flex: 3;
    color: var(--secondary-color);
    width: 100%;
    padding: 7px;
    border: 1px solid #c6c6c6;
    outline: none;
    border-radius: 8px;
    outline-color: transparent;
}

.check-container,
.radio-container {
    flex: 2;
    text-align: center;
}

.check-container td,
.radio-container td {
    padding: 0 5px;
}

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

input[type="checkbox"],
input[type="radio"] {
    position: relative;
}

.check-container input[type="checkbox"],
.check-container input[type="radio"] {
    margin-inline-end: 8px;
}

/*input[type="checkbox"]::before,
input[type="radio"]::before {
    content: "";
    visibility: visible;
    width: 13px;
    height: 13px;
    padding: 3px 2px 2px;
    border: 2px solid #4f86f7;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    font-weight: bold;
}

input[type="checkbox"]::before {
    border-radius: 2px;
    line-height: 0.1em;
}

input[type="radio"]::before {
    border-radius: 50%;
    font-size: 27px;
}

input[type="checkbox"]:checked::before {
    content: "✔";
    color: #178caf;
    background-color: #fff;
    width: 18px;
    height: 18px;
    font-size: 13px;
}

input[type="radio"]:checked:before {
    content: "•";
    color: #4f86f7;
}
*/
.input-container input.popup {
    background: url("../imgs/grid-icon.png") no-repeat 10px center/15px;
}

.input-container .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-container .dual-inputs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.input-container .dual-inputs input {
    flex: 1;
}

.input-container>label {
    color: var(--secondary-color);
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
}

.input-container .icon-input {
    position: relative;
    width: 100%;
}

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

.multi-inputs .buttons-container {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: stretch;
    align-items: flex-end;
}

.buttons-container .buttons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.buttons-container .btn {
    width: 100%;
}

.input-container .radio-container .radio {
    display: flex;
    align-items: center;
    gap: 5px;
}

html[dir="ltr"] .input-container .icon-input .icon {
    left: unset;
    right: 10px;
}

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

.input-container .success {
    background-color: #09f911;
    width: 50%;
    margin-top: 10px;
    padding: 0 10px;
    border-radius: 10px;
}

td input {
    color: #000;
    padding: 7px 3px;
    border: 1px solid #c6c6c6;
    outline: none;
    border-radius: 8px;
    outline-color: transparent;
}

td textarea {
    color: #000;
    width: 99% !important;
    padding: 3px;
    border: 1px solid #c6c6c6;
    outline: none;
    border-radius: 8px;
    outline-color: transparent;
}

.select2 {
    margin: 0 !important;
}

.input-container .select2 {
    width: 100% !important;
}

.select2 {
    border: 1px solid #c6c6c6 !important;
    border-radius: 8px !important;
}

.select2-selection {
    padding: 0;
}


.select2-container--default .select2-selection--single {
    height: auto !important;
    border: none !important;
    border-radius: 8px !important;
}

.select2-selection__rendered {
    color: #000 !important;
    min-height: 40px;
    padding: 4px 17px 4px 27px;
    font-weight: normal;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    left: 7px !important;
    transform: translateY(-50%);
}

.select2-container--open .select2-dropdown--below {
    transform: translateY(-10px);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 8px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #1e2125 !important;
    background-color: #e9ecef !important;
}

input[readonly="readonly"] {
    background-color: #eeeded;
    cursor: default;
}

.multi-inputs .span1 {
    width: initial !important;
    grid-column: span 1 !important;
}

.multi-inputs .span2 {
    width: initial !important;
    grid-column: span 2 !important;
}

.multi-inputs .span3 {
    width: initial !important;
    grid-column: span 3 !important;
}

.multi-inputs .span4 {
    width: initial !important;
    grid-column: span 4 !important;
}

.multi-inputs .span5 {
    width: initial !important;
    grid-column: span 5 !important;
}

.multi-inputs .span6 {
    width: initial !important;
    grid-column: span 6 !important;
}

.multi-inputs .span7 {
    width: initial !important;
    grid-column: span 7 !important;
}

.multi-inputs .span8 {
    width: initial !important;
    grid-column: span 8 !important;
}

.multi-inputs .span9 {
    width: initial !important;
    grid-column: span 9 !important;
}

.multi-inputs .span10 {
    width: initial !important;
    grid-column: span 10 !important;
}

.multi-inputs .span11 {
    width: initial !important;
    grid-column: span 11 !important;
}

.operations-box .main-inputs {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 0;
}

.operations-box .main-inputs .input-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center !important;
    gap: 0;
}

.operations-box .main-inputs .input-container.span2 {
    grid-template-columns: 1fr 5fr;
}

.operations-box .main-inputs .input-container.span3 {
    grid-template-columns: 1fr 8fr;
}

.operations-box .main-inputs .input-container label {
    margin: 0;
    text-align: center;
}

.input-container .two-inputs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 10px;
}

.operations-box .main-inputs .input-container.span3 .two-inputs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    gap: 10px;
}

.tree-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
}

.tree-container .tree {
    background-color: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: rgba(149, 157, 165, 0.2) 5px 8px 24px;
    border: 1px solid #4f86f7;
}

.tree-container .widget-box {
    margin: 0;
    height: fit-content;
}

.tree-container .multi-inputs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
}

.operations-box .second-form {
    grid-template-columns: repeat(2, 1fr);
}

.operations-box .small-inputs {
    grid-template-columns: repeat(12, 1fr);
    gap: 10px 3px;
}

.operations-box .small-inputs input:not([type="submit"]) {
    padding: 7px 3px !important;
}

.operations-box .small-inputs .input-container {
    grid-column: span 2;
}

.operations-box .small-inputs.second-form .input-container {
    grid-column: span 1;
}

.operations-box .small-inputs .buttons-container {
    grid-column: 12;
}

.operations-box .small-inputs.second-form .buttons-container .btn {
    width: 100%;
}

.operations-box .small-inputs.second-form label {
    width: 100%;
    text-align: center;
}

.operations-box .credit-inputs :first-child {
    grid-column: 5 / span 2 !important;
}

.operations-box .credit-inputs .input-container {
    flex-direction: row;
    align-items: center !important;
}

.operations-box .credit-inputs .input-container label,
.operations-box .credit-inputs .input-container input {
    flex: 1;
    margin: 0;
    text-align: center;
}

.operations-box .radio-container table td {
    padding: 0 5px;
}

.operations-box .small-inputs .input-container>span {
    order: 0;
}

.operations-box .small-inputs .input-container>label {
    order: 1;
}

.operations-box .small-inputs .input-container>input,
.operations-box .small-inputs .input-container>textarea,
.operations-box .small-inputs .input-container>select,
.operations-box .small-inputs .input-container>.select2 {
    order: 2;
}

.small-inputs-table {
    margin-bottom: 20px;
}

.small-inputs-table .t-header {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 15px 25px -5px,
        rgba(0, 0, 0, 0.05) 0px 10px 10px -5px;
}

.small-inputs-table .t-row {
    margin: 0;
}

.small-inputs-table td {
    padding: 10px;
}

input[type="file"] {
    padding: 3px !important;
    border: none !important;
}

input[type="file"]::-webkit-file-upload-button {
    color: #fff;
    background-color: #4f86f7;
    padding: 0.375rem 0.75rem;
    border: 1px solid #4f86f7;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s linear;
}

input[type="file"]::-webkit-file-upload-button:hover {
    color: #4f86f7;
    background-color: #fff;
    border: 1px solid #4f86f7;
}

/*end inputs*/

/*start custom*/
.btn:not(ul.operations > *) {
    border: 1px solid transparent !important;
}

.btn#dropdownoprations {
    border: 1px solid #C6C6C6 !important;
}

.permission-table td,
.profile-table td {
    padding: 5px;
}

.ss-rate-forms {
    grid-template-columns: repeat(4, 1fr);
}

.ss-rate-forms .rate-form {
    justify-content: space-between;
    align-items: center;
}

.ss-rate-forms .rate-form a {
    color: #4f86f7;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rcbInner {
    padding: 0 !important;
    border-radius: 8px !important;
    border-color: #c6c6c6 !important;
}

.rcbInner input {
    padding: 1rem !important;
}

.rcbSlide {
    transform: translateY(-6px);
}

.RadComboBox_Default .rcbActionButton {
    border: none !important;
    color: #acacac !important;
    background-color: transparent !important;
    background-image: unset !important;
}

table .operations.show,
.small-inputs-table .operations.show {
    padding: 10px 15px;
    min-width: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.operations span,
.operations .btn {
    width: 40px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 18px;
}

.files {
    margin: 40px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 75px;
}

.files .input-container {
    margin-bottom: 30px;
}

.files .img-container {
    width: 95%;
    height: 150px;
    background-color: #c6c5c5;
    margin-bottom: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-container {
    width: 100%;
}

.dropdown-menu a .fa-trash,
td a .fa-trash {
    padding: 0;
}

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

.color-blue,
.color-purple {
    color: #4f86f7 !important;
    border-color: #4f86f7;
    stop-color: #4f86f7;
}

.blue,
.purple {
    background-color: #4f86f7 !important;
}

.btn.purple,
input[type="submit"].purple {
    color: #fff !important;
    background-color: #4f86f7 !important;
    top: 0px;
    left: 0px;
}

.btn.purple:hover,
input[type="submit"].purple:hover {
    color: #4f86f7 !important;
    background-color: #fff !important;
    border: 1px solid #4f86f7 !important;
    transform: translateY(-3px) !important;
}

.dropdown-item:not(a.dropdown-item) {
    padding: 0;
}

.dropdown-item a,
.dropdown-item a:hover {
    display: block;
    padding: 0.25rem 1rem;
    color: var(--secondary-color);
}

.dropdown-item a[disabled] {
    color: #ccc;
    pointer-events: none;
}

.dropdown-item:has(a[disabled]):hover {
    background-color: unset;
}

.orange,
.btn.orange,
input[type='submit'].orange {
    background-color: #f76c4f !important;
}

.btn.purple-outline,
input[type="submit"].purple-outline {
    color: #4f86f7 !important;
    background-color: #fff !important;
    border: 1px solid #4f86f7 !important;
}

.manage .widget-box .item {
    padding: 0;
}

.item a {
    padding: 10px;
}

.table th:nth-child(2) {
    text-align: unset !important;
}

.modal {
    height: unset;
    max-height: fit-content;
    min-height: fit-content;
}

.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: .25rem;
    ;
    border-bottom-right-radius: .25rem;
    ;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*nav .nav-link {
    border: 1px solid #4f86f7 !important;
    border-radius: 0.25em !important;
    color: #4f86f7 !important;
    margin-inline-end: 0.25em;
}*/



.nav-tabs .nav-link.active {
    color: #4f86f7;
    background-color: #fff;
    border-color: #4f86f7 #4f86f7 #fff;
}


/* .row-fluid .span2,
.span2,
.row-fluid .span3,
.span3 {
    width: unset !important;
} */

.manage-card a.btn.btn-outline {
    border: 1px solid currentColor !important;
}

.CheckBoxSubjects td {
    background-color: transparent !important;
}

.main-content span.badge {
    left: -10px;
}

.CheckBoxSubjects {
    text-align: start;
}

.custom-responsive-table {
    overflow-y: auto;
    max-width: 87vw;
}

.dropdown-item:active {
    background-color: #4f86f7;
}

.dropdown-item:active a {
    color: white;
}

/*end custom*/
/* custom media query */
@media screen and (max-width: 1366px) {
    .tree-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1200px) {

    .multi-inputs,
    .three-inputs {
        gap: 10px 20px;
    }

    .operations-box .main-inputs {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .multi-inputs,
    .files {
        grid-template-columns: repeat(3, 1fr);
    }

    .operations-box .small-inputs {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 700px) {

    .multi-inputs,
    .three-inputs {
        grid-template-columns: repeat(2, 1fr);
    }

    .tree-container .multi-inputs {
        gap: 10px 50px;
    }

    .thirds-inputs {
        gap: 10px;
    }
}

@media screen and (max-width: 620px) {
    .thirds-inputs {
        grid-template-columns: 4fr 6fr;
    }

    .operations-box .main-inputs {
        grid-template-columns: 1fr;
    }

    .operations-box .main-inputs .input-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start !important;
        align-self: flex-end;
    }

    .operations-box .main-inputs .input-container>label {
        margin-bottom: 5px;
    }

    .operations-box .main-inputs .input-container.span2,
    .operations-box .main-inputs .input-container.span3 {
        grid-column: span 1 !important;
    }

    .operations-box .main-inputs .input-container .two-inputs {
        grid-template-columns: 1fr !important;
    }

    .multi-inputs .span1 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span2 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span3 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span4 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span5 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span6 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span7 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span8 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span9 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span10 {
        grid-column: span 1 !important;
    }

    .multi-inputs .span11 {
        grid-column: span 1 !important;
    }
}

@media screen and (max-width: 520px) {

    .multi-inputs,
    .tree-container .multi-inputs,
    .three-inputs,
    .files,
    .double-inputs {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 650px) {
    .widget-box .widget-body {
        padding: 1rem 0.5rem;
    }
}

/* new update, 12/6/2023 */

div:has(>.table.table-striped.table-bordered.table-hover) {
    overflow-y: auto;
    max-width: 87.5vw;
    margin: auto;
}

div:has(>input[type='image'][id*='_DLFilter_imgDelRecipients']) {
    display: flex !important;
    justify-content: space-between !important;
    height: unset !important;
    font-size: 18px !important;
    padding: 4px !important;
}

div:has(>input[type='image'][id*='_DLFilter_imgDelRecipients']) span {
    display: inline-block;
}

input[type='image'][id*='_DLFilter_imgDelRecipients'] {
    width: 20px !important;
    height: 20px !important;
    padding: 4px !important;
    flex: 0 0 !important;
}

[id*="_DLFilter"] {
    width: 100%;
}

[id*="_DLFilter"] tr,
[id*="_DLFilter"] td,
[id*="_DLFilter"] tbody {
    all: unset;
}

[id*="_DLFilter"] tbody {
    width: 100%;
}

[id*="_DLFilter"] tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

[id*="_DLFilter"] td {
    min-width: calc(100% / 4.1);
}

/* new update, Date: 14/6/2023*/
.advance .widget-box .tasks .task .task-body .task-item .procedure .procedure-item {
    transition: 0.15s all;
}

.main-content .content-wrapper>div.itemdiv {
    padding: 20px 30px;
}

@media screen and (max-width: 768px) {
    .advance .widget-box .tasks .task .task-body .task-item .procedure .procedure-item {
        padding: 0 8px;
    }

    .operations-box .small-inputs .input-container {
        grid-column: span 6;
    }

}

@media screen and (max-width: 520px) {
    .operations-box .small-inputs .input-container {
        grid-column: span 12;
    }

    .operations-box .small-inputs .input-container.span11 {
        grid-column: span 11 !important;
    }

    .tab {
        max-width: 87.5vw;
    }
}

/* New update, Date: 25/06/2023 */
@media (max-width:820px) {
    .login .logo {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
    }

    .login .logo img {
        display: block;
        width: 200px;
        margin: auto;
    }
}

/* New update: 2/7/2023 */
@media screen and (max-width: 600px) {
    .task-details .reply .reply-body .info-container .info {
        justify-content: space-between;
    }
}

[id*=_DListAssignee_to_User] table,
[id*=_DListAssignee_to_User] tr,
[id*=_DListAssignee_to_User]td,
[id*=_DListAssignee_to_User] tbody,
[id*=_DListAssignee_to_Group] table,
[id*=_DListAssignee_to_Group] tr,
[id*=_DListAssignee_to_Group]td,
[id*=_DListAssignee_to_Group] tbody {
    all: unset;
}

[id*=_DListAssignee_to_User] tr,
[id*=_DListAssignee_to_Group] tr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

[id*=_DListAssignee_to_User] td div,
[id*=_DListAssignee_to_Group] td div {
    background-color: #F6F6F6;
    border: 1px solid #D3D3D3;
    color: #444444;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

@media screen and (max-width: 821px) {

    [id*=_DListAssignee_to_User] tr,
    [id*=_DListAssignee_to_Group] tr {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {

    [id*=_DListAssignee_to_User] tr,
    [id*=_DListAssignee_to_Group] tr {
        grid-template-columns: repeat(1, 1fr);
    }
}

:root[dir="rtl"] .self-service .widget-box::before {
    display: none;
}

.widget-header {
    position: relative;
}

.widget-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 5px;
    background-color: #4f86f7;
    border-radius: 5px;
}

div.procedure.color-navy>a {
    transition: 0.2s all;
}

.advance .widget-box {
    padding: 0 !important;
}

.advance .widget-box>div:not(div.divider) {
    padding: 10px 20px !important;
}

/* New udpate: 6/7/2023 */
.self-service .team .teammate .teammate-info .teammate-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.self-service .team .teammate .teammate-info .teammate-img img {
    height: auto;
}

.self-service .user-data .img-container {
    margin: unset;
}

.self-service .user-data .img-container div.img {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

li.dropdown-title.dropdown-item {
    padding: 0.25rem 1rem;
}

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

.control-group .controls .select2-container {
    width: 100% !important;
}

.five-inputs {
    grid-template-columns: repeat(5, 1fr);
}

@media screen and (max-width: 910px) {
    .five-inputs {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .five-inputs {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 530px) {
    .five-inputs {
        grid-template-columns: 1fr;
    }
}

.widget-header[id] .accordion-button::after {
    display: none;
}

button.btn.purple-outline,
input[type="submit"].purple-outline {
    color: #4f86f7 !important;
    background-color: #fff !important;
    border: 1px solid #4f86f7 !important;
}

/*div:has(>.table.table-striped.table-bordered.table-hover) {
    overflow-y: auto;
    max-width: 87vw;
}*/
/* New update: 14/8/2023 */
.widget-box .shown-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.manage .widget-box .item {
    min-width: unset;
    max-width: unset;
    width: 100%;
}

.manage .manage-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.manage .manage-card {
    width: unset !important;
}

@media (max-width: 821px) {
    .widget-box .shown-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .manage .manage-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .manage .widget-box .item {
        width: unset;
    }

    .manage .manage-card .projects-num .disc {
        font-size: 20px;
    }

    .manage .manage-card {
        gap: 15px;
    }

    .manage-card a.btn.btn-outline {
        width: 80px;
    }
}

@media (max-width: 530px) {
    .widget-box .shown-items {
        grid-template-columns: 1fr;
    }

    .manage .manage-cards {
        grid-template-columns: 1fr;
    }
}

.table {
    width: 100% !important;
}

.decisions-container {
    padding: 8px;
    border-radius: 4px;
    background-color: #ebf5f8;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    grid-template-columns: 1fr 3fr;
    font-weight: 500;
}

.decisions-container svg {
    color: #fff;
    background-color: #3394b5;
    border-radius: 4px;
    padding: 10px;
    font-size: 25px;
}

.decisions-container span:nth-child(1) {
    font-size: 25px;
    font-weight: 700;
}

.widget-header:has(.widget-title.color-green)::before {
    background-color: #35C724;
}

.widget-header:has(.widget-title.color-orange)::before {
    background-color: #F76C4F;
}

.widget-header:has(.widget-title.color-yellow)::before {
    background-color: #DF9E13;
}

.widget-header:has(.widget-title.color-navy)::before {
    background-color: #2C698D;
}

.widget-header:has(.widget-title.color-bright-blue)::before {
    background-color: #00C4FF;
}

/* New update: 15/8/2023 */

@media (max-width: 768px) {
    .charts:has(.widget-box) {
        width: 100%;
    }
}

[id*="_DLFilter"] tr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

div:has(>input[type='image'][id*='_DLFilter_imgDelRecipients']) {
    font-size: 16px !important;
    padding: 8px !important;
}

@media (max-width: 821px) {
    [id*="_DLFilter"] tr {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    [id*="_DLFilter"] tr {
        grid-template-columns: 1fr;
    }
}

[id*="_FlyTreeView1"] table table tr {
    display: inline-table;
    width: unset !important;
}

.grid-column-1 {
    grid-column: 1;
}

.grid-column-2 {
    grid-column: 2;
}

.grid-column-3 {
    grid-column: 3;
}

.grid-column-4 {
    grid-column: 4;
}

.grid-column-5 {
    grid-column: 5;
}

/* New update: 17/8/2023 */
@media screen and (max-width: 910px) {
    .five-inputs .input-container.span5 {
        grid-column: span 4 !important;
    }
}

@media screen and (max-width: 768px) {
    .five-inputs .input-container.span2 {
        grid-column: span 2 !important;
    }

    .five-inputs .input-container.span3 {
        grid-column: span 3 !important;
    }

    .five-inputs .input-container.span4 {
        grid-column: span 3 !important;
    }

    .five-inputs .input-container.span5 {
        grid-column: span 3 !important;
    }
}

@media screen and (max-width: 530px) {
    .five-inputs .input-container.span5 {
        grid-column: span 1 !important;
    }

    .five-inputs .input-container.span2 {
        grid-column: span 1 !important;
    }

    .five-inputs .input-container.span3 {
        grid-column: span 1 !important;
    }

    .five-inputs .input-container.span4 {
        grid-column: span 1 !important;
    }

    .five-inputs .input-container.span5 {
        grid-column: span 1 !important;
    }
}

.input-container .two-inputs-reverse {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 10px;
}

.modal-body {
    max-height: 510px;
}

@media (max-width: 600px) {
    .modal-body {
        max-height: 400px;
    }
}

/* New update: 25/8/2023 */
.modal {
    top: 50%;
    left: 50%;
    right: unset;
    bottom: unset;
    transform: translate(-50%, -50%);
    margin: unset;
}

/*New update: 29/8/2023*/
table.table thead tr.thead th[scope] {
    text-align: center;
}

/* New update: 4/9/2023 */

.operations-box .small-inputs.many {
    grid-template-columns: repeat(20, 1fr);
}

.operations-box .small-inputs.many .input-container label {
    order: 0;
}

.operations-box .small-inputs.many .buttons-container {
    grid-column: 20;
}

html[dir="ltr"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: unset !important;
    right: 1px;
}

html[dir="ltr"] .widget-header::before {
    right: unset;
    left: 0;
}

.img-container img {
    width: auto;
    height: 100%
}

/* New update: 5/9/2023 */
.span13 {
    grid-column: span 13 !important;
}

.span14 {
    grid-column: span 14 !important;
}

.span15 {
    grid-column: span 15 !important;
}

.span16 {
    grid-column: span 16 !important;
}

.span17 {
    grid-column: span 17 !important;
}

.span18 {
    grid-column: span 18 !important;
}

.span19 {
    grid-column: span 19 !important;
}

.span20 {
    grid-column: span 20 !important;
}

@media screen and (max-width: 520px) {
    .span13 {
        grid-column: span 12 !important;
    }

    .span14 {
        grid-column: span 12 !important;
    }

    .span15 {
        grid-column: span 12 !important;
    }

    .span16 {
        grid-column: span 12 !important;
    }

    .span17 {
        grid-column: span 12 !important;
    }

    .span18 {
        grid-column: span 12 !important;
    }

    .span19 {
        grid-column: span 12 !important;
    }

    .span20 {
        grid-column: span 12 !important;
    }

    .operations-box .small-inputs.many .buttons-container {
        grid-column: unset;
    }
}

/* New udpate: 7/8/2023 */

/* start project-report */

.project-report-table th,
.project-report-table td {
    border-color: rgba(44, 105, 141, .3) !important;
}

.project-report-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.project-report-card {
    background-color: #4f86f7;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 10px 15px;
}

.project-report-card .icon-wrapper {
    width: 55px;
    height: 55px;
    background-color: #DEEEF3;
    border-radius: 10px;
}

.project-report-multi-forms .form-title {
    color: #242424;
    border-bottom: none !important;
    border-inline-start: 2px solid #DEEEF3;
    font-weight: normal !important;
}

.project-report-multi-forms .form-title.active {
    color: #4f86f7 !important;
    border-inline-start: 4px solid #4f86f7;
    font-weight: bold !important;
}

.project-report-multi-forms .forms {
    flex: 1;
    border: 1px solid #DEEEF3;
    border-radius: 10px;
}

/* New udpate: 9/9/2023 */

/* start general-report */

.five-items {
    display: grid;
    justify-content: flex-start;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.general-report-item {
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.general-report-item .item-header {
    background-color: rgba(44, 105, 141, .1);
    border-radius: 10px;
}

.general-report .widget-header::before {
    display: none;
}

.general-report .table-responsive {
    overflow-x: scroll;
}

.general-report .table th:nth-child(2) {
    padding: .5rem .5rem;
}

.general-report .table-borderless {
    width: 100%;
    padding: 20px;
    border-collapse: separate;
    border-spacing: 0 1em;
    text-align: center;
}

.general-report .table-borderless tbody tr {
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.general-report .table-borderless tbody tr:hover {
    background-color: rgb(248, 248, 248);
}

.general-report .table-borderless td {
    padding: .75rem .5rem !important;
}

.general-report .table th {
    font-weight: 500;
}

.general-report .table th:first-child {
    text-align: start;
}

.general-report .table th:nth-child(4),
.general-report .table td:nth-child(4) {
    color: #FF3548;
}

.general-report .table th:nth-child(5),
.general-report .table td:nth-child(5) {
    color: #4F86F7;
}

.general-report .table th:nth-child(6),
.general-report .table td:nth-child(6) {
    color: #008C4D;
}

/* New udpate: 9/9/2023 */

@media screen and (max-width: 1500px) {
    .five-items {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1366px) {

    .project-report-cards,
    .five-items {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1200px) {

    .project-report-cards,
    .five-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {

    .project-report-cards,
    .five-items {
        grid-template-columns: 1fr;
    }

    .project-report-multi-forms {
        flex-direction: column;
    }

    .project-report-multi-forms .heading {
        display: flex !important;
    }

    .project-report-multi-forms .form-title {
        border-inline-start: none;
        border-bottom: 2px solid #DEEEF3 !important;
    }

    .project-report-multi-forms .form-title.active {
        border-inline-start: none;
        border-bottom: 4px solid #238CAF;
    }

    .project-report-table th,
    .project-report-table td {
        border-color: rgba(44, 105, 141, .3) !important;
    }

    .project-report-cards {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    .project-report-card {
        background-color: #4f86f7;
        border-radius: 10px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        padding: 10px 15px;
    }

    .project-report-card .icon-wrapper {
        width: 55px;
        height: 55px;
        background-color: #DEEEF3;
        border-radius: 10px;
    }

    .project-report-multi-forms .form-title {
        color: #242424;
        border-bottom: none !important;
        border-inline-start: 2px solid #DEEEF3;
        font-weight: normal !important;
    }

    .project-report-multi-forms .form-title.active {
        color: #4f86f7 !important;
        border-inline-start: 4px solid #4f86f7;
        font-weight: bold !important;
    }

    .project-report-multi-forms .forms {
        flex: 1;
        border: 1px solid #DEEEF3;
        border-radius: 10px;
    }

    /* New udpate: 9/9/2023 */

    /* start general-report */

    .five-items {
        display: grid;
        justify-content: flex-start;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    .general-report-item {
        border-radius: 10px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .general-report-item .item-header {
        background-color: rgba(44, 105, 141, .1);
        border-radius: 10px;
    }

    .general-report .widget-header::before {
        display: none;
    }

    .general-report .table-responsive {
        overflow-x: scroll;
    }

    .general-report .table th:nth-child(2) {
        padding: .5rem .5rem;
    }

    .general-report .table-borderless {
        width: 100%;
        padding: 20px;
        border-collapse: separate;
        border-spacing: 0 1em;
        text-align: center;
    }

    .general-report .table-borderless tbody tr {
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .general-report .table-borderless tbody tr:hover {
        background-color: rgb(248, 248, 248);
    }

    .general-report .table-borderless td {
        padding: .75rem .5rem !important;
    }

    .general-report .table th {
        font-weight: 500;
    }

    .general-report .table th:first-child {
        text-align: start;
    }

    .general-report .table th:nth-child(4),
    .general-report .table td:nth-child(4) {
        color: #FF3548;
    }

    .general-report .table th:nth-child(5),
    .general-report .table td:nth-child(5) {
        color: #4F86F7;
    }

    .general-report .table th:nth-child(6),
    .general-report .table td:nth-child(6) {
        color: #008C4D;
    }

    /* New udpate: 9/9/2023 */

    @media screen and (max-width: 1500px) {
        .five-items {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media screen and (max-width: 1366px) {

        .project-report-cards,
        .five-items {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media screen and (max-width: 1200px) {

        .project-report-cards,
        .five-items {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media screen and (max-width: 768px) {

        .project-report-cards,
        .five-items {
            grid-template-columns: 1fr;
        }

        .project-report-multi-forms {
            flex-direction: column;
        }

        .project-report-multi-forms .heading {
            display: flex !important;
        }

        .project-report-multi-forms .form-title {
            border-inline-start: none;
            border-bottom: 2px solid #DEEEF3 !important;
        }

        .project-report-multi-forms .form-title.active {
            border-inline-start: none;
            border-bottom: 4px solid #238CAF;
        }
    }
}
    /* end project-report */

    /* New udpate: 20/9/2023 */

    /* start form-generate */

button.btn.outline-navy{
    color: #2C698D;
    border: 1px solid #2C698D !important;
}

button.btn.navy{
    border: 1px solid #2C698D !important;
}

.form-generate textarea{
    min-width: unset;
}

.form-generate .steps .step{
    width: 100px;
    height: 8px;
    background-color: #EEE;
    border-radius: 10px;
    cursor: pointer;
}

.form-generate .steps .step.active{
    background-color: #2C698D;
}

.form-generate .buttons{
    width: fit-content;
    margin-inline-start: auto;
}

.form-generate .item-type{
    font-weight: 500;
    border: 2px solid rgba(44, 105, 141,.3);
}

.form-generate .item-type .icon-wrapper{
    width:30px;
    height: 30px;
    color: #2C698D;
    background-color: rgba(44, 105, 141,.2);
}

input[type="color"]{
    flex: unset !important;
}

.box-shadow{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.form-generate .radio label,
.form-generate .check label{
    display: flex;
    align-items: center;
    gap: 5px;
}

.form-generate input[type="radio"],
.form-generate input[type="checkbox"]{
    display: none;
}

.form-generate .radio-btn,
.form-generate .check-btn{
    width: 25px;
    height: 25px;
    padding: 2px;
    border: 2px solid #2C698D;
    display: inline-block;
}

.form-generate .radio-btn{
    padding: 4px;
}

.form-generate .radio-btn .active-radio,
.form-generate .check-btn .active-check{
    width: 100%;
    height: 100%;
    background-color: #2C698D;
    display: none;
}

.form-generate .radio-btn,
.form-generate .radio-btn .active-radio{
    border-radius: 50%;
}

.form-generate .check-btn{
    border-radius: 5px;
    padding: 0;
}

.form-generate .check-btn .active-check{
    color: #FFF;
    width: 103%;
    height: 105%;
    justify-content: center;
    align-items: center;
}

.form-generate input[type="radio"]:checked ~ label .radio-btn .active-radio,
.form-generate input[type="checkbox"]:checked ~ label .check-btn .active-check{
    display: flex;
}

@media screen and (max-width: 768px) {
    .form-generate .w-50{
        width: 100% !important;
    }
}

    /* end form-generate */

    /* New udpate: 25/9/2023 */

    /* start plan */

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

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

.plan-item .v-line{
    width: 2px;
}

.plan-item:last-child .v-line{
    margin-bottom: 20px;
}

.plan-item .h-line{
    width: 15px;
    height: 2px;
    margin-bottom: 20px;
}

.flex-1{
    flex: 1;
}

.flex-2{
    flex: 2;
}
    /* end plan */
/*  27/9/2023 */

.two-inputs-reverse.auto {
    grid-template-columns: 1fr auto;
}
/*.hidden-link[href] {
    display: inline-block !important;
}*/

/*.hidden-link[Enabled="true"] {
    display: inline-block !important;
}*/

.hidden-link[disabled] {
    display: none !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    max-width: 250px !important;
}

/* 21/2/2024 */
.multi-inputs.search-area > div:nth-child(n+5) {
    display: none;
}

.multi-inputs.search-area > div.buttons-container {
    display: flex;
}

.seeMore {
    display: flex;
    width: fit-content;
    margin-inline-start: auto;
    font-weight: 600;
    font-size: 16px;
    color: #4f86f7;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

    .seeMore:hover {
        color: #4f86f7;
    }

    .seeMore,
    .seeMore > svg {
        transition: 0.2s all;
    }

        .seeMore:hover > svg {
            transform: rotate(-90deg);
        }

.multi-inputs:not(.search-area) + .seeMore:hover > svg {
    transform: rotate(90deg);
}

:root[dir="ltr"] .seeMore:hover > svg {
    transform: rotate(90deg);
}

:root[dir="ltr"] .multi-inputs:not(.search-area) + .seeMore:hover > svg {
    transform: rotate(-90deg);
}

:root[dark="true"] .input-container input {
    color: #000;
}

:root[dark="true"] select {
    background-color: #c6c6c6 !important;
    color: #000;
}

    :root[dark="true"] select option {
        color: #000;
    }

:root[dark="true"] .dropdown-menu {
    border: 1px solid #fff;
}

:root[dark="true"] nav .dropdown-menu::after {
    --body-color: #fff;
    border-top-color: var(--body-color);
    border-left-color: var(--body-color);
}

:root[dark="true"] :is(.side-bar .nav-pills .nav-item .nav-link .svg-inline--fa, .wide-sidebar .side-bar .nav-pills .nav-item .nav-link span.menu-text, .accordion-item .accordion-button, .task-details .reply .reply-header .date .text, .info-text, .task-details .reply .reply-comment, .fc-header-title h2, .fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td, .fc-day-number, .external-event.ui-draggable.ui-draggable-handle, .fc-widget-header.fc-agenda-axis) {
    color: #fff;
}

:root[dark="true"] :is(.accordion-item, .accordion-button) {
    background-color: #222131;
}

:root[dark="true"] {
    color: #fff;
}

.manage .manage-card.color-red:hover {
    background-color: rgba(247, 79, 79, 0.1);
}

:root[dark="true"] .task-details .wrapper {
    background-color: var(--main-color);
}

:root[dark="true"] :is(.task-details .details .detail>div, .task-details :is(.title, .disc)) {
    color: #fff;
}

:root[dark="true"] .task-details .details {
    background-color: #757575;
}

:root[dark="true"] .dd-item {
    color: #fff;
}

:root[dark="true"] svg.svg-inline--fa.fa-timer {
    color: #fff;
}

/*/13/06/2024/*/
.star-rating-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.stars-rating {
    display: flex;
    align-items: center;
}

.stars-rating-value {
    font-weight: 500;
    margin: 0;
}

.star {
    font-size: medium;
    width: 15px;
    display: inline-block;
    color: gray;
}

    .star:last-child {
        margin-right: 0;
    }

    .star:before {
        content: '\2605';
    }

    .star.on {
        color: gold;
    }

    .star.half:after {
        content: '\2605';
        color: gold;
        position: absolute;
        margin-right: -13px !important;
        width: 6.66px;
        overflow: hidden;
    }

div:has(>.table.table-striped.table-bordered.table-hover) {
    max-width: unset;
}

.main-content {
    overflow: auto;
}

div:has(>table) {
    overflow: auto;
}
/*body .modal-backdrop:not(:last-child) {
    display: none;
}*/
.status-td.notStarted div { /*new by Ghamdan on 13-08-2024*/
    background-color: #D9D9D9;
}

input[autocomplete="on"] {
    background: url("/assets/v2/imgs/wand-sparkles-solid.svg");
    background-size: 15px;
    background-position: 10px center;
    background-repeat: no-repeat;
}

:root[dir="ltr"] input[autocomplete="on"] {
    background-position: 95% center;
}