@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&family=Ubuntu:wght@300;400;500;700&display=swap');
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');

/* config CSS */
:root{
    --invert-left:1;
    --left:50%;
    --body-back:#f5f2f2;
    --color:#1D1D1F;
    --invert:#000;
    --container:#fff;
    --container-alpha:#ffffffc4;
    --shadow:0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
    --hover:rgba(128, 128, 128, 0.286);
    --primary:royalblue;
    --primary-alpha:rgba(65, 105, 225, 0.123);
    --item:rgba(128, 128, 128, 0.12);
}


*{
    margin: 0;
    padding: 0;
    font-family:'Ubuntu','Noto Sans Arabic','Open Sans',sans-serif;
    font-weight: 650;
    -webkit-tap-highlight-color: transparent;
}
img{
    image-rendering: -webkit-optimize-contrast;
}
.keyword{
    background: var(--container);
    color: var(--color);
    padding: 8px;
    border: 1px solid var(--hover);
    border-radius: 6px;
    font-size: 1.2rem;
}
.keyword h4{line-height: 23px;}
body{
    background-color: var(--body-back);
    color: var(--color);
    overflow-y: scroll;
}
p.logDetailERR{color: rgb(240, 32, 32);}
body.dark{
    --body-back:#16191d;
    --color:#ffffff;
    --invert:#fff;
    --container:#202122;
    --container-alpha:#202122c4;
}
.center-column{
    position: relative;
    left: var(--left);
    transform: translateX(calc(-1 * var(--left)));
    -webkit-transform: translateX(calc(-1 * var(--left)));
}
main{
    width: calc(100% - 20px);
    padding: 0px 10px;
    min-height: calc(100vh - (124.59px + 268.59px));
    max-width: 1220px;
}
.suc{
    color: green;
}
.fail{
    color: red;
}
i{
    font-size: 1.6rem;
}
.contain-ripple{
    cursor: pointer;
    transition: all .2s ease;
    width: fit-content;
    height: fit-content;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.contain-ripple.disabled{
    opacity: 0.7;
    pointer-events: none;
}
.contain-ripple.active,
.contain-ripple:hover{
    background-color: var(--hover);
}
.contain-ripple.n-radius{
    border-radius: 0px;
}
.contain-ripple .nodes{
    pointer-events: none;
}
.contain-ripple a{
    display: block;
    padding: 10px;
    color: var(--color);
    text-decoration: none;
}
.contain-ripple .ripple-show{
    pointer-events: none;
    position: absolute;
    background-color: var(--hover);
    border-radius: 50%;
    animation: ripple 0.34s linear;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.relative{
    position: relative;
}
.top-of-nav{
    z-index: 101;
}
.contain-ripple.n-padd a{
    padding: 0px;
}
.contain-ripple.small-padd a{
    padding: 4px 6px;
}
nav .levels{
    width: 100%;
    max-width: 1200px;
}
nav{
    transition: all .2s ease;
    position: sticky;
    top: 0;
    background-color: var(--container-alpha);
    backdrop-filter: blur(41px);
    -webkit-backdrop-filter: blur(41px);
    border-bottom: 1px solid var(--hover);
    z-index: 100;
}
nav.scrolled{
    box-shadow: var(--shadow);
}
.default{
    width: 60px!important;
    height: 60px!important;
}
.default-20{
    width: 34px!important;
    height: 34px!important;
}
.bannerAttention{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bannerSelf{
    max-width: 500px;
    padding: 10px;
    width: calc(100% - 20px);
    border-radius: 1em;
    box-shadow: var(--shadow);
    aspect-ratio: 16/9;
    background-color: var(--container);
}
.bannerSelf p.padd{
    padding: 3px;
}
.default-20.n-padd{
    padding: 0px;
}
.circle{
    border-radius: 50%!important;
}
img.default{
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
}
img.contain-object{
    object-fit: contain!important;
}
nav img{
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.flexy{
    display: flex!important;
    align-items: center;
}
.flexy.-g-default{
    gap: 11.25px;
}
.flexy.-g-small{
    gap: 4px;
}
.flexy.-g-large{
    gap: 23px;
}
.flexy.-j-sb{
    justify-content: space-around;
}
.flexy.-j-sa{
    justify-content: space-between;
}
.flexy.feature-column{
    flex-direction: column!important;
}
.flexy.feature-wrap{
    flex-wrap: wrap!important;
}
.sticky{
    position: sticky;
    top: 0px;
}
.mainer{
    margin-top: 10px;
    padding: 10px;
    width: calc(100% - 22px);
    max-width: 1178px;
    left: var(--left);
    transform: translateX(calc(var(--left)* -1));
}
.side-nav{
    transition: all .2s ease;
    width: 299px;
    height: 100vh;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    background-color: var(--container);
    border-right: 1px solid var(--hover);
}
.side-nav::-webkit-scrollbar{
    display: none;
}
.side-nav .contain-ripple.vwrap .nodes .flexy i{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.side-nav .contain-ripple.vwrap .nodes .flexy .text{
    height: 40px;
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contain-ripple.vwrap{
    border-radius: 0px;
    width: 100%;
}
.directory{
    display: flex;
    align-items: center;
    gap: 0px 5px;
}
.directory a{
    color: var(--color);
    text-decoration: none;
}
.white{
    background-color: var(--container);
}
.border{
    border: 1px solid var(--hover);
}
.border-bottom{
    border-bottom: 1px solid var(--hover);
}
.featured-providers{
    width: calc(100%);
}
.hr{
    width: calc(100% - 10px);
    margin: 5px;
    height: 3px;
    border-radius: 1.5px;
    background-color: var(--hover);
}
.offset{
    width: 70px;
    height: 70px;
    display: block;
}
.offset.-o-small{
    width: 30px;
    height: 30px;
    display: block;
}
.-p-small{
    padding: 4px 6px!important;
}
.-p-small.-p-system{
    padding: 6px 6px!important;
}
[tooltip]{
    position: relative;
    width: fit-content;
}
[tooltip]::after{
    content: attr(tooltip);
    width: max-content;
    padding: 4px 8px;
    background-color: #5c5c5cb3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: absolute;
    left: 50%;
    top: calc(100% + 3px);
    transform: translateX(-50%) scale(0.7);
    -webkit-transform: translateX(-50%) scale(0.7);
    opacity: 0;
    z-index: 99;
    visibility: hidden;
    transition: all .1s ease;
    -webkit-transition: all .1s ease;
    color: #fff;
    border-radius: 6px;
    pointer-events: none;
}
[tooltip]:hover::after{
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    -webkit-transform: translateX(-50%) scale(1);
}
.feature{
    width: calc((100% / 3) - 8px);
    min-width: calc((100% / 3) - 8px);
    aspect-ratio: 16/9;
    border-radius: 6px;
    background-color: var(--hover);
}
.scroll-over-x{
    overflow-x: auto;
}
.scroll-over-y{
    overflow-y: auto;
}
.feature img{
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner{
    position: relative;
    left: var(--left);
    transform: translateX(calc(var(--left) * -1));
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    background-color: var(--hover);
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    border-radius: 2em;
    padding-bottom: 6px;
    overflow-y: hidden;
}
.banner .contain-ripple{
    scroll-snap-align: center;
}
.flexy.center-all{
    justify-content: center;
    align-items: center;
}
.in-load{
    border: 4px solid var(--hover);
    border-bottom: 4px solid var(--invert);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: load 0.4s linear infinite;
}
.scroll-bar{
    box-shadow: var(--shadow);
    border-radius: 50%;
    min-width: 60px;
    min-height: 60px;
    background-color: var(--container);
    color: grey;
    position: relative;
    z-index: 10;
}
.scroll-bar.left{
    left: calc(10px * var(--invert-left));
}
.-d-block{
    display: block;
}
.scroll-bar.right{
    left: calc(10px * var(--invert-left) * -1);
}
.scroll-bar .contain-ripple{
    width: 100%;
    height: 100%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.banner::-webkit-scrollbar{
    display: none;
}
.banner img{
    width: 100%;
    height:fit-content;
    border-radius: 2em;
    object-fit: cover;
}
.banner .contain-ripple{
    min-width: 100%;
}
.provider{
    max-width: 580px;
    width: 100%;
    position: relative;
    left: var(--left);
    transform: translateX( calc(var(--left) * -1) );
}
.provider img{
    width: 60%;
    position: relative;
    left: var(--left);
    transform: translateX( calc( var(--left) *-1 ) );
    border-radius: 8px;
}
.info-text{
    color: grey;
}
.grid{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 5px;
    margin-top: 10px;
    padding:0px 5px;
}
.grid .grid-item{
    transition: all .1s ease;
    background-color: var(--container);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.155);
}
.grid.removeAspect .grid-item{
    aspect-ratio: initial;
}
.coupoun{
    width: calc(100% - 12px);
    margin: 3px;
    border: 3px dashed var(--hover);
    border-radius: 12px;
    background-color: var(--container);
}
.coupoun .up-coupon img{
    height: 60px;
    aspect-ratio: 16/9;
    object-fit: contain;
}
.coupoun .up-coupon{
    padding: 4px;
    display: flex;
    align-items: center;
}
.coupoun .coupoun-code{
    width: 100%;
    display: flex;
    justify-content: center;
}
.coupoun .c-code{
    border-radius: 6px;
    width: fit-content;
    padding: 4px;
    border: 1px dashed var(--hover);
}
.columns img.coupoun-banner{
    width: calc(100% - 14px);
    aspect-ratio: 16/9;
    max-width: 820px;
    border-radius: 1em;
    box-shadow: var(--shadow);
}
.columns .contain-globe-vi{
    width: calc(100% - 18px);
    margin: 6px;
    padding: 3px;
}
.list-view{
    padding: 4px;
    width: calc(100% - 10px);
    background-color: var(--container);
    border: 1px solid var(--hover);
    border-radius: 12px;
    overflow-x: auto;
}
.list-view .list-item{
    color: var(--color);
    text-decoration: none;
    cursor: pointer;
    min-width: calc(100% - 6px);
    width: fit-content;
    padding: 0px 3px;
    height: 60px;
    transition: all .3s ease;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--hover);
}
.list-view .list-item:hover{
    background-color: var(--hover);
}
.list-view .list-item .img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    aspect-ratio: 1/1;
    border: 1px solid var(--primary);
    border-radius: 6px;
    object-fit: cover;
    color: var(--primary);
    object-fit: cover;
}
.list-view .list-item .hor{
    display: block;
    margin: 0px 10px;
    width: 1px;
    height: 40px;
    background-color: var(--hover);
}
.list-view .list-item:nth-last-child(1){
    border-bottom: none;
}
.list-view .list-item .field{
    display: flex;
    align-items: center;
    width: calc(100% / 4);
    min-width: 200px;
}
.grid .grid-item .nodes{
    max-width: 100%;
    max-height: 100%;
}
.list-view .list-item .field .top{
    color: gray;
}
.list-view .list-item .field div{
    max-width: 100%;
}
.grid:not(.gv16x9) .grid-item:hover{
    -webkit-box-shadow: 0 8px 14px -6px rgba(153,153,153,0.65);
    box-shadow: 0 8px 14px -6px rgba(153,153,153,0.65);
}
.clipboard{
    border: 1px dashed rgba(128, 128, 128, 0.455);
    border-radius: 2px;
    text-align: center;
    cursor: text;
    width: calc(100% - 10px);
    margin: 4px;
    padding: 5px 0px;
}
.success.msg{
    width: calc(100% - 9px);
    border-radius: 2px;
    text-align: center;
    padding: 2px;
    margin: 2.5px;
    background-color: rgb(0, 139, 10);
    color: #fff;
}
.success.msg.hide{
    visibility: hidden;
}
p.info{
    color: brown;
    text-align: center;
}
.grid .grid-item .img{
    padding-bottom: 10px;
    padding-top: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid .grid-item .img img{
    height: 50px;
    max-width: 100%;
    object-fit: contain;
}
.list{
    width: calc(100% - 6px);
    margin: 3px;
}
.columns{
    display: flex;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
}
.columns .primary{
    width:calc(100% - 320px);
}
.columns .secondery{
    width: 320px;
}
.info-list{
    width: calc(100% - 16px);
    margin: 2px;
    background-color: var(--container);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-top: 3px;
    border: 1px solid var(--hover);
}
.info-list .info-item{
    border-bottom: 1px solid var(--hover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0px;
}
.info-list .info-item.contain-ripple{
    width: 100%;
    border-radius: 0px;
}
.grid .grid-item{
    overflow: hidden;
    min-height: fit-content;
}
.grid.gv16x9 .grid-item{
    aspect-ratio: 16/9!important;
}
.grid.gv16x9 [tooltip]{
    width: 100%;
    aspect-ratio: 16/9;
}
.radius-2{
    border-radius: 2em;
}
.grid.radius-2{
    border-radius: 0px;
}
.grid.radius-2 .grid-item{
    border-radius: 2em;
}
.grid.custom-shadow .grid-item:hover{
    box-shadow: var(--shadow);
}
.contain-ripple.full-grid{
    width: 100%;
    height: 100%;
}
.contain-ripple.full-grid a{
    width: 100%;
    height: 100%;
}
.contain-ripple.full-grid a img{
    width: calc(100% - 12px);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
}
.info-list .info-item.contain-ripple a{
    color: royalblue!important;
    padding: 0px;
    padding-left: 10px;
    width: calc(100% - 10px);
}
.info-list .info-item:nth-last-child(1){
    border-bottom: none;
}
.list .list-item{
    transition: all .1s ease;
    width: 100%;
    height: 170px;
    border-radius: 6px;
    border-bottom: 3px solid var(--hover);
    cursor: pointer;
    background-color: var(--container);
    margin-bottom: 3px;
}
.list .list-item:active{
    margin-bottom: 6px;
    border-bottom: 0px solid var(--hover);
    transform: translateY(3px);
}
footer{
    background-color: #222222;
    width: 100%;
    color: #fff;
    padding: 20px 0px;
    margin-top: 10px;
}
footer .center-column{
    max-width: 1200px;
    width: 100%;
}
footer a{
    color: #fff!important;
    text-decoration: none;
}
.mdeias .mdeia{
    border-radius: 50%;
    transition: all .1s ease;
    background-color: transparent;
}
.mdeias .mdeia i{
    transition: all .1s ease;
    padding: 4px;
    color: #fff;
}
.mdeias .mdeia:hover i.bxl-instagram{
    color: rgb(255, 255, 255)!important;
}
.mdeias .mdeia.youtube:hover{
    color: #000!important;
}
.mdeias .mdeia.youtube:hover i{
    color: red!important;
}
.mdeias .mdeia:hover i.bxl-facebook{
    color: #fff!important;
}
.mdeias .mdeia:hover{
    background-color: #fff;
}
.mdeias .mdeia.instagram:hover{
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737, #fcaf45, #ffdc80);
}
.mdeias .mdeia.facebook:hover{
    background-color: rgb(0, 115, 255);
}
.mdeias .mdeia.twitter:hover{
    background-color: rgb(52, 143, 255);
}
.contain-ripple.linker-a a{
    color: royalblue!important;
}
.dashboard .dashContent{
    min-height: 100vh;
    position: relative;
    left: 300px;
}
.formGroup .field input{
    transition: all .2s ease;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--hover);
    background-color: var(--container);
    color: var(--color);
    outline: none;
}
.formGroup .field textarea{
    transition: all .2s ease;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--hover);
    background-color: var(--container);
    color: var(--color);
    outline: none;
    resize: vertical;
}
.switch {
    --button-width: 3.5em;
    --button-height: 2em;
    --toggle-diameter: 1.5em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 3em;
    --color-grey: #cccccc;
    --color-green: #4296f4;
}

.slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
.slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    -webkit-transform: translateX(var(--button-toggle-offset));
    -ms-transform: translateX(var(--button-toggle-offset));
    transform: translateX(var(--button-toggle-offset));
    -webkit-box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
.switch input[type="checkbox"]:checked + .slider {
    background-color: var(--color-green);
}
.switch input[type="checkbox"]:checked + .slider::after {
    -webkit-transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    -ms-transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    -webkit-box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}
.switch input[type="checkbox"] {
    display: none;
}
.switch input[type="checkbox"]:checked:active + .slider::after {
    -webkit-transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
    -ms-transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}
.formGroup .field textarea:focus{
    box-shadow: var(--shadow);
    border-color: var(--primary);
}
.formGroup .field.file-f input{
    display: none;
}
.formGroup .field.file-f label{
    padding: 10px;
    display: block;
    cursor: pointer;
    margin-bottom: 10px;
}
.formGroup .field.file-f .overview img{
    width:100%;
    max-width: 300px;
    outline: none;
    border: none;
    object-fit: cover;
    aspect-ratio: 16/9;
    border-radius: 6px;
}
.formGroup .field.file-f .overview img:not([src]){
    display: none;
}
.formGroup .field.file-f .overview-1-1 img{
    width:100%;
    max-width: 300px;
    outline: none;
    border: none;
    object-fit: cover;
    border-radius: 6px;
}
.formGroup .field.file-f .overview-1-1 img:not([src]){
    display: none;
}
.formGroup .field input:focus{
    box-shadow: var(--shadow);
    border-color: var(--primary);
}
.formGroup .field p{
    padding: 0px;
    font-size: 10px;
    color: grey;
}
.formGroup button{
    cursor: pointer;
    outline: none;
    border: none;
    background-color: transparent;
}
.primary-style{
    background-color: var(--item);
    border-radius: 6px;
    width: fit-content;
    cursor: pointer;
}
.primary-style a,
.primary-style button{
    display: block;
    padding: 10px;
    color: var(--color);
    text-decoration: none;
    font-size: 16px;
}
.overdots{
    white-space: nowrap;overflow: hidden;text-overflow:ellipsis;
}
.centeric{
    width: calc(100% - 340px);
    padding: 0px 20px;
}
header{
    padding: 0 5px;
    position: fixed;
    width: calc(100% - 310px);
    left: 300px;
    height: 60px;
    background-color: var(--container);
    border-bottom: 1px solid var(--hover);
    display: flex;
    align-items: center;
    z-index: 99;
}
.dashboard h1.title-dash{
    padding:30px 4px;
}
.dashboard .about-dash{
    padding:3px 8px;
}
.primary-style:hover{
    background-color: var(--hover);
}
.primary-style:active{
    transform: scale(0.95);
}
.fit-content{
    width: fit-content;
}
header .navigation{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
header .contain-of-nav{
    margin-right: 5px;
    border-radius: 0px;
    display: none;
}
.grid-2-featured{
    width: calc(100% - 6px);
    margin: 3px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;
    height: fit-content;
}
.grid-2-featured .grid-item{
    transition: all .1s ease;
    aspect-ratio: 16/9!important;
    background-color: var(--container);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.155);
    border-radius: 1em;
    overflow: hidden;
}
.queryOfSearch{
    overflow-y: auto;
    position: fixed;
    left: calc(((100vw - 1200px)/2) + 30px);
    top: 125px;
    max-height: calc(100vh - 165px);
    width: 300px;
    padding: 14px 0px;
    border-radius: 9px;
    background-color: var(--container-alpha);
    backdrop-filter: blur(41px);
    -webkit-backdrop-filter: blur(41px);
    z-index: 10000;
    box-shadow: var(--shadow);
}
.grid-2-featured [tooltip]{
    width: 100%;
    aspect-ratio: 16/9;
}
.grid-2-featured .contain-ripple{
    border-radius: 1em;
}
.flexy.full-wide-item .contain-ripple{
    width: 100%;
}
.flexy.full-wide-item .c-code{
    width: 100%;
    text-align: center;
    padding: 4px 0px;
}
.-color-invert{
    color: #fff!important;
    background-color: var(--primary)!important;
}
.-color-invert a{
    color: #fff!important;
}
.searchField{
    padding: 6px;
    display: flex;
    max-width: 400px;
    align-items: center;
    border-radius: 10px;
    width: calc(100% - 120px);
    margin-left: 4px;
    background-color: var(--hover);
}
.searchField input{
    padding: 4px;
    width: calc(100% - 8px);
    background-color: transparent;
    border: none;
    outline: none;
}
.searchField:focus-within{
    background-color: var(--container);
    box-shadow: var(--shadow);
}

@keyframes ripple {
    0%{
        transform: translate(-50%,-50%) scale(0);
        -webkit-transform: translate(-50%,-50%) scale(0);
    }
    100%{
        transform: translate(-50%,-50%) scale(1);
        -webkit-transform: translate(-50%,-50%) scale(1);
    }
}
@keyframes load {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@media (hover: none) {
    .scroll-bar{
        display: none!important;
    }
}
@media screen and (max-width:1200px) {
    .queryOfSearch{
        left: 30px;
    }
    .featured-providers{
        border-radius: 0px;
        border-right: none;
        border-left: none;
    }
}
@media screen and (max-width:1200px) {
    .grid{
        grid-template-columns: repeat(5,1fr);
    }
}
@media screen and (max-width:1035px) {
    .grid{
        grid-template-columns: repeat(4,1fr);
    }
}
@media screen and (max-width:940px) {
    .columns .secondery{
        width: 280px;
    }
    .columns .primary{
        width: calc(100% - 280px);
    }
}
@media screen and (max-width:900px) {
    .dashboard .dashContent{
        left: 0px;
    }
    header{
        padding: 0 5px;
        width: calc(100% - 10px);
        left: 0px;
    }
    header .contain-of-nav{
        display: flex;
    }
    .centeric{
        width: calc(100% - 40px);
    }
    .side-nav{
        z-index: 100;
        top: 0;
        left: -300px;
    }
    .side-nav.active{
        left: 0px;
    }
}
@media screen and (max-width:845px) {
    .grid{
        grid-template-columns: repeat(3,1fr);
    }
    .grid-item{
        aspect-ratio:initial!important;
    }
    .grid-2-featured .grid-item{
        aspect-ratio: 16/9!important;
    }
    .scroll-bar{
        min-width: 30px;
        min-height: 30px;
    }
    .scroll-bar .contain-ripple{
        width: 30px;
        height: 30px;
    }
}
@media screen and (max-width:800px) {
    .columns{
        flex-direction: column;
    }
    .columns.reverse{
        flex-direction: column-reverse;
    }
    .columns .secondery,
    .columns .primary{
        width: 100%;
    }
}
@media screen and (max-width:600px) {
    .feature{
        width: calc((100% / 2) - 8px);
        min-width: calc((100% / 2) - 8px);
    }
}
@media screen and (max-width:370px) {
    .feature{
        width: calc((100% / 1) - 8px);
        min-width: calc((100% / 1) - 8px);
    }
}