body {
    margin: 0;
}

[hidden] {
    display: none !important;
}

.gradient-background {
    background: linear-gradient(222deg, #df8b16, #0f35d0);
    background-size: 400% 400%;
    -webkit-animation: gradient-animation 13s ease infinite;
    animation: gradient-animation 13s ease infinite;
}

.awpage {
    background-color: #fff;
    margin-top: 0px !important;
    margin-bottom: 8px !important;
}

.mainBackground {
    background: radial-gradient( circle at 64% 46%, var(--pageBackgroundGradientColorStop1) 0, var(--pageBackgroundGradientColorStop2) 57%, var(--pageBackgroundGradientColorStop3) 100% );
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI Light");
    font-weight: 300;
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI Light Italic");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI"), local("Segoe UI Web (West European)"), local(-apple-system), local(BlinkMacSystemFont), local(Roboto), local("Helvetica Neue"), local(sans-serif);
    font-weight: 400;
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI Italic");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI Semibold");
    font-weight: 600;
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI Semibold Italic");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI Bold");
    font-weight: 700;
}

@font-face {
    font-family: "GM Segoe";
    src: local("Segoe UI Bold Italic");
    font-weight: 700;
    font-style: italic;
}

@-webkit-keyframes gradient-animation {
    0% {
        background-position: 86% 0%;
    }

    50% {
        background-position: 15% 100%;
    }

    100% {
        background-position: 86% 0%;
    }
}

@keyframes gradient-animation {
    0% {
        background-position: 86% 0%;
    }

    50% {
        background-position: 15% 100%;
    }

    100% {
        background-position: 86% 0%;
    }
}

.truncateText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.animateHeight {
    transition-property: height;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.1, 1);
}

.animateWidth {
    transition-property: width;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.1, 1);
}

.animatePadding {
    transition-property: padding;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.1, 1);
}

.animateTransform {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.1, 1);
}

.animateAll {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.33, 0, 0.1, 1);
}

/*used for preview*/
.markNext {
    background-color: #c7c7c7;
}

.hideScrollbars::-webkit-scrollbar {
    display: none;
}

.scrollFadeOut {
    /* Apply mask for fade effect */
    mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}


.letterFormatScale {
    transform: scale(0.97);
    margin-left: -8px !important;
}

/*FANCY SCROLLBAR*/
/*SCROLLBAR*/

.scroll {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.scrollHover {
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
}

    .scrollHover:hover {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

html,
body,
#root,
#root > .ui-provider {
    min-height: 100%;
}

.scroll::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
}

.scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll::-webkit-scrollbar-thumb {
    background-color: var(--colorNeutralForeground4);
    border-radius: 0.75rem;
    border: 3px solid transparent;
    background-clip: content-box;
}

    .scroll::-webkit-scrollbar-thumb:hover {
        background-color: var(--colorNeutralForeground3);
    }

canvas {
    border-radius: 3px;
    transition: box-shadow 0.05s 0.1s ease-out;
}

    canvas:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px #242424;
    }

/*
     * Container style
     */
.ps {
    /* overflow: hidden !important; */
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
}

/*
     * Scrollbar rail styles
     */
.ps__rail-x {
    display: none;
    opacity: 1;
    transition: background-color 0.2s linear, opacity 0.2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    height: 6px;
    /* there must be 'bottom' or 'top' for ps__rail-x */
    bottom: 2px;
    /* please don't change 'position' */
    position: absolute;
}

.ps__rail-y {
    display: none;
    opacity: 1;
    transition: background-color 0.2s linear, opacity 0.2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    width: 6px;
    /* there must be 'right' or 'left' for ps__rail-y */
    right: 2px;
    /* please don't change 'position' */
    position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
    display: block;
    background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
    opacity: 1;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
    opacity: 1;
}

/*
     * Scrollbar thumb styles
     */
.ps__thumb-x {
    opacity: 0.2;
    background-color: #242424;
    border-radius: 9999px;
    transition: background-color 0.2s linear, height 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
    height: 6px;
    /* there must be 'bottom' for ps__thumb-x */
    bottom: 2px;
    /* please don't change 'position' */
    position: absolute;
    z-index: 1000;
}

.ps__thumb-y {
    opacity: 0.2;
    background-color: #242424;
    border-radius: 9999px;
    transition: background-color 0.2s linear, width 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
    width: 6px;
    /* there must be 'right' for ps__thumb-y */
    right: 2px;
    /* please don't change 'position' */
    position: absolute;
    z-index: 1000;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #242424;
    height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #242424;
    width: 6px;
}

/*DIALOG WIDTH FOR MOBILE*/

@media (max-width: 700px) {
    .fui-DialogSurface {
        margin-top: 100px !important;
        max-width: 90% !important;
    }
}

.pdf-document-container {
    background-color: transparent !important; /* Ensures this overrides default react-pdf styles */
    margin-bottom: 10px;
}

.pdf-page-render {
    width: 98%;
    margin-left: auto; /* Centers the page horizontally */
    margin-right: auto; /* Centers the page horizontally */
    margin-bottom: 10px; /* Creates the 10px gap between pages */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); /* Optional: adds a subtle shadow to pages */
}