@font-face {
    font-family: "Roboto";
    src: url("../fonts//Roboto-Regular.ttf") format("truetype"), url("../fonts//Roboto-Bold.ttf") format("truetype"), url("../fonts//Roboto-Black.ttf") format("truetype"), url("../fonts//Roboto-BlackItalic.ttf") format("truetype"), url("../fonts//Roboto-BoldItalic.ttf") format("truetype"), url("../fonts//Roboto-Italic.ttf") format("truetype"), url("../fonts//Roboto-Light.ttf") format("truetype"), url("../fonts//Roboto-LightItalic.ttf") format("truetype"), url("../fonts//Roboto-Medium.ttf") format("truetype"), url("../fonts//Roboto-MediumItalic.ttf") format("truetype"), url("../fonts//Roboto-Thin.ttf") format("truetype"), url("../fonts//Roboto-ThinItalic.ttf") format("truetype");
}

html {
    --bg: #FFF;
    --bg-panel: #F4F4F4;
    --header-height: 3rem;
    --nav-width: 100px;
    --normal-font-size: 1rem;
    --body-font: "Roboto";
    --z-fixed: 100;
    display: flex;
    /* font-size estava a 10px*/
    font-size: 12px;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    justify-content: center;
    margin: 0;
    padding: 0;
}

html[data-theme='dark'] {
    --bg: #323232;
    --bg-panel: #393838;
}

.tooltip1 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltiptext1 {
    visibility: hidden;
    padding: 0 5px;
    background-color: var(--color-primary);
    color: aliceblue;
    text-align: center;
    border-radius: 6px;
    width: 120px;
    overflow: hidden;
    position: absolute;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Top */
.tooltiptext1[data-position="top"] {
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
}

/* Bottom */
.tooltiptext1[data-position="bottom"] {
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
}

/* Left */
.tooltiptext1[data-position="left"] {
    top: 50%;
    right: 105%;
    transform: translateY(-50%);
}

/* Right */
.tooltiptext1[data-position="right"] {
    top: 50%;
    left: 105%;
    transform: translateY(-50%);
}

/* Mostrar */
.tooltip1:hover .tooltiptext1 {
    visibility: visible;
    opacity: 1;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

*,
::before,
::after {
    box-sizing: border-box;
}

.blazored-modal {
    background-color: var(--bg) !important;
    color: var(--color-text) !important;
    border: 0 !important;
    border-radius: 20px !important;
}

.bm-close {
    color: var(--color-text) !important;
}

.textFormation {
    color: var(--color-text) !important;
}

.indexH1 {
    background-image: linear-gradient(90deg, #4d78ef, #709df7, #7ed4fd);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 900;
    font-size: 45px;
    text-align: center;
    max-width: 650px;
}

.indexH1External {
    color: var(--color-primary);
    font-weight: 900;
    font-size: 45px;
    text-align: center;
    max-width: 650px;
}

.header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background-color: var(--bg-panel);
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: var(--z-fixed);
    transition: 0.5s;
}

.header_toggle {
    color: var(--color-primary);
    font-size: 3rem;
    cursor: pointer;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    gap: 2rem;
}

@media screen and (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

.DeleteBTN {
    border-radius: 20px !important;
    width: 4rem !important;
    color: var(--color-error) !important;
    cursor: pointer !important;
}

.DeleteBTN:hover {
    border-radius: 20px !important;
    width: 4rem !important;
    background: var(--color-error) !important;
    color: white !important;
    cursor: pointer !important;
}

.InvoiceBTN {
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
}

.InvoiceBTN:hover {
    transform: scale(1.1);
}

.nav-link {
    border: 1px solid var(--color-text);
    color: var(--color-primary) !important;
    cursor: pointer !important;
}

.nav-link:hover {
    box-shadow: 0 0 8px 0 var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

.nav-link.active {
    background: var(--color-primary) !important;
    color: var(--btn-color) !important;
}

.gridIndex {
    margin-top: 4rem;
    padding-bottom: 3rem;
    display: flex;
    gap: 20px;
    flex-direction: row;
    width: 80%;
}

.header_img {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

.header_img img {
    width: 30px;
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--bg);
    padding: 0.5rem 1rem 0 1rem;
    transition: 0.5s;
    z-index: var(--z-fixed);
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: 0.5rem 0 0.5rem 0rem;
}

.nav_logo {
    margin-bottom: 2rem;
}

.nav_logo-icon {
    font-size: 1.25rem;
}

.nav_logo-name {
    color: var(--white-color);
}

.nav_link {
    position: relative;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    transition: 0.3s;
}

.nav_link:hover {
    color: var(--color-primary);
}

.nav_icon {
    font-size: 1.25rem;
}

.show1 {
    left: 0;
}

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

.active1 {
    color: var(--color-primary);
}

.active1::before {
    content: "";
    position: absolute;
    left: 0;
    width: 3px;
    height: 32px;
    background-color: var(--color-primary);
}

.height-100 {
    height: 100vh;
}

@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem);
    }

    .header {
        height: calc(50px + 1rem);
    }

    .header_img {
        width: 30px;
        height: 30px;
    }

    .header_img img {
        width: 35px;
    }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 1rem;
    }

    .show1 {
        width: calc(var(--nav-width) + 156px);
    }

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px);
    }
}


.logoTheme {
    width: 30%;
    margin-bottom: 40px;
}

.blazored-toast-message {
    font-size: 1.3rem !important;
}

input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.blazored-toast {
    padding: 2rem 1.25rem !important;
    width: 30rem !important;
}


select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme='dark'] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme='dark'] input {
    color-scheme: dark;
}

body {
    background-color: var(--bg-panel);
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: 0.5s;
    overflow: hidden !important;
}

a {
    text-decoration: none;
}

input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.switchLabel {
    cursor: pointer;
    text-indent: -9999px;
    width: 45px;
    height: 20px;
    background: grey;
    float: right;
    border-radius: 100px;
    position: relative;
}

.switchLabel:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

input:checked + .switchLabel {
    background: var(--color-primary);
}

input:checked + .switchLabel:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.scrollbar2::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.scrollbar2::-webkit-scrollbar-track {
    box-shadow: 0;
    border-radius: 0px;
}

.scrollbar2::-webkit-scrollbar-thumb {
    background: var(--color-scroll);
    border-radius: 7px;
}

.switchLabel:active:after {
    width: 45px;
}

.ql-toolbar {
    background-color: white !important;
}

.addButton2 {
    width: 30%;
    height: 45px;
    color: var(--btn-color);
    background: var(--color-primary);
    padding: 5px;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 20px;
}

.cardIndex {
    margin-bottom: 1rem;
    border-radius: 20px;
}

.addImage {
    border-radius: 50%;
    background: var(--boxShadow);
    height: 185px;
    width: 185px;
    display: grid;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    object-fit: cover;
}

.ql-editor {
    max-height: 40vh !important;
    overflow-y: auto !important;
}

.ShowButton2 {
    width: 30%;
    height: 45px;
    background: var(--color-warning);
    padding: 5px;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.addButton2:hover {
    background-color: var(--bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.ShowButton2:hover {
    background-color: var(--bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.switchLabel2 {
    position: absolute;
    cursor: pointer;
    color: #ff0000;
    text-indent: -9999px;
    width: 45px;
    height: 21px;
    background: grey;
    float: right;
    border-radius: 100px;
    position: relative;
}

.switchLabel2::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    background: #ff0000;
    border-radius: 90px;
    transition: 0.3s;
}

input:checked + .switchLabel2 {
    background: var(--color-primary);
}

input:checked + .switchLabel2:after {
    left: calc(87% - 5px);
    background: #33ccff;
    transform: translateX(-50%);
}

.switchLabel2:active:after {
    width: 20px;
}

.switchLabel3 {
    position: absolute;
    cursor: pointer;
    color: #ff0000;
    text-indent: -9999px;
    width: 45px;
    height: 20px;
    background: grey;
    float: right;
    border-radius: 100px;
    position: relative;
}

.switchLabel3::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    background: #ff0000;
    border-radius: 90px;
    transition: 0.3s;
}

input:checked + .switchLabel3 {
    background: var(--color-primary);
}

input:checked + .switchLabel3:after {
    left: calc(87% - 5px);
    background: #33ccff;
    transform: translateX(-50%);
}

.switchLabel3:active:after {
    width: 20px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
    transition: all 750ms !important;
    transition-delay: 0 !important;
}

.plugin-header-name {
    color: var(--color-text);
}

.header-content {
    /*position: absolute;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.3rem 4rem;
    position: fixed;
    top: 0;
    background-color: var(--bg);
    z-index: 1;
    /*float: right;*/
    /*right: 0px;*/
}

.header-usefull-area {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    width: auto;
}

.vl {
    border-left: 3px solid var(--bg-panel);
    height: 57px;
    margin-right: 1rem;
}

.header-usefull-area > ul > li {
    list-style-type: none;
    font-size: 1.7rem;
    color: var(--color-text) !important;
}

#burger-menu-icon {
    color: var(--color-text);
}

.header-nav {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    position: absolute;
    right: 10rem;
    text-align: end;
}

.imageLogo {
    width: 200px;
    content: var(--logo);
}

.tr-hover:hover {
    background-color: var(--bg-panel);
}

@media only screen and (min-width: 720px) {
    .header-nav {
        position: unset;
        right: 0;
        flex-direction: row;
        background-color: var(--bg);
    }

    .navbar-toggler {
        display: none;
    }

    .collapse:not(.show1) {
        display: block;
    }
}

@media only screen and (max-width: 672px) {
    .plugin-header-name {
        display: none;
    }

    .header-nav {
        right: 22rem;
        text-align: left;
        background-color: var(--bg-panel)
    }

    .imageLogo {
        width: 150px !important;
    }

    .header-usefull-area {
        width: 100%;
        justify-content: space-around
    }
}

@media only screen and (max-width: 1070px) {

    .modal-header-content > h1 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 670px) {
    .modal-header-content {
        flex-direction: column;
    }
}

.user-image {
    height: 4rem;
    width: 4rem;
    margin-top: 1rem;
    border-radius: 50%;
}

.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-panel);
    min-width: 160px;
    width: 17rem;
    height: auto;
    border-radius: 0.6rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    padding: 12px 16px;
    z-index: 4;
    right: 0;
}

.user-dropdown:hover .user-dropdown-content {
    display: block;
}

i.bx.nav_icon {
    color: var(--color-primary) !important;
}

.nav-link.active i.bx.nav_icon {
    color: var(--btn-color) !important;
}


.user-dropdown-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0.7rem 0;
}

.user-dropdown-item-hover:hover,
.row.user-dropdown-item-hover:hover {
    background-color: var(--bg-panel) !important;
}

.user-dropdown-item > span {
    font-weight: normal;
    font-size: 1.4rem;
    color: var(--color-text);
}

.Profile-text {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-text);
}

.spanText {
    color: var(--color-text);
}

.lang-picker {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
}


.lang-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 1rem;
    padding: 0rem 0.2rem;
    transition: 0.3s;
}

.lang-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 69%;
    cursor: pointer;
    transition: border-bottom 300ms ease;
}

.lang-item:hover {
    border-bottom: 2px solid var(--color-primary);
}

.modal-content {
    background-color: var(--bg) !important;
    color: var(--color-text) !important;
    border: none;
}

.btn-close {
    color: var(--color-text) !important;
}

.lang-label {
    color: var(--color-text);
}

.lang-checker {
    color: var(--color-primary);
    background-color: var(--bg);
    border-radius: 50%;
    font-size: 1.2rem;
}

#container-lang {
    overflow: hidden;
    width: 100%;
    height: 0px;
    transition: height 600ms ease-out;
}

.lang-expanded {
    height: auto !important;
}

.item-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.7rem;
    font-size: 1.4rem;
}

.item-icons > span {
    font-size: 1.4rem;
    color: var(--color-text);
    cursor: pointer;
}

.item-icons > span:hover {
    color: var(--color-primary);
}

/* CSS DO MODAL / SIDEBAR */

h1 {
    font-size: 3.8rem;
    line-height: 1.1em;
}

p {
    opacity: 0.6;
    font-size: 1.8rem;
    line-height: 1.7em;
    text-align: justify;
}

.wrapper {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    padding-top: 3rem;
}


.wrapper.active main {
    filter: blur(5px);
    overflow: hidden;
}

.wrapper.active .sidebar {
    animation: open 400ms forwards;
}

.wrapper.active .modal {
    animation: open 400ms forwards;
}

.wrapper.active .menu .content {
    background: purple;
}

.wrapper.active .menu .sidebar {
    animation: close 400ms forwards;
}

.wrapper .modal {
    min-height: 50rem;
    position: fixed;
    top: 44rem;
    padding: 1rem;
    z-index: 5;
    background-color: var(--bg-panel);
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: close 400ms forwards;
    width: 59%;
    height: 500px;
    z-index: 2;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.modal-page {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.modal-header-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.modal-header-content {
    padding: 2rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    color: var(--color-text);
    border-radius: 20px;
}

.modal-page-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    overflow-y: auto;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    padding: 0 3rem;
    margin-top: 1rem;
    color: var(--color-text);
}


.form-container {
    width: 46%;
    height: 100%;
    position: relative;
    display: flex;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 3rem;
    margin-top: 1rem;
    color: var(--color-text);
    border-right: solid 2px var(--bg-panel);
    min-height: 13rem;
}

.users-container {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1rem;
    margin-bottom: 4rem;
    color: var(--color-text);
}

.form-control, .form-select {
    background-color: var(--bg) !important;
    color: var(--color-text) !important;
}

.details-container {
    width: 50%;
    height: auto;
    position: relative;
    display: flex;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 0 3rem;
    margin-top: 1rem;
    color: var(--color-text);
}

.details1 {
    transition: height 1s ease;
}

.details2 {
    transition: height 3s ease;
    transition-delay: 2s;
}

.details7[open] .content {
    animation-name: invisiblyGrowFontSize, fadeIn;
    animation-duration: 500ms, 200ms;
    animation-delay: 0ms, 500ms;
}

/* debugging colors */
details7:not([open]) {
    background: rgba(0, 0, 255, 0.15);
}

details7[open] {
    background: rgba(255, 0, 0, 0.15);
}

details7:hover {
    background: rgba(0, 255, 0, 0.15);
}

.below {
    background: rgba(255, 255, 0, 0.15);
}

/* debugging styles */
html, details, summary {
    line-height: 1.25;
}

details {
    margin-bottom: 0.25em;
    line-height: 1.25;
}

.details2:not([open]) {
}

.details2[open] {
}

.submitProfile {
    width: 20rem;
    height: 4rem;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

.submitProfile:hover {
    background: none;
    color: var(--color-primary);
}

.deleteProfile {
    width: 20rem;
    height: 4rem;
    border: 1px solid var(--color-error);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-error);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

.deleteProfile:hover {
    background: none;
    color: var(--color-error);
}

.key-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 7rem;
}

.buttons-container-row {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    overflow-y: auto;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 0 3rem;
    margin-top: 1rem;
    color: var(--color-text);
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border: none !important;
}

.btn-danger {
    background-color: var(--color-error) !important;
    border: none !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    border: none !important;
}

.btn-warning {
    background-color: var(--color-warning) !important;
    color: #fff;
    border: none !important;
}

.btn-warning:hover {
    color: #fff;
}

.sidebar {
    min-height: 50rem;
    position: fixed;
    top: 44rem;
    left: 15%;
    padding: 1rem;
    z-index: 1;
    background-color: var(--color-primary);
    border-radius: 4rem;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: close 400ms forwards;
    z-index: 2;
}

.wrapper .sidebar nav {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.wrapper .sidebar nav a {
    width: 100%;
    color: white;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.wrapper .sidebar nav a:hover {
    transform: scale(1.07);
}

.wrapper .sidebar nav a img {
    height: 2rem;
    width: 2rem;
}

.wrapper main {
    width: 100vw;
    z-index: 2;
    /*height: 100vh;*/
    transition: 800ms all;
}

.wrapper main .page {
    color: var(--color-text);
    transition: 250ms all;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.wrapper main .page article {
    width: 90%;
    max-width: 65rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.wrapper .menu {
    position: absolute;
    top: 2rem;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, 0);
    border: none;
    background: transparent;
    width: 1.5rem;
    height: 2rem;
    cursor: pointer;
}

.wrapper .menu .content {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.2rem;
    height: 2rem;
    background-color: #0c1016;
    border-radius: 0.2rem;
    transition: 250ms all;
}

.wrapper .menu .sidebar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.5rem;
    height: 1.5rem;
    background-color: var(--color-primary);
    border-radius: 0.2rem;
    animation: open 400ms forwards;
}

.product-image {
    width: 43%;
}

.user-card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--bg);
    padding: 1rem 0.9rem;
    width: 30rem;
    margin: 0.7rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.user-info {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text);
}

.user-info > .user-foto {
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
}

.user-form {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin-top: 1.7rem;
    /*margin-bottom: 1rem;*/
}

@media only screen and (max-width: 1046px) {
    .sidebar {
        height: 15%;
        top: 36rem;
        left: 3%;
        border-radius: 1rem;
    }

    .wrapper .modal {
        width: 80%;
        height: 50%;
        left: -16%;
        top: 36rem;
    }

    .modal-page-content {
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .form-container, .details-container {
        width: 100%;
        padding: 0;
        align-items: center;
        justify-content: center;
        height: auto;
    }
}

@media only screen and (max-width: 610px) {
    .sidebar {
        height: 15%;
        top: 36rem;
        left: 2%;
        padding: 0;
        border-radius: 1rem;
    }

    .wrapper .modal {
        width: 79%;
        height: 50%;
        left: -15%;
        top: 35rem;
    }
}

@media only screen and (max-width: 566px) {
    .sidebar {
        top: unset;
        left: unset;
        min-height: 3rem !important;
        height: 4rem !important;
        width: 58%;
        top: 63rem !important;
        left: 0;
        padding: 0;
        border-radius: 1rem;
    }


    .wrapper > .sidebar > nav {
        flex-direction: row;
    }

    .wrapper .modal {
        width: 85%;
        /*height: 74%;*/
        left: -22%;
    }
}

@media only screen and (max-width: 376px) {
    .sidebar {
        top: unset;
        left: unset;
        min-height: 3rem !important;
        height: 3rem !important;
        width: 60%;
        bottom: 18px !important;
        left: 0;
        padding: 0;
        border-radius: 1rem;
    }

    .wrapper > .sidebar > nav {
        flex-direction: row;
    }

    .wrapper .modal {
        width: 83% !important;
        /*height: 75% !important;*/
        left: -20% !important;
    }
}

@media only screen and (max-width: 471px) {
    .modal-header-content > h1 {
        text-align: center;
    }
}

@keyframes open {
    0% {
        opacity: 0;
        transform: translate3d(-135%, -50%, 0);
    }

    50% {
        z-index: 1;
        transform: translate3d(-135%, -50%, 0);
    }

    100% {
        opacity: 1;
        z-index: 5;
        transform: translate3d(35%, -50%, 25rem);
    }
}

@keyframes close {
    0% {
        opacity: 1;
        z-index: 5;
        transform: translate3d(35%, -50%, 25rem);
    }

    50% {
        z-index: 1;
        transform: translate3d(-135%, -50%, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(-135%, -50%, 0);
    }
}

.main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*margin-top: 7rem;*/
    /*padding-bottom: 10rem;*/
    color: var(--color-text);
}

.inner-div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 95vw;
}

.borderApp {
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-text) !important;
}

@media (min-width: 992px) {
    .inner-div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        max-width: 95vw;
    }

    .borderApp {
        border-right: 1px solid var(--color-text) !important;
        border-bottom: 0 !important;
    }
}

.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.loading > img {
    animation: spin 2s linear infinite;
}

.loading > svg {
    animation: spin 2s linear infinite;
}

.error-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.error-content > p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

@keyframes pulse {
    0% {
        transform: scale(0.85);
        /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/
    }

    70% {
        transform: scale(1);
        /*box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
    }

    100% {
        transform: scale(0.85);
        /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
    }
}

.error-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    bottom: 1.7rem;
}

#blazor-error-ui {
    background: var(--bg-panel);
    color: var(--color-text);
    bottom: 1.7rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    display: none;
    padding: 1.5rem 1.25rem 1.5rem 1.25rem;
    position: fixed;
    width: 55%;
    z-index: 1000;
    border-radius: 1rem;
    z-index: 99999999 !important;
    justify-content: center;
}

#Generic-Error-ui {
    background: var(--bg-panel);
    color: var(--color-text);
    box-shadow: 0 0 8px 0 var(--boxShadow);
    display: flex;
    padding: 1.5rem 1.25rem 1.5rem 1.25rem;
    position: fixed;
    width: 55%;
    z-index: 1000;
    border-radius: 1rem;
    z-index: 999999 !important;
    justify-content: center;
    top: 2%;
}

#Generic-Error-ui > a {
    color: var(--color-error);
    text-decoration: none;
    font-weight: bold;
}

#Generic-Error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui > a {
    color: var(--color-error);
    text-decoration: none;
    font-weight: bold;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

input:disabled {
    background-color: var(--bg-panel) !important;
    /*    border: none !important;
    outline: none !important;*/
    color: var(--color-text) !important;
}

.error-component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo {
    /*    width: 12rem;*/
    height: 5rem;
    display: flex;
    z-index: 1;
    position: relative;
    margin-bottom: 15%;
}


.form-containerLogin {
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.formPublic {
    z-index: 2;
    width: 50rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-panel);
    border-radius: 20px;
    justify-content: center;
    margin: 1rem 0;
    padding: 2rem 2rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.form-containerRegis {
    z-index: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-text {
    font-size: 2.2rem;
    letter-spacing: 0.25rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.companyTitle-text {
    font-size: 1.5rem;
    letter-spacing: 0.25rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-text);
}

#domain {
    background-color: var(--bg);
    color: var(--color-text);
}

span.textbox {
    background-color: var(--bg);
    color: var(--color-text);
    border: 1px #000 solid;
    font-size: 9pt;
    padding-left: 0.3rem;
    border-radius: 20px;
}

.domainInput {
    border-radius: 20px;
}

span.textbox input {
    outline: none;
    border: none;
    border-radius: 20px;
}

.domainInput {
    padding: 0.5rem 0.9rem;
    width: 15rem;
    margin-left: 0.4rem;
}

.remember {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 1rem;
}

.btn-primary {
    background-color: var(--color-primary); /* Green */
    border: none;
    color: white;
    width: 18.5rem;
    padding: 15px 32px;
    margin-top: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 20px;
}

/*.container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
*/
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
}

/*.container:hover input ~ .checkmark {
background-color: #ccc;
}

.container input:checked ~ .checkmark {
background-color: #176299;
}*/

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/*.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 5px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--bg);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}*/

.switch {
    position: relative;
    display: inline-block;
    width: 49px;
    height: 24px;
    margin: 0rem 1rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


.external-area {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0.7rem 0rem;
}

.external-login {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.external-login-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.external-login > label {
    margin: 0.5rem 0rem;
}

.external-login > input {
    width: 90%;
}

.banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-img {
    height: 150px;
    width: 600px;
    justify-content: center;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    margin-top: 30px;
}

.login-container {
    background-color: var(--bg-panel);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 0rem;
    padding: 2rem 2rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}


@media only screen and (max-width: 604px) {
    .logo {
        margin-bottom: 5%;
    }
}

#domain {
    background-color: var(--bg);
    color: var(--color-text);
}

span.textbox {
    background-color: var(--bg);
    color: var(--color-text);
    border: 1px #000 solid;
    font-size: 9pt;
    padding-left: 0.3rem;
    border-radius: 20px;
}

.domainInput {
    border-radius: 20px;
}

span.textbox input {
    outline: none;
    border: none;
    border-radius: 20px;
}

.domainInput {
    padding: 0.5rem 0.9rem;
    width: 15rem;
    margin-left: 0.4rem;
}

.remember {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 1rem;
}

.btn-primary {
    background-color: var(--color-primary); /* Green */
    border: none;
    color: white;
    width: 18.5rem;
    padding: 15px 32px;
    margin-top: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 20px;
}

/*.container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }*/

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
}

/*.container:hover input ~ .checkmark {
background-color: #ccc;
}

.container input:checked ~ .checkmark {
background-color: #176299;
}*/

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/*.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 5px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--bg);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}*/

.switch {
    position: relative;
    display: inline-block;
    width: 49px;
    height: 24px;
    margin: 0rem 1rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: grey;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: var(--color-primary);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--color-primary);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.external-area {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0.7rem 0rem;
}

.external-login {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.external-login-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.external-login > label {
    margin: 0.5rem 0rem;
}

.external-login > input {
    width: 90%;
}

.banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-img {
    height: 150px;
    width: 600px;
    justify-content: center;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    margin-top: 30px;
}

.login-container {
    background-color: var(--bg-panel);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 0rem;
    padding: 2rem 2rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

@media only screen and (max-width: 604px) {
    .login-container {
        width: 35rem !important
    }

    .formPublic {
        width: 35rem !important
    }
}

@media only screen and (max-height: 922px) {
    .banner-container {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (max-height: 430px) {
    .logo {
        display: none;
    }
}

@media only screen and (max-height: 790px) {

    .banner-img {
        width: 75%
    }
}

@media only screen and (max-width: 1773px) {
    .users-container {
        justify-content: center;
    }
}

@media only screen and (max-width: 1233px) {
    .users-container {
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 1159px) {
    .users-container {
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 755px) {
    .users-container {
        justify-content: center;
    }
}

@media only screen and (max-width: 414px) {

    .login-container {
        background-color: transparent;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 1rem 0rem;
        padding: 0rem;
        box-shadow: none;
    }

    .formPublic {
        background-color: transparent;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 1rem 0rem;
        padding: 0rem;
        box-shadow: none;
    }
}

@media only screen and (max-width: 520px) {
    .formPublic {
        background-color: transparent;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 1rem 0rem;
        padding: 0rem;
        box-shadow: none;
    }
}

@media only screen and (max-width: 415px) and (min-width: 385.02px) {
    .sidebar-modal {
        border-radius: 0 0 0rem 0rem !important;
        height: 4rem !important;
        left: -1px;
        top: 96vh;
    }

    .modal-dialog {
        height: 101%;
        width: 100%;
        top: -15%;
        left: -1.5%;
        position: fixed;
    }

    .modal-header-main {
        height: 100%;
    }

    .modal-component-content {
        height: 85% !important;
    }
}

.emailTemplateText {
    width: 100%;
}

@media only screen and (max-width: 385px) {
    .containerUserManagment {
        max-height: 58vh !important;
        width: 100% !important;
    }

    .sidebar-modal {
        border-radius: 0 0 0rem 0rem !important;
        height: 4rem !important;
        top: 93vh;
        left: -1px;
    }

    .modal-dialog {
        height: 101%;
        width: 100%;
        top: -15%;
        left: -2%;
        position: fixed;
    }
}

@media only screen and (max-width: 415px) {
    .emailTemplateContainer {
        height: 70vh !important;
        width: 385px !important;
    }

    .modal-content {
        border-radius: 0px !important;
        width: 106%;
        position: relative;
        left: -2px;
    }

    .containerUserManagment {
        max-height: 70vh !important;
        width: 100% !important;
    }

    .nav-item-modal {
        font-size: 30px !important;
    }

    .briefcaseMargin {
        margin-right: 25px;
    }

    .modal-header-main {
        position: fixed;
    }

    .sidebar-modal {
        top: 96vh;
    }
}

.containerUserManagment {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-height: 50vh;
}

.emailTemplateContainer {
    overflow-y: auto;
    overflow-x: hidden;
    width: 97%;
    height: 35vh;
}


.iconSearchBar {
    background: var(--color-primary);
    color: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media only screen and (max-width: 281px) {


    input {
        padding: 0.5rem 0.9rem;
        width: 12rem;
        margin-left: 0.4rem;
    }

    .btn-primary {
        width: 15rem;
    }
}

.modal-dialog {
    max-width: 51% !important;
}

.modal-content {
    min-height: 40rem;
    height: 100%;
    border-radius: 2rem;
    margin-top: 13vh;
}

.modal-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.sidebar-modal {
    height: auto;
    min-height: 40rem;
    width: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--color-primary);
    border-radius: 2rem 0 0 2rem;
    z-index: 3;
}

.modal-content-inner {
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.nav-item-modal {
    margin-top: 2.7rem;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
}

.btn-close-modal {
    font-size: 1.7rem;
    cursor: pointer;
    color: var(--color-text);
}

.modal-component-content {
    width: 100%;
    height: 75%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

@media only screen and (max-width: 1311px) {
    .modal-dialog {
        max-width: 100% !important;
    }

    .modal-inner {
        /*        flex-direction: column !important;*/
    }

    .sidebar-modal {
        order: 2;
        height: 4rem;
        padding: 2rem;
        min-height: 4rem;
        width: 100%;
        flex-direction: row;
        position: absolute;
        bottom: 0;
        border-radius: 0 0 2rem 2rem;
    }

    .nav-item-modal {
        margin-left: 2.3rem;
        margin-top: 0 !important;
    }

    .form-container {
        border-right: none;
    }
}

@media only screen and (max-width: 1949px) {

    .modal-header-content > .modal-title {
        font-size: 1.8rem;
    }
}

@media only screen and (max-width: 1749px) {

    .modal-header-content > .modal-title {
        font-size: 1.4rem;
    }

    .modal-component-content {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 1055px) {

    .modal-header-content > .modal-title {
        font-size: 1.4rem;
    }

    .modal-component-content > .form-container > w-100 {
        width: 67% !important;
    }
}

@media only screen and (max-width: 1713px) {

    .key-container {
        flex-direction: column;
    }
}

@media only screen and (max-width: 1015px) {

    .form-container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0.3rem;
    }

    .modal-component-content > .form-container > w-100 {
        width: 58% !important;
    }
}

@media only screen and (max-width: 2519px) {
    .users-container {
        padding-left: 16rem !important;
    }
}

@media only screen and (max-width: 2463px) {
    .users-container {
        padding-left: 15rem !important;
    }
}

@media only screen and (max-width: 2385px) {
    .users-container {
        padding-left: 13rem !important;
    }
}

@media only screen and (max-width: 2312px) {
    .users-container {
        padding-left: 12rem !important;
    }
}

@media only screen and (max-width: 2266px) {
    .users-container {
        padding-left: 11rem !important;
    }
}

@media only screen and (max-width: 2236px) {
    .users-container {
        padding-left: 10rem !important;
    }
}

@media only screen and (max-width: 2170px) {
    .users-container {
        padding-left: 9rem !important;
    }
}

@media only screen and (max-width: 2132px) {
    .users-container {
        padding-left: 8rem !important;
    }
}

@media only screen and (max-width: 2064px) {
    .users-container {
        padding-left: 7rem !important;
    }
}

@media only screen and (max-width: 2020px) {
    .users-container {
        padding-left: 6rem !important;
    }
}

@media only screen and (max-width: 2019px) {
    .users-container {
        padding-left: 0 !important;
    }
}

@media only screen and (max-width: 1233px) {
    .users-container {
        padding-left: 16rem !important;
    }
}

@media only screen and (max-width: 1150px) {
    .users-container {
        padding-left: 14rem !important;
    }
}

@media only screen and (max-width: 1110px) {
    .users-container {
        padding-left: 13rem !important;
    }
}

@media only screen and (max-width: 1080px) {
    .users-container {
        padding-left: 11rem !important;
    }
}

@media only screen and (max-width: 1048px) {
    .users-container {
        padding-left: 10rem !important;
    }
}

@media only screen and (max-width: 1047px) {
    .users-container {
        padding-left: 0 !important;
    }
}

@media only screen and (max-width: 471px) {
    #btn-import {
        margin-top: 2.3rem;
    }
}


.addButton {
    width: 100px;
    height: 30px;
    background: var(--color-primary);
    padding: 5px;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.ShowButton {
    width: 100px;
    height: 30px;
    background: var(--color-warning);
    padding: 5px;
    border-radius: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.addButton:hover {
    background-color: var(--bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.ShowButton:hover {
    background-color: var(--bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.container-login100::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}

.wrap-login100 {
    width: 290px;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
}

.login100-form {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 8px 0 #858585;
    background-color: #fff;
}

.login100-form-title {
    margin-top: 10px;
    font-size: 32px;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    text-align: center;
    display: block;
}

.wrap-login100 {
    width: 390px;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
}

.login100-form {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 8px 0 #858585;
    background-color: #fff;
}

.login100-form-logo {
    font-size: 60px;
    color: #333333;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 auto;
}

.login100-form-title {
    margin-top: 25px;
    font-size: 50px;
    color: rgb(0, 0, 0);
    line-height: 1.2;
    text-align: center;
    display: block;
}

@media screen and (max-width: 555px) {
    .teste {
        margin: 0;
        width: 100%;
        position: absolute;
        top: 56%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translateX(-50%) translateY(calc(-50% - .5px));
        text-align: center;
    }

    .botao {
        width: 100%;
        margin-bottom: 5px
    }

    .botao1 {
        width: 100%;
        margin-bottom: 5px
    }

    .container-login102 {
        text-align: center;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 15px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
        flex-direction: column;
        align-content: stretch;
        align-items: center;
    }

    .container-login102::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--bg);
    }

    .table-responsive {
        padding: 15px;
    }

    .container-login100 {
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 5px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        z-index: 1;
        position: relative;
    }

    .letter {
        font-size: 10px;
    }

    .limiter {
        width: 100%;
        margin: 0 auto;
        height: 100%;
        max-height: 600px;
    }

    .bar {
        width: 300px;
        height: auto;
    }

    .container-login100::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        background-color: var(--bg);
    }

    .wrap-login100 {
        width: 290px;
        border-radius: 20px;
        overflow: hidden;
        background: transparent;
    }

    .login100-form {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 0 8px 0 #858585;
        background-color: var(--bg);
    }

    .login100-form-logo {
        font-size: 60px;
        color: var(--color-text);
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: var(--bg);
        margin: 0 auto;
    }

    .login100-form-title {
        margin-top: 10px;
        font-size: 32px;
        color: var(--color-text);
        line-height: 1.2;
        text-align: center;
        display: block;
    }

    .login101-form-title {
        margin-top: 0px;
        font-size: 23px;
        color: rgb(0, 0, 0);
        line-height: 1.2;
        text-align: center;
        display: block;
    }

    .tickets-form {
        width: 380px;
        height: 80vh;
        border-radius: 20px;
        box-shadow: 0 0 8px 0 #858585;
        background-color: var(--bg-panel) !important;
    }

    .tickets-form1 {
        width: 380px;
        height: 90vh;
        border-radius: 20px;
        box-shadow: 0 0 8px 0 #858585;
        background-color: var(--bg-panel) !important;
    }

    .circle {
        box-shadow: 0 0 8px 0 #858585;
        box-sizing: border-box;
        border-radius: 50%;
        height: 92.5px;
        background: #3FC0F0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .imagem {
        display: inline-block;
        width: 35px;
        height: auto;
    }

    .pp {
        font-size: 15px;
        margin-top: 5px;
    }

    .as {
        text-align: center;
        font-size: 5px;
    }

    .as1 {
        text-align: center;
        font-size: 15px;
    }

    .wrap-input100 {
        margin-top: 5px;
        width: 100%;
        position: relative;
        padding: 5px 0;
        text-align: center;
    }

    .input100 {
        font-size: 15px;
        color: var(--color-text);
        line-height: 1.2;
        position: relative;
        width: 80%;
        height: 50px;
        background-color: var(--bg);
        border-radius: 20px;
        padding: 0 10px 0 50px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }
}

.fileWidthCustom {
    width: 500px;
}

@media screen and (max-width: 540px) {
    .fileWidthCustom {
        width: 220px;
    }
}

@media screen and (max-width: 360px) {
    .fileWidthCustom {
        width: 155px;
    }
}

@media screen and (min-width: 556px) {

    .teste {
        margin: 0;
        position: absolute;
        top: 53%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--color-text);
    }

    .botao {
        width: 500px;
        margin-right: 20px
    }

    .botao1 {
        width: 200px;
        margin-right: 20px
    }

    .thh {
        font-size: 25px;
        color: var(--color-text);
    }

    .btnn {
        width: 220px !important;
        font-size: 20px !important;
    }

    .container-login100 {
        text-align: center;
        width: 550px;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 15px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
    }

    .container-login100::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgb(255, 255, 255);
    }

    .container-login101 {
        text-align: center;
        width: 1500px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 15px;
        background-color: var(--bg-panel);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
    }

    .container-login101::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        background-color: var(--bg);
    }

    .container-login102 {
        text-align: center;
        width: 550px;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 15px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        z-index: 1;
        flex-direction: column;
        align-content: stretch;
        align-items: center;
    }

    .container-login102::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--bg);
    }

    .wrap-login100 {
        width: 390px;
        border-radius: 20px;
        overflow: hidden;
        background: transparent;
    }

    .login100-form {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 0 8px 0 #858585;
        background-color: var(--bg-panel);
    }

    .tickets-form {
        width: 1500px;
        height: 80vh;
        border-radius: 20px;
        box-shadow: 0 0 8px 0 #858585;
        background-color: var(--bg-panel);
    }

    .tickets-form1 {
        width: 100%;
        height: 90vh;
        border-radius: 20px;
        box-shadow: 0 0 8px 0 #858585;
        background-color: var(--bg-panel);
    }

    .login100-form-logo {
        font-size: 60px;
        color: #333333;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 auto;
    }

    .login100-form-title {
        margin-top: 25px;
        font-size: 50px;
        color: var(--color-text);
        line-height: 1.2;
        text-align: center;
        display: block;
    }

    .login101-form-title {
        font-size: 37px;
        color: var(--color-text);
        line-height: 1.2;
        text-align: center;
        display: block;
    }

    .circle {
        box-shadow: 0 0 8px 0 #858585;
        box-sizing: border-box;
        border-radius: 50%;
        height: 137px;
        background: #3FC0F0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .imagem {
        display: inline-block;
        width: 80px;
        height: auto;
    }

    .pp {
        font-size: 20px;
        margin: 20px;
    }

    .as {
        text-align: center;
        font-size: 20px;
    }

    .as1 {
        text-align: center;
        font-size: 35px;
    }

    .wrap-input100 {
        margin-top: 10px;
        width: 100%;
        position: relative;
        padding: 5px 0;
        text-align: center;
    }

    .input100 {
        font-size: 20px;
        color: #555555;
        line-height: 1.2;
        position: relative;
        width: 80%;
        height: 60px;
        background-color: #c4c4c426;
        border-radius: 20px;
        padding: 0 10px 0 50px;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }
}

.messages {
    width: 90%;
    overflow-y: scroll;
    height: 70%;
    border-style: solid;
    padding: 10px;
    border-color: grey;
    border-radius: 20px;
}

.form-color {
    color: var(--color-text) !important;
}

.msg-form {
    color: var(--color-text);
    background-color: var(--bg-panel);
}

#ticketsTable_filter {
    color: var(--color-text) !important;
}

#ticketsTable_info {
    color: var(--color-text);
}

#ticketsTable {
    color: var(--color-text) !important;
}

.pagination > li > a, .pagination > li > span {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.createTicket {
    color: var(--color-text);
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    height: auto;
    display: flex;
    align-self: self-end;
    cursor: pointer;
    width: auto;
    text-align: center;
    font-size: 20px;
    font-weight: 600;

    background: var(--color-primary);
    line-break: anywhere;
    position: relative;
    top: -35px;
}

.filterTicket {
    border: 1px solid var(--color-text);
    background-image: none !important;
    color: var(--color-text);
    padding: 5px;
    border-radius: 20px;
    display: flex;
    align-self: center;
    width: 15rem;
}

.ticketTitle {
    font-size: 30px;
    width: -webkit-fill-available;
    text-align: center;
    font-weight: bold;
}

@media only screen and (max-width: 992px) {
    .divDisappear {
        display: none;
    }

    .createTicket {
        color: var(--color-text);
        padding-right: 10px;
        padding-left: 10px;
        border-radius: 20px;
        height: auto;
        display: flex;
        align-self: self-end;
        cursor: pointer;
        width: auto;
        text-align: center;
        font-size: 20px;
        font-weight: 600;

        background: var(--color-primary);
        line-break: anywhere;
        position: initial;
        margin-top: 20px;
    }

    .ticketTitle {
        font-size: 30px;
        width: -webkit-fill-available;
        text-align: center;
        font-weight: bold;
    }
}

tbody > tr {
    text-align: center;
    border-bottom: 1px solid gray;
}

tr > td {
    padding: 15px;
}

tbody > tr:hover {
    background-color: var(--bg);
}

thead > tr {
    border-bottom: 1px solid gray;
    text-align: center;
}

th {
    font-size: 17px;
    font-weight: 600;

    color: var(--color-text);
    background: none;
    padding: 20px;
}

.scrollbar::-webkit-scrollbar {
    width: 10px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 20px;
}

.tableResponsive {
    overflow-x: hidden;
}

@media only screen and (max-width: 600px) {
    .tableResponsive {
        overflow-x: scroll;
    }
}

.detailLink {
    list-style: none;
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    padding: 10px;
    background: var(--bg);
}

.detailLink:hover {
    color: var(--color-primary);
}

.PrimaryDetailLink {
    list-style: none;
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    padding: 10px;
    background: var(--bg);
}

.SecondaryDetailLink {
    list-style: none;
    color: var(--color-warning);
    text-decoration: none;
    border: 1px solid var(--color-warning);
    border-radius: 20px;
    padding: 10px;
    background: var(--bg);
}

.modalHeaderCreateTicket {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
    cursor: pointer;
}

::-webkit-file-upload-button {
    background: var(--color-primary);
    color: #ffffff;
    border-color: none;
    padding: 0.7em;
    border-radius: 20px;
}


.loaderImport {
    width: 30px;
    height: 30px;
    border: 5px solid white;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader {
    width: 30px;
    height: 30px;
    border: 5px solid var(--color-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader2 {
    width: 24px;
    height: 24px;
    border: 5px solid var(--color-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: relative;
    left: -10px;
}

.form-control {
    border-radius: 10px !important;
    border: 1px solid var(--color-text) !important;
}

.form-select {
    border-radius: 10px !important;
    border: 1px solid var(--color-text) !important;
}

.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 2px solid var(--color-text) !important;
}

.form-select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 2px solid var(--color-text) !important;
}

.input-group-text {
    border: 1px solid var(--color-text) !important;
    border-radius: 20px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

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

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

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

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

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

.scrollbar::-webkit-scrollbar {
    width: 10px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 20px;
}

.createAccount {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    border-radius: 20px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-primary);
    cursor: pointer;
}

/*PARA UM SELECT PESQUIS�VEL*/
.listyle {
    padding: 5px;
    color: var(--color-text);
    list-style: circle;
    border-radius: 20px;
    cursor: pointer;
}

.listyle:hover {
    background: var(--bg);
    padding: 5px;
    color: var(--color-text);
    list-style: circle;
    cursor: pointer;
}

.containerAddTicket {
    position: relative;
    bottom: 60vh;
    background: var(--bg-panel);
    box-shadow: -1px 2px 10px var(--color-text);
    width: 85%;
}

.containerEvaluation {
    position: relative;
    bottom: 60vh;
    background: var(--bg);
    width: 100%;
    padding: 10px;
    box-shadow: -1px 4px 8px var(--color-success);
}


.heightChatCustom {
    height: 70%;
}

@media only screen and (max-height: 1300px) {
    .heightChatCustom {
        height: 55vh !important;
    }
}

@media only screen and (max-height: 1150px) {
    .heightChatCustom {
        height: 50vh !important;
    }
}

@media only screen and (max-height: 1000px) {
    .heightChatCustom {
        height: 40vh !important;
    }
}

@media only screen and (max-height: 700px) {
    .heightChatCustom {
        height: 30vh !important;
    }
}

.inputFile {
    width: 100%;
}

@media only screen and (max-width: 580px) {
    .inputFile {
        width: 130px;
    }

    .BtnSend {
        width: 145px;
    }

    .btnAdd {
        width: auto;
        font-size: 15px;
    }
}

@media only screen and (max-height: 880px) {
    .containerEvaluation {
        position: relative;
        bottom: 65vh;
        background: var(--bg);
        width: 100%;
        padding: 10px;
        box-shadow: -1px 4px 8px var(--color-success);
    }

    .containerAddTicket {
        position: relative;
        bottom: 65vh;
        background: var(--bg-panel);
        box-shadow: -1px 2px 10px var(--color-text);
        width: 85%;
    }
}

.buttonFinishWEva {
    background: var(--color-error);
    color: var(--color-text);
    width: 215px;
    height: auto;
    min-height: 50px;
    padding: 10px;
    align-self: center;
    font-size: 15px;
    font-weight: 600;

    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

.buttonFinishEva {
    background: var(--color-primary);
    color: var(--color-text);
    width: 215px;
    height: auto;
    min-height: 50px;
    padding: 10px;
    align-self: center;
    font-size: 15px;
    font-weight: 600;

    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

.info-evaluation {
    font-size: 15px;
    font-weight: 600;

    color: var(--color-text);
    text-align: center;
}

/*DETAILS PAGE*/
.arrowIcon {
    background: var(--bg-panel);
    border-radius: 25px;
    color: var(--color-text);
    font-size: 30px !important;
    cursor: pointer;
}

.arrowIcon:hover {
    color: var(--color-error);
}

.arrowIcon2 {
    background: var(--bg-panel);
    border-radius: 25px;
    color: var(--color-text);
    font-size: 30px !important;
    cursor: pointer;
}

.arrowIcon2:hover {
    color: var(--color-primary);
}

.evaButton {
    cursor: default;
    color: var(--color-text);
    width: 150px;
    text-align: center;
    align-self: center;
    padding: 10px;
    border-radius: 20px;
    color: var(--color-text);
}

.closeTicket {
    cursor: pointer;
    background: var(--color-error);
    width: 150px;
    text-align: center;
    align-self: center;
    padding: 10px;
    border-radius: 20px;
    font-size: 15px;
    color: white;
}

.file-input-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
    position: relative;
    height: 3.4rem;
    border-radius: 20px;
}

.file-input-zone input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.reOpenTicket {
    cursor: pointer;
    background: var(--color-primary);
    width: 150px;
    text-align: center;
    align-self: center;
    padding: 10px;
    border-radius: 20px;
    font-size: 15px;
    color: white;
}

.loaderTickets {
    border: 15px solid var(--color-text);
    border-radius: 50%;
    border-top: 15px solid var(--color-primary);
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.ticketMessage {
    width: 100%;
    height: auto;
    background: var(--bg-panel);
    margin-top: 5px;
    min-height: 45px;
    float: right;
    background-color: var(--color-primary);
    color: white !important;
    border-radius: 20px 20px 0 20px;
    padding: 1rem;
}

.ticketMessageAdmin {
    width: 100%;
    height: auto;
    background: var(--bg-panel);
    margin-top: 5px;
    min-height: 45px;
    float: left;
    background-color: #e3e3e3;
    color: black;
    border-radius: 20px 20px 20px 0;
    padding: 1rem;
}


.ticketMessageB24 {
    width: 100%;
    height: auto;
    background: var(--bg-panel);
    margin-top: 5px;
    min-height: 45px;
    float: right;
    background-color: #e3e3e3;
    color: black;
    border-radius: 20px 20px 0 20px;
    padding: 1rem;
}

.ticketMessageAdminB24 {
    width: 100%;
    height: auto;
    background: var(--bg-panel);
    margin-top: 5px;
    min-height: 45px;
    float: left;
    background-color: var(--color-primary);
    color: white !important;
    border-radius: 20px 20px 20px 0;
    padding: 1rem;
}

.ticketDate {
    font-size: 12px;
    font-weight: 600;
}

.image-upload > input {
    display: none;
}

.buttonNewMessage {
    color: var(--color-text);
    background: var(--color-primary);
    height: auto;
    min-height: 50px;
    width: 50%;
    font-size: 20px;
    font-weight: 600;

    border: none;
    border-radius: 20px;
}

.sizeChat {
    height: auto;
    max-height: 500px;
}

@media only screen and (max-width: 768px) {
    .sizeChat {
        height: auto;
        max-height: 450px;
    }
}

.selectStage {
    display: block;
    width: 60%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    border: 1px solid var(--color-text);
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0.25rem;
    background-color: var(--bg);
    color: var(--color-text);
}


.labelDefinit {
    font-size: 15px;
    font-weight: 600;

    color: var(--color-primary);
}

.listyle {
    padding: 5px;
    color: var(--color-text);
    list-style: circle;
    border-radius: 20px;
}

.listyle:hover {
    background: var(--bg);
    padding: 5px;
    color: var(--color-text);
    list-style: circle;
}


@media only screen and (max-width: 768px) {
    .widthEvaluation {
        display: grid;
        justify-content: center;
    }
}

@media only screen and (max-width: 480px) {
    .inputs {
        width: 90%;
    }
}

.inputs {
    width: 80%;
}

.TextEditor {
    width: 10%;
    height: auto;
    background: var(--color-primary);
    color: var(--color-text);
    border-radius: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin: 15px;
    align-items: center;
}

.scrollbarMobile::-webkit-scrollbar {
    height: 4px;
}

.scrollbarMobile::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--color-primary);
    border-radius: 20px;
}

.scrollbarMobile::-webkit-scrollbar-thumb {
    background: var(--color-warning);
    border-radius: 20px;
}

.customFieldsContainer {
    padding: 10px;
    margin-top: 20px;
    margin-left: 0px;
    height: 260px;
    overflow-y: auto;
}

.customFieldCard {
    width: 100%;
}

@media only screen and (max-width: 415px) {
    .customFieldsContainer {
        height: 370px;
    }
}

@media only screen and (max-width: 415px) and (min-height: 700px) {
    .customFieldsContainer {
        height: 565px;
    }
}

.form-select-status {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-primary);
    color: #ffffff;
    border-radius: 20px;
    cursor: pointer;
}


@media only screen and (min-width: 768px) {
    .ticketTitlePosition {
        position: relative;
        left: -10.5%;
    }
}

.TableList {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    width: 100%;
    height: 75vh;
    overflow: auto;
}

.blockedImg {
    opacity: 0.4 !important;
}

.blocked {
    text-decoration: line-through;
}

.blazored-toast-container {
    z-index: 999999 !important;
}

#minhaDiv {
    transition: display 1s ease;
}

.move-esquerda {
    display: none;
}

h1:focus-visible {
    outline: 0
}

.userOrder:hover {
    background-color: var(--bg-panel);
}

.modalSpa {
    width: 60rem;
}

@media screen and (max-width: 800px) {
    .modalSpa {
        width: 50rem !important;
    }
}

@media screen and (max-width: 660px) {
    .modalSpa {
        width: 35rem !important;
    }
}

@media screen and (max-width: 475px) {
    .modalSpa {
        width: 22rem !important;
    }
}


.dropdown dt a span {
    cursor: pointer;
    display: block;
    padding: 5px;
    white-space: nowrap;
}

.dropdown dt a img {
    position: relative;
    z-index: 1;
}

.dropdown dt a span span:first-child:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
}

.dropdown dt a span span {
    display: inline-block;
    padding: 0;
}

.dropdown dt a span span:first-child {
    padding: 0;
}

.dropdown dd {
    position: relative;
}

.dropdown a, .dropdown a:visited {
    color: #4a535f;
    text-decoration: none;
    outline: none;
}

.dropdown a:hover {
    color: #5d4617;
}

.dropdown dt a:hover, .dropdown dt a:focus {
    color: #5d4617;
}

.dropdown dt a {
    background: var(--bg-panel);
    position: relative;
    overflow: hidden;
}

.dropdown dd ul {
    background: var(--bg-panel);
    color: var(--color-text);
    left: 0px;
    padding: 5px 0px;
    position: absolute;
    border: 1px solid var(--color-text);
    list-style: none;
    max-height: 170px;
    overflow-y: scroll;
    top: 4px;
    z-index: 2;
    border-radius: 10px;
}

li a {
    font-size: 13px;
}

li a span:nth-child(2) {
    line-height: 2em;
}

.dropdown dd ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown dd ul::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    /*-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5), 1px 0 0 #5cace9 inset, 2px 0 0 #b3d5ee inset;
        border-radius:10px;*/
}

.dropdown dd ul::-webkit-scrollbar-thumb:window-inactive {
    background: var(--color-primary);
}

.dropdown dd ul li a {
    padding: 5px;
    display: block;
    font-size: 12px !important;
}

.dropdown dd ul li a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

dl.dropdown > span:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

dl.dropdown span:nth-child(3) {
    float: right;
}

.canvas-container {
    text-align: center;
}

.signature-pad {
    border: 2px solid var(--color-text);
    border-radius: 6px;
}

.clear-button,
.submit-button {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #ffffff; /* Cor do texto branco */
}

.clear-button {
    background-color: #dc3545; /* Vermelho para limpar */
    margin-bottom: 10px;
}

.clear-button:hover {
    background-color: #c82333; /* Tom mais escuro no hover */
}

.submit-button {
    background-color: var(--primary-color); /* Cor variável definida no root */
}

.submit-button:hover {
    background-color: #0056b3; /* Tom mais escuro no hover */
}

.button-icon {
    outline: none;
    border: none;
    background-color: var(--color-primary) !important;
    width: 50%;
    color: #fff;
    padding: 0.5rem;
    border-radius: 20px;
}

/* Container for the loading text */
.loading-text {
    display: inline-block;
    font-size: 2rem; /* Adjust the font size as needed */
    font-weight: bold;
    color: #000; /* Adjust text color */
}

/* Styling for each letter/character */
.loading-text span {
    display: inline-block;
    animation: wave-blur 1.5s infinite ease-in-out;
    animation-fill-mode: both;
}

/* Delay for each letter to create a wave effect */
.loading-text span:nth-child(1) {
    animation-delay: 0s;
}

.loading-text span:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-text span:nth-child(3) {
    animation-delay: 0.2s;
}

.loading-text span:nth-child(4) {
    animation-delay: 0.3s;
}

.loading-text span:nth-child(5) {
    animation-delay: 0.4s;
}

.loading-text span:nth-child(6) {
    animation-delay: 0.5s;
}

.loading-text span:nth-child(7) {
    animation-delay: 0.6s;
}

.loading-text span:nth-child(8) {
    animation-delay: 0.7s;
}

.loading-text span:nth-child(9) {
    animation-delay: 0.8s;
}

.loading-text span:nth-child(10) {
    animation-delay: 0.9s;
}

/* Keyframes for the blur and wave effect */
@keyframes wave-blur {
    0% {
        transform: translateY(0); /* Start at the original position */
        filter: blur(0); /* No blur at the start */
        opacity: 1; /* Full opacity */
    }
    50% {
        transform: translateY(-10px); /* Move up slightly */
        filter: blur(3px); /* Apply blur effect */
        opacity: 0.5; /* Reduce opacity */
    }
    100% {
        transform: translateY(0); /* Return to original position */
        filter: blur(0); /* No blur */
        opacity: 1; /* Full opacity */
    }
}

.tableFixHead {
    overflow: auto;
    height: 75vh;
    padding: 0 25px;
    width: 100%;
    border-radius: 20px;
    background-color: var(--bg);
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Just common table stuff. Really. */
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding: 15px;
}

th {
    background: var(--bg-panel);
}

.p-filter-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pm-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 80%;
    gap: 1rem;
    align-self: center;
}

.filter-container {
    display: flex;
    width: 35%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 325px;
}

@media only screen and (max-width: 414px) {
    .pm-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 95% !important;
        gap: 1rem;
        align-self: center;
    }
}

@media only screen and (max-width: 768px) {
    .filter-container {
        width: 325px !important;
    }
}

@media only screen and (min-width: 768px) {
    .cssCardIncomeSettings {
        min-height: 5rem;
        border-radius: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ffffff;
        margin-bottom: 0.5rem;
        padding: 0 1rem;
        box-shadow: 0 0 8px 0 var(--boxShadow);
        width: 20rem;
        margin: 1rem;
        margin-right: 1%;
        margin-left: 1%;
        height: auto;
        max-width: 25rem;
    }
}

.cssCardIncomeSettings {
    min-height: 5rem;
    margin: 1rem;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    padding: 0 1rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    width: 20rem;
    height: auto;
    max-width: 25rem;
}


.project-cards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
}

.p-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.card-wrapper {
    background-color: var(--bg-panel);
    height: 46rem;
    width: 40rem;
    margin: 1rem;
    padding: 2rem 2rem;
    border-radius: 20px;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.project-name {
    font-size: 1.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.task-name-hide {
    /* padding: 0.5rem;*/
    /*font-size: 2rem;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 645px;
    cursor: pointer;
}

.project-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.hour-badge {
    background-color: var(--color-primary);
    padding: 0.4rem;
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.project-left-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.project-right-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.date-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin: 0.7rem 0rem;
    font-size: 1.2rem;
    column-gap: 1rem;
    margin-left: 1.25rem;
}

.project-value-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 1rem;
    border-radius: 20px;
}

.p-val-item {
    width: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.p-price {
    font-weight: bold;
    font-size: 1.4rem;
}

.buttons-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    width: 100%;
}


.project-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.cards-center {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.cards-container {
    /*width: 100%;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.task-cards-1, .task-cards-2, .task-cards-3, .task-cards-4, .task-cards-5, .task-cards-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.small-card-wrapper {
    width: 25rem;
    height: 6rem;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-right: 1.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.small-card-wrapper-settings {
    width: 100%;
    height: 5rem;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    margin-right: 1.5rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.small-card-icon-wrapper, .small-card-text-wrapper, .small-card-button-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.small-card-text-wrapper {
    word-break: break-all;
}

.small-card-price {
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}


/* C�DIGO DA PARTE DAS TAREFAS */

.tasks-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0rem 4.5rem 3rem 4.5rem;
    /* padding-bottom: 30rem;*/
    width: 100%;
}

.tasks-left-side {
    min-width: 30rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--bg-panel);
    box-shadow: 0 0 8px 0 var(--boxShadow);
    padding-bottom: 40px;
}


.main-task-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.title-task-section {
    font-size: 2rem;
    font-weight: bold;
    padding: 2rem 2rem 0rem 2rem;
}

.divider {
    border-bottom: 0.1rem solid var(--color-text);
    height: 1px;
    width: 50px;
    margin: 0rem 2rem 1.5em;
}

.task-tab {
    box-shadow: 0 0 8px 0 var(--boxShadow);
    margin: 1rem 1rem 3rem 1rem;
}

.main-task-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.filters-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    row-gap: 2rem;
    column-gap: 1rem;
    margin-bottom: 1.4rem;
}

.tasks-general-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    column-gap: 1.2rem;
    margin: 2rem 0rem;
}

.badge-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 20rem;
    column-count: 2;
    column-gap: 2rem;
    margin-right: 2rem;
}


.badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 10rem;
    color: #FFF;
    border-radius: 20px;
    margin: 0.2rem;
}

.badge > span {
    font-size: 1rem;
}

.badge > h4 {
    font-size: 1.7rem;
}

.badge-outline {
    background-color: transparent;
    outline: 0.3rem solid #5694f0;
    outline-offset: -3px;
    color: #000;
}


.task-container-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}

.t-container-title {
    display: flex;
    flex-direction: column;
    width: 66%;
}

.tasks-cards-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.task-card-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 98%;
    background-color: var(--bg);
    padding: 1.7rem;
    margin: 2rem 0rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    border-radius: 20px;
}

.task-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*padding: 2rem 2rem 0rem 2rem;*/
    width: 100%;
    cursor: pointer;
}

.task-user-img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
}

.task-main-info {
    display: flex;
    flex-direction: row;
    width: 25%;
    justify-content: flex-start;
    align-items: center;
    column-count: 2;
    column-gap: 2rem;
}

.task-other-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 75%;
    column-gap: 9rem;
}

.header-tasks-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0rem 2rem;
}

.t-details-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-panel);
    box-shadow: 0 0 8px 0 var(--boxShadow);
    min-width: 30rem;
    max-width: 50rem;
    flex: 1;
}

.t-details-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0rem 1rem;
}

.t-details-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem;
    flex-wrap: wrap;
}

.t-details-pfp {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}

.t-details-dates {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem;
    flex-wrap: wrap;
}

.t-details-tracking {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem 2rem;
    flex-wrap: wrap;
}

.t-details-values {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2rem;
}

.t-details-time-elapsed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.t-details-tracking-area {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    column-count: 2;
    column-gap: 1rem;
    flex-wrap: wrap;
}

.t-details-employee {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
    column-count: 2;
    column-gap: 1rem;
    flex-wrap: wrap;
}

.t-details-valies-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    column-count: 5;
    column-gap: 2rem;
    row-gap: 2rem;
}

.elapsed-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
    background-color: var(--bg);
    padding: 1rem;
    margin: 1rem 1rem;
    border-radius: 0.5rem;
}

.cost-types-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /*flex-wrap: wrap;*/
    width: 100%;
    margin-top: 3rem;
    overflow-x: auto;
    white-space: nowrap;
    cursor: pointer;
}

.item-type-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 25rem;
    padding: 1rem;
    margin: 1rem;
    background-color: var(--bg);
    border-radius: 20px;
    box-shadow: 0 0 8px 0 var(--boxShadow);
}

.item-type-tittle, .item-type-values {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    column-gap: 1rem;
}

.item-type-tittle > span {
    color: var(--color-primary);
}

.item-type-value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 1rem;
}

.fact-plan-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: 6rem;
    column-gap: 1rem;
}

.plan-values-container, .fact-values-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    margin-bottom: 1.5rem;
}

.title-fact-plan {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}


/*MEDIA QUERIE PAGINA COSTS/INCOMES*/
@media only screen and (max-width: 1950px) {
    .fact-plan-wrapper {
        flex-direction: column;
    }

    .plan-values-container, .fact-values-container {
        width: 100% !important;
    }
}

.plan-fact-card-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 2rem 0rem;
}

.cost-types-card-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    background-color: var(--bg-panel);
    padding: 1rem;
    margin: 1rem 0rem;
    box-shadow: 0 0 8px 0 var(--boxShadow);
    border-radius: 20px;
}

.cost-types-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 50%;
}

.parent-task-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 12rem;
}


@media only screen and (max-width: 1700px) {
    .tasks-container {
        flex-direction: column;
        row-gap: 2rem;
    }

    .tasks-left-side {
        width: 100% !important;
        order: 2;
    }

    .t-details-container {
        width: 100% !important;
        order: 1;
        flex: auto;
        min-width: auto;
        max-width: none;
    }

    .t-details-dates:first-child {
        width: 100%;
    }

    .HideTasks {
        display: none;
    }
}

@media only screen and (max-width: 2384px) {
    .cards-container {
        width: 100%;
    }
}

@media only screen and (max-width: 1589px) {
    .cards-container {
        width: 75%;
    }
}

@media only screen and (max-width: 1355px) {
    .cards-container {
        width: 100%;
    }
}

@media only screen and (max-width: 2114px) {
    .remove-small-device {
        display: none;
    }
}

.searchIcon {
    margin-left: -1rem;
    color: var(--color-text);
    margin-right: 2rem;
    cursor: pointer;
}

@media only screen and (max-width: 937px) {
    .filters-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .searchIcon {
        margin-left: -1rem;
        color: var(--color-text);
        margin-right: 0;
        cursor: pointer;
        align-self: center
    }
}

@media only screen and (max-width: 1104px) {
    .task-other-info {
        display: none;
    }

    .task-container-header {
        flex-direction: column;
        width: 100%;
    }

    .pdfCenter {
        justify-content: center !important;
    }

    .tasks-general-info {
        width: 100%;
        align-items: center;
    }

    .task-name-hide {
        white-space: unset;
        overflow: unset;
        text-overflow: unset;
        max-width: 100%;
        width: 100%;
    }

    .task-main-info {
        width: 100%;
    }
}

@media only screen and (max-width: 2111px) {
    .pdfCenterBig {
        justify-content: center !important;
    }

}


@media only screen and (max-width: 680px) {
    .filters-container {
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }

    /*.modal-content {
        left: 0.5% !important;
    }*/
}

@media only screen and (max-width: 554px) {
    .tasks-general-info > .badge-wrapper {
        width: 100%;
        margin-right: 0;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 495px) {
    .pdfIcon {
        margin-top: 5px;
    }
}


.roles-list-settings {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
}

.roles-items-settings {
    height: 25rem;
    overflow-y: auto;
}

.roles-list-settings > .roles-items-settings > .small-card-wrapper-settings {
    width: auto;
    height: 4rem;
    margin: 1rem 0rem;
}

.roles-list-settings > .roles-items-settings > .small-card-wrapper-settings > .small-card-text-wrapper > .color-circle {
    width: 2rem !important;
    height: 2rem !important;
}

.role-basic-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.role-basic-info > .form-group > input[type=color] {
    -webkit-appearance: none;
    border: none;
    width: 78px;
    height: 32px;
}

.role-basic-info > .form-group > input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.role-basic-info > .form-group > input[type="color"]::-webkit-color-swatch {
    border: none;
}

.roles-perms-settings {
    width: 66%;
    height: 42rem;
    background-color: var(--bg-panel);
    padding: 1rem;
}

.roles-perms-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 18rem;
    margin-top: 1rem;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: center;
}

.role-perm-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0.7rem 0rem;
    color: var(--color-text);
}

.unsaved-changes-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--bg-panel);
    border: solid 0.3rem var(--color-primary);
    box-shadow: 0 0 8px 0 var(--boxShadow);
    margin-top: 1rem;
}

.unsaved-changes-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

@media only screen and (max-width: 900px) {

    .form-container {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .roles-perms-settings {
        width: 100%;
    }

    .roles-items-settings {
        display: flex;
        flex-direction: row;
        height: auto;
        gap: 1.3rem;
        flex-wrap: wrap;
    }
}


.card-values-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--bg-panel);
    border-radius: 20px;
}

.plan-fact-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 2rem;
    width: 100%;
    margin-top: 4rem;
}

.card-values-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.card-values-tittle-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.elapsed-row > span {
    padding: 12px;
}

.card-values-tittle {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 1rem;
}

.card-values-info {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: start;
    width: 60%;
    /* row-gap: 10rem;
    column-gap: 3rem;*/
}

.card-values-info > div {
    width: 15%;
    text-align: center;
    margin-right: 2.25rem;
}

.card-values-hidden-info {
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    column-gap: 3rem;
    margin-right: 6rem;
}

.card-values-hidden-info-global {
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 3rem;
    margin-right: 6rem;
}

@media only screen and (max-width: 938px) {
    .card-values-header {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .card-values-info {
        width: 100%;
        justify-content: space-evenly;
    }
}

.card-container-project {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-panel);
    justify-content: center;
    align-items: flex-start;
    width: 29rem;
    height: 10rem;
    border-radius: 20px;
    padding: 1rem;
    margin-top: 1rem;
}

.card-project-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.4rem 0rem;
}

.card-project-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0rem;
}

.small-card-text-wrapper > input[type=color] {
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    overflow: hidden;
}

.small-card-text-wrapper > input[type=color]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
    padding: 0;
}

.small-card-text-wrapper > input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

.selectTask {
    width: 16rem;
    margin-right: 2rem;
    border-radius: 10px;
    border: 1px solid var(--color-text);
}

.divTask {
    width: 100%;
}

@media only screen and (max-width: 936px) {
    .divTask {
        width: 183px !important;
    }

    .selectTask {
        width: 100% !important;
        margin-right: 0px !important;
        border-radius: 10px;
        border: 1px solid var(--color-text);
    }

    .marginTopSelectTask {
        margin-top: 10px;
        width: 183px;
    }
}

.lds-dual-ring {
    display: inherit;
    width: auto;
    height: auto;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    border: 6px solid var(--color-warning);
    border-color: var(--color-warning) var(--color-warning) var(--color-warning) transparent;
    animation: lds-dual-ring 1.5s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

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

.lds-dual-ring2 {
    display: inherit;
    width: auto;
    height: auto;
}

.lds-dual-ring2:after {
    content: " ";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 10px solid var(--color-warning);
    border-color: var(--color-warning) var(--color-warning) var(--color-warning) transparent;
    animation: lds-dual-ring 1.5s linear infinite;
}

.lds-dual-ringBlue {
    display: inherit;
    width: auto;
    height: auto;
}

.lds-dual-ringBlue:after {
    content: " ";
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    border-color: var(--color-primary) var(--color-primary) var(--color-primary) transparent;
    animation: lds-dual-ring 1.5s linear infinite;
    margin-bottom: -0.4rem;
    margin-right: 0.2rem;
}

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

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

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

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

.blazored-toast-message {
    text-align: start !important;
}

.amanda-item {
    background-color: var(--bg);
    width: 100%;
    display: flex;
    padding: .5rem;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    margin-bottom: .5rem;
}

div.amanda-item:has(span.material-icons[data-icon^="remove_circle"]) {
    opacity: .5;
}

.form-select:disabled {
    background-color: rgba(239, 239, 239, 0.3) !important;;
}

.form-control:disabled {
    background-color: rgba(239, 239, 239, 0.3) !important;;
}

.KanbanTask:hover .task-bottom .taskFlex .textHide {
    display: flex !important;
}

.ClockInAnimation {
    background-color: green;
    animation: fadeDiagonal 1.5s infinite;
    animation-direction: alternate;
}

.FadeAnimation {
    background-color: green;
    animation: fadeDiagonal2 1.5s infinite;
    animation-direction: alternate;
}

@keyframes fadeDiagonal2 {
    0% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }
    1% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 100%);
    }
    2% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0) 100%);
    }
    3% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0) 100%);
    }
    4% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 100%);
    }
    5% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%);
    }
    6% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 0) 100%);
    }
    7% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 0) 100%);
    }
    8% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0) 100%);
    }
    9% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 9%, rgba(0, 0, 0, 0) 100%);
    }
    10% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
    }
    11% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0) 100%);
    }
    12% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 0) 100%);
    }
    13% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 13%, rgba(0, 0, 0, 0) 100%);
    }
    14% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 14%, rgba(0, 0, 0, 0) 100%);
    }
    15% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 100%);
    }
    16% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 0) 100%);
    }
    17% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 17%, rgba(0, 0, 0, 0) 100%);
    }
    18% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 0) 100%);
    }
    19% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 19%, rgba(0, 0, 0, 0) 100%);
    }
    20% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    }
    21% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 21%, rgba(0, 0, 0, 0) 100%);
    }
    22% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 0) 100%);
    }
    23% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 23%, rgba(0, 0, 0, 0) 100%);
    }
    24% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, 0) 100%);
    }
    25% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 100%);
    }
    26% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 26%, rgba(0, 0, 0, 0) 100%);
    }
    27% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 27%, rgba(0, 0, 0, 0) 100%);
    }
    28% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0) 100%);
    }
    29% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 29%, rgba(0, 0, 0, 0) 100%);
    }
    30% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    }
    31% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 31%, rgba(0, 0, 0, 0) 100%);
    }
    32% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 32%, rgba(0, 0, 0, 0) 100%);
    }
    33% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 100%);
    }
    34% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 34%, rgba(0, 0, 0, 0) 100%);
    }
    35% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
    }
    36% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 36%, rgba(0, 0, 0, 0) 100%);
    }
    37% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 37%, rgba(0, 0, 0, 0) 100%);
    }
    38% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 0) 100%);
    }
    39% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 39%, rgba(0, 0, 0, 0) 100%);
    }
    40% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    }
    41% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 41%, rgba(0, 0, 0, 0) 100%);
    }
    42% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0) 100%);
    }
    43% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 43%, rgba(0, 0, 0, 0) 100%);
    }
    44% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 44%, rgba(0, 0, 0, 0) 100%);
    }
    45% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
    }
    46% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 46%, rgba(0, 0, 0, 0) 100%);
    }
    47% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 0) 100%);
    }
    48% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 100%);
    }
    49% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 49%, rgba(0, 0, 0, 0) 100%);
    }
    50% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    }
    51% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 100%);
    }
    52% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0) 100%);
    }
    53% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 53%, rgba(0, 0, 0, 0) 100%);
    }
    54% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 54%, rgba(0, 0, 0, 0) 100%);
    }
    55% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
    }
    56% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 56%, rgba(0, 0, 0, 0) 100%);
    }
    57% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 57%, rgba(0, 0, 0, 0) 100%);
    }
    58% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0) 100%);
    }
    59% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 59%, rgba(0, 0, 0, 0) 100%);
    }
    60% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    }
    61% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 61%, rgba(0, 0, 0, 0) 100%);
    }
    62% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, 0) 100%);
    }
    63% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 63%, rgba(0, 0, 0, 0) 100%);
    }
    64% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 64%, rgba(0, 0, 0, 0) 100%);
    }
    65% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
    }
    66% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 66%, rgba(0, 0, 0, 0) 100%);
    }
    67% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 67%, rgba(0, 0, 0, 0) 100%);
    }
    68% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0) 100%);
    }
    69% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 69%, rgba(0, 0, 0, 0) 100%);
    }
    70% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    }
    71% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 71%, rgba(0, 0, 0, 0) 100%);
    }
    72% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
    }
    73% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 73%, rgba(0, 0, 0, 0) 100%);
    }
    74% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 74%, rgba(0, 0, 0, 0) 100%);
    }
    75% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    }
    76% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 0) 100%);
    }
    77% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 77%, rgba(0, 0, 0, 0) 100%);
    }
    78% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
    }
    79% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 79%, rgba(0, 0, 0, 0) 100%);
    }
    80% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }
    81% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 81%, rgba(0, 0, 0, 0) 100%);
    }
    82% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%);
    }
    83% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 83%, rgba(0, 0, 0, 0) 100%);
    }
    84% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 84%, rgba(0, 0, 0, 0) 100%);
    }
    85% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    }
    86% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0) 100%);
    }
    87% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);
    }
    88% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
    }
    89% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
    }
    90% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
    }
    91% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 91%, rgba(0, 0, 0, 0) 100%);
    }
    92% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
    }
    93% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100%);
    }
    94% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%);
    }
    95% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
    }
    96% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 96%, rgba(0, 0, 0, 0) 100%);
    }
    97% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 97%, rgba(0, 0, 0, 0) 100%);
    }
    98% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
    }
    99% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
    }
    100% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%);
    }

}


@keyframes fadeDiagonal {
    0% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }
    1% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 100%);
    }
    2% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0) 100%);
    }
    3% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 3%, rgba(0, 0, 0, 0) 100%);
    }
    4% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 100%);
    }
    5% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%);
    }
    6% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 0) 100%);
    }
    7% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 0) 100%);
    }
    8% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0) 100%);
    }
    9% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 9%, rgba(0, 0, 0, 0) 100%);
    }
    10% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
    }
    11% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0) 100%);
    }
    12% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 0) 100%);
    }
    13% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 13%, rgba(0, 0, 0, 0) 100%);
    }
    14% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 14%, rgba(0, 0, 0, 0) 100%);
    }
    15% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 100%);
    }
    16% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 0) 100%);
    }
    17% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 17%, rgba(0, 0, 0, 0) 100%);
    }
    18% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 0) 100%);
    }
    19% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 19%, rgba(0, 0, 0, 0) 100%);
    }
    20% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    }
    21% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 21%, rgba(0, 0, 0, 0) 100%);
    }
    22% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 0) 100%);
    }
    23% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 23%, rgba(0, 0, 0, 0) 100%);
    }
    24% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, 0) 100%);
    }
    25% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 100%);
    }
    26% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 26%, rgba(0, 0, 0, 0) 100%);
    }
    27% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 27%, rgba(0, 0, 0, 0) 100%);
    }
    28% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0) 100%);
    }
    29% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 29%, rgba(0, 0, 0, 0) 100%);
    }
    30% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    }
    31% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 31%, rgba(0, 0, 0, 0) 100%);
    }
    32% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 32%, rgba(0, 0, 0, 0) 100%);
    }
    33% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 100%);
    }
    34% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 34%, rgba(0, 0, 0, 0) 100%);
    }
    35% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
    }
    36% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 36%, rgba(0, 0, 0, 0) 100%);
    }
    37% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 37%, rgba(0, 0, 0, 0) 100%);
    }
    38% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 38%, rgba(0, 0, 0, 0) 100%);
    }
    39% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 39%, rgba(0, 0, 0, 0) 100%);
    }
    40% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
    }
    41% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 41%, rgba(0, 0, 0, 0) 100%);
    }
    42% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0) 100%);
    }
    43% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 43%, rgba(0, 0, 0, 0) 100%);
    }
    44% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 44%, rgba(0, 0, 0, 0) 100%);
    }
    45% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
    }
    46% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 46%, rgba(0, 0, 0, 0) 100%);
    }
    47% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 47%, rgba(0, 0, 0, 0) 100%);
    }
    48% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 100%);
    }
    49% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 49%, rgba(0, 0, 0, 0) 100%);
    }
    50% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    }
    51% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 100%);
    }
    52% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0) 100%);
    }
    53% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 53%, rgba(0, 0, 0, 0) 100%);
    }
    54% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 54%, rgba(0, 0, 0, 0) 100%);
    }
    55% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
    }
    56% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 56%, rgba(0, 0, 0, 0) 100%);
    }
    57% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 57%, rgba(0, 0, 0, 0) 100%);
    }
    58% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0) 100%);
    }
    59% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 59%, rgba(0, 0, 0, 0) 100%);
    }
    60% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    }
    61% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 61%, rgba(0, 0, 0, 0) 100%);
    }
    62% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, 0) 100%);
    }
    63% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 63%, rgba(0, 0, 0, 0) 100%);
    }
    64% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 64%, rgba(0, 0, 0, 0) 100%);
    }
    65% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
    }
    66% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 66%, rgba(0, 0, 0, 0) 100%);
    }
    67% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 67%, rgba(0, 0, 0, 0) 100%);
    }
    68% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0) 100%);
    }
    69% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 69%, rgba(0, 0, 0, 0) 100%);
    }
    70% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    }
    71% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 71%, rgba(0, 0, 0, 0) 100%);
    }
    72% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
    }
    73% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 73%, rgba(0, 0, 0, 0) 100%);
    }
    74% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 74%, rgba(0, 0, 0, 0) 100%);
    }
    75% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    }
    76% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 0) 100%);
    }
    77% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 77%, rgba(0, 0, 0, 0) 100%);
    }
    78% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
    }
    79% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 79%, rgba(0, 0, 0, 0) 100%);
    }
    80% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }
    81% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 81%, rgba(0, 0, 0, 0) 100%);
    }
    82% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%);
    }
    83% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 83%, rgba(0, 0, 0, 0) 100%);
    }
    84% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 84%, rgba(0, 0, 0, 0) 100%);
    }
    85% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    }
    86% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0) 100%);
    }
    87% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);
    }
    88% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
    }
    89% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%);
    }
    90% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
    }
    91% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 91%, rgba(0, 0, 0, 0) 100%);
    }
    92% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
    }
    93% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100%);
    }
    94% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%);
    }
    95% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
    }
    96% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 96%, rgba(0, 0, 0, 0) 100%);
    }
    97% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 97%, rgba(0, 0, 0, 0) 100%);
    }
    98% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
    }
    99% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 99%, rgba(0, 0, 0, 0) 100%);
    }
    100% {
        mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%);
    }

}


.animated-shadow {
    animation: shadow-move 2s infinite linear;
}

@keyframes shadow-move {
    0% {
        box-shadow: 0 -6px 12px rgba(5, 124, 0, 0.3);
    }
    25% {
        box-shadow: 6px 0 12px rgba(5, 124, 0, 0.3);
    }
    50% {
        box-shadow: 0 6px 12px rgba(5, 124, 0, 0.3);
    }
    75% {
        box-shadow: -6px 0 12px rgba(5, 124, 0, 0.3);
    }
    100% {
        box-shadow: 0 -6px 12px rgba(5, 124, 0, 0.3);
    }
}

.animated-shadow3 {
    animation: shadow-move3 2s infinite linear;
    border: 1px solid rgba(48, 48, 48, 0.3);
}

@keyframes shadow-move3 {
    0% {
        box-shadow: 0 -6px 12px rgba(48, 48, 48, 0.3);
    }
    25% {
        box-shadow: 6px 0 12px rgba(48, 48, 48, 0.3);
    }
    50% {
        box-shadow: 0 6px 12px rgba(48, 48, 48, 0.3);
    }
    75% {
        box-shadow: -6px 0 12px rgba(48, 48, 48, 0.3);
    }
    100% {
        box-shadow: 0 -6px 12px rgba(48, 48, 48, 0.3);
    }
}

.animated-shadow2 {
    animation: shadow-move2 2s infinite linear;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

@keyframes shadow-move2 {
    0% {
        box-shadow: 0 -6px 12px rgba(255, 0, 0, 0.3);
    }
    25% {
        box-shadow: 6px 0 12px rgba(255, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 6px 12px rgba(255, 0, 0, 0.3);
    }
    75% {
        box-shadow: -6px 0 12px rgba(255, 0, 0, 0.3);
    }
    100% {
        box-shadow: 0 -6px 12px rgba(255, 0, 0, 0.3);
    }
}

.animated-shadow1 {
    animation: shadow-move1 2s infinite linear;
    border: 1px solid rgba(48, 157, 62, 0.3);
}

@keyframes shadow-move1 {
    0% {
        box-shadow: 0 -6px 12px rgba(48, 157, 62, 0.3);
    }
    25% {
        box-shadow: 6px 0 12px rgba(48, 157, 62, 0.3);
    }
    50% {
        box-shadow: 0 6px 12px rgba(48, 157, 62, 0.3);
    }
    75% {
        box-shadow: -6px 0 12px rgba(48, 157, 62, 0.3);
    }
    100% {
        box-shadow: 0 -6px 12px rgba(48, 157, 62, 0.3);
    }
}

.animated-shadow0 {
    animation: shadow-move0 2s infinite linear;
    border: 1px solid rgba(0, 0, 255, 0.3);
}

@keyframes shadow-move0 {
    0% {
        box-shadow: 0 -6px 12px rgba(0, 0, 255, 0.3);
    }
    25% {
        box-shadow: 6px 0 12px rgba(0, 0, 255, 0.3);
    }
    50% {
        box-shadow: 0 6px 12px rgba(0, 0, 255, 0.3);
    }
    75% {
        box-shadow: -6px 0 12px rgba(0, 0, 255, 0.3);
    }
    100% {
        box-shadow: 0 -6px 12px rgba(0, 0, 255, 0.3);
    }
}

.e-toast-container .e-toast {
    background-color: var(--bg) !important;
    border-radius: 20px !important;
}

.e-toast-title {
    color: var(--color-text) !important;
    padding-right: 2.2rem !important;
    border: 0 !important;
}

.e-toast-content {
    color: var(--color-text) !important;
    padding-right: 2.2rem !important;
    border: 0 !important;
}

.e-toast-actions {
    border: 0 !important;
}

.activeUser {
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    transform: scale(1);
}

.activeUser.visible {
    opacity: 1;
    transform: scale(1);
}

.user-image {
    transition: opacity 0.4s ease-in-out;
}

.user-image.hidden {
    opacity: 0.25;
}

.e-richtexteditor.e-rte-full-screen {
    margin-top: 5rem;
}