@font-face {
    font-family: Outfit;
    src: url('Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Outfit;
    src: url('Outfit-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: Outfit;
    src: url('Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap
}

[hidden] {
    display: none!important
}

.app-layout {
    height: calc(100vh - var(--header) - 22px)
}

.header-nav .tag-new,.style-tabs,.style-tabs button,.code-tabs button,.preview-meta,.code-pane,.select-control,.hex-control,.download-icon,.copy-code,.icon-name {
    font-family: Outfit,sans-serif;
}

.header-nav a {
    position: relative
}

.tag-new {
    position: absolute;
    top: 8px;
    left: -23px;
    min-width: 40px;
    height: 17px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: .5;
    color: #050505;
    font-size: 11px;
    font-weight: 700;
    isolation: isolate;
}

.tag-new>.con-gradients {
    z-index: -1
}

.con-gradients,.aurora {
    position: absolute;
    inset: -45%;
    overflow: hidden;
    pointer-events: none
}

.gradient,.color {
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    filter: blur(14px);
    opacity: .95;
    will-change: transform
}

.gradient-1,.color-1 {
    background: #f5ce18;
    animation: auroraOne 5.8s ease-in-out infinite alternate
}

.gradient-2,.color-2 {
    background: #fb3f9f;
    animation: auroraTwo 6.4s ease-in-out infinite alternate
}

.gradient-3,.color-3 {
    background: #7e49ff;
    animation: auroraThree 5.2s ease-in-out infinite alternate
}

.gradient-4,.color-4 {
    background: #00c8ef;
    animation: auroraFour 7s ease-in-out infinite alternate
}

.gradient-5,.color-5 {
    background: #35e6a0;
    animation: auroraFive 6.1s ease-in-out infinite alternate
}

.gradient-6,.color-6 {
    background: #ff7d21;
    animation: auroraSix 5.5s ease-in-out infinite alternate
}

@keyframes auroraOne {
    from {
        transform: translate(5%,80%) scale(1)
    }

    to {
        transform: translate(90%,20%) scale(1.35)
    }
}

@keyframes auroraTwo {
    from {
        transform: translate(-40%,-10%) scale(1.2)
    }

    to {
        transform: translate(60%,75%) scale(.9)
    }
}

@keyframes auroraThree {
    from {
        transform: translate(85%,-30%) scale(.9)
    }

    to {
        transform: translate(-20%,60%) scale(1.3)
    }
}

@keyframes auroraFour {
    from {
        transform: translate(70%,70%) scale(1.1)
    }

    to {
        transform: translate(-35%,-15%) scale(.85)
    }
}

@keyframes auroraFive {
    from {
        transform: translate(-35%,75%) scale(.8)
    }

    to {
        transform: translate(75%,-20%) scale(1.3)
    }
}

@keyframes auroraSix {
    from {
        transform: translate(25%,-45%) scale(1.25)
    }

    to {
        transform: translate(-20%,75%) scale(.9)
    }
}

.button-gradient,.button-select {
    position: relative;
    isolation: isolate;
    overflow: hidden!important;
    border: 0!important;
    color: #fff !important;
    background: #111 !important;
    corner-shape: squircle
}

.button-gradient .btn-content,.button-select>*:not(.con-gradients) {
    position: relative;
    z-index: 4
}

.button-gradient .gradient-border {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none
}

.button-gradient .glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg,#ffffff35,transparent 28%,#ffffff14 55%,transparent 75%);
    backdrop-filter: blur(5px);
    pointer-events: none
}

.button-gradient .aurora {
    z-index: 1;
    filter: saturate(1.25)
}

.button-gradient .color {
    filter: blur(17px)
}

.button-gradient .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.button-gradient svg,.btn-download svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.selected-actions {
    grid-template-columns: 1fr 1.2fr
}

.selected-actions button {
    border-radius: 13px;
    corner-shape: squircle
}

.selected-actions .icon-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px
}

.icon-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.style-tabs button {
    border-radius: 40px;
    corner-shape: squircle
}

.style-tabs button.active {
    box-shadow: inset 0 0 0 1px #fff6
}

.side-filter,.segment,.segment button,.library-count,.load-row button,.new-collection,.configuration,.selected-item {
    corner-shape: squircle
}

.quick-add {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    corner-shape: squircle;
    padding: 6px
}

.quick-add svg,.plus svg {
    width: 12px!important;
    height: 12px!important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round
}

.con-types {
    border: 1px solid #29292c;
    border-radius: 20px 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: auto
}

.con-type {
    height: 58px;
    flex: 0 0 58px;
    border: 0;
    border-bottom: 1px solid #222;
    background: transparent;
    color: #898991;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .18s
}

.con-type:first-child {
}

.con-type:last-child {
    border-bottom: 0;
}

.con-type svg {
    width: 27px;
    height: 27px
}

.con-type:hover,.con-type.active {
    background: #202022;
    color: #fff
}

.preview-meta {
    font-size: 13px;
    font-weight: 400
}

.preview-meta b {
    font-weight: 600
}

.copy-code {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    corner-shape: squircle;
    font-family: Outfit,sans-serif
}

.copy-code svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.modal-controls>* {
    border-radius: 40px!important;
    corner-shape: squircle
}

.hex-control {
    padding: 0 8px;
    gap: 5px
}

.hex-control button {
    height: 38px;
    width: 50px;
    display: flex;
    align-items: center;
    gap: 8px
}

.hex-control button i {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    corner-shape: squircle
}

.hex-control button svg {
    width: 10px;
    height: 7px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5
}

.hex-control input {
    width: 63px
}

.add-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px
}

.add-selected .plus {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center
}

.add-selected .add-label {
    font: 600 14px Outfit,sans-serif
}

.download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0!important;
    font: 600 14px Outfit,sans-serif
}

.btn-download {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px
}

.line-v {
    width: 1px;
    height: 27px;
    background: #ffffff30
}

.download-format {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    font: 600 12px Outfit,sans-serif
}

.download-format svg {
    width: 10px;
    height: 7px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5
}

.download-icon>.con-gradients {
    z-index: 1;
    inset: -35%;
    filter: saturate(1.3)
}

.download-icon>.con-gradients .gradient {
    filter: blur(20px)
}

.hamyar-floating-ad {
    position: fixed;
    z-index: 18;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: min(430px,calc(100vw - 34px));
    min-height: 65px;
    border: 1px solid #29292d;
    border-radius: 40px;
    corner-shape: squircle;
    background: #080808eF;
    backdrop-filter: blur(13px);
    display: grid;
    grid-template-columns: 52px 1fr 76px;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    box-shadow: 0 18px 55px #000
}

.ad-icon {
    width: 48px;
    height: 48px;
    corner-shape: squircle;
    display: grid;
    place-items: center
}

.ad-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain
}

.ad-copy strong,.ad-copy span {
    display: block
}

.ad-copy strong {
    font-size: 10px
}

.ad-copy span {
    color: #777;
    font-size: 8px;
    margin-top: 5px
}

.ad-buy {
    height: 42px;
    border-radius: 40px!important;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    color: #111 !important;
}

.fixed-credit {
    position: fixed;
    z-index: 40;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    border-top: 1px solid #18181b;
    background: #040404;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1a1a1;
    font-size: 10px;
}

.fixed-credit span {
    margin: 0 4px;
    font-size: 10px
}

.collection-card {
    display: block!important;
    padding: 0!important;
    overflow: hidden;
    corner-shape: squircle
}

.collection-card summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px;
    cursor: pointer
}

.collection-card summary::-webkit-details-marker {
    display: none
}

.collection-card summary b {
    font-size: 8px;
    color: #666
}

.collection-icons {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    padding: 10px;
    border-top: 1px solid #1d1d20
}

.collection-mini {
    height: 48px;
    border: 1px solid #242428;
    border-radius: 8px;
    background: #09090a;
    color: #999;
    display: grid;
    place-items: center;
    cursor: pointer
}

.collection-mini svg {
    width: 21px;
    height: 21px
}

.collection-tools {
    display: flex;
    gap: 5px;
    padding: 0 10px 10px
}

.collection-tools button {
    flex: 1;
    border: 1px solid #27272b;
    border-radius: 8px;
    background: #101012;
    color: #777;
    font-size: 8px;
    padding: 6px;
    cursor: pointer
}

.new-collection {
    display: flex;
    align-items: center;
    gap: 9px
}

.new-collection .plus {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center
}

.selected-item button svg {
    width: 12px!important;
    height: 12px!important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round
}

body.dark #toast-message-wrapper {
    bottom: 35px;
    left: 20px
}

body.dark .toast-message-item {
    min-height: 56px;
    width: 300px;
    border: 1px solid #2a2a2e!important;
    border-radius: 12px!important;
    corner-shape: squircle;
    background: #111114!important;
    color: #ddd!important;
    box-shadow: 0 15px 45px #000!important;
    font-family: Estedad,sans-serif
}

.toast-message-item-text {
    font-size: 10px!important;
    font-weight: 500!important
}

.toast-message-item-icon {
    padding-right: 5px!important
}

.toast-message-item-close {
    opacity: .45!important
}

.toast-message-item-progressbar {
    height: 1px!important
}

@supports(corner-shape:squircle) {
    button, a, .icon-dialog, .hamyar-floating-ad, .search-box, .selected-item, .mobile-toolbar, .copy-code, .code-tabs {
        corner-shape: squircle
    }
}

@media(max-width: 860px) {
    .app-layout {
        height:auto
    }

    .hamyar-floating-ad {
        bottom: 31px;
    }

    .con-types {
        border-radius: 14px 0 0 14px
    }

    .tag-new {
        top: 2px
    }

    .fixed-credit {
    }
}

@media(max-width: 520px) {
    .hamyar-floating-ad {
        grid-template-columns: 42px 1fr 64px;
        padding: 8px
    }

    .ad-icon {
        width: 40px;
        height: 40px;
    }

    .ad-icon img {
        width: 40px;
    }

    .ad-copy span {
        display: none
    }

    .ad-buy {
        height: 35px;
    }

    .modal-controls .download-icon {
        min-height: 47px
    }

    .con-types {
        padding: 0;
    }

    .con-type {
        height: 48px;
        flex-basis: 48px
    }
}

.download-icon span {
    margin: 0;
    font-size: inherit
}

.download-icon .btn-download>span {
    font: 600 14px Outfit,sans-serif
}

@media(max-width: 860px) {
    .con-types {
        grid-row:1
    }
}

.modal-close svg,.mobile-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round
}

.modal-close {
    display: grid;
    place-items: center
}

button#copyCode:hover {
    background: #202020;
}