@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {
    --cc-orange-rgb: rgb(255, 145, 77);
    --cc-orange-hsl: hsl(23, 100%, 65%);
    --cc-orange-hsl-lighter: hsl(23, 100%, 75%);
    --cc-orange-hsl-darker: hsl(23, 100%, 52%);
    --cc-orange-hsl-darkest: hsl(23, 100%, 42%);
    --cc-dark-col: #1b1b1b;
    --cc-light-col: #dedede;
    --cc-light-text: #ffffff;
    --cc-light-grey: #7a7a7a;
    --cc-green-leaf: #008037;
    --cc-green-light: #7ED957
}

.btn-cc-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--cc-light-text);
    --bs-btn-bg: var(--cc-orange-hsl);
    --bs-btn-border-color: var(--cc-orange-hsl);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--cc-light-col);
    --bs-btn-hover-bg: var(--cc-orange-hsl-darker);
    --bs-btn-hover-border-color: var(--cc-light-col);
    --bs-btn-focus-shadow-rgb: var(--cc-orange-rgb);
    --bs-btn-active-color: var(--cc-dark-col);
    --bs-btn-active-bg: var(--cc-orange-hsl-darkest);
    --bs-btn-active-border-color: var(--cc-orange-hsl-darkest);
}

.btn-cc-outline-primary {
    --bs-btn-color: var(--cc-orange-hsl);
    --bs-btn-border-color: var(--cc-orange-hsl);
    --bs-btn-hover-color: var(--cc-light-text);
    --bs-btn-hover-bg: var(--cc-orange-hsl);
    --bs-btn-hover-border-color: var(--cc-orange-hsl);
    --bs-btn-focus-shadow-rgb: var(--cc-orange-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cc-orange-hsl);
    --bs-btn-active-border-color: var(--cc-orange-hsl);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--cc-orange-hsl);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--cc-orange-hsl);
    --bs-gradient: none;
}



* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    font-size: 65%;
}


.heading-tetiary {
    font-size: 2rem;
}

body {
    font-family: "Poppins", sans-serif;
    color: #555;
    font-size: 1.2rem;
    line-height: 1.6;
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(to top left, var(--cc-green-light), var(--cc-green-leaf));*/
    background-color: #f3f3f3;

}

.nav-a {
    font-size: 1.5rem;
}

@media(max-width: 800px) {
    .main-tenat-nav-items > div > p  {
        visibility: hidden;
        font-size: 0;
        position: absolute;
    }
        .main-tenat-nav-items > div > p > .icon-inner {
            visibility: hidden;
            font-size: 0;
            position: absolute;
        }
    
}

a {
    text-decoration: none;
}

.options {
    display: flex;
    font-size: 1.8rem;
    align-content: center;
}

.innner-option {
    background-color: #068fff;
    padding: 0.7rem;
    margin: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 9px;
    width: 100%;
    color: white;
    text-align: center;
    transition: 100ms;
}

    .innner-option:hover {
        background-color: #51b1ff;
    }

.t-cramp {
    font-size: 1.3rem;
    color: var(--orange);
}

.svg-icon {
    width: 20px;
    height: 20px;
    margin-right: 1rem;
    fill: #ffffff;
    padding: .5rem;
    border-radius: 50%;
    color: #f3f3f3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .5rem;
    background-image: linear-gradient(to top left, var(--cc-green-leaf), var(--cc-green-light)); /*originally linear-gradient(to top left, var(--orange), var(--green-light))*/
}


.info {
    background-color:;
    color: #333;
    border-radius: 9px;
    font-size: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    background-color: #f3f3f3;
}

.info > ion-icon {
    color: var(--cc-orange-hsl-darker);
    font-size: 1.5rem;
}

    /*.info a {
        color: var(--cc-orange-hsl-darkest);
    }*/

dt {
    font-size: 1.4rem;
}

dd {
    font-size: 1.5rem;
}

dl {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}
.icon {
    font-size: 1.7rem;
}

.pagination-bar {
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    max-width: 90rem;
    display: flex;
    align-items: center;
    justify-content: end;
}

.pagination-text {
    color: #555;
    margin: 1rem 3rem 0;
}

.pagination-btn {
    display: flex;
    width: 100px;
    justify-content: space-between;
    border-radius: 9px;
    padding: 1rem;
}


.p-icon {
    font-size: 2rem;
    color: #555;
    margin-top: 1rem; 
}

.p-span {
    display: flex;
    align-items: center;
}



table {
    font-size: 1.3rem;
}

.icon-layout {
    color: #ffffff;
    padding: .5rem;
    border-radius: 50%;
    color: #f3f3f3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: .5rem;
    background-image: linear-gradient(to top left, var(--cc-green-light), var(--cc-green-leaf));
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.span {
    grid-column: span 2;
}

.details {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    padding: 1.5rem 2rem;
    border-radius: 19px;
}


.card-cus {
    border-radius: 20px;
    padding: 2rem;
    /*margin: 1rem;*/
    box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.soft-wrapper {
    display: flex;
    gap: 1rem;
}

.cus-pagination {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 12px;
    padding: 1rem 0;
}

.p-btn {
    border: 1px solid #068fff;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.btn:hover .btn-icon {
    stroke: #fff;
}

.btn-icon {
    height: 24px;
    width: 24px;
    stroke: #068fff;
}

.page-link:link,
.page-link:visited {
    font-size: 18px;
    color: #068fff;
    text-decoration: none;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-link:hover,
.page-link:active,
.page-link.page-link--current {
    background-color: #1f9aff;
    color: #fff;
}

.dots {
    color: #868e96;
}


.action-icon {
    font-size: 1.7rem;
    padding-top: 1rem;
    cursor: pointer;
}

.waste-type-wrapper {
    padding: 2rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    border-radius: 20px;
}


.type-heading {
    display: flex;
    justify-content: space-evenly;
    gap: 2rem;
}

.type-wrapper {
    padding: 0.5rem 0;
    display: flex;
    justify-content: space-between;
}

.recent-client {
    display: flex;
    justify-content: space-between;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border-radius: 9px;
    padding: 1rem;
    transition: 1s;
}

.client-info {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    color: #333;
    
}

.client-his {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padding: 2rem;
    border-radius: 9px;
    margin-bottom: 3rem;
}

.recent-client:hover {
    background-color: #78ffd6;
    border-radius: 9px;
    background-color:;
}

th {
    font-weight: 400;
}


.cus-table {
    padding: 13rem 0;
    
}

.cus-card {
    font-size: 1.5rem;
}


.btn-overview {
    padding: 1rem;
    font-size: 1.5rem;
    color: #333333;
}

.btn-active {
    color: #FF914D;
    border-bottom: 3px #FF914D solid;
}


show-modal {
    font-size: 2rem;
    font-weight: 600;
    padding: 1.75rem 3.5rem;
    margin: 5rem 2rem;
    border: none;
    background-color: #fff;
    color: #444;
    border-radius: 10rem;
    cursor: pointer;
}

.close-modal {
    position: absolute;
    top: 1.2rem;
    right: 2rem;
    font-size: 5rem;
    color: #333;
    cursor: pointer;
    border: none;
    background: none;
}




.hidden {
    display: none;
}

.modals {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    background-color: white;
    padding: 6rem;
    border-radius: 5px;
    box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 0;
}

.badge-cus {
    padding: 0.5rem;
    background-color: /*var(--cc-green-light)*/ darkolivegreen;
    color: white;
    border-radius: 9px;
    font-weight: 400;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    
}

.dropdown {
    font-size: 1.5rem;
}


.dropdown-menu {
    border-radius: 9px;
    font-size: 1.5rem;
}

.btn {
    font-weight: 400;
}

.quick-links {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border-radius: 9px;
    padding: 1rem;
}

.btn-quick-links-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /*background-color: var(--cc-orange-hsl);*/
    background-image: linear-gradient(to top left, var(--cc-orange-hsl-darker), var(--cc-orange-hsl-lighter));

    color: #ffffff;
    padding: .5rem 2rem;
    border-radius: 9px;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.btn-quick-links {
    color: #333;
    padding: .5rem 2rem;
    outline: none;
    border: none;
    background-color: #ffffff;
    border-radius: 9px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    transition: 200ms;
}

    .btn-quick-links:hover {
        cursor: pointer;

        background-color: var(--cc-orange-hsl-lighter);
        /*background-image: linear-gradient(to top left, var(--cc-green-light), var(--cc-orange-hsl));*/

        color: #ffffff;
      
    }