/**
 * Plugin Style css.
 *
 */

.ultimate-sn-sticky-note-badge {
    position: fixed;
    right: 64px;
    bottom: 64px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s;
    width: 60px;
    height: 60px;
    cursor: pointer;
    color: var(--ultimate-sticky-notes-badge-bg-color);
}

.ultimate-sn-sticky-note-badge img {
    width: 100%;
    height: 100%;
}

.ultimate-sn-sticky-note-badge:hover:before {
    content: '';
    background-color: #ffffffe0;
    display: flex;
    position: absolute;
    border-radius: 0.5rem;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-weight: 100;
    font-size: 100px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--ultimate-sticky-notes-head-bg-color);
}

.ultimate-sn-sticky-note-badge:hover:after {
    content: '';
    position: absolute;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAi5JREFUeJztmkFu1EAQRZ/bNskICXGDONfgIGzYZMSGY3ACFpwgN2GT5Boxd0BKgtvdLOzJWAoBIRS9luy/memesepP+Vd1lWtAxKtPH65PPr6/MjlUmuWLi9OT1/mOGHl4aHdcXt4bNIJhFIAOaFpoGo0CgGo9N+0swahx8BRAB01LblqPAqoDmOTftFM4WBQ800w/XkYhOaDTOMgKaMgAo0jBM80xBEQHeEnwjLkOWO0pcEY+nAIi9BDIKoECHABM4WBR8EyzkL/nAbkOaMR2dIKugAwQk0ZB7gXWfAx23bEZElFIL+ChjBxgUnCtz+a7zqOgWQY9/qGYHOC1g9szQdV6AcegOxeot7nA9kzQrgPcHJDzFAKdR8F1QEqTE0RUzdcv14TwjlBDHSAECDWEQJ5fl3ss9vJv9pbfy/9ybVVBjFRxgDjAGCEOx3VcruO8N1At3j9dx2eun9Z5+HnTkMZnb0EFf4zR//n8yWchPOaEZYP0kusKsteMfbs9rd78uMuhhre7HefnK/t/AD2kRJVG6D0W7jGYvEdhB8gOEGdiMwpRQK9R2BSgWl97DqhS0nsBPQT+Vky9NMoIAbEa0RUAQPAK0jIUINIoxAEeyggBEV766ftJAbIT5DpgXHsdkFY+HT4kwb7XKKw+CZahABGbAlTrmwJW7oCtDnisA2qNgjwbHPUw8Ieja+4FGP0kKCrg+3T3ZSfoSdCGp4D953vSeEPKV+z3ymQY4BcvVtgas5ZpwwAAAABJRU5ErkJggg==");
    background-size: 45px 45px;
    display: inline-block;
    width: 45px;
    height: 45px;
}

.ultimate-sn-sticky-note-show:hover:after {
    animation-fill-mode: forwards;
    animation: rotateIcon 0.5s;
}

.ultimate-sn-sticky-note-hide:hover:after {
    transform: rotate(135deg);
}

.ultimate-sn-sticky-note-hide:hover:after {
    animation-fill-mode: both;
    animation: rotateIconCross 0.5s;
}

@keyframes rotateIconCross {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(135deg);
    }
}

@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(90deg);
    }
}

.ultimate-sn-sticky-note {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border: 1px solid var(--ultimate-sticky-notes-border-color);
    border-radius: 0.3rem;
    position: fixed;
    right: 20%;
    top: 20%;
    display: flex;
    flex-direction: column;
    z-index: 999999999999999999;
    transition: opacity 0.7s, transform 0.7s, border 400ms linear;
    resize: both;
    overflow: auto;
    min-width: 200px;
    min-height: 200px;
    max-width: 1000px;
    max-height: 800px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
}

.ultimate-sn-sticky-note-head {
    border-bottom: 1px solid var(--ultimate-sticky-notes-border-color);
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    align-items: center;
    gap: 15px;
    color: #808080;
    background-color: var(--ultimate-sticky-notes-head-bg-color);
    transition: background-color 400ms linear;
}

.ultimate-sn-sticky-note-head-title {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    cursor: move;
    color: var(--ultimate-sticky-notes-head-color);
    transition: color 400ms linear;
}

.ultimate-sn-sticky-note-head-actions {
    display: flex;
    padding: 2px 5px;
    justify-content: end;
    align-items: center;
    gap: 15px;
    color: var(--ultimate-sticky-notes-text-color);

    border-radius: 0.3rem;
    background-color: var(--ultimate-sticky-notes-bg-color);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    transition: background-color 400ms linear, color 400ms linear;
}

.ultimate-sn-sticky-note-head-actions span {
    display: flex;
}

.ultimate-sn-sticky-note-head-actions span#ultimate-sn-sticky-drag {
    cursor: move;
}

.ultimate-sn-sticky-note-head-actions span#ultimate-sn-sticky-close {
    cursor: pointer;
}

.ultimate-sn-sticky-note textarea {
    border: none;
    height: 100%;
    width: 100%;
    border-radius: 0rem 0rem 0.3rem 0.3rem;
    resize: none;
    color: var(--ultimate-sticky-notes-text-color);
    background-color: var(--ultimate-sticky-notes-bg-color);
    font-size: var(--ultimate-sticky-notes-font-size);
    font-family: var(--ultimate-sticky-notes-font-family);
    font-weight: var(--ultimate-sticky-notes-font-weight);
    transition: background-color 400ms linear, color 400ms linear;
}

.ultimate-sn-sticky-note textarea:focus,
.ultimate-sn-sticky-note textarea:focus-visible {
    border: none;
    box-shadow: none;
}

.ultimate-sn-sticky-note textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    background-color: var(--ultimate-sticky-notes-bg-color);
}

.ultimate-sn-sticky-note textarea::-webkit-scrollbar {
    width: 8px;
    background-color: var(--ultimate-sticky-notes-head-bg-color);
}

.ultimate-sn-sticky-note textarea::-webkit-scrollbar-thumb {
    background-color: var(--ultimate-sticky-notes-head-bg-color);
    border-radius: 0.2rem;
}

.ultimate-sn-settings-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ultimate-sn-settings-wrap .ultimate-sn-heading {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    margin-top: 15px;
}

.ultimate-sn-settings-wrap .ultimate-sn-setings {
    display: flex;
    gap: 15px;
}

.ultimate-sn-static {
    position: static !important;
}

.ultimate-sn-settings-form {
    flex-basis: 50%;
    padding: 15px;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
}

.ultimate-sn-preview {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ultimate-sn-settings-form .ultimate-sn-form-group {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 10px;
    flex-wrap: nowrap;
}

.ultimate-sn-settings-form .ultimate-sn-form-group:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.ultimate-sn-settings-form .ultimate-sn-form-group .ultimate-sn-input-label {
    flex-basis: 40%;
    font-size: 16px;
    font-weight: 500;
}

.ultimate-sn-settings-form .ultimate-sn-form-group .ultimate-sn-input-wrap {
    flex-basis: 60%;
}

.ultimate-sn-form-footer {
    display: flex;
    justify-content: flex-end;
    margin: 15px;
    gap: 20px;
}

.ultimate-sn-input {
    width: 100%;
    max-width: 100% !important;
    border-radius: 0.5rem;
    border: 1px solid #ddd;
    height: 35px;
    padding: 0;
    border-color: #ddd !important;
}

.ultimate-sn-input:focus-visible,
.ultimate-sn-input:focus {
    border-color: #ddd !important;
    outline: none !important;
    box-shadow: none !important;
}

input.ultimate-sn-input[type="color"]::-moz-color-swatch {
    border: none;
}

input.ultimate-sn-input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 0;
}

input.ultimate-sn-input[type="color"]::-webkit-color-swatch {
    border: none;
}

.ultimate-sn-color-scheme {
    min-width: 100px;
    color: #fff !important;
    text-align: left;
    transition: all 0.5s;
    border: 1px solid #f4f4f4 !important;
}

.ultimate-sn-color-scheme[data-scheme="sea-side"],
.ultimate-sn-color-scheme[data-scheme="sea-side"]:hover,
.ultimate-sn-color-scheme[data-scheme="sea-side"]:focus {
    background: linear-gradient(36deg,
            rgba(74, 170, 229, 1) 65%,
            rgba(255, 255, 255, 1) 66%) !important;
}

.ultimate-sn-color-scheme[data-scheme="strawberry"],
.ultimate-sn-color-scheme[data-scheme="strawberry"]:hover,
.ultimate-sn-color-scheme[data-scheme="strawberry"]:focus {
    background: linear-gradient(36deg,
            rgba(221, 68, 112, 1) 65%,
            rgba(255, 229, 240, 1) 66%) !important;
}

.ultimate-sn-color-scheme[data-scheme="kiwi"],
.ultimate-sn-color-scheme[data-scheme="kiwi"]:hover,
.ultimate-sn-color-scheme[data-scheme="kiwi"]:focus {
    background: linear-gradient(36deg,
            rgba(2, 129, 116, 1) 65%,
            rgba(255, 227, 179, 1) 66%) !important;
}

.ultimate-sn-color-scheme[data-scheme="cafe"],
.ultimate-sn-color-scheme[data-scheme="cafe"]:hover,
.ultimate-sn-color-scheme[data-scheme="cafe"]:focus {
    background: linear-gradient(36deg,
            rgba(58, 63, 88, 1) 65%,
            rgba(253, 249, 231, 1) 66%) !important;
}

.ultimate-sn-flex-wrap {
    display: flex;
    justify-content: space-between;
}

.ultimate-sn-svt0 {
    fill: #9ca2a7;
}

.ultimate-sn-svt1 {
    fill: none;
    stroke: #9ca2a7;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ultimate-sn-svt2 {
    fill: none;
    stroke: #000000;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ultimate-sn-svt3 {
    fill: #7c848b;
}

.ultimate-sn-st0 {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.ultimate-sn-st1 {
    fill: currentColor;
}

.ultimate-sn-cls-1 {
    fill: currentColor;
}