:root{
    --font-size-primary: 1.2rem;
    --font-size-secondary: 1.5rem;
    --font-size-tertiary: 2rem;
    --width-size: 80%;
        --backgroun-color: rgba(27, 54, 82, 1);
        --primary-color: rgb(117, 135, 153);
}


body{
    position: relative;
    background: rgb(198, 215, 222);
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
}


#thumbnail {
    cursor: pointer;
}


.subcribers-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.subcribers-header span {
    font-size: 12px;
}


.email-button {
    display: inline-block;
    padding: 10px 15px;
    height: fit-content;
    background: #28a745;
    color: white;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 13px;
}

.email-button:focus {
    background: #28a745;
}
.email-button:hover {
    background: #218838;
}


.subcribers-header .subcribers{
    font-size: 14px;
    background: #1b3652;
    padding: 5px 8px;
    border-radius: 5px;
    color: aliceblue;
}


.circle-loader.stop-error-loader {
    animation: none;
    transition: border 0.5s ease-out;
    border: 3px solid #d9534f;
}


.circle-loader.stop-error-loader .xmark {
    display: block;
}


.circle-loader .xmark {
    top: 40%;
    left: 5px;
    width: 32px;
    height: 32px;
    display: none;
    position: absolute;
    transform: scaleX(1) rotate(135deg);
}


.circle-loader .xmark::before, .circle-loader .xmark::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 32px;
    background-color: #d9534f;
}

.circle-loader .xmark::before {
    transform: rotate(90deg);
}

.circle-loader .xmark::after {
    transform: rotate(0deg);
}



.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    height: 100%;
    width: 100%;
    pointer-events: auto;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}


div.circle-loader.stop-circle-loader {
    animation: none;
    transition: border 0.5s ease-out;
    border: 3px solid #5cb85c;
}


div.circle-loader.stop-circle-loader .checkmark {
    display: block;
}

.circle-loader {
    width: 70px;
    height: 70px;
    display: flex;
    align-self: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    border: 4px solid #ebe0e0;
    animation: spin 1.2s linear infinite, colorChange 3s linear infinite;
}

.circle-loader .checkmark {
    top: 50%;
    left: 10px;
    right: 10px;
    width: 20px;
    content: "";
    height: 40px;
    display: none;
    position: absolute;
    transform-origin: left top;
    animation: check 0.8s ease;
    border-top: 4px solid #5cb85c;
    border-right: 4px solid #5cb85c;
    transform: scaleX(-1) rotate(135deg);
}

@keyframes check {
0% {
    height: 0;
    width: 0;
    opacity: 1;
}

20% {
    height: 0;
    width: 28px;
    opacity: 1;
}

40% {
    height: 46px;
    width: 28px;
    opacity: 1;
}

100% {
    height: 56px;
    width: 28px;
    opacity: 1;
}
}

@keyframes colorChange {
40% {
    border-left: 4px solid #2db981;
}

60% {
    border-bottom: 4px solid #2db981;
}

80% {
    border-right: 4px solid #2db981;
}

100% {
    border-top: 4px solid #ebe0e0;
}
}

@keyframes spin {
100% {
    transform: rotate(360deg);
}
}


.loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}
.loader {
    width: 48px;
    height: 48px;
    border: 8px solid aliceblue;
    border-bottom-color: #5f5755;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 

.modal,
.appendingContainer {
    display: none; 
    position: fixed; 
    z-index: 15; 
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100vh; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    height: 80vh;
    max-width: 700px;
    object-fit: cover;
}

.close-image,
.close-appending {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-image:hover,
.close-image:focus,
.close-appending:hover,
.close-appending:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


#all-message-popup {
    display: none;
}



.popup-message {
    display: flex;
    align-items: center;
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    padding: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: aliceblue;
    z-index: 11;
    overflow: hidden;
    
  }

  .popup-message img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .popup-content {
    flex: 1;
  }

  .popup-content h4 {
    margin: 0;
    font-size: 16px;
  }

  .popup-content p {
    margin: 5px 0 0;
    font-size: 14px;
  }

  .popup-content p,
  .new-message .last-message {
    white-space: nowrap;
    width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }


#messageAlert {
    background: #8fa7b6;
    color: #7a3030;
    border-radius: 5px;
    font-size: 1.2rem;
    display: flex;
    flex-direction: row;
    top: 10px;
    position: fixed;
    margin-top: 10px;
    padding: 0 10px;
    left: 2rem;
    right: 2rem;
    width: auto;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    z-index: 11;
}

#closeChatBtn.close-image {
    position: absolute;
    top: 5px;
    right: 15px;
    color: #f1f1f1;
    font-size: 30px;
    font-weight: bold;
    transition: 0.3s;
}

.close-image:hover,
.close-image:focus,
.close-edit {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}



.error#error-description{
    margin: 0;
    text-align: left;
    box-sizing: initial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.errorContainer{
    background: rgb(230, 186, 186);
    width: 100%;
    color: rgb(178, 23, 23);
    padding: 10px 10px;
    border-radius: 5px;
    font-size: 1rem;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.errorContainer {
    animation: right 0.5s ease-in;
}

.errorContainer .cancel-error {
    width: 5px;
    height: 5px;
    margin-left: 10px;
    background: none;
    border: 0;
    cursor: pointer;
    filter: invert(11%) sepia(65%) saturate(5423%) hue-rotate(353deg) brightness(105%) contrast(93%);
}


.body-containers-headers #search-product-form {
    display: none;
    position: absolute;
    width: 100%;
    background: #212d23;
    z-index: 11; top: 0;
    padding: 5px;
    height: 100%;
    right: 0;
    margin: 0;
}

.body-containers-headers .search-image {
    width: 20px;
    filter: invert(97%) sepia(7%) saturate(38%) hue-rotate(167deg) brightness(97%) contrast(92%);
}

#search-product-form .search-product-btn {
    background: teal;
    border: none;
    min-height: 100%;
    padding: 0 10px;
    line-height: 0;
    border-radius: 0 5px 5px 0;
    margin-right: 20px;
}

#search-product-form div.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#search-product-form .cancel-search-product {
    margin: 0 10px 0 20px;
    font-size: 22px;
    cursor: pointer;
    color: aliceblue;
    
}

#search-product-form .search-input {
    background: aliceblue;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
}

.body-containers-headers .slide-search-product-btn {
    background: rgb(52, 74, 74);
    border: none;
    height: 100%;
    padding: 5px;
    line-height: 0;
    border-radius: 50%;
}


.custom-datalist {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-datalist input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;

}

.custom-datalist #search-input:focus {
    border: 1px solid wheat;
    border-radius: 5px 0 0 0;
}

.custom-datalist-nav {
    color: darkslategray;
}

.custom-datalist-options {
    display: none;
    position: absolute;
    z-index: 3;
    background-color: white;
    border: 1px solid #ccc;
    height: fit-content;
    max-height: 50vh;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
}

.custom-datalist-options.active {
    display: block;
}

.custom-datalist-option {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    gap: 8px;
}

.custom-datalist-option img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
}

.custom-datalist-option:hover {
    background-color: #f0f0f0;
}















.header{
    margin-top: 0;
}

.Logo{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.Logo h6{
    color: rgba(206, 220, 222, 1);
    font-weight: 800;
    margin: 0 10px;
    text-transform: lowercase;
}

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


.allsocial-list .balance {
    color: rgb(238, 234, 228);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(99, 80, 57);
    width: 80%;
    border-radius: 5px;
    height: fit-content;
    margin: 5% 0 0 8%;
    overflow: hidden;
}

.allsocial-list .balance .accountbalance{
    background: bisque;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: center;
    
}

.allsocial-list .balance .accountbalance p{
    color: rgb(142, 98, 40);
    text-align: center;

}

.allsocial-list .balance .listnaira{
    font-size: var(--font-size-primary);
    padding: 5px;
    border-radius: 5px;
    height: fit-content;
    padding-right: 10px;
    margin: 0;
    text-wrap: nowrap;
    margin-bottom: 10px;
}

.allsocial-list .balance #listnair{
    font-size: var(--font-size-primary);
    padding-left: 5px;
}

.allsocial-list .balance div p{
    color: rgb(231, 230, 229);
    font-size: var(--font-size-primary);
}


@keyframes right {
    from{
        transform: translate(-50%);
    }
    to{
        transform: translate(0px);
    }
}

@keyframes bodyLeft {
    from{
        transform: translate(0px);
    }
    to{
        transform: translate(-50%);
    }
}





.allsocial-list{
    display: none;
    position: fixed;
    margin-left: 0;
    top: 0;
    height: 100vh;
    background: rgba(27, 54, 82, 1);
    background: darkslategray;
    margin: 0;
    width: 40%;
    border-radius: 0 5px 5px 0;
    z-index: 9;
    flex-direction: column;
    padding: 20px 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.allsocial-list{
    animation: right 0.3s ease;
}

.slideLeft {
    margin-left: auto;

}


.allsocial-list ul{
    margin-top: 100px;
}

.allsocial-list .list-items,
.allCategory .list-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 5px rgb(76, 102, 130);
    white-space: nowrap;
}

.allCategory .list-items{
    background: azure;
    background: white;
    color: darkslategrey;
    border-radius: 0;
    box-shadow: 0 0 0;
}

.allsocial-list .list-items {
    width: var(--width-size);
}

.home{
    display: flex;
    background: rgb(99, 80, 57);
    align-items: center;
    margin-bottom: 0;
    border-radius: 5px;
    cursor: pointer;
    width: 50%;
    box-sizing: border-box;
    justify-self: center;
    align-self: center;
    box-sizing: border-box;
    position: relative;
}

.home{
    transform: translatey(-30%);
}
.home i{
    color: rgb(240, 218, 189);
    position: absolute;
    left: 8px;
}

.home a{
    font-size: var(--font-size-primary);
    color: rgb(227, 221, 213);
    background: rgb(99, 80, 57);
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
}

.home:hover{
    background: rgb(227, 221, 213);
}
.home a:hover{
    color: rgb(227, 221, 213);
    background: rgb(123, 94, 67);
}

.allCategory-container-header {
    margin: 0 10% 10%;
    position: relative;
    margin-top: 80px;
}
.allsocial-list li,
.allCategory li{
    list-style: none;
}
.allsocial-list li .list-items:hover{
    background: #ffe4c4;

}
.allCategory li .list-items:hover{
    background: rgb(171, 162, 153);
}

.allCategory li .list-items {
    text-transform: uppercase;
}

.allCategory li .list-items span img,
.allCategory .description-listInsta img {
    width: 20px;
    object-fit: cover;
    margin-right: 10px;
}

.allCategory .description-listInsta img {
    border-radius: 50%;
    height: 20px;
}

.allCategory .description-listInsta li {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-transform: capitalize;
}

.allCategory li {
    margin-bottom: 0;
}

.home:hover{
    background: rgb(123, 94, 67);
}



.allsocial-list li i, 
.allCategory li i{
    font-size: var(--font-size-secondary);
    margin-right: 8px;
}




#login-user-container p{
    margin: 0;
    font-size: 1.3rem;
    margin: 0 7px;
}
#login-user-container a {
    color: #afafaf;
}
#login-user-container a span{
    all: unset;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 40%;
    margin: 0 0 0 10px;
}
#login-user-container img{
    width: 13px;
    filter: invert(77%) sepia(0%) saturate(1%) hue-rotate(0deg) brightness(91%) contrast(93%);
}



.allsocial-list span,
.allCategory span{
    display: flex;
    align-items: center;
}

.allsocial-list .fa-chevron-right,
.allCategory .fa-chevron-right{
    font-size: calc(var(--font-size-primary) - 0.2rem);
    color: rgb(116, 104, 104);
    margin-right: 0;
    transition: transform 0.4s ease;
}

.allCategory .fa-square-instagram{
    color: rgb(231, 84, 84);
}
.allCategory .fa-square-facebook{
    color: rgb(98, 98, 153);
}
.allCategory .fa-square-facebook{
    color: rgb(43, 43, 158);
}
.allCategory .fa-tiktok{
    color: rgb(61, 60, 60);
}
.allCategory .fa-youtube{
    color: rgb(231, 38, 38);
}
.allCategory .fa-square-x-twitter{
    color: rgb(50, 50, 53);
}

.allsocial-list p {
    display: flex;
    font-size: calc(var(--font-size-primary) - 0.1rem);
    font-weight: 700;
    color: rgb(160, 91, 0, 1);
    margin: 8px 10px;
}
.allCategory p{
    display: flex;
    font-size: calc(var(--font-size-primary) - 0.2rem);
    font-weight: 900;
    color: #023636;
    margin: 8px 0;
}



.category-list a{
    text-decoration: none;
    color: black;
    display: inline-block;
    width: 100%;
}
.category-list a:hover {
    text-decoration: none;
    color: rgb(148, 123, 94);
}
.category-list li {
    font-size: calc(var(--font-size-primary));
    list-style: none;
    margin: 5px 0 3px 8px;
}

.category-list ul {
    margin: 0;
}


.category-list {
    display: none;
}


.allCategory {
    display: none;
    width: 100%;
    position: absolute;
    z-index: 4;
}

.allCategory ul {
    display: flex;
    flex-direction: column;
}


.hides {
    display: block;
}

.hide {
    display: block;
}


.hide {
    display: block;
}


.allCategory ul .category-list {
    background: #e0e0e0;
    padding: 5px;
    border-radius: 0 0 5px 5px;
    width: 100%;
    margin: 0;
}

@keyframes body {
    from{
        transform: scale(0);
    }
    to{
        transform: scale();

    }
}







.body-containers {
    padding: 0;
}



.privacy-policy-container {
    margin: 20px 30px 30px;
    box-shadow: 0 0 5px rgb(82, 100, 100);
    border-radius: 5px;
    padding: 20px;
    font-size: 1.3rem;
    color: rgba(5, 64 , 68, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.privacy-policy-container div {
    margin-top: 30px;
}
.privacy-policy-container p {
    margin: 0;
}
.privacy-policy-container h6 {
    margin: 30px 0 15px;
}







.category-containers {
    cursor: pointer;
}


.body-containers .category-headers .fa-bars {
    filter: invert(78%) sepia(21%) saturate(358%) hue-rotate(353deg) brightness(98%) contrast(89%);
    font-size: 3rem;
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 10px;
}

.body-containers .category-headers i {
    font-size: 1rem;
    flex-direction: row;
}

.body-containers .category-headers span p {
    margin: 0;
    font-size: 1rem;
}

.body-containers .category-headers span {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.body-containers .body-headers .fa-bars {
    filter: invert(78%) sepia(21%) saturate(358%) hue-rotate(353deg) brightness(98%) contrast(89%);
    font-size: 3rem;
    width: 30px;
    cursor: pointer;
    transition: margin-left 2s ease;
}
.body-containers .body-headers .fa-bars:hover{
    filter: invert(46%) sepia(22%) saturate(761%) hue-rotate(348deg) brightness(91%) contrast(87%);
}
.body-containers .body-headers{
    background: darkslategray;

    padding: 10px;
    box-shadow: 0 0 10px rgb(12, 23, 34);
    transition: transform 2s ease;
}


.body-containers .category-headers {
    background: darkslategray;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 30px;
}
.body-containers .body-headers {
    border-radius: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;

}

.body-containers .body-headers,
.body-containers .category-headers{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@keyframes left {
    from{
        transform: scale(0);
    }
    to{
        transform: scale(0deg);

    }
}


.body-containers .body-headers .balance{
    color: rgb(38, 26, 11);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: rgb(217, 192, 161);
    width: 50%;
    border-radius: 5px;
    height: fit-content;
    padding: 0 10px;
    overflow: hidden;
    box-sizing: border-box;

}
.body-containers .body-headers .balance{
    animation: left 0.1s ease;
}

.body-containers .body-headers .balance .listnaira{
    font-size: 1rem;
    padding: 5px;
    border-radius: 5px;
    height: fit-content;
    padding-right: 10px;
    margin: 0;
    text-wrap: nowrap;
    word-break: keep-all;
}

.body-containers .body-headers .balance #listnair{
    font-size: 1rem;
    padding-left: 1px;
}

.body-containers .body-headers .balance div p{
    font-size: 1rem;
    margin: 0;
    color: rgb(38, 26, 11);
}
.body-containers .body-headers .balance h6{
    font-size: 1.3rem;
    margin: 0;
    padding-right: 5px;
    color: rgb(38, 26, 11);
}
.body-container .body-header {
    background: rgb(216, 206, 192);
    font-size: 7rem;
}



#user-menu-header ul li:hover img,
#user-menu-header ul li form button:hover img
{
    filter: invert(32%) sepia(7%) saturate(3650%) hue-rotate(351deg) brightness(103%) contrast(81%);

}
#user-menu-header ul li a:hover,
#user-menu-header ul li form button:hover
{
    color: rgb(123, 90, 52);
}


#user-menu-header ul li form button{
    color: rgb(87, 92, 92);
    background: none;
    border: 0;
}

#user-menu-header ul li form {
    margin: 0;
}
#user-menu-header ul li a {
    width: 100%;
    color: rgb(87, 92, 92);
}
#user-menu-header ul li:last-of-type  {
    margin-top: 20px;
    border-top: 1px solid rgb(227, 230, 232);
    display: flex;
    justify-content: center;
    align-items: center;
}
#user-menu-header ul li .logOut-list img{

    filter: invert(56%) sepia(9%) saturate(0%) hue-rotate(148deg) brightness(93%) contrast(94%);
}
#user-menu-header ul li .logOut-list p{
    font-size: 1.4rem;
}
#user-menu-header ul li .logOut-list {
    justify-content: center;
}
#user-menu-header ul  {
    margin: 30px 0 0;
}
#user-menu-header ul li  {
    list-style: none;
}
#user-menu-header ul li span{
    display: flex;
    margin: 10px;
    align-items: center;
}
#user-menu-header ul li span p{
    margin: 0;
    margin-left: 10px;
    font-size: 1.2rem;
    font-weight: 700;
}
#user-menu-header ul li img{
    width: 20px;
    margin: 0;
}


    #user-menu-header{
        display: none;
        position: absolute;
        background: rgb(240, 240, 240);
        width: 250px;
        right: 0;
        top: 50px;
    }
    
    #user-menu-header .user-menu-balance {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        border-bottom: 1px solid rgb(184, 186, 188);
    }
    #user-menu-header .user-menu-balance div{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0;
    }
    #user-menu-header .user-menu-balance p{
        margin: 0;
        font-size: 1rem;
        color: rgb(127, 126, 126);
    }
    #user-menu-header .user-menu-balance h5,
    #user-menu-header .user-menu-balance h6
    {
        margin: 0;
        font-weight: bold;
        color: rgb(9, 101, 181);
        font-size: 1.5rem;
    }
    #user-menu-header .user-menu-balance h6{
        margin: 0 5px;
        font-style: italic;
        font-size: 1.3rem;
    }
#user-menu-container {
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-right: 10px;
    position: relative;
    width: fit-content;
    color: antiquewhite;
    cursor: pointer;
    padding: 0 10px;

}

#user-menu-container p {
    margin: 0;
    overflow: hidden;
    width: 6ch;
    font-size: 1.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;

}
#user-menu-container::before {
    position: absolute;
    content: "";
    top: 8px;
    right: 0;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-color: antiquewhite transparent transparent transparent;
}
#user-menu-container:hover img {
    filter: invert(54%) sepia(2%) saturate(3386%) hue-rotate(353deg) brightness(86%) contrast(83%);
}
#user-menu-container:hover,
#user-menu-container:hover::before
 {
    color: rgb(129, 119, 107);
    border-color: rgb(129, 119, 107) transparent transparent transparent;
}

#user-menu-container img{
    filter: invert(80%) sepia(67%) saturate(1%) hue-rotate(314deg) brightness(92%) contrast(96%);
    width: 20px;
    height: 20px;
    margin: 0;
}

#user-menu-header.open-hide {
    display: block;
}



#currency-selection-container form img{
    width: 20px;
    margin: 0;
    position: absolute;
    right: -5px;
    z-index: 0;
    cursor: pointer;
    filter: invert(39%) sepia(7%) saturate(139%) hue-rotate(87deg) brightness(96%) contrast(84%);
}
#currency-selection-container form {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    margin: 0 10px;
}

#currency-selection-container #currency-selection::after {
    border: 0;
}
#currency-selection-container #currency-selection {
    color: #848584;
    border: 0;
    cursor: pointer;
    background: 0;
    font-size: 1.3rem;
    height: fit-content;
    padding: 0 15px;
    margin: 0 0;
    z-index: 1;
}

#header-container {
    display: flex;
    flex-direction: row;
    align-items: center;

}




 

.order-description {
    background: rgba(27, 54, 82, 1);
    margin: 10% 10px;
    border-radius: 3px;
    box-shadow: 0 0 10px rgb(17, 27, 37);
    padding: 20px;

}


.order-description li a{
    display: flex;
    /* justify-content: center; */
    justify-items: center;
    align-items: center;
    background: linear-gradient(to right, rgb(153, 152, 155),  rgb(178, 172, 164));
    margin-bottom: 0;
    padding: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 80%;
    flex-direction: row;
    padding: 15px 10px;
    color: rgb(38, 33, 26, 1);
}

.order-description li a:hover{
    color: rgb(92, 74, 7);
    background: linear-gradient(to right, rgb(193, 177, 170),  rgb(194, 176, 153));
    
}

.order-description li {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.order-description li a p{
    margin: 0;
    padding-left: 10px;
    font-size: 1.3rem;
}

.allsocial-list .list-items  a .fa-cart-shopping, 
.allsocial-list .list-items a .fa-wallet,
.allsocial-list .list-items a .fa-ticket,
.allsocial-list .list-items a .fa-coins,
.allsocial-list .list-items a .fa-address,
.allsocial-list .list-items a .fa-lock {
    padding: 5px;
    filter: invert(5%) sepia(10%) saturate(4972%) hue-rotate(321deg) brightness(97%) contrast(95%);
    width: 30px;
}

.allsocial-list .list-items a .fa-wallet{
    filter: invert(73%) sepia(8%) saturate(202%) hue-rotate(16deg) brightness(91%) contrast(91%);   
}


.allsocial-list .list-items a .fa-ticket{
    filter: invert(50%) sepia(12%) saturate(3501%) hue-rotate(8deg) brightness(104%) contrast(91%);
}
.allsocial-list .list-items a .fa-coins{
    filter: invert(26%) sepia(41%) saturate(410%) hue-rotate(18deg) brightness(89%) contrast(83%);
}


.primary-container {
    padding: 0 20px;
}



.endpoint {
    padding: 10px;
    text-transform: capitalize;
    font-size: var(--font-size-tertiary);
    background: var(--backgroun-color);
}

.endpoint {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    bottom: 0;
    margin-top: 10%;
    color: aliceblue;
}











.description-image {
    filter: blur(2px);
}




.questions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    color: black;

}

.questions h2{
    line-height: 2;
    letter-spacing: .1rem;
}

.questions p{
    width: 50ch;
    color: rgb(91, 101, 109);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 100;
}

.frequent {
    margin: 20px 0 0;
    font-size: var(--font-size-tertiary);
    font-weight: 400;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
}



.answered {
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.answers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    margin: 10px 10px;
    padding: 10px;
    height: 80px;
    border: 1px solid aliceblue;
    border-radius: 8px;
    background: aliceblue;
}


.answered span{
    display: none;
}

.answers .frequent {
    text-align: start;
    margin: auto;
    padding: 10px;
    font-size: 1.3rem;
}


.answers i {
    align-self: center;
    color: rgba(33, 153, 159, 1);
    font-size: 1rem;
    margin: 0;
}



.plus-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5%;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(33, 153, 159, 1);
    border-radius: 50px;
}


.questions .answered .hidefaq {
    display: flex;
    align-items: center;
    justify-content: center;
}


.toggleMargin {
    margin-bottom: 0;
}



@media screen and (min-width: 1024px) {
    .allsocial-list{
        display: block;
        width: 30%;
    }

    
    .body-containers-headers #search-product-form {
        left: 0;
    }
    
    #messageAlert {
        left: 35%;
    }
    
    .body-containers .body-headers{
        justify-content: flex-end;
    }
    
    .body-containers .body-headers .fa-bars {
        display: none;
    }

    .body-containers-headers {
        margin-left: 30%;
    }

    #header-container {
        margin-right: 30%;
    }

    #chat-container-profile,
    .popup-onsubmitted-product-container,
    .body-containers-headers #search-product-form {
        width: 70%;
    }
    

    #user-menu-header {
        right: 30%;
        top: 40px;
    }
    
    .privacy-policy-container {
        margin: 20px 50px;
    }

}




@media screen and (max-width: 500px) {
    :root{
        --font-size-primary: 1rem;
        --width-size: 80%;
    }
    .body-containers {
        padding: 0;
    }
    .order-description {
        margin: 29% 0;
    }


    .show-more p{
        margin: 3px;
    }
    
    
    

    .body-containers .body-headers .balance{
        flex-direction: column;
        text-align: center;
    }
    .allsocial-list {
        width: 50%;
    }
    .allsocial-list .balance .listnaira{
        font-size: calc(var(--font-size-primary) + 0.2rem);
    }


    .home a{
        font-size: var(--font-size-primary);
        padding-left: 20px;
    }

    
    .answers .frequent {
        font-size: var(--font-size-primary);
    }

    .endpoint h5{
        font-size: var(--font-size-secondary);
    }
    
    .questions p{
        width: 40ch;
    }

    
    .questions .answered .hidefaq p{
        width: 35ch;
    }
    .plus-icon {
        margin-right: 2%;
    }

    .privacy-policy-container {
        margin: 20px 15px;
    }
    
}