/* Start Render Button styles */

/* Render Button: defined: merge button hover text color*/
button[data-button-color="pink-3"],
button[data-button-color="pink-2"],
button[data-button-color="pink-1"] {
    --button-hover-text-color: var(--color-rose, #f06);
}

/* Render Button: defined: merge button hover border color */
button[data-button-color="pink-3"],
button[data-button-color="pink-2"],
button[data-button-color="pink"],
button[data-button-color="blue-3"],
button[data-button-color="blue-2"] {
    --button-hover-border-color: transparent;
}

/* Render Button: defined: merge button text color */
button[data-button-color="blue-3"],
button[data-button-color="blue-2"],
button[data-button-color="blue-1"] {
    --button-text-color: var(--color-blue, #30f);
}

/* Render Button: defined: merge button hover text color */
button[data-button-color="blue-3"],
button[data-button-color="blue-2"],
button[data-button-color="blue-1"]{
    --button-hover-text-color: var(--color-blue, #30f);
}

/* Render Button: defined: merge button hover text color */
button[data-button-color="rainbow-1"],
button[data-button-color="rainbow"],
button[data-button-color="default-3"],
button[data-button-color="default-2"],
button[data-button-color="default-1"],
button[data-button-color="default"] {
    --button-hover-text-color: var(--color-outer-space, #303437);
}

/* Render Button: defined: merge button border color */
button[data-button-color="pink-3"],
button[data-button-color="pink-2"],
button[data-button-color="pink"],
button[data-button-color="blue-3"],
button[data-button-color="blue-2"]{
    --button-border-color: transparent;
}

/* Render Button: defined: merge button text color */
button[data-button-color="pink-1"],
button[data-button-color="pink-3"],
button[data-button-color="pink-2"]{
    --button-text-color: var(--color-brilliant-rose, #fb5ba2);
}

/* Render Button: defined: merge button hover border width */
button[data-button-color="heliotrope-2"],
button[data-button-color="heliotrope"],
button[data-button-color="sunset-orange"],
button[data-button-color="chartreuse-2"],
button[data-button-color="chartreuse"],
button[data-button-color="pink-1"],
button[data-button-color="blue-1"],
button[data-button-color="rainbow-1"],
button[data-button-color="default-1"]{
    --button-hover-border-width: 0.094rem;
}

/* Render Button: defined: merge button hover background color */
button[data-button-color="heliotrope"],
button[data-button-color="sunset-orange"],
button[data-button-color="chartreuse"] {
    --button-hover-background-color: #000;
}

/* Render Button: defined: merge button hover text color */
button[data-button-color="black-80"],
button[data-button-color="pink"],
button[data-button-color="blue"] {
    --button-hover-text-color: #fff;
}

/* Render Button: defined: merge button text color */
button[data-button-color="heliotrope-2"],
button[data-button-color="sunset-orange"],
button[data-button-color="black-80"],
button[data-button-color="pink"],
button[data-button-color="blue"] {
    --button-text-color: #fff;
}

/* Render Button: defined: merge button background color */
button[data-button-color="pink-3"],
button[data-button-color="pink-1"],
button[data-button-color="blue-3"],
button[data-button-color="default-3"] {
    --button-background-color: transparent;
}

/* Render Button: defined: merge button hover border color */
button[data-button-color="default-3"],
button[data-button-color="default-2"],
button[data-button-color="default-1"] {
    --button-hover-border-color: var( --color-botticelli,#bfcedd );
}

/* Render Button: defined: merge button hover background color */
button[data-button-color="default-3"],
button[data-button-color="default-2"],
button[data-button-color="default-1"] {
    --button-hover-background-color: var( --color-mystic,#dee5ec );
}

/* Render Button: defined: merge button border color */
button[data-button-color="rainbow"],
button[data-button-color="default-3"],
button[data-button-color="default-2"],
button[data-button-color="default-1"],
button[data-button-color="default"] {
    --button-border-color: var( --color-mystic,#dee5ec );
}

/* Render Button: defined: merge button text color */
button[data-button-color="default-3"],
button[data-button-color="default-2"],
button[data-button-color="default-1"],
button[data-button-color="default"]{
    --button-text-color: var(--color-shuttle-gray,#5f6369);
}

/* Render Button: defined: merge button border width */
button[data-button-color="black-80"],
button[data-button-color="pink-3"],
button[data-button-color="pink-2"],
button[data-button-color="pink"],
button[data-button-color="rainbow"],
button[data-button-color="blue"],
button[data-button-color="blue-2"],
button[data-button-color="blue-3"],
button[data-button-color="default-3"],
button[data-button-color="default-2"],
button[data-button-color="default"] {
    --button-border-width: 0rem;
}

/* Render Button: defined: merge button border width */
button[data-button-color="heliotrope-2"],
button[data-button-color="heliotrope"],
button[data-button-color="sunset-orange"],
button[data-button-color="chartreuse-2"],
button[data-button-color="chartreuse"],
button[data-button-color="pink-1"],
button[data-button-color="blue-1"],
button[data-button-color="rainbow-1"],
button[data-button-color="default-1"] {
    --button-border-width: 0.094rem;
}

/* Render Button: defined: merge button hover border width */
button[data-button-color="black-80"],
button[data-button-color="pink-3"],
button[data-button-color="pink-2"],
button[data-button-color="pink"],
button[data-button-color="blue-3"],
button[data-button-color="blue-2"],
button[data-button-color="blue"],
button[data-button-color="rainbow"],
button[data-button-color="default-3"],
button[data-button-color="default-2"],
button[data-button-color="default"]{
    --button-hover-border-width: 0rem;
}

/* Render Button: button color: default */
button[data-button-color="default"],
button[data-button-type="default"] {
    --button-background-color: var( --color-mystic,#dee5ec );
    --button-hover-background-color: var( --color-botticelli, #bfcedd);
    --button-hover-border-color: var(--color-outer-space, #303437);
}

/* Render Button: button background color: blue-1 and default-1 */
button[data-button-color="blue-1"],
button[data-button-type="blue-1"],
button[data-button-color="default-1"],
button[data-button-type="default-1"] {
    --button-background-color: rgba(255, 255, 255, 0.5);
}

/* Render Button: button background color: default-2 */
button[data-button-color="default-2"],
button[data-button-type="default-2"] {
    --button-background-color: rgba(222, 229, 236, 0.5);
}

/* Render Button: button color: rainbow */
button[data-button-color="rainbow"],
button[data-button-type="rainbow"] {
    --button-background-color: linear-gradient( 90deg, rgba(255, 208, 242, 0.7) -3.49%, rgba(255, 230, 140, 0.7) 39.26%, rgba(175, 255, 226, 0.7) 77.27%, rgba(193, 201, 255, 0.7) 114.09% ), #fff;
    --button-hover-background-color: linear-gradient( 90deg, #ffd0f2 -3.49%, #ffe68c 39.26%, #afffe2 77.27%, #c1c9ff 114.09% );
    --button-hover-border-color: var( --color-botticelli, #bfcedd);
}

/* Render Button: button text color: rainbow and rainbow-1 */
button[data-button-color="rainbow-1"],
button[data-button-type="rainbow-1"],
button[data-button-color="rainbow"],
button[data-button-type="rainbow"]{
    --button-text-color: var(--color-outer-space, #303437);
}

/* Render Button: button color: rainbow-1 */
button[data-button-color="rainbow-1"],
button[data-button-type="rainbow-1"] {
    --button-background-color: #fff;
    --button-border-color: linear-gradient( 90deg, rgba(255, 208, 242, 0.7) -3.49%, rgba(255, 230, 140, 0.7) 39.26%, rgba(175, 255, 226, 0.7) 77.27%, rgba(193, 201, 255, 0.7) 114.09% );
    --button-hover-background-color: linear-gradient( 90deg, rgba(255, 208, 242, 0.5) -3.49%, rgba(255, 230, 140, 0.5) 39.26%, rgba(175, 255, 226, 0.5) 77.27%, rgba(193, 201, 255, 0.5) 114.09% ), #fff;
    --button-hover-border-color: linear-gradient( 90deg, rgba(255, 208, 242, 0.7) -3.49%, rgba(255, 230, 140, 0.7) 39.26%, rgba(175, 255, 226, 0.7) 77.27%, rgba(193, 201, 255, 0.7) 114.09% ), #fff;
}

/* Render Button: button color: rainbow-1 */
button[data-button-color="rainbow-1"]:before,
button[data-button-type="rainbow-1"]:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #ffd0f2, #ffe68c, #afffe2, #c1c9ff);
    padding: 2px;
    border-radius: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

/* Render Button: button color: blue */
button[data-button-color="blue"],
button[data-button-type="blue"] {
    --button-background-color: var(--color-blue, #30f);
    --button-border-color: #fff;
    --button-hover-background-color: var(--color-blue-gem, #2c0da7);
    --button-hover-border-color: #fff;
    --button-hover-text-color: #fff;
}

button[data-button-color="blue"] [data-button-icon] {
    filter: brightness(0) saturate(100%) invert(99%) sepia(99%) saturate(0%) hue-rotate(176deg) brightness(107%) contrast(100%);
}

/* Render Button: button color: blue-1 */
button[data-button-color="blue-1"],
button[data-button-type="blue-1"] {
    --button-border-color: rgba(51, 0, 255, 0.25);
    --button-hover-background-color: linear-gradient( 0deg, rgba(51, 0, 255, 0.1) 0%, rgba(51, 0, 255, 0.1) 100% ), rgba(255, 255, 255, 0.5);
    --button-hover-border-color: rgba(51, 0, 255, 0.5);
}

/* Render Button: button background color: blue-2 */
button[data-button-color="blue-2"],
button[data-button-type="blue-2"] {
    --button-background-color: rgba(51, 0, 255, 0.05);
}

/* Render Button: button hover background color: blue-2 and blue-3 */
button[data-button-color="blue-2"],
button[data-button-color="blue-3"],
button[data-button-type="blue-3"] {
	--button-hover-background-color: linear-gradient(0deg, rgba(51, 0, 255, 0.15) 0%,
	 rgba(51, 0, 255, 0.15) 100%), 
	 rgba(255, 255, 255, 0.5);
    /* --button-hover-background-color: linear-gradient( 0deg, rgba(51, 0, 255, 0.15) 0%, rgba(51, 0, 255, 0.15) 100% ), rgba(255, 255, 255, 0.5); */
}

/* Render Button: button color: pink */
button[data-button-color="pink"],
button[data-button-type="pink"] {
    --button-background-color: var(--color-brilliant-rose, #fb5ba2);
    --button-hover-background-color: var(--color-rose, #f06);
}

/* Render Button: button color: pink-1 */
button[data-button-color="pink-1"],
button[data-button-type="pink-1"] {
    --button-border-color: rgba(251, 91, 162, 0.5);
    --button-hover-border-color: rgba(255, 0, 102, 0.5);
}

/* Render Button: button background color: pink-2 */
button[data-button-color="pink-2"],
button[data-button-type="pink-2"] {
    --button-background-color: rgba(251, 91, 162, 0.1);
}

/* Render Button: button hover background color: pink-2, pink-1, pink-3 */
button[data-button-color="pink-2"],
button[data-button-color="pink-1"],
button[data-button-color="pink-3"],
button[data-button-type="pink-3"] {
    --button-hover-background-color: linear-gradient( 0deg, rgba(255, 0, 102, 0.2) 0%, rgba(255, 0, 102, 0.2) 100% ), rgba(255, 255, 255, 0.5);
}

/* Render Button: button color: chartreuse */
button[data-button-color="chartreuse"] {
    --button-text-color: #000;
    --button-background-color: var(--color-chartreuse);
    --button-border-color:var(--color-chartreuse);
    --button-hover-text-color: var(--color-chartreuse);
    --button-hover-border-color: var(--color-chartreuse);
}

/* Render Button: button color: chartreuse-2 */
button[data-button-color="chartreuse-2"] {
    --button-text-color: var(--color-chartreuse);
    --button-background-color: #000;
    --button-border-color:var(--color-chartreuse);
    --button-hover-background-color: var(--color-chartreuse);
    --button-hover-text-color: #000;
    --button-hover-border-color: var(--color-chartreuse);
}

/* Render Button: button color: black-80 */
button[data-button-color="black-80"] {
    --button-background-color: rgba(0,0,0,.8);
    --button-border-color:#fff;
    --button-hover-background-color: var(--color-sunset-orange, #ff4848);
    --button-hover-border-color: #fff;
}

/* Render Button: button color: sunset-orange */
button[data-button-color="sunset-orange"] {
    --button-background-color: var(--color-sunset-orange);
    --button-border-color: var(--color-sunset-orange);
    --button-hover-text-color: var(--color-sunset-orange);
    --button-hover-border-color: var(--color-sunset-orange);
}

/* Render Button: button color: heliotrope */
button[data-button-color="heliotrope"] {
    --button-text-color: #000;
    --button-background-color: var(--color-heliotrope);
    --button-border-color: var(--color-heliotrope);
    --button-hover-text-color: var(--color-heliotrope);
    --button-hover-border-color: var(--color-heliotrope);
}
/* Render Button: button color: heliotrope-2 */
button[data-button-color="heliotrope-2"] {
    --button-background-color: #000;
    --button-border-color: var(--color-heliotrope);
    --button-hover-background-color: #3e343e;
    --button-hover-text-color: var(--color-heliotrope, #f093fb);
    --button-hover-border-color: var(--color-heliotrope);
}

/* Render Button: button color: rose */
button[data-button-color="rose"] {
	--button-text-color: var(--color-white);
	--button-hover-text-color: var(--color-white);
	--button-background-color: var(--color-rose);
	--button-hover-background-color: var(--color-rose);
	--button-border-color: var(--color-rose);
	--button-hover-border-color: var(--color-rose);
}

/* Render Button: button color: white-0-15 */
button[data-button-color="white-0-15"] {
	--button-text-color: var(--color-white);
	--button-hover-text-color: var(--color-white);
	--button-background-color: var(--color-white-0-15);
	--button-hover-background-color: var(--color-white-0-15);
	--button-border-color: var(--color-white-0-15);
	--button-hover-border-color: var(--color-white-0-15);
}

/* Render Button: button color: light-warm-green */
button[data-button-color="light-warm-green"] {
	--button-text-color: var(--color-black);
	--button-hover-text-color: var(--color-black);
	--button-background-color: var(--color-light-warm-green);
	--button-hover-background-color: var(--color-light-warm-green);
	--button-border-color: var(--color-light-warm-green);
	--button-hover-border-color: var(--color-light-warm-green);
}

/* Render Button: button color: sign-up-rose */
button[data-button-color="sign-up-rose"] {
	--button-text-color: var(--color-white);
	--button-hover-text-color: var(--color-white);
	--button-background-color: var(--color-rose);

	--button-hover-background-color: linear-gradient(180deg, #FF408C 0%, #F00 100%);
	--button-border-color: var(--color-rose);
	--button-hover-border-color: var(--color-rose);
    --button-border-radius: 0.625rem;
    --button-hover-box-shadow: 0px 0px 20px 0px rgba(255, 150, 192, 0.80) inset, 8px 8px 30px 0px rgba(255, 0, 102, 0.70), 0px 0px 35px 0px rgba(255, 255, 221, 0.50), -8px -8px 30px 0px rgba(255, 0, 0, 0.70);
}

/* Render Button: button color: sign-up-white */
button[data-button-color="sign-up-white"] {
	--button-text-color: var(--color-white);
	--button-hover-text-color: var(--color-white);
	--button-background-color: var(--color-white-0-15);
	--button-hover-background-color: linear-gradient(180deg, rgba(87, 85, 85, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
	--button-border-color: var(--color-white);
	--button-hover-border-color: var(--color-white);
    --button-border-radius: 0.625rem;
    --button-border-width: 1.5px;
    --button-hover-box-shadow: 0px 0px 20px 0px rgba(255, 150, 192, 0.80) inset, 8px 8px 30px 0px rgba(255, 0, 102, 0.70), 0px 0px 35px 0px rgba(255, 255, 221, 0.50), -8px -8px 30px 0px rgba(255, 0, 0, 0.70);
}

/* Render Button: backdrop filter on hover */
button[data-button-color="sign-up-white"]:hover{
    /* bg-blur-10 */
    backdrop-filter: blur(5px);
}

/* On button hover, change svg fill color */
button[data-button-color="chartreuse"]:not(:disabled):hover svg.hover-fill path {
    fill: var(--color-chartreuse);
}

/* On button hover, change svg stroke color */
button[data-button-color="chartreuse"]:not(:disabled):hover svg.hover-stroke path {
    stroke: var(--color-chartreuse);
}

/* Render Button: button text color */
button span {
    color: var(--button-text-color);
}

/* Render Button: button adjust padding left based on button size and icon position */
button[data-button-size="large"][data-button-icon-position="left"]:not([data-button-adjust-padding="0"]) {
    padding-left: 0.5rem;
}

/* Render Button: button adjust padding right based on button size and icon position */
button[data-button-size="large"][data-button-icon-position="right"]:not([data-button-adjust-padding="0"]) {
    padding-right: 0.5rem;
}

/* Render Button: button adjust padding left based on button size and icon position */
button[data-button-size="medium"][data-button-icon-position="left"]:not([data-button-adjust-padding="0"]) {
    padding-right: 1rem;
}

/* Render Button: button adjust padding right based on button size and icon position */
button[data-button-size="medium"][data-button-icon-position="right"]:not([data-button-adjust-padding="0"]) {
    padding-left: 1rem;
}

/* Render Button: avoid loding sppiner width and height */
button[data-button-size="large"][data-button-loader-save] [data-button-spinner-success] svg {
	width: auto;
	height: auto;
}

/* Render Button: svg icon size for large */
button[data-button-size="large"]:not([data-skip-svg-width]) svg {
    width: 2rem;
    height: 2rem;
}

/* Render Button: svg icon size for medium */
button[data-button-size="medium"]:not([data-skip-svg-width]) svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Render Button: svg icon size for small */
button[data-button-size="small"]:not([data-skip-svg-width]) svg {
    width: 1rem;
    height: 1rem;
}

/** Render Button: set button svg color as button text color */
button:not([data-skip-svg-color]) [data-button-spinner-success] svg,
button:not([data-skip-svg-color]) [data-button-spinner-success] svg > *,
button:not([data-skip-svg-color]) [data-button-text-wrap] svg,
button:not([data-skip-svg-color]) [data-button-text-wrap] svg > * {
    fill: var(--button-text-color);
}

/** Render Button: set button hover svg color as button text color */
button:not([data-skip-svg-color]):hover [data-button-spinner-success] svg,
button:not([data-skip-svg-color]):hover [data-button-spinner-success] svg > * ,
button:not([data-skip-svg-color]):hover [data-button-text-wrap] svg,
button:not([data-skip-svg-color]):hover [data-button-text-wrap] svg > * {
    fill: var(--button-hover-text-color);
}

/** Render Button: set button hover text color */
button:not(:disabled):not([data-for-new-dashboard="1"]):hover span {
    color: var(--button-hover-text-color);
}

/** Render Button: button rainbow-1 color */
button[data-button-color="rainbow-1"],
button[data-button-type="rainbow-1"] {
    border: 0;
    z-index: 0;
}

/* Render Button: button loader position */
button[data-button-size="large"][data-button-icon-position="left"] [data-button-spinner-success],
button[data-button-size="large"][data-button-icon-position="left"] [data-button-spinner-load]{
    padding-left: 1rem;
}

/* Render Button: button loader position */
button[data-button-size="large"][data-button-icon-position="right"] [data-button-spinner-success],
button[data-button-size="large"][data-button-icon-position="right"] [data-button-spinner-load]{
    padding-right: 1rem;
}

/* Render Button: button loader position */
button[data-button-size="medium"][data-button-icon-position="left"] [data-button-spinner-success],
button[data-button-size="medium"][data-button-icon-position="left"] [data-button-spinner-load]{
    padding-left: 0.5rem;
}

/* Render Button: button loader position */
button[data-button-size="medium"][data-button-icon-position="right"] [data-button-spinner-success],
button[data-button-size="medium"][data-button-icon-position="right"] [data-button-spinner-load]{
    padding-right: 0.5rem;
}

/* skip loadmore hover color */
button[load-more-comments-button][data-button-loader="1"]:hover,
button.load-more-button[data-button-loader="1"]:hover,
button[data-load-more-button][data-button-loader="1"]:hover{
    --button-hover-background-color: transparent;
}

/** button color */
button span {
    color: var(--button-text-color);
}

button:not(:disabled):not([data-for-new-dashboard="1"]):hover span {
    color: var(--button-hover-text-color);
}

/* Render Button: loading spin style */
[data-button-loader-success="1"] [data-button-spinner-text],
[data-api-fetch-loader="1"] [data-button-spinner-text],
[data-button-loader="1"] [data-button-spinner-text] {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
}

/* Render Button: loading spin style */
[data-button-loader],
[data-button-loader-success="1"] [data-button-spinner-success],
[data-button-spinner-load] {
    transition: opacity 0.1s ease-in-out;
}

/* Render Button: loading spin style */
[data-button-loader-success="1"][data-button-loader-save] [data-button-spinner-success]{
    gap: 0.625rem;
}

/* Render Button: loading spin style */
[data-button-loader-success="1"] [data-button-spinner-success],
[data-api-fetch-loader="1"] [data-button-spinner-load],
[data-button-loader="1"] [data-button-spinner-load] {
    opacity: 1;
    display: flex;
}

/* Render Button: loading spin style */
[data-button-loader-success="1"] [data-button-spinner-load] {
    opacity: 0;
}

/* Render Button: loading spin style */
[data-button-loader="1"]:not([data-spinner-show-text]) [data-button-spinner-load] {
    position: absolute;
}

/* Render Button: loading spin style */
[data-button-loader] [data-button-spinner-load] {
    border-top-color: var(--royal-peacock);
}


/* Render Button: Angled button for left and right positions with no border radius */
button[data-button-angled="1"][data-button-angled-position='left'],
button[data-button-angled="1"][data-button-angled-position='right'] {
    --button-border-radius: 0rem; /* Sets the border radius to 0 for both left and right angled buttons */
}

 /* Render Button: Angled button for left position */
button[data-button-angled="1"][data-button-angled-position='left'] {
    flex-shrink: 0;
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
}

/* Render Button: Angled button for right position */
button[data-button-angled="1"][data-button-angled-position='right'] {
    flex-shrink: 0;
    -ms-transform: skewX(-40deg); /* IE 9 */
    -webkit-transform: skewX(-40deg); /* Safari */
    transform: skewX(-40deg); /* Standard syntax */
}

/* Render Button: Angled button for text transform in left position */
button[data-button-angled="1"][data-button-angled-position='left'] [data-button-spinner-success],
button[data-button-angled="1"][data-button-angled-position='left'] [data-button-spinner-load],
button[data-button-angled="1"][data-button-angled-position='left'] [data-button-text-wrap] {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg); /* Standard syntax */
}

/* Render Button: Angled button for text transform in right position */
button[data-button-angled="1"][data-button-angled-position='right'] [data-button-spinner-success],
button[data-button-angled="1"][data-button-angled-position='right'] [data-button-spinner-load],
button[data-button-angled="1"][data-button-angled-position='right'] [data-button-text-wrap] {
    -ms-transform: skewX(40deg); /* IE 9 */
    -webkit-transform: skewX(40deg); /* Safari */
    transform: skewX(40deg); /* Standard syntax */
}

/* end Render Button style */

/* Render Form Button style */

/* Render Input: input select appearance icon */
[data-form-input-type="select"] select:not([data-no-appearance]),
.form-field select:not([data-no-appearance]) {
    appearance: none !important;
    -webkit-appearance: none !important; /* remove default appearance on Safari Webkit-based browsers */
    -moz-appearance: none !important;
    background-image: url("https://fs.codelinden.com/wp-content/plugins/fansocial/assets/icons/arrow-down.svg") !important;
    background-repeat: no-repeat !important;
    background-size: 15px 15px !important;
    background-position: calc(100% - 15px) center !important;
    padding-right: 2.5rem;
}

/* Render Input: define input color variable */
[data-form-input-type] select,
[data-form-input-type] input{
    --input-margin-top: 0px;
    --input-border-color: var(--color-mystic);
    --input-border-width: 1px;
    --input-font-size: 1rem;
    --input-font-color: var(--color-outer-space, #303437);
    --input-font-weight: 500; /* Nay changed 500 */
    --input-border-radius: 0.625rem;
    --input-letter-spacing: 0.01rem;
    --input-active-border-color:var(--color-brilliant-rose, #fb5ba2);
}

/* Render Input: define input initial style */
[data-form-input-type="select"] select,
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]), 
input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="url"], 
input[type="number"], 
input[type="password"], 
textarea {
	width: 100%;
	font-weight: var(--input-font-weight);
	color: var(--input-font-color);
	font-size: var(--input-font-size);
	margin-top: var(--input-margin-top);
	margin-bottom: var(--input-margin-bottom);
	transition: border-color 200ms ease-in-out;
    letter-spacing: var(--input-letter-spacing);
}

[data-form-input-type]:not([data-input-new-dashboard="1"]) [data-form-input-type="select"] select,
[data-form-input-type]:not([data-input-new-dashboard="1"]) input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]), 
[data-form-input-type]:not([data-input-new-dashboard="1"]) input[type="text"], 
[data-form-input-type]:not([data-input-new-dashboard="1"]) input[type="email"], 
[data-form-input-type]:not([data-input-new-dashboard="1"]) input[type="tel"], 
[data-form-input-type]:not([data-input-new-dashboard="1"]) input[type="url"], 
[data-form-input-type]:not([data-input-new-dashboard="1"]) input[type="number"], 
[data-form-input-type]:not([data-input-new-dashboard="1"]) input[type="password"], 
[data-form-input-type]:not([data-input-new-dashboard="1"]) textarea {
	-webkit-border-radius: var(--input-border-radius,0.625rem);
	-moz-border-radius: var(--input-border-radius,0.625rem);
	-ms-border-radius: var(--input-border-radius,0.625rem);
	-o-border-radius: var(--input-border-radius,0.625rem);
	border-radius: var(--input-border-radius,0.625rem);
}

/* Render Input: define input focus and input label foucs */
input:focus ~ div, 
input:active ~ div,
[data-form-input-type] input:focus, 
[data-form-input-type] input:active, 
[data-form-input-type] textarea:focus, 
[data-form-input-type] textarea:active, 
[data-form-input-type] select:focus, 
[data-form-input-type] select:active {
    border-color: var(--input-active-border-color, #fb5ba2);
}

/* Maia added to fix https://app.clickup.com/t/86ern6dkn */
input:focus::placeholder,
textarea:focus::placeholder {
    color: transparent !important;
    opacity: 0;
}  

/* Render Input: adjust border right width*/
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]).br-0,
[data-input-label-wrapper].br-0 {
    border-right-width: 0;
}

/* Render Input: adjust border left width*/
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]).bl-0,
[data-input-label-wrapper].bl-0 {
    border-left-width: 0;
}

/* Render Input: adjust border top/bottom right radius*/
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]).br--left,
[data-input-label-wrapper].br--left {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

/* Render Input: adjust border top left radius*/
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]).br--right,
[data-input-label-wrapper].br--right {
    border-top-left-radius: 0!important;
}

/* Render Input: adjust border bottom left radius*/
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]).br--right,
[data-input-label-wrapper].br--right,
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not( [type="file"] ):not([type="color"]).br--top,
[data-input-label-wrapper].br--top {
    border-bottom-left-radius: 0!important;
}

/* Render Input: Textarea resize disable*/
textarea,
[data-form-input-type] textarea{
    resize:none;
}

/* Render Input: Textarea Quill Editor: None border for new dashboard*/
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] .ql-toolbar.ql-snow,
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] [data-quill-editor] {
    border: none;
    border-width: 0;
}
/* Render Input: Textarea Quill Editor: editor padding style for new dashboard*/
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] [data-quill-editor] .ql-editor {
    padding: 0;
}
/* Render Input: Textarea Quill Editor: toolbar style for new dashboard*/
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] .ql-toolbar.ql-snow {
    display: flex;
    padding: 0;
    padding-bottom: 0.5rem;
}
/* Render Input: Textarea Quill Editor: toolbar style for new dashboard*/
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] .ql-toolbar.ql-snow .ql-formats {
    margin-right: 0; /* Remove left margin */
    gap: 0.25rem;
    display: flex;
    align-items: center;
}
/* Render Input: Textarea Quill Editor: toolbar style for new dashboard*/
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] .ql-toolbar.ql-snow button {
    padding: 0;
    width: 2rem;
    height: 2rem;
}
/* Render Input: Textarea Quill Editor: toolbar button hover and active style for new dashboard*/
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] .ql-toolbar.ql-snow button:active,
[data-form-input-type="textarea"][data-new-dashboard='1'][data-use-quill-editor="1"] .ql-toolbar.ql-snow button:hover {
    background: var(--color-athens-gray2, #f9fafb)
}
 
/* Render Input: Textarea Quill Toolbar: Styling for the Quill toolbar with the Snow theme */
.ql-toolbar.ql-snow {
    border-width: 1px 1px 0; /* Top and side borders */
    border-top-left-radius: var(--input-border-radius, 0.625rem); /* Top left border radius */
    border-top-right-radius: var(--input-border-radius, 0.625rem); /* Top right border radius */
}

/* Render Input: Textarea Quill Container: Styling for the Quill container with the Snow theme */
.ql-container.ql-snow {
    border-bottom-left-radius: var(--input-border-radius, 0.625rem); /* Bottom left border radius */
    border-bottom-right-radius: var(--input-border-radius, 0.625rem); /* Bottom right border radius */
}

/* Render Input: Textarea Styling for the Quill editor container */
[data-form-input-type] [data-quill-editor] {
    min-height: 100px; /* Fixed height for the editor */
    overflow-y: auto; /* Enable vertical scrolling */
    border-width: 0 1px 1px; /* Side and bottom borders */
    border-style: solid; /* Solid border style */
    border-color: #ccc; /* Border color */
}

/* Render Input: Input Styling for the Quill editor container */
/* .ql-snow .ql-tooltip.ql-editing input[type=text] {
    width: auto !important;
} */

/* Render Input: set position relative (may be used for js render select)*/
[data-form-input-type="select"] select{
    position: relative;
}

/* Render Input: Adjust input padding based on label postion*/
[data-form-input-type][data-form-input-label-position="left"] input{
    --input-padding: 12px 16px 12px 0px;
}

/* Render Input: set all input checkbox and radio with to 1.5rem*/
[data-form-input-type="radio"]:not('[data-new-dashboard="1"]') input[type=radio],
[data-form-input-type="checkbox"]:not('[data-new-dashboard="1"]') input[type=checkbox],
:not('[data-new-dashboard="1"]') input[type="checkbox"],
:not('[data-new-dashboard="1"]') input[type="radio"]{
    transform: scale(var(--input-check-size, 1.5)); /** width to 1.5rem */
    /* transform: scale(var(--input-check-size, 1.85)); */
}

/* Render Input: change all input checkbox and radio color*/
[data-form-input-type="radio"][data-form-accent-color='blue'] input[type=radio]:checked, 
[data-form-input-type="checkbox"][data-form-accent-color='blue'] input[type=checkbox]:checked,
[data-form-input-type="radio"] input[type=radio]:checked,
[data-form-input-type="checkbox"] input[type=checkbox]:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked{
    accent-color: var(--input-accent-color, #30f);
}

/* Render Input: change all input checkbox and radio color : dusty gray*/
[data-form-input-type="radio"][data-form-accent-color='dusty-gray'] input[type=radio]:checked, 
[data-form-input-type="checkbox"][data-form-accent-color='dusty-gray'] input[type=checkbox]:checked {
    accent-color: var(--color-dusty-gray, #A8989B);
}

/* Render Input: fix all input checkbox and radio margin right*/
[data-form-input-type="radio"] input[type=radio],
[data-form-input-type="checkbox"] input[type=checkbox]{
    margin-right:0.313rem;
}

/* Render Input: Apply transition to the div following the input */
[data-input-wrapper] input+[data-input-label-wrapper] {
    transition: border-color 200ms ease-in-out; /* Smooth transition for border color */
}

/* Render Input: Change border color when the input is focused or active */
[data-input-wrapper] input:focus+[data-input-label-wrapper]
[data-input-wrapper] input:active+[data-input-label-wrapper] {
    border-color: var(--input-active-border-color, #fb5ba2); /* Active border color with fallback */
}


/* to show input word limit text when focus */
[data-form-input-type] input:focus ~ .common_elm_uFxlAD{
    display:inline-flex!important;
    right: 0.625rem;
    align-items: center;
    top: 0;
    bottom: 0;

}

/* Render Input: hide validation error (Nay)  */
[data-form-input-validate="valid"] [data-input-validate-error],
[data-input-validate-error].flex,
[data-form-input-type] [data-input-validate-error]{
    display: none;
}

/* Render Input: show validation error  (Nay)*/
[data-form-input-validate="invalid"] [data-input-validate-error].flex,
[data-form-input-validate="invalid"] [data-input-validate-error]{
    display: inline-flex;
}

/* Render Input: set validation error svg color (Nay) */
[data-form-input-validate="invalid"] [data-input-validate-error] path {
    stroke: var(--color-pumpkin, #FF7C1E);
}

/* fix save button border radious */
button:not([data-for-new-dashboard="1"])[data-cancel-button],
button:not([data-for-new-dashboard="1"])[data-button-loader-save]{
	border-radius: 0.75rem;
}

/* End Render Form Button style */

/* Start Render Alert style */

/* Render Alert function: Set background color for info messages */
[data-alert-color='blue'] ,
[data-message-type='info'] {
    background-color: var(--color-blue);
}

/* Render Alert function: Set background color for success messages */
[data-alert-color='green'],
[data-message-type='success'] {
    background-color: var(--color-green);
}

/* Render Alert function: Set background color for warning messages */
[data-alert-color='lemon'],
[data-message-type='warning'] {
    background-color: var(--color-lemon);
}

/* Render Alert function: Set background color for error messages */
[data-alert-color='light-warm-red'],
[data-message-type='error'] {
    background-color: var(--color-light-warm-red);
}

/* Render Alert function: Set background color. red to vivid orange. */
[data-alert-color='red-to-vivid-orange'] {
    background: linear-gradient(90deg, #F00 0%, #FF7201 100%);
}

/* Render Alert function: Set background color to black */
[data-alert-color='black'] {
    background-color: var(--color-black);
}

/* End Render Alert style */

/* Start Render Switch Slide style */

/* Render Switch Slide: Small size switch */
[data-switch][data-switch-size="small"] {
    --switch-width: 4rem;
    --switch-height: 1.5rem;
}

/* Render Switch Slide: Medium size switch */
[data-switch][data-switch-size="medium"] {
    --switch-width: 5rem;
    --switch-height: 2rem;
}

/* Render Switch Slide: Large size switch */
[data-switch][data-switch-size="large"] {
    --switch-width: 6rem;
    --switch-height: 2.5rem;
}

/* Render Switch Slide: Small size switch slide */
[data-switch][data-switch-size="small"] [data-switch-slide] {
    --switch-slide-transform: 2.5rem;
    --switch-slide-width: 1.5rem;
    --switch-slide-height: 1.5rem;
    --switch-slide-bottom: 0rem;
}

/* Render Switch Slide: Medium size switch slide */
[data-switch][data-switch-size="medium"] [data-switch-slide] {
    --switch-slide-transform: 2.6rem;
    --switch-slide-width: 2.5rem;
    --switch-slide-height: 2.5rem;
    --switch-slide-bottom: -0.25rem;
}

/* Render Switch Slide: Large size switch slide */
[data-switch][data-switch-size="large"] [data-switch-slide] {
    --switch-slide-transform: 3.5rem;
    --switch-slide-width: 3rem;
    --switch-slide-height: 3rem;
    --switch-slide-bottom: -0.25rem;
}

/* Render Switch Slide: Disable pointer events for switches when they are disabled */
[data-switch][disabled]{
    pointer-events: none;
}

/* Render Switch Slide: Define the basic styling for the switch container */
[data-switch]{
    position: relative;
    display: inline-block;
    min-width: var(--switch-width, 54px); /* Minimum width for the switch */
    height: var(--switch-height, 1.5rem); /* Height for the switch */
    caret-color: transparent; /* Prevent caret color from appearing */
}

/* Render Switch Slide: Change the background color when the switch is checked */
[data-switch] input:checked + [data-switch-slide] {
    background-color: var(--bg-magenta-crayon-25, rgba(251, 91, 162, 0.25));
}

/* Render Switch Slide: Define the styling for the slider element */
[data-switch-slide] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--winter-scene, rgba(191, 206, 221, 0.5)); /* Default background color */
    -webkit-transition: 0.4s; /* Smooth transition for background color change */
    transition: 0.4s; /* Smooth transition for background color change */
}

/* Render Switch Slide: Apply rounded corners to the slider */
[data-switch-slide] {
    display: block;
    border-radius: 3.125rem; /* Rounded corners */
}

/* Render Switch Slide: Move the slider to the right when checked */
[data-switch] input:checked + [data-switch-slide]:before {
    -webkit-transform: translateX(var(--switch-slide-transform, 1.875rem)); /* Translate using CSS variable */
    -ms-transform: translateX(var(--switch-slide-transform, 1.875rem)); /* Translate using CSS variable for IE */
    transform: translateX(var(--switch-slide-transform, 1.875rem)); /* Translate using CSS variable */
}

/* Render Switch Slide: Apply rounded corners to the slider handle */
[data-switch-slide]:before {
    border-radius: 50%; /* Fully rounded slider handle */
}

/* Render Switch Slide: Define the basic styling for the slider handle */
[data-switch-slide]:before {
    position: absolute;
    content: ""; /* Empty content for the handle */
    height: var(--switch-slide-width, 1.5rem); /* Height of the slider handle */
    width: var(--switch-slide-height, 1.5rem); /* Width of the slider handle */
    left: 0;
    bottom: var(--switch-slide-bottom, 0px); /* Bottom position using CSS variable */
    background-color: white; /* Default background color of the handle */
    border: 1px solid var(--color-botticelli, #bfcedd); /* Border color using CSS variable */
    -webkit-transition: 0.4s; /* Smooth transition for position change */
    transition: 0.4s; /* Smooth transition for position change */
}

/* End Render Switch Slide style */

/* Start Media Uploader Render style */

/* Media Uploader Render: Hidden flex element */
/* after rocky added new code 21-03-2025 to show media uploader popup above media details popup */
[data-media-uploader-popup].z-9999{
    z-index: 100000;
}
/* rocky code ends here */

.inline-flex[hidden],
.flex[hidden] {
    display:none;
}
/*  Media Uploader Render: Add cursor pointer for media upload */
[data-media-upload][data-save-to-media-library] {
    cursor: pointer;
}
/* Media Uploader Render: Edit profile more options fixed */
[data-media-upload][data-edit-profile="1"] [data-menu="edi-profile-more-option"] {
    right: 1rem;
    /* left: -11rem; */
}
/* Media Uploader Render: Media upload input wrapper adjustments */
[data-media-upload][data-edit-profile="1"] [data-media-upload-input-wrap] {
    /* bottom: 0.0625rem;
    right: -0.28125rem;
    background-color: var(--color-blue, #30f); */

    /* bottom: 0rem;
    right: -0.26125rem;
    background: var(--color-brand-green, #07f468); */
    display: none;
}

/* Media Uploader Render: Upload processing bar adjustments when active loader it will change width */
[data-media-step-processing-bar][data-show-loader=true] {
  width: 0%!important;
}
/* Media Uploader Render: Upload processing bar */
[data-media-step-processing-bar][data-show-loader=true]:before,
[data-media-step-processing-bar] {
    border-radius: 3.125rem;
    /* border-top-right-radius: 0rem; */
    /* border-bottom-right-radius: 0rem; */
}
/* Media Uploader Render: Upload processing bar */
[data-media-step-processing-bar] {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

/* Media Uploader Render: Horizontal loader for upload processing */
[data-media-step-processing-bar][data-show-loader=true]:before {
    content: '';
    height: inherit;
    background: var(--color-blue, #30f);
    position: absolute;
    animation: borealisBar 2s linear infinite;
}

/* Media Uploader Render: Edit Profile: Horizontal loader for upload processing */
[data-edit-profile="1"] [data-media-step-processing-bar][data-show-loader=true]:before {
    background: var(--color-brand-green, #07f468);
}

[data-edit-profile="1"] [data-media-step-processing-wrap] .eml_jdkdpl{
    display: none;
}
[data-edit-profile="1"] [data-media-step-processing-wrap] [data-media-step-processing-text]{
    color: #07f468;
}

/* Media Uploader Render: Animation for horizontal loader */
@keyframes borealisBar {
  0% {
    left:0%;
    right:100%;
    width:0%;
  }
  10% {
    left:0%;
    right:75%;
    width:25%;
  }
  90% {
    right:0%;
    left:75%;
    width:25%;
  }
  100% {
    left:100%;
    right:0%;
    width:0%;
  }
}

/* Media Uploader Render: Profile image upload CSS */

/* Media Uploader Render: Change opacity for active profile background image */
[data-edit-profile='1'][active='true'] .common_elm_nnBkOV {
  opacity: 0.5;
}
/* Media Uploader Render: Profile image upload CSS */
[data-edit-profile='1']:not([data-is-profile-avatar="1"]){
    /* position: relative; */
}

[data-edit-profile='1'][active='true'] [data-media-step-processing-text]{
    position: relative;
    z-index: 9;
}

/* Media Uploader Render: Add Overlay bg color for profile background image */
[data-edit-profile='1'][active] [profile-image-wrapper]::after {
    content: "";
    background: rgba(0, 0, 0, .75);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

[data-edit-profile='1'][data-is-profile-avatar="1"][active] [data-edit-profile-action-handle="upload-custom-avatar"],
[data-edit-profile='1'][active] [profile-image-wrapper] .target-id,
[data-edit-profile='1'][active] [data-media-upload-input-wrap] {
    opacity: 0;
}

/* Media Uploader Render: Style for profile background image */
[data-edit-profile='1'] .common_elm_nnBkOV {
    border-radius: 100%;
    left: -1px;
    position: relative;
    background-size: cover;
    background-position: center;
}

/* Media Uploader Render: Custom variables for profile upload loader */
[data-edit-profile='1'] [data-media-step-processing] {
  --loaderProfileSize: 12.3rem;
  --loaderSvgProgresSize: 12.5rem;
  --loaderProfileSpinerSize: 10.3rem;
}

[data-edit-profile='1'][data-is-profile-avatar="1"] [data-media-step-processing]{
    --loaderProfileSize: 12.1875rem;
    width: var(--loaderProfileSize);
}

/* Media Uploader Render: General loader style */
.eml_cvhjf {
    border-radius: 3.125rem;
    background: var(--color-mystic);
    height: 0.5rem;
    overflow: hidden;
}

/* Media Uploader Render: Hide profile SVG circle progress and normal processing loader */
[data-edit-profile='1'] [data-media-step-processing][data-show-loader=true] svg .loader-profile-progress,
[data-edit-profile='1'] [processing-wrapper] .eml_cvhjf {
  display: none;
}

/* Media Uploader Render: Style for profile progress loader SVG */
[data-edit-profile='1'] [data-media-step-processing] svg {
  width: var(--loaderSvgProgresSize);
  height: var(--loaderSvgProgresSize);
  top: -2px;
}

/* Media Uploader Render: Position adjustments for media upload processing and profile progress SVG */
[data-edit-profile='1'] [data-media-step-processing] svg,
[data-edit-profile='1'] [data-media-step-processing] {
  position: absolute;
}

/* Media Uploader Render: Style adjustments for media upload processing */
[data-edit-profile='1'] [data-media-step-processing] {
  top: 0;
  height: var(--loaderProfileSize);
}

/* Media Uploader Render: Spinner for profile image upload when loader is active */
[data-edit-profile='1'] [data-media-step-processing][data-show-loader=true]:before {
  content: "";
  display: block;
  position: absolute;
  left: -2px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  margin: 0 auto;
  text-align: center;
  border-radius: 100%;
  border: 16px solid #0d0d0d00;
  /* border-top: 16px solid var(--color-blue, #30f); */
  border-top: 16px solid var(--color-brand-green, #07f468);
  animation: rotate 2s linear infinite;
}

/* Media Uploader Render: Animation for profile spinning loader */
@keyframes rotate {
    0% {
    transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

/* Media Uploader Render: Thumbnail changer and radio input adjustments */
[data-thumbanil-changer] .radio-wrapper input[type="radio"],
[data-media-main-upload] [data-publish-control-types] input[type="radio"],
[data-media-main-upload] [data-media-types] input[type="radio"] { 
    --input-check-size: 0px;
}

/* Media Uploader Render: Drag indicator */
[data-media-upload-input-wrap] {
    border: 2px dashed transparent;
}

[data-media-upload]:not(.common_elm_QJWBGe) [data-media-upload-input-wrap].dragging {
    /* border: 2px dashed var(--color-blue); */ /* File dragging is same as hover: https://app.clickup.com/t/86erdbyye */
}

/* File dragging is same as hover: https://app.clickup.com/t/86erdbyye */
[data-media-upload].dragging{
   border-color: var(--color-ebony-2, #0c111d);
   background: rgba(0, 0, 0, .1);
}

/* Media Uploader Render: Tab border bottom adjustments */
[data-media-main-upload] [data-tabs-container] {
    position: relative;
}

/* Media Uploader Render: Tab border bottom adjustments */
[data-media-main-upload] [data-tabs-container]:after {
    content: "";
    position: absolute;
    left: -1.875rem;
    height: 2px;
    width: 110%;
    background: var(--chapeau-violet); /* Maia change from var(--color-mystic) to solve https://app.clickup.com/t/86erhd3bv  */
    z-index: 1;
}

/* Media Uploader Render: Terms checkbox padding */
.common_elm_dmlYLe {
    padding-top: 0.3rem;
}
/* Media Uploader Render: Terms checkbox */

.common_elm_dmlYLe input[type='checkbox'] {
    --input-check-size: 1.3;
}

/* Media Uploader Render: Radio UI change */
input[data-use-as-checkbox] + .common_elm_leoITQ {
    opacity: 1;
}

/* Media Uploader Render: Radio UI change */
input[data-use-as-checkbox]:checked + .common_elm_leoITQ + .common_elm_leoITQ {
    opacity: 1;
}

/* Media Uploader Render: Radio UI change */
input[data-use-as-checkbox]:checked + .common_elm_leoITQ + .common_elm_leoITQ path {
    fill: var(--color-blue);
}

/* Media Uploader Render: Uploaded gallery items width */
[uploaded-gallery-items] [uploaded-gallery-item].relative {
    /* width: 5.4rem; */
    width: unset;
    flex: 0 0 calc(25% - 8px); /* 4 columns on desktop */
}

/* Media Uploader Render: Media moderation popup content changes */
[data-media-edit-moderation="1"] .common_elm_jEumsq,
[data-media-edit-moderation="1"] .common_elm_SKBJQW {
    display: none;
}

[data-media-edit-moderation="1"] .common_elm_jEumsq ~ [hidden],
[data-media-edit-moderation="1"] .common_elm_SKBJQW ~ [hidden] {
    display: block;
}

/* Media Uploader Render: Media upload datetime icon */
[data-form-input-type="datetime-local"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url('/wp-content/plugins/fansocial/assets/icons/svg/calendar.svg') no-repeat;
    width: 20px;
    height: 20px;
    border-width: thin;
}

/* End Media Uploader Render style */

/* Start tooltip style */

/* Tooltip container and text */
[data-tooltip] [data-tooltip-text] {
    visibility: hidden;
    width: var(--tooltip-width);
    background: var(--tooltip-bg-color, black);
    color: var(--tooltip-text-color, #fff);
    border-radius: 0.375rem;
    padding: 0.5rem;
    position: absolute;
    z-index: 1;
    line-height: normal;
}

/* Tooltip arrow */
[data-tooltip] [data-tooltip-text]::after {
    /* content: ""; */
    position: absolute;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
}

/* Show tooltip on hover */
[data-tooltip]:hover [data-tooltip-text] {
    visibility: visible;
}

/* Tooltip positions */

/* Tooltip position: left */
[data-tooltip][data-tooltip-position="left"] [data-tooltip-text] {
    top: -5px;
    right: 110%;
}

/* Tooltip position: right */
[data-tooltip][data-tooltip-position="right"] [data-tooltip-text] {
    top: -5px;
    left: 115%;
}

/* Tooltip position: top */
[data-tooltip][data-tooltip-position="top"] [data-tooltip-text] {
    bottom: 100%;
    left: 50%;
    margin-left: calc(var(--tooltip-width, 150) - var(--tooltip-width, 150) - var(--tooltip-width, 150) / 2); /* Use half of the width to center the tooltip */
}

/* Tooltip position: bottom */
[data-tooltip][data-tooltip-position="bottom"] [data-tooltip-text] {
    top: 100%;
    left: 50%;
    margin-left: calc(var(--tooltip-width, 150) - var(--tooltip-width, 150) - var(--tooltip-width, 150) / 2); /* Use half of the width to center the tooltip */
}

/* Tooltip arrow positions */

/* Tooltip arrow position: top */
[data-tooltip][data-tooltip-position="top"] [data-tooltip-text]::after {
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    border-color: var(--tooltip-arrow-color, black) transparent transparent transparent;
    margin-top: 0px;
}

/* Tooltip arrow position: bottom */
[data-tooltip][data-tooltip-position="bottom"] [data-tooltip-text]::after {
    bottom: 100%; /* At the top of the tooltip */
    left: 50%;
    border-color: transparent transparent var(--tooltip-arrow-color, black) transparent;
}

/* Tooltip arrow position: right */
[data-tooltip][data-tooltip-position="right"] [data-tooltip-text]::after {
    /* top: 50%; */
    top: 25%;
    right: 100%; /* To the left of the tooltip */
    border-color: transparent var(--tooltip-arrow-color, black) transparent transparent;
}

/* Tooltip arrow position: left */
[data-tooltip][data-tooltip-position="left"] [data-tooltip-text]::after {
    /* top: 50%; */
    top: 25%;
    left: 100%; /* To the right of the tooltip */
    border-color: transparent transparent transparent var(--tooltip-arrow-color, black);
}


/* copy css from dasbhaord css for toast suceess bg */
[data-notification-type=success] [data-notification-card-body] {
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .9))), -webkit-gradient(linear, left bottom, left top, from(rgba(46, 211, 183, .15)), to(rgba(46, 211, 183, .15))), rgba(255, 255, 255, .9);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 100%), linear-gradient(0deg, rgba(46, 211, 183, .15) 0, rgba(46, 211, 183, .15) 100%), rgba(255, 255, 255, .9);
}
[data-notification-type=success] {
    border-left-color: var(--color-turquoise, #2ed3b7);
}
[data-notification-card] {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--color-gull-gray, #98a2b3);
}

.br--col--athens-gray2 {
    border-color: var(--color-athens-gray2);
}
[data-notification-type=success] [data-notification-icon-container] {
    background: rgba(46, 211, 183, .1);
}

[data-notification-type=success] [data-notification-icon-container] [data-big-icon] {
    -webkit-filter: brightness(0) saturate(100%) invert(71%) sepia(99%) saturate(349%) hue-rotate(109deg) brightness(87%) contrast(88%);
    filter: brightness(0) saturate(100%) invert(71%) sepia(99%) saturate(349%) hue-rotate(109deg) brightness(87%) contrast(88%);
}
[data-notification-card][data-has-cta=false] [data-cta] {
    display: none;
}
.transition--ease-in-out {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.transition--200 {
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
}
.transition--all {
    -webkit-transition-property: all;
    transition-property: all;
}
[data-notification-card] [data-cta] [data-text] {
    color: var(--color-oxford-blue, #344054);
}
[data-notification-card] [data-cta] [data-icon] {
    -webkit-filter: brightness(0) saturate(100%) invert(22%) sepia(31%) saturate(534%) hue-rotate(179deg) brightness(93%) contrast(90%);
    filter: brightness(0) saturate(100%) invert(22%) sepia(31%) saturate(534%) hue-rotate(179deg) brightness(93%) contrast(90%);
}
[data-notification-card][data-has-link=false] [data-link] {
    display: none;
}
[data-notification-type=success] [data-link] [data-text] {
    color: var(--color-genoa, #107569);
}


[data-notification-type=success][data-theme=dark] [data-notification-card-body] {
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .9))), -webkit-gradient(linear, left bottom, left top, from(rgba(46, 211, 183, .3)), to(rgba(46, 211, 183, .3))), rgba(0, 0, 0, .9);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .9) 100%), linear-gradient(0deg, rgba(46, 211, 183, .3) 0, rgba(46, 211, 183, .3) 100%), rgba(0, 0, 0, .9)
}

[data-notification-type=success][data-theme=dark] [data-link] [data-text],
[data-notification-type=success][data-theme=dark] [data-notification-title] {
    color: var(--color-turquoise, #2ed3b7)
}

[data-notification-card][data-notification-type=success][data-theme=dark] [data-link]:hover [data-text] {
    color: var(--color-blue-ribbon, #155eef)
}
/* end */
/* copy css from dasbhaord css for toast destructive bg */
[data-notification-type=destructive] {
    border-left-color: var(--color-vermilion, #ff4405);
}
[data-notification-type=destructive] [data-notification-card-body] {
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .9))), -webkit-gradient(linear, left bottom, left top, from(rgba(255, 68, 5, .1)), to(rgba(255, 68, 5, .1))), rgba(255, 255, 255, .9);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 100%), linear-gradient(0deg, rgba(255, 68, 5, .1) 0, rgba(255, 68, 5, .1) 100%), rgba(255, 255, 255, .9);
}
[data-notification-type=destructive] [data-notification-icon-container] {
    background: rgba(255, 68, 5, .1);
}
[data-notification-type=destructive] [data-notification-icon-container] [data-big-icon] {
    -webkit-filter: brightness(0) saturate(100%) invert(42%) sepia(53%) saturate(6174%) hue-rotate(356deg) brightness(98%) contrast(105%);
    filter: brightness(0) saturate(100%) invert(42%) sepia(53%) saturate(6174%) hue-rotate(356deg) brightness(98%) contrast(105%);
}


/* Maia Copy css from dashboard css for toast destructive bg dark */

[data-notification-type=destructive][data-theme=dark] [data-notification-card-body] {
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .9))), -webkit-gradient(linear, left bottom, left top, from(rgba(255, 68, 5, .3)), to(rgba(255, 68, 5, .3))), rgba(0, 0, 0, .9);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .9) 100%), linear-gradient(0deg, rgba(255, 68, 5, .3) 0, rgba(255, 68, 5, .3) 100%), rgba(0, 0, 0, .9)
  }
  
  [data-notification-type=destructive][data-theme=dark] [data-link] [data-text],
  [data-notification-type=destructive][data-theme=dark] [data-notification-title] {
    color: var(--color-vermilion, #ff4405)
  }
  
  [data-notification-card][data-notification-type=destructive][data-theme=dark] [data-link]:hover [data-text] {
    color: var(--color-blue-ribbon, #155eef)
  }
  
/* end */

/* Maia copy from dashboard csss for toast info bg  */
[data-notification-type=info] {
    border-left-color: var(--color-bright-turquoise, #2ce)
}
  
[data-notification-type=info] [data-notification-card-body] {
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .9))), -webkit-gradient(linear, left bottom, left top, from(rgba(34, 204, 238, .15)), to(rgba(34, 204, 238, .15))), rgba(255, 255, 255, .9);
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 100%), linear-gradient(0deg, rgba(34, 204, 238, .15) 0, rgba(34, 204, 238, .15) 100%), rgba(255, 255, 255, .9)
}

[data-notification-type=info] [data-notification-icon-container] {
background: rgba(34, 204, 238, .1)
}

[data-notification-type=info] [data-notification-icon-container] [data-big-icon] {
-webkit-filter: brightness(0) saturate(100%) invert(67%) sepia(37%) saturate(913%) hue-rotate(145deg) brightness(95%) contrast(97%);
filter: brightness(0) saturate(100%) invert(67%) sepia(37%) saturate(913%) hue-rotate(145deg) brightness(95%) contrast(97%)
}

[data-notification-type=info] [data-small-icon-container] {
background-color: var(--color-bright-turquoise, #2ce)
}

[data-notification-type=info] [data-notification-title] {
color: var(--color-bondi-blue, #088ab2)
}

[data-notification-type=info] [data-link] [data-text] {
color: var(--color-bondi-blue, #088ab2)
}

[data-notification-type=info] [data-link] [data-icon] {
-webkit-filter: brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(762%) hue-rotate(157deg) brightness(88%) contrast(94%);
filter: brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(762%) hue-rotate(157deg) brightness(88%) contrast(94%)
}

[data-notification-type=info][data-theme=dark] [data-notification-card-body] {
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .9))), -webkit-gradient(linear, left bottom, left top, from(rgba(34, 204, 238, .3)), to(rgba(34, 204, 238, .3))), rgba(0, 0, 0, .9);
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .9) 100%), linear-gradient(0deg, rgba(34, 204, 238, .3) 0, rgba(34, 204, 238, .3) 100%), rgba(0, 0, 0, .9)
}

[data-notification-type=info][data-theme=dark] [data-notification-title] {
color: var(--color-turquoise, #2ce)
}

/* For alert type my-sin */
[data-notification-type="my-sin"][data-theme="dark"] [data-notification-card-body] {
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .9))), 
                -webkit-gradient(linear, left bottom, left top, from(rgba(253, 176, 34, 0.02)), to(rgba(253, 176, 34, 0.02))), 
                rgba(0, 0, 0, .9);

    background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%), 
                linear-gradient(0deg, rgba(253, 176, 34, 0.02) 0%, rgba(253, 176, 34, 0.02) 100%), 
                rgba(0, 0, 0, 0.90);
}

[data-notification-type=my-sin][data-theme=dark] [data-link] [data-text],
[data-notification-type=my-sin][data-theme=dark] [data-notification-title] {
    color: var(--color-my-sin, #fdb022);
}

[data-notification-card][data-notification-type=my-sin][data-theme=dark] [data-link]:hover [data-text] {
    color: var(--color-my-sin, #fdb022);
}
[data-notification-type=my-sin] {
    border-left-color: var(--color-my-sin, #fdb022);
}

[data-notification-type=my-sin] [data-notification-icon-container] {
    background: rgba(253, 176, 34, 0.10);
}

[data-notification-type="my-sin"] [data-notification-icon-container] [data-big-icon] {
    -webkit-filter: brightness(0.89) saturate(100%) invert(57%) sepia(80%) saturate(374%) hue-rotate(0deg) contrast(110%);
    filter: brightness(0.89) saturate(100%) invert(57%) sepia(80%) saturate(374%) hue-rotate(0deg) contrast(110%);
}

[data-has-title="false"][data-notification-type=my-sin][data-theme="dark"] [data-notification-text] {
    color: var(--color-my-sin, #fdb022);
}
/* End -Maia copy from dashboard csss for toast info bg  */

/* End tooltip style */
[data-has-cta="false"][data-has-link="false"] [data-bottom-contents]{
    display: none;
}


[data-button-save-wrapper="1"]:not([data-show-cancel-button]) [data-button-loader-cancel], 
[data-button-save-wrapper="1"]:not([data-show-save-button]) [data-button-loader-save]{
    display: none;
}

[data-edit-profile='1'][data-is-profile-avatar="1"]{
    width: 12.1875rem;
    position: relative;
}
[data-edit-profile='1'][data-is-profile-avatar="1"] [data-media-step-processing] {
    /* top: 5.4rem;
    width: 12.4rem;
    height: 12.4rem; */
    left: 1.5rem;
    top: 23px;
}

/* Temporary added to fix all dashboard color */
body [data-container-bg-fixed]:-moz-read-only {
    background-image: url('/wp-content/plugins/fansocial/assets/dashboard-v2/img/gradient-bg-firefox.svg') !important;
    background-size: cover;
}

[data-toast-notification][data-notification-card] [data-close-notification-card] img{
    margin-top: -0.2rem;
}

[data-has-title="false"] [data-notification-text] {
    font-weight: 600;
}

[data-has-title="false"][data-notification-type=success][data-theme="light"] [data-notification-text] {
    color: var(--color-genoa, #107569);
}

[data-has-title="false"][data-notification-type=destructive][data-theme="light"] [data-notification-text] {
    color: var(--color-totem-pole, #97180c);
}

[data-has-title="false"][data-notification-type=warning][data-theme="light"] [data-notification-text] {
    color: var(--color-vesuvius, #b54708)
}

[data-has-title="false"][data-notification-type=warning][data-theme="light"] [data-notification-text] {
    /* color: var(--color-bondi-blue, #088ab2) */
    color: var(--Warning-700, #B54708);
}

[data-toast-notification][data-has-title="false"]{
    /* max-width: 24.8175rem; */
    max-width: 27.5rem;
}

/* Hide Image/video if empty src: https://app.clickup.com/t/86erk0u85 */
img[src=""],
video[src=""]{
    display: none;
}

[data-attribute-popup-ajax-container="mediaUploaderPopup"] [data-loader] > div{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* nay added on  Wed 26 Feb */
@media screen and (min-width: 768px) and (max-width: 1365px){
    [data-edit-profile='1']:not([data-is-profile-avatar="1"]) [data-media-step-processing] {
        --loaderProfileSize: 10.688rem;
        --loaderSvgProgresSize: 10.688rem;
    }
    /* Media Uploader Render: Edit profile more options fixed */
    [data-edit-profile="1"] [data-media-step-processing]{
        width: var(--loaderProfileSize);
        top: 12px;
    }
}
@media screen and (max-width: 768px) {
  /* Media Uploader Render: Edit profile sppiner width */
  /* nay commento0n Wed 26 Feb */
  /* [data-edit-profile='1']:not([data-is-profile-avatar="1"]) [data-media-step-processing] {
    --loaderProfileSize: 7.7rem;
    --loaderSvgProgresSize: 7.7rem;
    --loaderProfileSpinerSize: 5.5rem;
    width: 7.7rem;
    height: 7.7rem;
    top: auto;
  } */
  [data-edit-profile='1'] [data-media-step-processing][data-show-loader=true]:before{
    border: 12px solid #0d0d0d00;
    border-top: 12px solid var(--color-brand-green, #07f468);
  }
  
    [data-message-type][data-notification-card] [data-close-notification-card],
    [data-toast-notification][data-notification-card] [data-close-notification-card] {
        display: block;
    }
    [data-toast-notification][data-notification-card]{
        width: 90%;
    }

}

@media screen and (min-width: 480px) and (max-width: 767px) {
    [data-edit-profile='1']:not([data-is-profile-avatar="1"]) [data-media-step-processing] {
        --loaderProfileSize: 7.7rem;
        --loaderSvgProgresSize: 7.7rem;
        --loaderProfileSpinerSize: 5.5rem;
        width: 7.7rem;
        height: 7.7rem;
        top: auto;
    }
}

/* Maia added to fix https://app.clickup.com/t/86erka5hn */
[custom-bg-blur] {
    background-color: rgb(255 255 255 / 40%) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

/* Light Gallery Play button issue */
body .vjs-big-play-button .vjs-icon-placeholder {
    display: block;
    font-size: 40px;
}

/* Share Option preview play button and  mixed-uploaded-item view*/
/* Positioning the play button */
[share-preview-medias] [data-video-play-button] {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* Circular background for play button*/
[share-preview-medias] [data-video-play-button]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
}

/* Play icon using SVG for play button */
[share-preview-medias] [data-video-play-button]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Show play button */
[audio-uploaded-preview-item].playing [data-view-source] svg.pause-icon,
[audio-uploaded-preview-item].playing:hover [data-view-source],
[mixed-uploaded-item].playing [data-view-source] svg.pause-icon,
[mixed-uploaded-item].playing:hover [data-view-source],
[mixed-uploaded-item].playing:hover video.playing + [data-view-source],
[mixed-uploaded-item].playing:hover video.playing + [data-video-play-button],
[data-toggle-container].playing:hover video.playing + [data-video-play-button],
[share-preview-medias] video:not([src=""]):not(.playing) + [data-video-play-button]{
    display: inline-flex;
}


/* Hide play button when video starts */
[audio-uploaded-preview-item].playing [data-view-source] svg.play-icon,
[audio-uploaded-preview-item].playing [data-view-source],
[mixed-uploaded-item].playing [data-view-source] svg.play-icon,
[mixed-uploaded-item] video.playing + [data-view-source],
[mixed-uploaded-item].playing [data-view-source],
[share-preview-medias] video.playing + [data-video-play-button],
[share-preview-medias] video[src=""] + [data-video-play-button] {
    display: none;
}

/* Pause icon */
[share-preview-medias] video.playing + [data-video-play-button]::after{
    background-image: url('data:image/svg+xml,<svg class="w--20 h--20 filter--col--white pause-icon" data-icon="pause-square" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.5 15V9M14.5 15V9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg>');
    /* background-image: url('/wp-content/plugins/fansocial/assets/icons/svg/pause-square.svg'); */
    width: 20px;
    height: 20px;
}
/* [share-preview-medias] video.playing + [data-video-play-button]::before{
    background: #f8f8f8;
} */

/* set auto for scrollbar width for custom scrollbar */
[data-show-custom-scroll-bar]{
    scrollbar-width: auto;
    -ms-overflow-style: auto
}

/* Set scrollbar width for custom scrollbar */
[data-show-custom-scroll-bar]::-webkit-scrollbar {
    width: 5px;
    display: block;
    height: 100%;
}

/* Set scrollbar track for custom scrollbar */
[data-show-custom-scroll-bar]::-webkit-scrollbar-track {
    /* background: #f1f1f1;  */
    background: transparent;
}

/* Set scrollbar thumb for custom scrollbar */
[data-show-custom-scroll-bar]::-webkit-scrollbar-thumb {
    background: #c0c2c9;
    border-radius: 4px;
}

/* Set scrollbar thumb hover for custom scrollbar */
[data-show-custom-scroll-bar]::-webkit-scrollbar-thumb:hover {
    background: #b1b1b3;
}

@media screen and (max-width: 1010px){
    [uploaded-gallery-items] [uploaded-gallery-item].relative {
        flex: 0 0 calc(33.333% - 8px); /* 3 columns on tablet */
    }
}

@media screen and (max-width: 480px){
    [uploaded-gallery-items] [uploaded-gallery-item].relative {
        flex: 0 0 calc(50% - 8px); /* 2 columns on mobile */
    }
}

/* Spinning Animation for the SVG Loader (copied from theme's style.css) */
.elm_BwJGKO {
	transform-origin: center;
	animation: elm_SbUAkr 0.75s infinite linear;
}
@keyframes elm_SbUAkr {
	100% {
		transform: rotate(360deg);
	}
}

.filter--col--white { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); } /* #FFFFFF */

/* Copied css from dashbaord-styles */
@-webkit-keyframes elm_jVsoBw {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes elm_jVsoBw {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

/* [data-spinner-gradient] {
  width: 1.5rem;
  height: 1.5rem
} */

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(105deg);
    transform: rotate(105deg)
  }

  to {
    -webkit-transform: rotate(465deg);
    transform: rotate(465deg)
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(105deg);
    transform: rotate(105deg)
  }

  to {
    -webkit-transform: rotate(465deg);
    transform: rotate(465deg)
  }
}

[data-spinner-gradient] .rotating {
    stroke: url(#Pattern);
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.4, .4, .2, .4);
  animation-timing-function: cubic-bezier(.4, .4, .2, .4);
  -webkit-transform-origin: 300px 300px;
  transform-origin: 300px 300px
}

[data-spinner-gradient] .stop1 {
  stop-color: #09f469
}

[data-spinner-gradient] .stop2 {
  stop-color: rgba(9, 244, 105, .5)
}

[data-spinner-gradient] .stop3 {
  stop-color: rgba(9, 244, 105, .6)
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

.spin {
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite
}
/* End  Copied css from dashbaord-styles*/