body {
    background: #cbd5e1;
    --active-bg: #CBD5E1;
}

.dark body {
    background: #0f172a;
    --active-bg: #000;
}

.colorpicker.is-opened {
	z-index: 9999 !important;
}

.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4
}

.empty:empty {
    display: none!important
}

.scroll-top:hover {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-translate-y: -0.5rem
}

.scroll-top:hover .scroll-top__icon {
    transform: rotate(1turn)
}

@media (max-width:768px) {
    .dd {
    position: fixed !important;
	width: 90%;
	left: 5%;
	right: 5%;
	top: 10%;
    }
    .fix {
        margin-top: 85px;
    }
}

.w-90 {
    max-width: 90% !important;
}

.svg1 {
    background: linear-gradient(90deg, rgba(96, 165, 250, 1) 0%, rgba(192, 132, 252, 1) 50%, rgba(251, 113, 133, 1) 100%);
}

.svg2 {
    transform: rotateY(180deg);
    height: 10vw;
}