
:root{
    --padding-top-search: 15px;
    --main-border-radius: 7px;

    --coral-dark-bg: rgb(26 26 26);
    --coral-dark-secondary-bg: rgb(50, 50, 50);
    --coral-dark-text: rgb(227, 227, 227);
    --coral-dark-border: rgba(75, 75, 75, 0.5);
    --coral-dark-border-hover: rgb(95, 95, 95);
    --coral-dark-card: rgb(37, 37, 37);
    --coral-dark-card-transparent: rgba(37, 37, 37, 0);
    
    --coral-light-bg: rgba(245, 245, 245, 1);
    --coral-light-text: rgba(75, 75, 75);
    --coral-light-border: rgb(224, 224, 224);
    --coral-light-card: rgb(255, 255, 255);
    --coral-light-card-transparent: rgba(255, 255, 255, 0);

    --page-width: 95%;
    --max-page-width: 1500px;
    --page-width-mobile: 85%;

    --icon-preview-dimensions: 100px;

    // light media query css
    @media (prefers-color-scheme: light) {
        --coral-text: var(--coral-light-text);
    }

    @media (prefers-color-scheme: dark) {
        --coral-text: var(--coral-dark-text);
    }
}

@mixin skeleton-gradient-light{
    background: linear-gradient(90deg, #c7c7c7, #eeeeee);
}

@mixin skeleton-gradient-dark{
    background: linear-gradient(90deg, #424242, #252525);
}

@mixin coral-dark-bg{
    background-color: var(--coral-dark-bg) !important;
}

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

html{
    scroll-behavior: smooth;
}

body{
    overflow-y: scroll;
}

a{
    text-decoration: none;
}

li{
    img{
        border-radius: 4px;
        border: 1px solid var(--coral-dark-border);
        margin: 15px 0px 25px;
        width: 100%;

        @extend .Box;

        &:hover{
            opacity: 1 !important;
            cursor: auto !important;     
        }
    }
}

.height-24px{
    height: 24px !important;
}

.width-100{
    width: 100%;
}

.ellipses-text-2{
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

.hidden{
    display: none;
}

.is-focused{
    border-radius: var(--main-border-radius) !important;
}

.coral-Heading--XXL{
    min-height: 3.66rem;
}

.coral-Body--XL{
    min-height: 1.875rem;
}

.fade-enter-active, .fade-leave-active {
    transition: .2s;
}

.fade-enter-from /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translate3D(0px, 5px, 0px);
}

.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translate3D(0px, -5px, 0px);
}

.overlay-enter-active, .overlay-leave-active {
    transition: 0.1s;
}

.overlay-enter-from /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translate3D(0px, 50px, 0px);
}

.overlay-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translate3D(0px, -50px, 0px);
}

.fit-width{
    width: fit-content;
    width: -moz-fit-content;
}

/////////////// START OF THEME ///////////////
.coral--dark {
    @include coral-dark-bg;
    
    li{
        img{
            opacity: 0.5;
        }
    }

    a{
        color: rgb(75, 156, 245);
    }

    ._coral-Dialog.is-open, ._coral-Dialog-header, ._coral-Dialog-footer{
        @include coral-dark-bg;
    }
    
    .skeleton {
        @include skeleton-gradient-dark;
    }
    
    .skeleton-fill {
        @include skeleton-gradient-dark;
    }

    .about-block{
        background-color: var(--coral-dark-card);
        box-shadow: 0 5px 21px -10px #00000042;
    }

    .instructions-img-wrapper::after{
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, var(--coral-dark-card) 100%);
    }

    .instructions-item{
        background-color: var(--coral-dark-card) !important;
    }

    ._coral-Textfield{
        background-color: var(--coral-dark-card);
    }

    .marked{
        color: var(--coral-dark-text);
    }

    .loading-popup{
        background: var(--coral-dark-secondary-bg);
        // background: rgb(50, 50, 50);
    }

}

.coral--light{
    
    a{
        color: rgb(13, 102, 208);
    }

    li{
        img{
            opacity: 0.8;
        }
    }

    .skeleton {
        @include skeleton-gradient-light;
    }
    
    .skeleton-fill {
        @include skeleton-gradient-light;
    }

    .about-block{
        background-color: var(--coral-light-card);
        box-shadow: 0 5px 21px -10px #00000042;
    }

    .instructions-img-wrapper::after{
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, var(--coral-light-card) 100%)
    }

    .instructions-item{
        background-color: var(--coral-light-card) !important;
    }

    .marked{
        color: var(--coral-light-text);
    }

    .loading-popup{
        background: var(--coral-dark-secondary-bg);
        // background: rgb(50, 50, 50);
    }
}
/////////////// END OF THEME ///////////////

ul {
    padding-inline-start: 10px;
    padding-inline-end: 25px;
}

main{
    text-align: left;
}

button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
    -webkit-appearance: button;
}

select{
    -webkit-appearance:none;
}

.edit-dialog-acton-btns{
    display: flex;
    justify-content: space-between;
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    padding: 15px 0px;
    gap: 10px;
}

.u-coral-noscroll{
    overflow: hidden;
}

.instructions-well{
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    padding: 0px 0px 0px 20px;
    gap: 40px;
    color: white;
    align-items: center;
}

.instructions-title{
    align-self: center;
    max-width: 440px;
 }

.card-img{
    position: relative;
    width: 100%;
}

.instructions-card-img{
    top: 6px;
}

.instructions-img-wrapper{
    position: relative;
    height: 100%;
}

.instructions-well .instructions-img-wrapper{
    width: 70%;
    margin: auto 0 auto auto;
}

.gradient::after{
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
}

.card-grid{
    display: grid;
    gap: 35px;
    margin: auto;
    padding-top: 20px;
    margin-bottom: 50px;

    .coral-Well{
        transition: 0.2s;
        &:hover{
            transform: translateY(-5px);
        }
    }

}

.instructions-grid{
    grid-template-columns: 1fr;
}

.instructions-item{
    padding: 0px 0px 0px 0px !important;
    height: 100%;
}

._coral-Alert-icon{
    top: 10px;
}

.text-details{
    opacity: 0.8;
    font-weight: 800;
}

.text-details-heavy{
    font-weight: 800;
}

.post-full-content {
    max-width: 680px;
}

.support-page{
    // margin: auto !important;
    padding: 10px !important;
    top: 25px;
    display: grid;
    // gap: 7px;
    text-align: center;
    width: calc(100% - 20px ) !important;
    height: fit-content !important;

    p{
        margin-bottom: 0px;
        line-height: 130%;
    }
}

.resources-card-container{
    
    .support-page{
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
    }

}

.lgbt-wrapper{
    display: flex;
    gap: 10px;
    width: 100%;
    flex-direction: column;
    height: 100px;
    /* grid-template-columns: auto auto; */

    .card-no-ad{
        position: absolute;
        height: 97%;
        width: 90%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;

        &:hover{
            img{
                transform: translateY(-5px) rotate(-6deg);
            }
        }
    }

    .support-page{
        top: 0px;
        
    }
}

.marked{

    h2{
        font-weight: 400 !important;
        font-size: 1.7rem;
        padding: 0px 16px;
    }
    
    h3{
        font-size: 1.5rem;
        padding: 5px 15px;
    }
    
    h4{
        font-weight: 300;
        margin: 0px 0px 15px 0px;
        font-size: 1.1rem;
        padding: 5px 15px;
    }

}


.PH-badge{
    // margin-top: 40px;
    margin-bottom: 25px;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    transition: 0.2s;
}

.PH-badge:hover{
    opacity: 1;
}

.Box{
    transition: 0.3s;
}

.coral--dark .Box{
    box-shadow: 0px 10px 10px -10px rgb(0 0 0 / 20%);
}

.coral--light .Box{
    box-shadow: 0px 10px 10px -10px rgb(0 0 0 / 20%);
}

.coral--dark .Box:hover{
    box-shadow: 0px 20px 60px -15px rgb(0 0 0 / 50%);
    transform: translateY(-5px);
    cursor: pointer;
}

.coral--light .Box:hover{
    box-shadow: 0px 50px 40px -30px rgba(0,0,0,0.3);
}

.gitHub-sponsor{
    margin: auto;
    text-align: left;
    cursor: pointer;
    height: 100%;
    width: var(--page-width);
    max-width: 730px;
    border-radius: 8px;
}

.announcement-top-banner{
    margin: auto;
    text-align: left;
    cursor: pointer;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 999;
    box-shadow: -3px -3px 29px 0px #1b6f65;
    position: relative;
    
    .Box{
        color: white;
        border: none;
        // aniamte the gradinend background to make it look like it is pulsing
        animation: pulse 8s infinite;
        background: linear-gradient(89.13deg, #05B0B9 0.75%, #0EBAB5 15.4%, #1DAA99 44.4%, #1B6860 100%);
        // background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
        border-radius: 0px;
        padding: 8px 16px 8px 16px;

            @keyframes pulse {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.05);
                }
                100% {
                    transform: scale(1);
                }
            }

        a{
            color: rgb(132 255 234);
            font-weight: 600;
            // color: rgb(125 184 255);
        }
        > div{
            gap: 8px;
            align-items: center;
            max-width: 820px;
            margin: auto;
        }
        &:hover{
            transform: translate(0px);
        }
    }

    p{
        margin: 4px;
    }
}

.account-dialog-form{
    width: calc(100% - 5px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.account-dialog-form > div{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
}

#accountDialog ._coral-Dialog{
    width: 50%;
    max-width: 720px;
}

#accountDialog .coral-FormGroup-item{
    display: inline;
    width: 100%;
}

._coral-Dialog-content{
    height: 100%;
    ul{
       padding-left: 20px; 
    }
}

.coral-dialog-content::-webkit-scrollbar{
    background: var(--page-background);
    width: 7px;
}

.coral-dialog-content::-webkit-scrollbar-thumb {
    background: #6E6C6E;
    border-radius: 20px;
    // border: solid 4px #323232;
}


.margin-auto{
    margin: auto !important;
}

.icon-upload-grid{
    display: grid !important;
    grid-template-rows: auto;
    // grid-template-rows: minmax(90px, 100%) fit-content(20px);
    min-height: calc(100% - 41px);
    // row-gap: 13px;
}

.twitter-handle-wrapper{
    display: grid;
    grid-template-columns: 25px auto;
}

.twitter-handle-wrapper span{
    height: fit-content;
    height: -moz-fit-content;
    margin: auto
}

option[value=""][disabled] {
    display: none;
}

.dropdown-select{
    width: 100%;
    padding: 7px 11px;
    border-radius: 4px;
    border: 1px solid;
    appearance: none;
    cursor: pointer;
}

.dropdown-select-quiet{
    background: transparent !important;
}

.dropdown-select:focus{
    border-color: rgb(55, 142, 240) !important;
    outline: rgb(55, 142, 240);
}

.coral--dark .dropdown-select:hover{
    background-color: rgb(47, 47, 47);
}

.coral--dark .dropdown-select{
    color: var(--coral-light-border);
    background-color: var(--coral-dark-card);
    border-color: var(--coral-dark-border);
}

.main-search .dropdown-select-chevron{
    position: inherit;
}

.dropdown-select-chevron{
    position: relative;
}

.dropdown-select-chevron::after{
    pointer-events: none;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

div * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: none !important;
      background-color: transparent;
    }
    ::-webkit-scrollbar {
      width: 3px !important;
      background-color: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
  }

.coral--dark .dropdown-select-chevron::after{
    background: url('../assets/icons/ChevronDown.svg') no-repeat 97% 50% !important;
}
.coral--light .dropdown-select-chevron::after{
    // background-color: rgb(255, 255, 255) !important;
    // border-color: rgb(225, 225, 225);
    // color: rgb(75, 75, 75);
    background: url('../assets/icons/ChevronDown-dark.svg') no-repeat 97% 50% !important;
}

.searchbar-select{
    background: transparent;
    border: none;
    max-width: 90px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 17px;
}

.scroll-right{
    top: 20%;
    right: -27px;
    transform: rotate(-90deg) translateY(-50%);
}

.scroll-left{
    top: 20%;
    left: -27px;
    transform: rotate(90deg) translateY(-50%);
}

.click-to-scroll{
    position: absolute;
    z-index: 9;
    opacity: 0.7;
}

.chevron{
    cursor: pointer;
    width: 18px;
    height: 100%;
    background-size: 25px 30px !important;
    transition: 0.2s;
}

.chevron:hover{
    opacity: 1;
}

.coral--dark .chevron{
    background: url('../assets/icons/ChevronDown.svg') no-repeat 50% 50%;
}

.coral--light .chevron{
    background: url('../assets/icons/ChevronDown-dark.svg') no-repeat 50% 50%;
}

// .profile-pic-nav::after{
//     content: ".";
//     font-size: 1px;
//     width: 22px;
//     height: 22px;
//     background: red;
// }

// .coral--dark .chevron::after{
//     background: url('../assets/icons/ChevronDown.svg') no-repeat 97% 50%;
// }
// .coral--light .chevron::after{
//     background: url('../assets/icons/ChevronDown-dark.svg') no-repeat 97% 50%;
// }

.icons-preview-wrapper{
    display: grid;
    grid-template-columns: repeat(3, auto);
}

.icon-submission-img-size{
    width: var(--icon-preview-dimensions);
    height: var(--icon-preview-dimensions);
    margin: auto;
}

.icon-preview{
    max-width: 125px;
    margin: auto;
    position: relative;
    width: 100%;

    .icon-submission-img{
        @extend .icon-submission-img-size;

        position: absolute;
        left: 50%;
        transform: translate3d(-50%, 0px, 0px);

        &:first-child{
            z-index: 3;
        }

        &:last-child{
            z-index: 2;
        }
    }
}

.check-size{
    animation: checkSize 2s ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes checkSize {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

.main-border-radius{
    border-radius: var(--main-border-radius)
}

.scrolled-header{
    transform: translateY(-15px) !important;
}

.resourcesLink{
    position: relative;
}

.status-base{
    position: absolute;
    z-index: 9;
    top: -8px;
    height: 8px;
    width: 8px;
}

.status coral-status{
    @extend .status-base;
    left: -5px;
}

.status-right coral-status{
    @extend .status-base;
    right: 13px;
}

coral-buttongroup button{
    border-radius:  100px !important;
}

.dialog-content{
    // min-width: 920px;
}

.categories-sidenav{
    background: var(--coral-dark-card);
    position: sticky;
    top: 165px;
    padding: 10px 10px 10px 10px !important;
    border-right: 1px solid var(--coral-dark-border);
    transition: 0.2s;
    overflow-y: scroll !important;
    width: calc(100% - 20px);
    height: fit-content;
    max-height: calc(98vh - 200px);
}


.categories-sidenav coral-sidenav-item-content{
    font-weight: 500 !important;
}

.gradient-categories-navbar{
    height: 20px;
    width: 100%;
    margin-top: -10px;
    position: sticky;
    bottom: -10px;
}

.coral--dark .gradient-categories-navbar{
    background: linear-gradient(360deg, var(--coral-dark-card) 0%, var(--coral-dark-card-transparent) 100%)
}

.coral--light .gradient-categories-navbar{
    background: linear-gradient(360deg, var(--coral-light-card) 0%, var(--coral-light-card-transparent) 100%);
}

.categories-wrapper{
    position: relative;
    width: 100%;
    overflow-x: scroll;
    padding: 20px 0px 0px 20px;
    height: 32px;
    scrollbar-width: none;
}

.categories-container{
    position: relative;
    width: var(--page-width);
    height: fit-content;
    margin: auto;
    max-width: 1300px;
    overflow: hidden;
}

.categories-container coral-buttongroup{
    padding-right: 50px;
    padding-left: 10px;
    width: fit-content;
    width: -moz-fit-content;
}

.categories-container::after{
    position: absolute;
    width: 30px;
    height: 35px;
    // background-image: linear-gradient(270deg, #252525 40%, transparent);
    content: ".";
    right: 0px;
    top: 35%;
}

.categories-container::before{
    position: absolute;
    width: 30px;
    height: 35px;
    content: " ";
    left: 0px;
    top: 35%;
    z-index: 9;
}

.coral--dark .categories-container::before{
    background-image: linear-gradient(90deg, var(--coral-dark-bg) 40%, #25252500)
}

.coral--light .categories-container::before{
    background-image: linear-gradient(90deg, var(--coral-light-bg) 40%, #f5f5f500)
}

.coral--dark .categories-container::after{
    background-image: linear-gradient(270deg, var(--coral-dark-bg) 40%, #25252500)
}

.coral--light .categories-container::after{
    background-image: linear-gradient(270deg, var(--coral-light-bg) 40%, #f5f5f500)
}

.categories-wrapper::-webkit-scrollbar{
    display: none;
    height: 47px;
}

.categories-wrapper ._coral-ActionButton{
    background: none;
}

.categories-wrapper ._coral-ActionButton.is-selected{
    opacity: 1 !important;
}
.coral--dark .categories-wrapper ._coral-ActionButton.is-selected{
    border-color: #ababab;
}

.coral--light .categories-wrapper ._coral-ActionButton{
    opacity: 0.9;
}

.coral--light .categories-wrapper ._coral-ActionButton.is-selected{
    border-color: #cccccc;
    background: white;
}

.scrolled-shadow{
    box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.3) !important;
    transform: translateY(0px);
}

.coral--dark .scrolled-shadow{
    box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.3) !important;
}

.coral--light .scrolled-shadow{
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.15) !important;
}

.content-wrapper-compact{
    width: calc(var(--page-width) - 10%);
    margin: auto;
    max-width: 1120px;
    min-height: 88vh;
    padding-top: 48px;
    // min-height: 100vh;
}

.header-wrapper{
    display: grid;
    height: fit-content;
    height: -moz-fit-content;
    padding: 30px 0px 15px 0px;
    // padding: 30px 30px 15px 30px;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: start;
    margin: auto;
    max-width: var(--max-page-width);
    width: var(--page-width);
}

.mobile-nav-options{
    width: calc(100% - 20px * 2);
    padding: 50px 20px 30px 20px;
    box-shadow: 0px 25px 35px -10px rgb(0 0 0 / 20%);
}

.coral--dark .mobile-nav-options {
    background-color: var(--coral-dark-bg);
}

.coral--light .mobile-nav-options {
    background-color: var(--coral-light-bg);
}

.mobile-nav-wrapper{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100vh;
    backdrop-filter: blur(2px);
    transition: 0.2s;
}

.burger-menu{
    // display: none;
    color: white;
}

.burger-btn{
    width: fit-content;
    width: -moz-fit-content;
    margin: auto 0px auto auto;
}

.burger-btn:focus .burger-menu{
    color: red;
}


.nav-header{
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99;
    transition: 0.3s;
}

.header-logo-name{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
}

.header-grid-btns{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    /* display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: space-between; */
    /* column-gap: 20px; */
    /* align-content: start; */
}

.header-grid-btns > div{
    // padding-left: 15px;
    height: fit-content;
    height: -moz-fit-content;
    margin: auto;
}

.header-item{
    justify-content: center;
    align-items: center;
    margin: auto !important;
    height: 100%;
    line-height: 2rem;
}

.header-icon-wrapper{
    position: absolute;
    height: fit-content;
    height: -moz-fit-content;
    left: 50%;
    transform: translateX(-50%);
}

.header-icon{
    height: 18px;
    padding: 4px 0px 0px 0px;
    cursor: pointer;
    transition: 0.2s;
}

.profile-nav{
    max-height: 30px;
}

.coral--dark .header-icon:hover{
    filter: brightness(1.5);
}

.coral--light .header-icon:hover{
    filter: brightness(0.7);
}

.transform-centre{
    left: 50%;
    transform: translateX(-50%);
}

.header-item-left{
    float: left;
}

.header-item-right{
    float: right;
}

.content-wrapper-regular{
    width: var(--page-width);
    margin: auto;
    max-width: 1500px;
}

.bottom-loading{
    position: sticky;
    bottom: 0px;
    left: calc(50% + 125px);
    transform: translateX(-50%);
    top: 85%;
    height: 0px;
}

.main-search-wrapper{
    position: sticky;
    padding-top: 10px;
    padding-bottom: 30px;
    top: 60px;
    z-index: 5;
    width: 100%;
    margin: auto;
    transition: 0.2s;
}

.search{
    max-width: 520px;
    margin: auto;
    border-radius: var(--main-border-radius);
}
.coral--dark .search{
    box-shadow: 0px 10px 20px -5px rgb(0 0 0 / 20%);
}
.coral--light .search{
    box-shadow: 0px 10px 21px -15px rgb(0 0 0 / 20%)
}

.switch-text{
    margin: auto;
    z-index: 2;
    font-weight: 600;
    transition: 0.1s;
    user-select: none;
}

.switch-wrapper{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: solid 1px var(--coral-dark-border);
}

.switch-btn{
    position: absolute;
    padding: 9px;
    width: 33%;
    height: calc(100% - 30px);
    border-radius: 5px;
    backdrop-filter: brightness(70%);
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
}

.text-not-selected{
    opacity: 0.4;
}

.switchRight{
    left: 75%;
}


.coral--dark .switch-btn{
    background-color: rgb(50, 50, 50);
    border: solid 1px rgb(74, 74, 74);
}

.coral--light .switch-btn{
    background-color: rgb(245, 245, 245);
    border: solid 1px rgb(225, 225, 225);
}

.filter-by-wrapper{
    position: relative;
    transform: translateY(-2px);
    height: 100%;
    border: 1px solid;
    border-radius: var(--main-border-radius);
    cursor: pointer;
}

.filter-by-grid{
    padding-top: 17px;
}

.cursor-pointer{
    cursor: pointer;
}

.close-add-btn{
    height: 24px;
    width: 24px;
    padding: 1rem;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 5;

    &:hover{
        cursor: pointer;
        .icon-absolute{
            opacity: 1 !important;
        }
    }
}

.searchBar-divider{
    top: 50%;
    height: 55% !important;
    position: absolute;
    right: 110px;
    transform: translateY(-50%);
    border: 1px solid;
    border-radius: 1rem;
}

.coral--dark .searchBar-divider{
    border-color: var(--coral-dark-border)
}

.coral--light .searchBar-divider{
    border-color: var(--coral-light-border)
}

.main-search{
    position: relative;
    width: 100%;
    // padding-top: var(--padding-top-search);
    min-width: none !important;
    max-width: 1300px !important;
    border-radius: var(--main-border-radius);
    z-index: 10;
}

.search-bg{
    position: absolute;
    height: calc(var(--padding-top-search) + 45px);
    width: 110%;
    transform: translate(-5%, -5px);
    filter: blur(2px);
    /* backdrop-filter: blur(20px); */
}

.card-dark{
    background: var(--coral-dark-card);
}
.card-light{
    background: var(--coral-light-card);
}
.fill-dark{
    fill: var(--coral-dark-card);
}
.fill-light{
    fill: var(--coral-light-card);
}
.bg-dark{
    background: var(--coral-dark-bg);
}
.bg-light{
    background: var(--coral-light-bg);
}

.shadow{
    box-shadow: 0px 5px 15px -10px #00000021,
                0px 2px 5px -2px   #00000029;
    transition: 0.2s;
}

.shadow:hover{
    box-shadow: 0px 15px 30px -10px rgba(0, 0, 0, 0.1),
                0px 20px 20px -15px   rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.shadow-l{
    box-shadow: 0px 5px 15px -10px #00000098,
                0px 2px 5px -2px   #00000029;
    transition: 0.2s;
}

._coral-Dialog.is-open{
    @extend .shadow-l;
}

.card-wrapper{
    position: relative;
    
    display: flex;
    flex-direction: column;

    align-items: center;
    align-content: center;
    
    justify-content: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid;
    border-color: rgb(225, 225, 225);
    border-radius: var(--main-border-radius);
    margin: auto;

    &:hover .save-icon{
        opacity: 1;
    }
}

.icon-heart{
    background-position: 8px 8px;
    background-repeat: no-repeat;
}

.icon-heart-filled{
    background-position: 8px 8px;
    background-repeat: no-repeat;
}

.coral--dark{
    .icon-heart{
        background-image: url('@/assets/icons/Category_Icons/Heart.svg');
        
        &:hover{
            background-image: url('@/assets/icons/Category_Icons/Heart_Thick.svg');
        }
    }

    .icon-heart-filled{
        background-image: url('@/assets/icons/Category_Icons/Heart_Filled.svg');
    }

    .color-theme{
        color: var(--coral-dark-text);
    }
}

.coral--light{
    .icon-heart{
        background-image: url('@/assets/icons/Category_Icons/Heart_dark.svg');
        
        &:hover{
            background-image: url('@/assets/icons/Category_Icons/Heart_Thick_dark.svg');
        }
    }

    .icon-heart-filled{
        background-image: url('@/assets/icons/Category_Icons/Heart_Filled_dark.svg');
    }

    .color-theme{
        color: var(--coral-light-text);
    }
}


.save-icon{
    position: absolute;
    padding: 8px;
    top: 0px;
    left: 0px;
    height: 16px;
    width: 16px;
    z-index: 1;
    cursor: pointer;
    transition: 0.2s;
}

.loading{
    .card-text-wrapper{
        width: 60%;
    }    
}

.card-text-wrapper{
    max-width: 90%;
    margin: auto;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;

    h3{
        @extend .ellipses-text-2;

        text-decoration: none;
        font-size: 0.9rem;
        text-align: center;
        padding: 5px 0px 0px 0px;
        font-weight: 800;
    }
    
    h3 input{
        padding: 0px;
    }
}


._coral-Dialog-footer>*, ._coral-Dialog-footer>._coral-Button+._coral-Button{
    margin: 8px;
}

.underline{
    text-decoration: underline;
}

.coral--dark .underline{
    color: var( --coral-light-border);
}

.coral--light .underline{
    color: var(--coral-dark-bg)
}

.card-hover{
    transition: 0.2s;
}

.card-hover:hover{
    transform: translateY(-4px);
}

.footer{
    // bottom : 0px;
    // position : absolute;
    // left : 50%;
    // transform : translateX(-50%);
    // width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    // display: table-row;
}

._coral-Tabs{
    justify-content: center;
}

coral-tablist{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

coral-tab{
    cursor: pointer;

    @media (prefers-color-scheme: dark) {
        color: #4b9df5d2;
    }
}

.sponsor-buttons{
    display: grid;
    grid-template-columns: 1fr;
}

.pointer{
    cursor: pointer;
}

.opacity-hover:hover{
    opacity: 1;
}

.opacity-0{
    opacity: 0;
}

.opacity-30{
    opacity: 0.2;
}

.opacity-30{
    opacity: 0.3;
}

.opacity-40{
    opacity: 0.4;
}

.opacity-50{
    opacity: 0.5;
}

.opacity-60{
    opacity: 0.6;
}

.opacity-70{
    opacity: 0.7;
}

.opacity-80{
    opacity: 0.8;
}

.search-by-algolia-wrapper{
    transform: translateY(-50%);
    top: 53%;
    opacity: 0.3;
    transition: 0.3s;
    font-size: 0.7rem;
    display: flex !important;
    align-items: center;

    &:hover{
        opacity: 1;
    }

    p{
        margin: 0px !important;
    }

    a{
        display: flex;
    }
}

.algolia-logo{
    padding: 0px 5px;
    width: 50px;
}

.dark-mode-btn{
    width: 1.5rem;
    position: relative;
    padding-top: 1.2rem;
    transform: translateY(-40%);
    padding-left: 20px;
    color: white;
    opacity: 0.7;
    cursor: pointer;
}

.main-content-wrapper{
    display: grid;
    grid-template-columns: 220px auto;
    margin: auto;
    padding-top: 30px;
    width: var(--page-width);
    gap: 20px;
}

.grid-ad{
    max-height: 250px;
    position: relative;
    background: var(--coral-light-card);
    border-radius: 8px;
    overflow: hidden !important;

    .bsa-link{
        min-height: 170px;
    }
}

.icon-list-area{
    position: relative;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 16px;
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    padding-bottom: 28px;
    min-height: 160px;

    // & > div{
    //     max-height: 240px;
    // }
    
    .card-no-ad{
        position: absolute;
        height: calc(100% - 2rem);
        width: calc(100% - 2rem);
        padding: 1rem 1rem;
        gap: 0.75rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;

        .support-page{
            top: 0px;
            margin: 0px !important;
            padding: 0px !important;
            width: 100% !important;
        }

        .ad-banner-image{
            width: auto;
            height: 100%;
            max-height: 60%;
            border-radius: 0;
            box-shadow: none;
            object-fit: cover;
            transition: 0.2s;
        }

        &:hover{
            .ad-banner-image{
                transform: translateY(-5px) rotate(-6deg);
            }
        }
    }

    .card-wrapper{
        min-height: 160px;
    }

}

.icon-download-dialog{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-download-details{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: fit-content;
    padding-top: 8px;

    p{
        margin: 0px;
    }
}

.similar-icons-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-y: auto;
    gap: 18px;
    background: #252525;
    border-radius: 8px;
    border: 1px solid var(--coral-dark-border);
    background: var(--coral-dark-card);

    >div{
        width: 100%;
    }

    .coral-card{
        border: none !important;
    }
}

.icon-list-area a{
    text-decoration: none;
    margin: 0px;
    height: fit-content;

    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.card-bottom-text-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    margin: 0px auto !important;
}

.icon-list-area a > div{
    margin: auto;
    position: relative;
    height: fit-content;
    height: -moz-fit-content;
    width: fit-content;
    width: -moz-fit-content;
}

.card-img-wrapper{
    padding: 15px 20px 0px 20px;
    // padding: 20px 65px 0px 65px;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center;
    &:hover{
        cursor: pointer;
    }
}

.card-img-wrapper img{
    margin: auto;
    transition: 0.2s;
    width: 100px;
}

.card-hover:hover .card-img-wrapper img{
    transform: translate3d(0px, -3px, 0px);
    // transform: translate3d(0px, 4px, 0px);
}

.absolute-center-vertical{
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.hero-wrapper{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1300px;
    padding: 15px 0px 15px 0px;
    // padding: 30px 0px 15px 0px;
    margin: 10px 0px 30px 0px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.hero-text-area{
    text-align: center;
    max-width: 600px;
    margin: auto;
}

.hero-img{
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(256, 256, 256, 0.3);
    box-shadow: 0px 25px 24px -10px rgba(0, 0, 0, 0.25);
    transition: 0.3s;
}

.hero-img:hover{
    box-shadow: 0px 50px 30px -25px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(256, 256, 256, 0.7);
}

#noIcons{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#signIn-wrapper{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    max-width: 420px;
    padding: 30px 20px;
    z-index: 999;
}

/* #signin-button{
} */

.main-heading{
    // padding-top: 50px;
    padding-bottom: 10px;
}

.loading-overlay{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(1px);
    left: 50%;
    z-index: 1000;
    top: 50%;
    transform: translate(-50%, -49%);
}

.width-fit{
    width: fit-content;
    width: -moz-fit-content;
}

.loading-popup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    height: fit-content;
    height: -moz-fit-content;
    border-radius: 4px;
}

.loading-animation{
    left: 50%;
    transform: translateX(-50%);
}

.placeholder-icon{
    animation: placeholder-icon 1.5s ease-in-out infinite;
}

@keyframes placeholder-icon {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(0.75);
    }
    100% {
        filter: brightness(1);
    }
  }

.icon{
    padding: 17px 20px;
    transition: 0.2s;
}

.download-counter-wrapper{
    height: fit-content;
    height: -moz-fit-content;
    display: flex;
    margin: auto;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.searchBar-left{
    position: absolute;
    top: 50%;
    left: 0px;
    width: 15px;
    height: 15px;
    opacity: 0.5;
    transform: translateY(-50%);
}

.pointer{
    cursor: pointer !important;
}

// .coral--dark option{
//     color: #4b4b4b;
//     border-radius: 4px;
// }

.searchBar-right{
    position: absolute;
    right: 115px;
    height: 52px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.2s;
    display: flex;
    align-items: center;

    .searchBar-right-wrapper{
        display: flex;
        height: 100%;
        align-items: center;
    }
}

.rotating-search{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    padding-right: 0.5rem;
}


.searchBar-right:opacity{
    opacity: 1;
}

.searchBar-right > *{
    display: inline-block;
    position: relative;
    // top: 50%;
    // transform: translateY(-50%);
}

.searchBar-right > svg{
    opacity: 0.6;
}

.searchBar-right > svg:hover{
    opacity: 1;
}

.coral--light .icon{
    fill: var(--coral-dark-card);
}

.coral--dark .icon{
    fill: var(--coral-light-card);
}

.body-text{
    // padding-right: 40px;
    margin: auto;
    max-width: 350px;
}

.loading-approval-wrapper{
    position: absolute;
    top: 0%;
    left: 0%;   
}

.hide{
    visibility: hidden;
}

.about-block{
    width: 100%;
    text-align: center;
    border-radius: 14px;
    max-width: 890px;

    padding: 48px 0px;
    margin: 56px auto 42px auto;

    & > *{
        margin: auto;
    }

    .skeleton-fill{
        min-height: 2rem;
    }
}

.loading-approval{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.coral-card{
    border: 1px solid;
    transition: 0.2s;
    // overflow: hidden; TODO:
    overflow: visible;
    border-radius: var(--main-border-radius);
}

.fileupload-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 3px;
    min-height: 284px;
    z-index: 999;
}

.fileupload-wrapper > div{
    height: 100%
}

.fileupload-wrapper input{
    top: 0px !important;
    left: 0px !important;
}

.hidden-fileuploader{
    // cursor: unset;
    border: 0px ;
}

.drop-zone-hidden{
    cursor: unset !important;
    border: none !important;
}

.hidden-fileuploader > input{
    z-index: 99999;
}


.upload-card-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    height: fit-content;
    height: -moz-fit-content;
}

.upload-card{
    display: flex;
    flex-direction: column;
}

.upload-card-content{
    display: grid;
    grid-template-columns: 1.5fr 3fr;
    gap: 15px;
}


.status-alert{
    @extend .shadow;
    padding: 8px 10px;
    border-radius: 0.75rem;
    background: white;
    border: var(--coral-light-border) 1px solid;
    opacity: 75%;

    &._coral-StatusLight{
        &:before{
            display: none;
        }
    }

    p{
        margin: 0px;
        font-weight: 600;
        padding-bottom: 0.2rem;
    }

    &:hover{
        opacity: 100%;
    }

    @media (prefers-color-scheme: dark) {
        background: var(--coral-dark-bg);
        border-color: var(--coral-dark-border);
    }
}

.upload-card-options{
    display: grid;
    grid-template-rows: auto;
    gap: 10px;
}

#submissionDialog [coral-dialog-size]{
    height: 100%;
    width: 100%;
}

.drop-zone-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    height: fit-content;
    height: -moz-fit-content;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}

.drop-zone{
    cursor: pointer;
    width: calc(100% - 4px);
    height: 100%;
    border-radius: 7px;
}

.coral--dark .drop-zone{
    border: dashed 2px rgba(256, 256, 256, 0.35);
}

.coral--light .drop-zone{
    border: dashed 2px var(--coral-dark-border);
}


.dialog-text{
    max-width: 380px;
    padding-bottom: 15px;
}


._coral-Alert{
    min-width: 50px;
    width: 100%;
}

.coral--light .coral-card{
    background: var(--coral-light-card);
    border-color: var( --coral-light-border);
    color: var(--coral-dark-bg)
}

._coral-Icon{
    transform: translate3D(0px, 0px, 0px)
}

.coral--dark ._coral-Icon{
    filter: brightness(1.2);
    // filter: invert(1);
}

.coral--dark ._coral-Icon:hover{
    filter: brightness(1.5);
}

.coral--light ._coral-Icon{
    filter: brightness(0.6);
}

.coral--light ._coral-Icon:hover{
    filter: brightness(0.7);
}

.coral-Link{
    cursor: pointer !important;
}

.coral--light .coral-button .coral-Link{
    color: black;
}


.coral--dark .coral-card{
    background: var(--coral-dark-card);
    border-color: var(--coral-dark-border);
    color: var( --coral-light-border);
}

.coral--dark .coral-card:hover{
    border-color: var(--coral-dark-border-hover);
}

.coral--dark .coral-bg{
    background: var(--coral-dark-bg);
}

.coral--light .coral-bg{
    background: var(--coral-light-bg);
}

.coral--dark ._coral-Button .coral-Link{
    color: white !important;
}

.dashBoard{
    width: var(--page-width);
    padding-top: 70px;
    margin: auto;
}

.dashBoard .main-search-wrapper{
    display: block;
}

.dashBoard .card-img-wrapper{
    padding: 0px 45px 0px 45px;
    margin-bottom: 0px;
    position: relative;
}

.dashBoard .card-wrapper{
    max-width: 250px;
    margin-bottom: 20px;
}

.dashboard-wrapper{
    max-width: 1300px;
    margin: auto;
}

.dashboard-edit-user{
    cursor: pointer;
    transform: translate(5px, 2px);
    height: 20px;
}

.filler-space{
    display: inline;
    height: 10px;
    width: 10px;
    padding-left: 10px;
}

.coral--dark .coral-Heading--M a{
    color: white;
}

.coral--light .coral-Heading--M a{
    color: var(--coral-dark-bg);
}

/* .search-wrapper-dashboard{

} */

.burger-btn coral-icon img{
    width: 24px
}

.coral-btn{
    border-width: 2px;
    border-style: solid;
    border-radius: 16px;
    min-height: 32px;
    height: auto;
    min-width: 72px;
    padding: 4px 14px;
    padding-bottom: 5px;
    padding-top: 3px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
    transition: 0.13s
}

.coral-btn-primary{
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    border-radius: 16px;
    min-height: 32px;
    height: auto;
    min-width: 72px;
    padding: 4px 14px;
    padding-bottom: 5px;
    padding-top: 3px;
    font-size: 14px;
    font-weight: 700;
}

.coral--dark .coral-btn-primary{
    border-color: #e3e3e3;
    color: #e3e3e3;
}
.coral--dark .coral-btn-primary:hover{
    background-color: #e3e3e3;
    color: #4b4b4b;
}

.coral--light .coral-btn-primary{
    border-color: #4b4b4b;
    color: #4b4b4b;
}
.coral--light .coral-btn-primary:hover{
    background-color: #4b4b4b;
    color: #e3e3e3;
}

.quiet-button{
    border: none !important;
    background-color: transparent;
}

.coral--dark .quiet-button:hover{
    background-color: rgb(62, 62, 62);
    border-color: rgb(62, 62, 62);
    color: rgb(255, 255, 255);
}

.coral--light .quiet-button:hover{
    background-color: rgb(234, 234, 234);
    border-color: rgb(234, 234, 234);
    color: rgb(44, 44, 44);
}

.coral--light .quiet-button{
    color: black;
}

.coral--dark .quiet-button{
    color: white;
}

._coral-Button{
    border-radius: var(--main-border-radius) !important;
}

.quick-actions-wrapper{
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: auto auto;
    width: fit-content;
    width: -moz-fit-content;
    height: 42px;
    border-radius: 5px;
    backdrop-filter: brightness(0.3) blur(50px) grayscale(0.2);
    transition: 0.15s;
    opacity: 0;
}

.card-img-wrapper:hover .quick-actions-wrapper{
    opacity: 1;
}

.quick-action-el{
    cursor: pointer;
}

.quick-action-icon{
    /* width: 89px; */
    top: 50%;
    padding: 10px;
    margin: auto;
}

.small-text{
    margin-top: 0px;
    padding-top: 0px;
    height: 24px !important;
    font-size: 12px !important;
}

.card-app-name{
    max-width: 140px;
}

.approval-img-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    max-width: 200px;
    padding: 20px;
    margin: auto;
    row-gap: 5px;
}

.approval-img-wrapper img{
    width: 70%;
}

.waiting-wrapper{
    width: fit-content;
    width: -moz-fit-content;
    margin: auto;
    padding-top: 30px;
}

.waiting-absolute{
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    z-index: 9;
    padding-top: 120px;
}

.redBg{
    background: red;
}

.signin-dialog-content{
    text-align: center;
    margin: auto;
    max-width: 280px;
}

// .scrollbarVisible{
// ._coral-Dialog-content:after{
//     color: #252525;
//     width: 80%;
//     content: ".";
//     box-shadow: inset 0px -7px 18px 0 #252525;
//     height: 40px;
//     position: absolute;
//     background: #25252500;
//     bottom: 100px;
// }

.profile-pic-nav{
    height: 32px !important;
    width: 32px !important;
    cursor: pointer;
    border-radius: 50px;
}

.options-popover{
    padding: 5px;
    margin-top: 7px;
    width: fit-content;
    width: -moz-fit-content;
}

.options-popover ._coral-Popover-tip {
    display: block !important;
}

.options-list{
    display: grid;
    grid-column: auto;
    gap: 2px;
}

.options-item{
    cursor: pointer;
    display: grid;
    grid-template-columns: 18px auto;
    height: fit-content;
    height: -moz-fit-content;
    gap: 7px;
    padding: 8px 13px 8px 10px;
    margin: 0px;
    border-radius: 4px;
    transition: 0.2s;
}

.coral--dark .options-item:hover{
    background-color: var(--coral-dark-bg)
}

.options-item img{
    margin: auto;
    width: 100%;
}
.options-item p{
    margin: auto auto auto 0;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    height: fit-content;
    height: -moz-fit-content;
    line-height: 99%;
}


.icon-UI{
    transition: 0.2s;
}

// .icon-UI:hover{
//     transform: translatey(calc(-50% - 2px));
// }

.coral--light .icon-UI{
    filter: brightness(0.5);
}
.coral--light .icon-UI:hover{
    filter: brightness(0.3);
}

.coral--dark .icon-UI{
    filter: brightness(1);
}
.coral--dark .icon-UI:hover{
    filter: brightness(1.2);
}

.apple-signin-banner{
    grid-template-columns: 16px auto;
    justify-content: center;
    border-radius: 7px;
    background: white;
    padding: 7px 12px;
    cursor: pointer;
    color: black;
    margin: 10px auto 10px auto;
    display: grid;
    height: 26px;
    width: calc(100% - 24px);
    gap: 10px;
}

.apple-signin-banner img{
    margin: auto;
    width: 100%;
}

.apple-signin-banner p{
    margin: 0px;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 1.1rem;
    font-weight: 700;
}


.editable-input{
    text-align: center;
    border: none !important;
    border-radius: 0px !important;
}

.editable-input:focus{
    box-shadow: 0 1px 0 rgb(38, 128, 235) !important;
}

.firebaseui-id-submit:hover{
    background-color: rgb(13, 102, 208);
    border-color: rgb(13, 102, 208);
    color: rgb(255, 255, 255);
}


.coral-Well{
    border-radius: 10px !important;
    margin-top: 0px;
}

.coral--dark .coral-Well{
    border-color: #595959 !important;
}

.coral--light .coral-Well{
    border-color: #e0e0e0 !important;
}

.desktop-hidden{
    display: none !important;
}

.text-and-ad-wrapper{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    margin: 0px 0px 0px 0px;
    gap: 30px;
    justify-items: end;
    // grid-template-columns: auto auto;
    // padding-top: 50px;
}

.text-center{
    text-align: center;
    width: fit-content;
    margin: auto;
}

.h3-description{
    padding-top: 8px;
    padding-bottom: 48px;
}

.h3-description > h1{
    max-width: 550px;
}

.h3-description-body{
    max-width: 550px;
}

.h3-description-center{
    text-align: center;
}

.h3-description-center .h3-description-body{
    margin: auto;
}

.h3-description-center > h1{
    margin: auto;
}

.new-pill{
    z-index: 1;
    height: 28px;
    position: absolute;
    border-radius: 7px;
    padding-right: 14px;
    transform: translate(-10px, -10px);
    border: solid 1px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 35%);
}

.coral--dark .new-pill{
    background: var(--coral-dark-bg);
}
.coral--light .new-pill{
    background: var(--coral-light-bg);
}


.coral-FormGroup{
    border-spacing: 0 10px !important;
}


@media only screen and (max-width: 12000px){
    ._coral-Dialog{
        min-width: 368px !important;
    }
}


@media only screen and (max-width: 1350px){
    .header-icon-wrapper{
        position: relative;
        left: 0;
        transform: none;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 1200px){
    .icon-list-area{
        grid-template-columns: repeat(4, 1fr);
    }
    
    // .header-grid-btns > div > *{
    //     width: 100%;
    //     justify-content: start;
    // }

    .coral-Divider--S{
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .mobile-nav-options{
        padding: 50px 20px 15px 20px;
    }

}

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

    .card-img-wrapper {
        padding: 10px 15px 0px 17px
    }
    
    .filler-space{
        padding-left: 0px;
        display: block;
    } 

    .text-and-ad-wrapper{
        grid-template-columns: 1.2fr 1.2fr;
        padding-top: 0px;
    }
    
    .hide-on-shrink{
        display: none;
    }

    .main-content-wrapper{
        grid-template-columns: 200px auto;
        gap: 25px;
    }

}

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

    .desktop-hidden{
        display: block !important;
    }

    .mobile-hidden{
        display: none !important;
    }

    .account-dialog-form{
        width: calc(100% - 5px);
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .gitHub-sponsor{
        // width: var(--page-width-mobile);
    }

    .categories-container{
        width: var(--page-width-mobile);
    }

    .header-wrapper{
        width: var(--page-width-mobile);
    }

    .content-wrapper-regular{
        width: var(--page-width-mobile);
    }

    .main-content-wrapper{
        width: var(--page-width-mobile);
    }

    .dashBoard{
        width: var(--page-width-mobile);
    }

    .profile-nav{
        display: flex;
        flex-direction: column;
        width: fit-content !important;
        margin: auto;
    }

    .main-content-wrapper{
        grid-template-columns: auto;
    }

    .upload-card-wrapper{
        grid-template-columns: auto;
    }
    
    .upload-card{
        grid-template-columns: auto;
    }

    .hero-wrapper{
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px 0px 20px 0px;
        // margin-top: 0px;
    }

    .hero-text-area{
        text-align: left;
        margin: 0px;
    }

    .body-text{
        margin-left: 0px;
    }
}


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

    .icon-list-area{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .card-img-wrapper {
        padding: 10px 15px 0px 17px
    }

    .instructions-grid{
        padding-top: 50px
    }


    .main-search{
        width: 100%;
    }
    
    .PH-badge{
        margin-bottom: 20px;
        margin-top: 0px;
    }

    .search-by-algolia-container{
        display: none;
        // display: flex;
        justify-content: center;
        padding-top: 10px;
    }

    .search-by-algolia-wrapper{
        transform: translate(0px);
        top: auto;
    }

    .instructions-well{
        grid-template-columns: 1fr;
        gap: 0px;
        padding: 0px;
    }

    .instructions-item{
        padding-bottom: 0px !important;
        // padding-top: 10px !important;
    }

    .text-and-ad-wrapper{
        display: block;
        padding-top: 0px;
    }
    
    .marked h2{
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .marked h3{
        font-size: 1.2rem;
    }

    .instructions-well .instructions-img-wrapper{
        position: relative;
        height: 100%;
        width: 70%;
        margin: auto;
    }
    

}


@media only screen and (max-width: 612px){
    .icon-list-area{
        grid-template-columns: 1fr 1fr;
    }

    .waiting-absolute{
        left: 75%;
        transform: translatex(-75%);
    }
    
    .main-heading{
        padding-top: 0px;
    }
    
    .hero-wrapper .coral-Body--S{
        margin-bottom: 5px;
    }
    
    .header-wrapper{
        align-items: center;
    }
    
    .header-grid-btns {
        display: grid;
        grid-template-columns: auto;
        gap: 20px;
        justify-content: start;
    }
    
    .header-grid-btns > div{
        width: calc(100vw - 20px * 2);
        padding: 0;
    }

    .h3-description h3{
        margin-top: 30px;
        padding-top: 0px;
    }
    
    .main-search-wrapper{
        padding-top: 5px;
    }

    .searchBar-right{
        right: 115px;
    }
}

@media only screen and (max-width: 412px){
    /* .gitHub-sponsor{
        height: 330px;
    } */
}

@media only screen and (max-width: 320px){
    ._coral-Dialog{
    min-width: 300px !important;
}
}


.grid-4-col{
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 18px;
}

.flex-row-grid{
    display: flex;
    flex-direction: row;
    gap: 18px;
    flex-wrap: wrap;
}

.skeleton {
    background: linear-gradient(90deg, #424242, #252525);
    background-size: 100%, 400%;
    border-radius: 2px;

    animation: skeleton 2s ease infinite;
}

.skeleton-xxs {
    min-height: 1.5rem;
}

.skeleton-xs {
    min-height: 2rem;
}

.skeleton-s {
    min-height: 2.25rem;
}

.skeleton-m {
    min-height: 2.25rem;
}

.skeleton-l {
    min-height: 3rem;
}

.skeleton-button {
    max-width: 5rem;
}

.skeleton-xl {
    min-height: 4.5rem;
}

.skeleton-fill{
    background: linear-gradient(90deg, #424242, #252525);
    background-size: 100%, 400%;
}

@keyframes skeleton { // TODO: Make keyframes work in less
    0% {
        background-position: 50% 0
    }
    50% {
        background-position: 50% 100%
    }
    100% {
        background-position: 50% 0
    }
}


/* Classes changed from Adobe Coral */
/* ._coral-Button{
    min-width: 10px !important;
    padding: 8px 20px 8px 20px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: var(--main-border-radius) !important;
} */

._coral-Button p{
    margin: 0;
    font-size: 1rem;
    font-weight: 600 !important;
}

.coral-Heading--regular{
    font-weight: 500 !important;
}

._coral-Textfield{
    padding: 5px 11px 5px 11px;
    width: 100% !important;
}

.searchBar{
    // padding: 20px 160px 20px 45px;
    padding-right: 40px;
    height: 50px !important;
    border-radius: var(--main-border-radius) !important;
    font-size: 1rem !important;
}

._coral-Search{
    border-radius: var(--main-border-radius);
}

._coral-Search-input{
    padding-left: 50px;
}

coral-sidenav{
    display: flex;
    flex-direction: column;
}

coral-sidenav-item{
    min-height: 2rem;
    // text-align: left;
    cursor: pointer;
}

.is-selected{
    background: #f3f3f3;
    border-radius: 0.25rem;

    @media (prefers-color-scheme: dark) {
        background: #343434;
    }
}


.ad-banner-image{
    width: 70%;
    height: 80%;
    border-radius: 0.5rem;
    box-shadow: 0px 2px 8px 0px rgba(1, 171, 197, 0.5);
    object-fit: cover;
    transition: 0.2s; 
}

.profile-img-edit-wrapper{
    position: relative;
    width: fit-content;

    button{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.8;
        transition: 0.2s;
        
        .fill {
            fill: var(--coral-text);
        }

        &:hover{
            opacity: 1;
        }
    }
}


.user-icon-card {
    text-align: left;
}

.icon-card-wrapper {
    display: grid;
    grid-template-rows: 2px auto auto;
}

/* //////////////////////////////////////////////////////////////// */

.user-profile-icons {
    max-width: 1150px;
    margin: auto;
    width: var(--page-width);
}

.right-align-tablist {
    margin-left: auto !important;
    max-width: 148px;
}

.profile-page-head-wrapper {
    display: grid;
    grid-template-columns: 64px auto;
    margin: auto;
    gap: 25px;
    width: 80%;
    max-width: 480px;
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: left;
}

@media(max-width:544px) {
    .profile-page-head-wrapper {
        grid-template-columns: auto;
        padding-top: 30px;
    }

}

.profile-page-img-wrapper {
    display: grid;
    grid-template-columns: auto auto;
    width: 100%;
}

.profile-img {
    width: 100%;
    height: auto;
    max-width: 90px;
    border-radius: 4px;
}

.profile-descrption-box {
    /* min-height: calc(27px + 13px); */
    /* min-height: 107px; */
}

.profile-header-wrapper {
    display: grid;
    grid-template-columns: auto auto;
    width: 100%;
}

.profile-info-wrapper {
    display: grid;
    gap: 10px;
    grid-template-columns: auto;
}

.profile-edit-btn {
    width: fit-content;
    height: fit-content;
    margin: auto 0 auto auto;
}

.profile-name-social {
    display: flex;
    grid-template-columns: auto auto;
    width: fit-content;
    height: fit-content;
    min-height: 36px;
    gap: 25px;
    margin: auto auto auto 0;

    .profile-name-wrapper {
        display: flex;
        gap: 2px;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    &>div {
        display: flex;
        gap: 8px;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .loading-placeholder {
        height: 70%
    }
}