/* Figma Styles of your File */
@font-face {
    font-family: 'AbdoLine';
    src: url('../fonts/AbdoLine.otf') format('opentype');
}

@font-face {
    font-family: 'AbdoLine-Black';
    src: url('../fonts/AbdoLine-Black.otf') format('opentype');
}

@font-face {
    font-family: 'AbdoLine-Bold';
    src: url('../fonts/AbdoLine-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'AbdoLine-Heavy';
    src: url('../fonts/AbdoLine-Heavy.otf') format('opentype');
}

@font-face {
    font-family: 'AbdoLine-Light';
    src: url('../fonts/AbdoLine-Light.otf') format('opentype');
}

@font-face {
    font-family: 'AbdoLine-Thin';
    src: url('../fonts/AbdoLine-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Noor';
    src: url('../fonts/Noor.ttf') format('opentype');
}

@font-face {
    font-family: 'Noor-Bold';
    src: url('../fonts/Noor-Bold.ttf') format('opentype');
}

@font-face {
    font-family: 'Noor-Light';
    src: url('../fonts/Noor-Light.ttf') format('opentype');
}

:root {
    /* Colors */
    --protection: #7e4399;
    --health: #de2443;
    --wash: #12a3d5;
    --food: #2aa747;
    --shelter: #115575;
    --white: #ffffff;
    --gray-500: #565656;
    --gray-300: #848484;
    --gray-50: #f2f2f2;
    --gray-150: #d6d6d6;
    --gray-200: #b8b8b8;
    /* Fonts */
    --font-Noor: Noor;
    --font-Noor-Light: Noor-Light;
    --font-AbdoLine: AbdoLine;
    --font-AbdoLine-Thin: AbdoLine-Thin;
    --font-AbdoLine-Black: AbdoLine-Black;
    /* Effects */
}
body {
    font-family: var(--font-Noor);
    color: var(--gray-500);
}
a:hover .icon-nohover {
    display: inline-block;
}

a:hover .icon-hover {
    display: none;
}

a .icon-nohover {
    display: none;
}

a .icon-hover {
    display: inline-block;
}

.br-protection {
    border-top: 4px solid var(--protection);
}

    a.br-protection:hover, .br-protection.active {
        background: var(--protection) !important;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
        color: var(--white) !important;
    }


.bg-protection {
    background: var(--protection) !important;
}
.text-protection {
    color: var(--protection) !important;
}
.fill-protection {
    fill: var(--protection) !important;
}

.br-health {
    border-top: 4px solid var(--health);
}

    a.br-health:hover, .br-health.active {
        background: var(--health) !important;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
        color: var(--white) !important;
    }

.bg-health {
    background: var(--health) !important;
}
.text-health {
    color: var(--health) !important;
}

.fill-health {
    fill: var(--health) !important;
}

.br-food {
    border-top: 4px solid var(--food);
}

    a.br-food:hover, .br-food.active {
        background: var(--food) !important;
        color: var(--white) !important;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    }

.bg-food {
    background: var(--food) !important;
}
.text-food {
    color: var(--food) !important;
}

.fill-food {
    fill: var(--food) !important;
}

.br-wash {
    border-top: 4px solid var(--wash);
}

    a.br-wash:hover, .br-wash.active {
        background: var(--wash) !important;
        color: var(--white) !important;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    }

.bg-wash {
    background: var(--wash) !important;
}

.text-wash {
    color: var(--wash) !important;
}
.fill-wash {
    fill: var(--wash) !important;
}

.br-shelter {
    border-top: 4px solid var(--shelter);
}

    a.br-shelter:hover, .br-shelter.active {
        background: var(--shelter) !important;
        color: var(--white) !important;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    }

.bg-shelter {
    background: var(--shelter) !important;
}
.text-shelter {
    color: var(--shelter) !important;
}
.fill-shelter {
    fill: var(--shelter) !important;
}

#header-img {
    background-image: url('/img/Frame43.png');
    height: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.atext {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    color: var(--bs-btn-color);
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-details {
    width: 108px;
    background: #E5E5E5;
}

.noor-g-300-16 {
    color: var(--gray-300) !important;
    font-family: var(--font-Noor);
    font-size: 16px;
}
.noor-g-300-14 {
    color: var(--gray-300) !important;
    font-family: var(--font-Noor);
    font-size: 14px;
}

.noor-gray-500 {
    color: var(--gray-500) !important;
    font-family: var(--font-Noor);
    font-size: 16px;
}

.noor-gray-500-14 {
    color: var(--gray-500) !important;
    font-family: var(--font-Noor);
    font-size: 14px;
}
.noor-gray-700-14 {
    color: var(--gray-700) !important;
    font-family: var(--font-Noor);
    font-size: 14px;
}

.N-wash-16 {
    color: var(--wash);
    font-family: var(--font-Noor);
    font-size: 16px;
    font-weight: 700;
}

.title-700 {
    color: var(--gray-700) !important;
    font-family: var(--font-AbdoLine);
    font-size: 16px;
}

.title-500 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine);
    font-size: 16px;
}

.A-g-500-20 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine);
    font-size: 20px;
}

.A-g-500-16 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine);
    font-size: 16px;
}
.A-g-500-14 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine);
    font-size: 14px;
}

.A-Thin-g-300-14 {
    color: var(--gray-300)!important;
    font-family: var(--font-AbdoLine-Thin);
    font-size: 14px;
}
.A-Thin-g-300-16 {
    color: var(--gray-300)!important;
    font-family: var(--font-AbdoLine-Thin);
    font-size: 14px;
}
.A-Thin-w-14 {
    color: var(--white) !important;
    font-family: var(--font-AbdoLine-Thin);
    font-size: 14px;
}

.A-Thin-g-700-20 {
    color: var(--gray-700) !important;
    font-family: var(--font-AbdoLine-Thin);
    font-size: 20px;
}

.A-Thin-g-500-16 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine-Thin);
    font-size: 16px;
}

.A-Black-w-500-28 {
    color: var(--white) !important;
    font-family: var(--font-AbdoLine-Black);
    font-size: 28px;
}

.A-Black-w-500-30 {
    color: var(--white) !important;
    font-family: var(--font-AbdoLine-Black);
    font-size: 30px;
}

.A-Black-g-500-30 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine-Black);
    font-size: 30px;
}

.A-Black-g-500-24 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine-Black);
    font-size: 24px;
}

.A-Black-g-500-18 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine-Black);
    font-size: 18px;
}
.A-Black-g-500-16 {
    color: var(--gray-500) !important;
    font-family: var(--font-AbdoLine-Black);
    font-size: 16px;
}


.btn-search {
    border: none;
    background: none;
}

#f-search {
    width: 250px;
}

.pointer {
    cursor: pointer !important;
}


.frame {
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, .1);
    border-left-color: #080;
    -webkit-animation: spinner 1s linear infinite;
    -moz-animation: spinner 1s linear infinite;
    animation: spinner 1s linear infinite;
    margin: 25px auto;
}

@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Start Navbar */
.navbar {
    height: 70px;
}

    .navbar .container {
        height: 50px;
    }

.navbar-nav .nav-item .badge {
    position: absolute;
    top: -2px;
    left: 18px;
    font-size: 14px;
    font-family: cursive;
    font-weight: 100;
    border-radius: 25px;
    padding: 5px;
    border: solid 2px #d1e8dc;
    background-color: #ed1c24 !important;
}

.dropdown-user-menu {
    padding-top: 0;
    width: 301px;
}

.user-menu {
    background: #12a3d5;
    color: #fff;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-radius: 5px 5px 0 0;
}
.su-link:hover {
    border-radius: 4px;
    background: var(--gray-gray-50, #F2F2F2);
}
/* end Navbar */

/* Start main */

#main-header {
    height: 100px;
    padding-top: 15px;
}

#main-content {
    border-radius: 20px;
    border-top: 4px solid #CCC;
    background: var(--gray-50);
    /* min-height: 1000px; */
    margin-bottom: 100px;
}

.main-content {
    border-radius: 20px;
    border-top: 4px solid #CCC;
    background: var(--gray-50);
    min-height: 1000px;
    margin-bottom: 100px;
}

.card-content {
    margin-top: 50px;
    padding: 50px;
    border-radius: 20px;
    background: var(--gray-50);
}

.su-card-title {
    border-bottom: 2px solid var(--gray-150);
    padding: 10px;
    margin-bottom: 50px;
}

.main-content-navber {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap:wrap;
    align-items: flex-start;
    margin-top: -4px;
    gap: 10px;
}

.main-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 0px 6px 6px;
    background: var(--white);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    height: 50px;
    padding: 10px;
}

/* .main-content-navber .active {
    height: 60px;
} */
.nav-link.br-food.active {
       height: 60px;
    }

@media (max-width: 992px) {
    #navbarResponsive {
        background: var(--white);
        padding-right: 10px;
        border-radius: 1%;
    }

}

main.container {
    min-height: 500px;
}

/* end main */
/* Start Footer */
.footer {
    padding-top: 20px;
    padding-bottom: 20px;
    background: var(--gray-150);
}

    .footer .contact ul svg {
        width: 30px;
        height: 30px;
    }

    .footer .facebook {
        background-color: #1877f2;
    }

    .footer .twitter {
        background-color: #1da1f2;
    }
/* End Footer */

/*    ------------------------------Start notifications----------------------------------------------*/
.NotificationOpen {
    background-color: #fff !important;
}

.NotificationClose {
    background-color: #ecf0f1 !important;
}

.notifications {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: 0.25s ease-out 0.1s opacity;
    -moz-transition: 0.25s ease-out 0.1s opacity;
    -o-transition: 0.25s ease-out 0.1s opacity;
    transition: 0.25s ease-out 0.1s opacity;
    background: #ecf0f1;
    border: 1px solid #bdc3c7;
    padding: 0;
    right: unset !important;
    left: 0;
    width: 350px
}

    .notifications:after {
        border: 10px solid transparent;
        border-bottom-color: #12a3d5;
        content: '';
        display: block;
        height: 0;
        left: 10px;
        position: absolute;
        top: -20px;
        width: 0;
    }

@media (max-width: 991px) {
    .notifications:after {
        right: 10px;
        top: 24px;
    }
}

.notifications h3 {
    cursor: default;
    font-size: 1.05em;
    font-weight: normal;
}

.notifications .show-all {
    display: block;
    text-align: center;
    text-decoration: none;
}

.notifications h3, .notifications .show-all {
    background: #12a3d5;
    color: #fff !important;
    margin: 0;
    padding: 10px;
}

.notifications .notifications-list {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

    .notifications .notifications-list::-webkit-scrollbar-track {
        background-color: #F5F5F5;
    }

    .notifications .notifications-list::-webkit-scrollbar {
        width: 8px;
        background-color: #F5F5F5;
    }

    .notifications .notifications-list::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }

    .notifications .notifications-list .item {
        -webkit-transition: -webkit-transform 0.25s ease-out 0.1s;
        -moz-transition: -moz-transform 0.25s ease-out 0.1s;
        -o-transition: -o-transform 0.25s ease-out 0.1s;
        transition: transform 0.25s ease-out 0.1s;
        border-top: 1px solid #bdc3c7;
        color: #7f8c8d;
        cursor: default;
        display: block;
        padding: 10px;
        position: relative;
        white-space: nowrap;
    }

        .notifications .notifications-list .item .details {
            margin-right: 10px;
            white-space: normal;
            padding-left: 10px;
        }

            .notifications .notifications-list .item .details .title,
            .notifications .notifications-list .item .details .date {
                display: block;
            }

            .notifications .notifications-list .item .details .date {
                color: #bdc3c7;
                font-size: 0.85em;
                margin-top: 3px;
            }

        .notifications .notifications-list .item:before {
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -moz-background-clip: padding-box;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            background: #12a3d5;
            content: '';
            height: 8px;
            width: 8px;
        }

        .notifications .notifications-list .item:before, .notifications .notifications-list .item .details, .notifications .notifications-list .item .button-dismiss {
            display: inline-block;
            vertical-align: middle;
        }

        .notifications .notifications-list .item.no-data {
            display: none;
            text-align: center;
        }

        .notifications .notifications-list .item.expired {
            color: #bdc3c7;
        }
/* End notifications */

/* start pagination */
.pagination-container .pagination li a {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.pagination-container .pagination li:first-child a {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-container .pagination li:last-child a {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.pagination-container .pagination li:not(:first-child) a {
    margin-right: calc(var(--bs-border-width) * -1);
}

.pagination-container .pagination li.active a {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--food);
    border-color: var(--bs-pagination-active-border-color);
}
/* End pagination */

/* Start supporters */
.su-main {
    padding: 0 80px 100px;
    min-width:350px
}
.su-P-Type {
    border-radius: 6px;
    background: var(--white);
    display: flex;
    padding: 10px;
    align-items: flex-start;
    gap: 10px;
}
@media (max-width: 991px) {
    .su-main {
        padding: 0 10px 10px
    }
    .active .su-P-Type-title {
        width: 100%;
        text-align: center
    }
}
/* End pagination */
/* Start supporters Datails */
.su-d-main-content {
    padding: 0 100px 100px;
    margin-bottom: 0px;
}
.su-d-main-content {
    padding: 0 100px 100px;
    margin-top: 50px;
    min-height: auto !important;
    margin-bottom: 0px !important;
}
.su-d-card {
    margin-top: 50px;
    border: none;
}
.su-d-row {
    padding: 50px
}
.su-d-div {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    align-items: center;
}

.su-d-cost {
    display: flex;
    padding: 5px 10px;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    border-radius: 6px;
    background: var(--wash, #12A3D5);
    margin-top: 30px;
}

.su-d-cost-2 {
    display: flex;
    padding: 0px 10px;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
}

.su-d-title {
    padding: 5px 70px;
}

.su-d-media {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
.su-d-img {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    height: 190px;
    width: 100%;
    overflow: hidden;
}
.su-d-content {
    width: 300px;
    min-height: 385px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25)
}
    .su-d-content:hover {
        border-radius: 8px;
        background: #FFF;
        box-shadow: 0px 1px 20px 4px rgba(0, 0, 0, 0.25);
        transition: .2s ease-in-out;
    }
@media (max-width: 991px) {
    .su-d-main-content {
        padding: 0 20px 10px;
    }
    .su-d-card {
        margin-top: 5px;
    }
    .su-d-row {
        padding: 5px
    }
    .su-d-title {
        padding: 0px 7px;
    }
    .su-d-cost {
        flex-direction: column;
    }
    #main-content {
        margin-bottom: 10px;
    }
    .su-d-main-content {
        padding: 0 20px 10px;
        margin-top: 20px;
    }
    .card-content {
        padding: 20px;
    }
}
/* End supporters Datails */
/* Start sp */
.su-sp-main-content {
    padding: 0 50px 50px
}
@media (max-width: 991px) {
    .su-sp-main-content {
        padding: 0 10px 10px;
    }
}
/* End sp */
/* Start su-o */
.su-o-main-content {
    padding: 0 50px 50px;
    min-height: auto !important
}
@media (max-width: 991px) {
    .su-o-main-content {
        padding: 0 10px 10px;
        min-height: auto !important
    }
}
/* End su-o */
/* Start su-o */
.su-p-main-content {
    padding: 0 50px;
    min-height: auto !important
}
.su-pd-main-content {
    padding: 0 50px 50px;
    min-height: auto !important
}
.su-pd-tab-content {
    padding: 0 40px 40px !important
}
@media (max-width: 991px) {
    .su-p-main-content {
        padding: 0 10px;
        min-height: auto !important
    }
    .su-pd-main-content {
        padding: 0 10px 10px;
        min-height: auto !important
    }
    .card-d-project {
        padding: 10px !important;
    }
    .su-pd-tab-content {
        padding: 0 10px 10px !important
    }
}
/* End su-o */
/* Start chat */
.direct-chat-msg, .direct-chat-text {
    display: block;
}

.direct-chat-msg {
    margin-bottom: 10px;
}

    .direct-chat-msg:before, .direct-chat-msg:after {
        content: " ";
        display: table;
    }

    .direct-chat-msg:after {
        clear: both;
    }

.direct-chat-messages, .direct-chat-contacts {
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -moz-transition: -moz-transform .5s ease-in-out;
    -o-transition: -o-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

.direct-chat-text {
    border-radius: 5px;
    position: relative;
    padding: 10px 10px;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    margin: 5px 0 0 5px;
    color: #444;
}

    .direct-chat-text:after, .direct-chat-text:before {
        position: absolute;
        right: 100%;
        top: 15px;
        border: solid transparent;
        border-right-color: #d2d6de;
        content: ' ';
        height: 0;
        width: 0;
        pointer-events: none;
    }

    .direct-chat-text:after {
        border-width: 5px;
        margin-top: -5px;
    }

    .direct-chat-text:before {
        border-width: 6px;
        margin-top: -6px;
    }

.right .direct-chat-text {
    margin-right: 5px;
    margin-left: 0;
}

    .right .direct-chat-text:after, .right .direct-chat-text:before {
        right: auto;
        left: 100%;
        border-right-color: transparent;
        border-left-color: #d2d6de;
    }

.direct-chat-img {
    border-radius: 50%;
    float: left;
    width: 40px;
    height: 40px;
}

.right .direct-chat-img {
    float: right;
}

.direct-chat-warning {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
}

.direct-chat-name {
    font-weight: 600;
}

.direct-chat-timestamp {
    color: #999;
}

.direct-chat-contacts-open .direct-chat-contacts {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.direct-chat-primary .right > .direct-chat-text {
    background: #3c8dbc;
    border-color: #3c8dbc;
    color: #fff;
}

    .direct-chat-primary .right > .direct-chat-text:after, .direct-chat-primary .right > .direct-chat-text:before {
        border-left-color: #3c8dbc;
    }

.direct-chat-success .right > .direct-chat-text {
    background: var(--food);
    border-color: var(--food);
    color: #fff !important;
}

    .direct-chat-success .right > .direct-chat-text:after, .direct-chat-success .right > .direct-chat-text:before {
        border-left-color: var(--food);
    }

.direct-chat-warning .right > .direct-chat-text {
    background: #f39c12;
    border-color: #f39c12;
    color: #fff;
}

    .direct-chat-warning .right > .direct-chat-text:after, .direct-chat-warning .right > .direct-chat-text:before {
        border-left-color: #f39c12;
    }
/* End chat */
/* Start filter */
.yn-filter-menu {
    position: absolute;
    top: -2px !important;
    left: 54px;
    right: unset !important;
    /*margin-top: -50px !important;
    margin-left: 113px;*/
    width: 300px;
    padding: 20px;
    border-radius: 0px 0px 8px 8px;
    border-top: 4px solid var(--food, #2AA747);
    background: #FFF;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);
}
@media (max-width: 500px) {
    .yn-filter-menu {
        top: 55px !important;
        right: -140px !important;
    }
}
.yn-filter[aria-expanded="true"] {
    background: var(--food) !important;
    color: var(--white) !important;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
}

    .yn-filter[aria-expanded="true"] .icon-nohover {
        display: inline-block;
    }

    .yn-filter[aria-expanded="true"] .icon-hover {
        display: none;
    }
/* End filter */
/* Start d-project */
.card-d-project {
    margin-top: 25px;
    padding: 40px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);
}
.d-pt-rate {
    display: flex;
    height: 70px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid var(--gray-150);
}
.d-pt-content {
    margin-top:50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 8px;
    border-top: 4px solid #CCC;
    background: #FFF;
}

/* End d-project */
/* start dropdown */
.yan-dropdown-menu-hover {
    margin-top: -5px;
    padding-top: 15px;
    background: none;
    border: none;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
}
.yan-dropend-menu {
    padding-right: 10px;
    background: none;
    border: none;
    position: absolute;
    top: 0px;
    right: 100%;
}

/*li:first-child .dropdown-item {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}
li:last-child .dropdown-item {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}*/
    .yan-dropdown-menu > li:first-child > a,
    .yan-dropdown-menu-hover  .yan-dropdown-menu > li:first-child > a,
    .yan-dropend-menu  .yan-dropdown-menu > li:first-child > a {
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
    }

.yan-dropdown-menu-hover .yan-dropdown-menu > li:last-child > a,
.yan-dropend-menu .yan-dropdown-menu >  li:last-child > a {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}
.yan-dropdown-menu li:last-child  {
    border:none;
}

.dropdown-item:hover {
    background-color: var(--wash) !important;
    color: #fff !important;
}

.dropdown-item.wash:hover {
    background-color: var(--wash) !important;
}

.dropdown-item.shelter:hover {
    background-color: var(--shelter) !important;
}

.dropdown-item.protection:hover {
    background-color: var(--protection) !important;
}

.dropdown-item.food:hover {
    background-color: var(--food) !important;
}

.dropdown-item.health:hover {
    background-color: var(--health) !important;
}

.yan-dropdown-menu li a:hover svg path {
    fill: #fff;
}

.dropdown .dropdown-menu,
.dropdown .yan-dropdown-menu-hover,
.dropdown .yan-dropend-menu {
    display: none;
}
.yan-dropdown-menu-hover > .dropdown-menu,
.yan-dropend-menu > .dropdown-menu
{
    display: block;
    position: relative;
}
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
    display: block;
    margin-top: 0.125em;
    margin-right: 0.125em;
}
.dropdown:hover > .yan-dropdown-menu-hover,
.dropend:hover > .yan-dropend-menu
{
    display: block;
}

.dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    right: 100%;
}


.yan-dropdown-menu {
    padding: 0px;
    min-width: 200px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    border:none
}

    .yan-dropdown-menu li {
        border-bottom: 1px solid #F2F2F2;
    }

        .yan-dropdown-menu li a {
            padding: 10px 10px;
        }

            .yan-dropdown-menu li a svg {
                float: left;
            }



/* End dropdown */


/*--------------------*/
.cssload-container {
    display: flex;
    justify-content: center;
    align-items: center;
  background:
    rgba(217, 217, 217, 0.66)
    no-repeat
    0 0;
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;   
    }
    
    .cssload-speeding-wheel {
      content: "";
      display: block;
      position: absolute;
      left: 48%;
      top: 40%;
      width: 63px;
      height: 63px;
      margin: 0 auto;
      border: 4px solid #3d9df2;
      border-radius: 50%;
      border-left-color: transparent;
      border-right-color: transparent;
      animation: cssload-spin 500ms infinite linear;
      -o-animation: cssload-spin 500ms infinite linear;
      -ms-animation: cssload-spin 500ms infinite linear;
      -webkit-animation: cssload-spin 500ms infinite linear;
      -moz-animation: cssload-spin 500ms infinite linear;
    }
    
    @keyframes cssload-spin {
      100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    
    @-o-keyframes cssload-spin {
      100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    
    @-ms-keyframes cssload-spin {
      100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    
    @-webkit-keyframes cssload-spin {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    
    @-moz-keyframes cssload-spin {
      100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }                
/*--------------------*/