/* ========================================================================================================= CMS FONT OVERWRITE */




* {
    font-family: comfortaa !important;
}

@font-face {
    font-family: comfortaa;
    src: url(./fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf);
    font-display: swap;
}




/* ========================================================================================================= */
/* LOGIN PAGE - REBUILT DARK PREMIUM DESIGN */
/* ========================================================================================================= */




.login-page-body {
    width: 100%;
    min-height: 100vh;
    background: #000210;
    overflow-x: hidden;
}

.login-page-body section {
    width: 100%;
    min-height: 100vh;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 110px 5%;
    background:
        radial-gradient(circle at 12% 12%, rgba(139, 92, 246, 0.26), transparent 34%),
        radial-gradient(circle at 88% 22%, rgba(59, 130, 246, 0.18), transparent 36%),
        radial-gradient(circle at 50% 95%, rgba(124, 58, 237, 0.12), transparent 42%),
        linear-gradient(180deg, #020312 0%, #000210 58%, #020312 100%);
    overflow: hidden;
}

.login-page-body section::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 85%);
    pointer-events: none;
    z-index: 2;
}

.login-page-body section::after {
    content: "";
    width: 560px;
    height: 560px;
    position: absolute;
    right: -220px;
    bottom: -240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.26), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 2;
}

/* ========================================================================================================= */
/* BACKGROUND VIDEO */
/* ========================================================================================================= */

.login-page-body section .login-page-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 1;
    filter: brightness(38%) saturate(1.15);
    opacity: 0.75;
}

.login-page-body section .login-page-background::selection {
    background: transparent;
}

/* ========================================================================================================= */
/* BACK BUTTON */
/* ========================================================================================================= */

.login-page-body section > a {
    width: fit-content;
    height: auto;
    min-height: 46px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 34px;
    left: 5%;
    z-index: 10;
    padding: 10px 18px 10px 14px;
    text-decoration: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: all ease 0.35s;
}

.login-page-body section > a:hover {
    gap: 14px;
    transform: translateX(-6px);
    background: rgba(139, 92, 246, 0.16);
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.login-page-body section > a svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.login-page-body section > a span {
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--small-font-size);
}

.login-page-body.lang-ar section > a {
    left: auto;
    right: 5%;
    direction: rtl;
}

.login-page-body.lang-ar section > a svg {
    transform: rotate(180deg);
}

.login-page-body.lang-ar section > a:hover {
    transform: translateX(6px);
}

/* ========================================================================================================= */
/* MAIN LOGIN CONTAINER */
/* ========================================================================================================= */

.login-page-body section .login-container {
    width: 60%;
    height: auto;
    position: relative;
    z-index: 5;
    padding: 18px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    overflow: hidden;

    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
        rgba(0, 2, 16, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.login-page-body section .login-container::before {
    content: "";
    width: 260px;
    height: 260px;
    position: absolute;
    top: -120px;
    left: 40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.28), transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.login-page-body.lang-ar section .login-container {
    direction: rtl;
}

@media (min-width: 1025px) and (max-width: 1443px) {
    .login-page-body section .login-container {
        width: min(1040px, 92%);
    }
}

@media (min-width: 768px) and (max-width: 1025px) {
    .login-page-body section .login-container {
        width: 94%;
        grid-template-columns: 0.9fr 1fr;
    }
}

@media (max-width: 768px) {
    .login-page-body section {
        padding: 100px 5% 60px;
        align-items: center;
    }

    .login-page-body section .login-container {
        width: 100%;
        min-height: auto;
        grid-template-columns: 1fr;
        border-radius: 26px;
        padding: 14px;
    }
}

/* ========================================================================================================= */
/* LEFT IMAGE PANEL */
/* ========================================================================================================= */

.login-page-body section .login-container .login-background-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    z-index: 2;
}

.login-page-body section .login-container .login-background-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 2, 16, 0.08), rgba(0, 2, 16, 0.72)),
        radial-gradient(circle at 25% 20%, rgba(139, 92, 246, 0.34), transparent 38%);
    z-index: 3;
    pointer-events: none;
}

.login-page-body section .login-container .login-background-container::after {
    content: "Sapphire";
    position: absolute;
    left: 34px;
    bottom: 34px;
    z-index: 4;
    color: white;
    font-family: agelast;
    font-size: clamp(44px, 4vw, 72px);
    line-height: 1;
    text-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.login-page-body.lang-ar section .login-container .login-background-container::after {
    left: auto;
    right: 34px;
}

.login-page-body section .login-container .login-background-container .login-background-wrapper,
.login-page-body section .login-container .login-background-container .login-background-inner-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    transform: none;
}

.login-page-body section .login-container .login-background-container .login-background-inner-wrapper img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: inherit;
    transform: none;
    opacity: 0.88;
    filter: brightness(82%) saturate(1.08);
    transition: all ease 0.75s;
}

.login-page-body section .login-container:hover .login-background-container .login-background-inner-wrapper img {
    transform: scale(1.06);
    filter: brightness(94%) saturate(1.14);
}

@media (max-width: 768px) {
    .login-page-body section .login-container .login-background-container {
        display: none;
    }
}

/* ========================================================================================================= */
/* RIGHT DETAILS PANEL */
/* ========================================================================================================= */

.login-page-body section .login-container .login-dets-container {
    width: 100%;
    height: 100%;
    min-height: 640px;
    position: relative;
    z-index: 2;
    padding: clamp(24px, 4vw, 46px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
}

@media (max-width: 768px) {
    .login-page-body section .login-container .login-dets-container {
        min-height: auto;
        padding: 28px 18px 22px;
    }
}

/* ========================================================================================================= */
/* HEADER */
/* ========================================================================================================= */

.login-page-body section .login-container .login-dets-container .login-header {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 56px;
}

.login-page-body.lang-ar section .login-container .login-dets-container .login-header {
    direction: rtl;
}

.login-page-body section .login-container .login-dets-container .login-header h1 {
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1.15;
    color: white;
    font-weight: normal;
}

/* Your HTML uses: class="lang-switcher login-page" */
.login-page-body section .login-container .login-dets-container .login-header .lang-switcher.login-page {
    width: fit-content;
    height: fit-content;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-page-body section .login-container .login-dets-container .login-header .lang-switcher.login-page > svg {
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: all ease 0.35s;
}

.login-page-body section .login-container .login-dets-container .login-header .lang-switcher.login-page > svg:hover {
    transform: translateY(-2px);
    background: rgba(139, 92, 246, 0.16);
    border-color: rgba(139, 92, 246, 0.35);
}

.login-page-body section .login-container .login-dets-container .login-header .login-langs-list {
    min-width: 92px;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 20;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;

    border-radius: 18px;
    background: rgba(0, 2, 16, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    transition: all ease 0.3s;
}

.login-page-body.lang-ar section .login-container .login-dets-container .login-header .login-langs-list {
    right: auto;
    left: 0;
}

.login-page-body section .login-container .login-dets-container .login-header .login-langs-list.langs-list-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.login-page-body section .login-container .login-dets-container .login-header .login-langs-list a {
    width: 100%;
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    color: white;
    text-align: center;
    text-decoration: none;
    transition: all ease 0.3s;
}

.login-page-body section .login-container .login-dets-container .login-header .login-langs-list a:hover {
    background: rgba(139, 92, 246, 0.18);
}

/* ========================================================================================================= */
/* WELCOME TEXT */
/* ========================================================================================================= */

.login-page-body section .login-container .login-dets-container .login-wlcm {
    width: 100%;
    height: auto;
    text-align: start;
    margin-top: 0;
    margin-bottom: 38px;
}

.login-page-body.lang-ar section .login-container .login-dets-container .login-wlcm {
    text-align: right;
    margin-top: 0;
}

.login-page-body section .login-container .login-dets-container .login-wlcm h2 {
    font-size: clamp(42px, 5vw, 78px);
    line-height: 0.95;
    color: white;
    font-family: agelast;
    font-weight: normal;
    text-shadow: 0 0 34px rgba(139, 92, 246, 0.38);
}

.login-page-body section .login-container .login-dets-container .login-wlcm h3 {
    font-size: clamp(18px, 1.7vw, 26px);
    line-height: 1.45;
    margin-top: 16px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 768px) {
    .login-page-body section .login-container .login-dets-container .login-header {
        margin-bottom: 42px;
    }

    .login-page-body section .login-container .login-dets-container .login-wlcm {
        margin-bottom: 32px;
    }
}

/* ========================================================================================================= */
/* FORM */
/* ========================================================================================================= */

.login-page-body section .login-container .login-dets-container form {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
    margin-top: 0;
}

.login-page-body section .login-container .login-dets-container form input {
    width: 100%;
    height: auto;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    outline: none;
    color: white;
    background: rgba(255, 255, 255, 0.065);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all ease 0.35s;
    font-size: var(--small-font-size);
}

.login-page-body section .login-container .login-dets-container form input::placeholder {
    color: rgba(255, 255, 255, 0.46);
}

.login-page-body section .login-container .login-dets-container form input:hover {
    border-color: rgba(139, 92, 246, 0.38);
    background: rgba(255, 255, 255, 0.08);
}

.login-page-body section .login-container .login-dets-container form input:focus {
    border-color: rgba(139, 92, 246, 0.68);
    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.12),
        0 16px 38px rgba(0, 0, 0, 0.22);
    background: rgba(255, 255, 255, 0.09);
}

.login-page-body.lang-ar section .login-container .login-dets-container form input {
    direction: rtl;
    text-align: right;
}

.login-page-body section .login-container .login-dets-container form .wrng-cred-msg {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.24);
    font-size: var(--small-font-size);
    line-height: 1.45;
}

.login-page-body.lang-ar section .login-container .login-dets-container form .wrng-cred-msg {
    direction: rtl;
    text-align: right;
}

.login-page-body section .login-container .login-dets-container form a {
    width: fit-content;
    height: auto;
    align-self: flex-end;
    display: block;
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: var(--small-font-size);
    transition: all ease 0.3s;
}

.login-page-body.lang-ar section .login-container .login-dets-container form a {
    align-self: flex-start;
}

.login-page-body section .login-container .login-dets-container form a:hover {
    color: white;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.login-page-body section .login-container .login-dets-container form input[type="submit"] {
    width: 100%;
    margin-top: 24px;
    padding: 18px 28px;
    border-radius: 18px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #8B5CF6, #3B82F6);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 42px rgba(79, 70, 229, 0.34);
    font-weight: 600;
}

.login-page-body section .login-container .login-dets-container form input[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 58px rgba(139, 92, 246, 0.42);
    background: linear-gradient(135deg, #9F7AEA, #60A5FA);
}

.login-page-body section .login-container .login-dets-container form input[type="submit"]:active {
    transform: translateY(0);
}

/* ========================================================================================================= */
/* RESPONSIVE */
/* ========================================================================================================= */

@media (max-width: 500px) {
    .login-page-body section {
        padding: 96px 4% 46px;
    }

    .login-page-body section > a {
        top: 24px;
        left: 4%;
        padding: 9px 14px 9px 11px;
    }

    .login-page-body.lang-ar section > a {
        left: auto;
        right: 4%;
    }

    .login-page-body section > a svg {
        width: 22px;
        height: 22px;
    }

    .login-page-body section .login-container {
        border-radius: 22px;
        padding: 10px;
    }

    .login-page-body section .login-container .login-dets-container {
        padding: 24px 14px 18px;
    }

    .login-page-body section .login-container .login-dets-container .login-header {
        margin-bottom: 36px;
    }

    .login-page-body section .login-container .login-dets-container .login-header .lang-switcher.login-page > svg {
        width: 40px;
        height: 40px;
        padding: 9px;
    }

    .login-page-body section .login-container .login-dets-container form input,
    .login-page-body section .login-container .login-dets-container form input[type="submit"] {
        border-radius: 16px;
        padding: 16px 18px;
    }
}



































/* ========================================================================================================= SAPPHIRE CMS NAV */




.sapphire-cms-nav {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    z-index: 100;
}

.sapphire-cms-nav.profile-page {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: black;
    padding: 20px;
}

.sapphire-cms-nav.profile-page > a {
    width: fit-content;
    height: auto;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all ease-in-out .5s;
    z-index: 6;
    cursor: pointer;
}

.sapphire-cms-nav.profile-page > a svg {
    width: 30px;
    height: 30px;
    stroke: white;
    transition: all ease-in-out .5s;
}

.sapphire-cms-nav.profile-page > a span {
    color: white;
    display: block;
    transition: all ease-in-out .5s;
}

.sapphire-cms-nav > div {
    display: flex;
    gap: 20px;
}

.sapphire-cms-nav > div p {
    color: white;
    font-size: var(--intermediate-font-size);
}

.sapphire-cms-nav.profile-page > div p {
    color: white;
}

.sapphire-cms-nav > div p span {
    color: #f400ff;
    font-size: var(--intermediate-font-size);
    margin-right: 20px;
}

.sapphire-cms-nav > div .admin-account-icon {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.sapphire-cms-nav > div .admin-account-icon .admin-account-icon-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f400ff;
}

.sapphire-cms-nav > div .admin-account-icon svg {
    width: 30px;
    height: 30px;
    fill: white;
}

.sapphire-cms-nav.profile-page > div .admin-account-icon svg {
    fill: white;
}

.sapphire-cms-nav .admin-account-options-list {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 20px);
    right: 0%;
    border-radius: 16px;
    overflow: hidden;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.205);
    opacity: 0;
    pointer-events: none;
    transition: all ease-in-out .3s;
}

.sapphire-cms-nav .admin-account-options-list.active {
    opacity: 1;
    pointer-events: initial;
}

.sapphire-cms-nav .admin-account-options-list a {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 40px 20px 20px;
    background-color: transparent;
    color: #000210;
    text-decoration: none;
    border: none;
    outline: none;
}

.sapphire-cms-nav .admin-account-options-list svg {
    width: 30px;
    height: 30px;
    stroke: #000210;
}




/* ========================================================================================================= SAPPHIRE CMS PAGE */




.sapphire-cms-body {
    width: 100%;
    height: auto;
    padding: 20px 20px 20px 0px;
    background-color: #0B1020;
}

.sapphire-cms-body .sapphire-cms-pseudo-background {
    width: 100%;
    height: 100vh;
    background-color: red;
    position: fixed;
    top: 0%;
    left: 0%;
    background: radial-gradient(circle at 14% 12%, rgba(244, 0, 255, 0.16), transparent 30%), 
    radial-gradient(circle at 84% 18%, rgba(139, 92, 246, 0.18), transparent 34%), 
    radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.045), transparent 28%), 
    linear-gradient(135deg, #02030f 0%, #050617 45%, #000210 100%);
}

.sapphire-cms-body main {
    width: 100%;
    height: auto;
    padding-bottom: 200px;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width:768px) {
    .sapphire-cms-body main {
        padding-bottom: 20%;
    }
}


/* =============================== */
/* ===== SAPPHIRE CMS PAGE - ASIDE */
/* =============================== */


.sapphire-cms-body main aside {
    width: auto;
    height: auto;
    position: sticky;
    top: 20px;
    border-radius: 0px 16px 16px 0px;
    background-color: black;
    padding: 10px 10px 10px 0px;
}

.sapphire-cms-body main aside img {
    width: 70px;
    height: auto;
    object-fit: cover;
}

.sapphire-cms-body main aside ul {
    width: 100%;
    height: auto;
    list-style: none;
    margin-top: 20px;
    position: relative;
    padding-top: 20px;
}

.sapphire-cms-body main aside ul::before {
    content: '';
    width: 70%;
    height: 1px;
    background-color: #ffffff81;
    position: absolute;
    bottom: 100%;
    left: 15%;
}

.sapphire-cms-body main aside ul li {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}

.sapphire-cms-body main aside ul li button {
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: transparent;
    position: relative;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    border-radius: 0px 16px 16px 0px;
}

aside button.active,
aside button:hover {
    background-color: rgba(255, 255, 255, 0.925) !important;
}

.sapphire-cms-body main aside ul li button svg {
    width: 30px;
    height: 30px;
    fill: white;
}

aside button.active svg,
aside button:hover svg {
    fill: black !important;
}

.sapphire-cms-body main aside ul li button span {
    display: none;
}


/* ================================= */
/* ===== SAPPHIRE CMS PAGE - CONTENT */
/* ================================= */


.sapphire-cms-body main section {
    width: 100%;
    height: auto;
    padding: 0%;
    overflow: hidden;
}

.sapphire-cms-body main section .cms-ajax-container {
    width: 100%;
    height: 100%;
}

.sapphire-cms-body main section .content-ajax {
    width: 100%;
    height: 100%;
    display: none;
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header > div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header h2 {
    font-size: var(--big-font-size);
    color: white;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .content-ajax .ajax-sec-header h2 {
        font-size: var(--huge-font-size);
    }
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header > div a {
    width: 50px;
    height: 50px;
    padding: 10px;
    background-color: white;
    color: black;
    border-radius: 8px;
    border: 1px solid white;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header > div a:hover {
    background-color: transparent;
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header > div a svg {
    width: 100%;
    height: 100%;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header > div a:hover svg {
    color: white;
}

.sapphire-cms-body main section .content-ajax .ajax-sec-header p {
    width: 70%;
    color: white;
}

@media (min-width:768px) and (max-width:1443px) {
    .sapphire-cms-body main section .content-ajax .ajax-sec-header p {
        width: 85%;
    }
}

@media (max-width:768px) {
    .sapphire-cms-body main section .content-ajax .ajax-sec-header p {
        width: 100%;
    }
}

.sapphire-cms-body main section .content-ajax .ajax-sec-body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .content-ajax .ajax-sec-body {
        gap: 10px;
    }
}

.content-ajax.active {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
}

.sapphire-cms-body main section .content-ajax .empty-data-msg {
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 20px;
}

.sapphire-cms-body main section .content-ajax .empty-data-msg p {
    color: white;
    margin-top: 50px;
}


/* =================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - PRODUCTION AJAX */
/* =================================================== */


.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container {
    padding: 20px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    background-color: black;
    border: 1px solid rgba(0, 0, 0, 0.075);
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container {
        flex-direction: column;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container {
        flex-direction: column;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper {
    width: 80%;
    height: auto;
    transition: all ease-in-out 0.5s;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper {
        width: 100%;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper {
        width: 100%;
    }
}

.production-calendar-wrapper-expand {
    width: 100% !important;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-months {
        flex-direction: column;
        gap: 10px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-year {
    font-size: var(--intermediate-font-size);
    color: white;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-months-navs-container {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-months .production-calendar-months-navs-container {
        gap: 20px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-months-navs-container .month-nav-btn {
    width: 30px;
    height: 30px;
    background-color: white;
    padding: 5px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-months-navs-container .month-nav-btn svg {
    width: 100%;
    height: 100%;
    fill: #000210;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-months-navs-container .current-month p {
    font-size: var(--big-font-size);
    color: white;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-top-btns {
    width: auto;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-months .production-calendar-top-btns {
        width: 100%;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-top-btns a {
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: white;
    border: 50px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-months .production-calendar-top-btns a {
        width: 100%;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-top-btns a svg {
    width: 100%;
    height: 100%;
    stroke: #000210;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-top-btns .full-screen-btn {
    width: 40px;
    height: 40px;
    padding: 10px;
    background-color: white;
    border: 50px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

@media (max-width:1443px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-months .production-calendar-top-btns .full-screen-btn {
        display: none;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-months .production-calendar-top-btns .full-screen-btn svg {
    width: 100%;
    height: 100%;
    fill: #000210;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 20px;
    overflow: hidden;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-week {
        display: none;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week span {
    flex: 0 0 calc(100% / 7);
    padding: 20px;
    color: white;
    text-align: center;
    position: relative;
}

@media (min-width:768px) and (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-week span {
        padding: 20px 10px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week span::after {
    content: '';
    width: 1px;
    height: 30%;
    position: absolute;
    top: 35%;
    left: 100%;
    background-color: rgba(255, 255, 255, 0.281);
    z-index: 1;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week span:last-child::after {
    display: none;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week-mobile {
    width: 100%;
    height: auto;
    display: none;
    margin-top: 20px;
    overflow: hidden;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-week-mobile {
        display: flex;
        justify-content: start;
        align-items: center;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week-mobile span {
    flex: 0 0 calc(100% / 7);
    padding: 20px;
    background-color: #000210;
    color: white;
    text-align: center;
    position: relative;
}

@media (min-width:768px) and (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-week-mobile span {
        padding: 20px 10px;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-week-mobile span {
        padding: 20px 10px;
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-week-mobile span {
        padding: 20px 10px;
        font-size: var(--tiny-font-size);
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week-mobile span::after {
    content: '';
    width: 1px;
    height: 30%;
    position: absolute;
    top: 35%;
    left: 100%;
    background-color: rgba(255, 255, 255, 0.281);
    z-index: 1;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-week-mobile span:last-child::after {
    display: none;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-days {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    gap: 1px;
    overflow: hidden;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-days .production-calendar-day-item {
    flex: 0 0 calc((100% - 6px) / 7);
    padding: 20px 10px;
    position: relative;
}

@media (min-width:768px) and (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-days .production-calendar-day-item {
        padding: 20px 10px;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-days .production-calendar-day-item {
        padding: 40px 10px 10px 10px;
        min-height: 80px;
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-days .production-calendar-day-item {
        padding: 40px 0px 0px 0px;
        min-height: 80px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-days .production-calendar-day-item .production-calendar-day-sort {
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    color: white;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-days .production-calendar-day-item .production-calendar-day-reserved-tag {
    width: 20px;
    height: 20px;
    fill: white;
    position: absolute;
    top: 10px;
    left: 10px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
    .production-calendar-days .production-calendar-day-item .production-calendar-day-reserved-tag {
        left: 0%;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-days .production-calendar-day-item .photo-session-dets {
    width: 100%;
    height: auto;
    display: none;
}

.photo-session-dets-active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-days .production-calendar-day-item .photo-session-dets p {
    width: auto;
    height: auto;
    padding: 10px;
    background-color: white;
    color: #000210;
    border-radius: 8px;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-wrapper 
.production-calendar-days .production-calendar-day-item .photo-session-dets p:first-child {
    margin-top: 20px;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary {
    width: 20%;
    height: auto;
    padding-top: 13px;
    overflow: hidden;
    transition: all ease-in-out 0.5s;
    transition: width ease-in-out 0.2s;
    opacity: 1;
    pointer-events: initial;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary {
        width: 100%;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary {
        width: 100%;
    }
}

.production-calendar-summary-shrink {
    width: 0% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary h2 {
    width: 100%;
    height: auto;
    padding: 20px;
    color: #000210;
    background-color: white;
    text-align: center;
    border-radius: 16px;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary 
.production-calendar-summary-body {
    width: 100%;
    max-height: 400px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: gray transparent !important;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary 
    .production-calendar-summary-body {
        max-height: 200px;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary 
    .production-calendar-summary-body {
        max-height: 200px;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary 
.production-calendar-summary-body::-webkit-scrollbar-thumb {
    background: rebeccapurple;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
.production-calendar-reserve {
    width: 100%;
    height: auto;
    padding: 20px;
    position: relative;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
    .production-calendar-reserve {
        width: unset;
        flex: 0 0 32%;
    }
}

@media (min-width:500px) and (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
    .production-calendar-reserve {
        width: 100%;
        padding: 20px 10px;
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
    .production-calendar-reserve {
        width: 100%;
        padding: 20px 0px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
.production-calendar-reserve::after {
    content: '';
    width: 50%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.164);
    position: absolute;
    top: 100%;
    left: 25%;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
.production-calendar-reserve div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
.production-calendar-reserve div p {
    color: white;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-container .production-calendar-summary .production-calendar-summary-body 
.production-calendar-reserve div span {
    color: #f400ff;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .no-sessions-msg {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 20px;
    color: white;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .no-sessions-msg span {
    color: #f400ff;
    font-weight: bold;
}


/* ============================================================= */
/* ===== SAPPHIRE CMS PAGE - CONTENT - PRODUCTION AJAX - ACTIONS */
/* ============================================================= */


.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

@media (min-width:500px) and (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container {
    width: 50%;
    overflow: hidden;
    background-color: black;
    border-radius: 16px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container {
        width: 100%;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-header {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 5%;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
    .production-calendar-action-item-header {
        padding: 30px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-header h2 {
    font-size: var(--regular-font-size);
    color: white;
    font-weight: normal;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-header svg {
    width: 30px;
    height: 30px;
    fill: white;
    transition: transform 0.4s ease;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper {
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: all ease-in-out 0.5s;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body {
    width: 100%;
    height: auto;
    padding: 5% 10% 10% 10%;
    transition: all ease-in-out 0.5s;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container:last-child 
    .production-calendar-action-item-body-wrapper .production-calendar-action-item-body {
        padding: 2.5% 5% 5% 5%;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
    .production-calendar-action-item-body-wrapper .production-calendar-action-item-body {
        padding: 10px 30px 30px 30px;
    }
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body p {
    color: white;
}

.production-calendar-action-item-header.active svg {
    transform: rotate(0deg) !important;
}


/* ============================================================================ */
/* ===== SAPPHIRE CMS PAGE - CONTENT - PRODUCTION AJAX - ACTIONS - EDIT SESSION */
/* ============================================================================ */


.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper {
    width: 100%;
    max-height: 300px;
    overflow: auto;
    margin-top: 20px;
    scrollbar-width: thin;
    scrollbar-color: gray transparent !important;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    overflow: hidden;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table thead {
    width: 100%;
    height: auto;
    background-color: white;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table tbody tr {
    position: relative;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table tbody tr::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.26);
    position: absolute;
    top: 100%;
    left: 0%;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table thead td {
    padding: 20px;
    color: #000210;
    text-align: center;
    white-space: nowrap;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table thead td:first-child {
    text-align: start;
    border-radius: 16px 0px 0px 16px;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table thead td:last-child {
    border-radius: 0px 16px 16px 0px;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table tbody td {
    padding: 20px;
    color: white;
    text-align: center;
    white-space: nowrap;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table tbody td:first-child {
    text-align: start;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table tbody td svg {
    width: 30px;
    height: 30px;
    stroke: white;
    cursor: pointer;
}

.sapphire-cms-body main section .production-ajax .ajax-sec-body .production-calendar-actions-container .production-calendar-action-item-container 
.production-calendar-action-item-body-wrapper .production-calendar-action-item-body .photo-sessions-table-wrapper table tbody td:last-child svg {
    stroke: red;
}


/* ================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - EMPLOYEES AJAX */
/* ================================================== */


.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper {
    width: 100%;
    height: auto;
    overflow: auto;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table {
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-collapse: collapse;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table thead {
    width: 100%;
    height: auto;
    background-color: black;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table thead tr td {
    padding: 20px;
    color: white;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table thead tr td:first-child {
    border-radius: 16px 0px 0px 16px;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table thead tr td:last-child {
    border-radius: 0px 16px 16px 0px;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table tr td:not(:nth-child(1),:nth-child(2)) {
    min-width: 150px;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table tbody {
    width: 100%;
    height: auto;
}


.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table tbody td {
    padding: 20px;
    color: white;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table tbody tr .table-actions-td {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table tbody tr .table-actions-td svg {
    width: 30px;
    height: 30px;
    cursor: pointer;
    stroke: white;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table tbody tr .table-actions-td a:first-child svg {
    scale: 0.8;
}

.sapphire-cms-body main section .employees-ajax .ajax-sec-body .employees-table-wrapper table tbody tr .table-actions-td a.delete svg {
    stroke: red;
}


/* ================================================ */
/* ===== SAPPHIRE CMS PAGE - CONTENT - CLIENTS AJAX */
/* ================================================ */


.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 20px;
    margin-top: 30px;
    /* transition: all ease-in-out 1s; */
}

@media (max-width:768px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container {
        margin-top: 0px;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item {
    flex: 0 0 calc(25% - 15px);
    height: 300px;
    overflow: hidden;
    /* transition: all ease-in-out 1s; */
    position: relative;
    background-color: #000210;
    border-radius: 16px;
}

@media (min-width:768px) and (max-width:1200px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item {
        flex: 0 0 calc(33% - 15px);
    }
}

@media (min-width:500px) and (max-width:768px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item {
        flex: 0 0 100%;
    }
}

.client-grid-item.active {
    flex: 0 0 100% !important;
    height: auto !important;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-initial {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 16px;
    z-index: 2;
    position: relative;
    /* transition: all ease-in-out 1s; */
}

.client-grid-item.active .client-grid-item-initial {
    width: 300px !important;
    height: 300px !important;
    margin-left: 5% !important;
}

@media (max-width:500px) {
    .client-grid-item.active .client-grid-item-initial {
        width: 200px !important;
        height: 200px !important;
        margin-left: 5% !important;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-initial img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container {
    width: auto;
    height: auto;
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 20px;
    z-index: 5;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container a {
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: white;
    border-radius: 8px;
    text-decoration: none;
    color: #000210;
    transition: all ease-in-out .5s;
    border: 1px solid white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container a.delete-btn {
    background-color: rgb(230, 62, 62);
    border: 1px solid red;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container a:hover {
    background-color: transparent;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container a svg {
    width: 100%;
    height: 100%;
    stroke: #000210;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container a.delete-btn svg {
    stroke: white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container a.delete-btn:hover svg {
    stroke: red;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-actions-container a:hover svg {
    stroke: white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body {
    width: 100%;
    min-height: 500px;
    padding: 0% 5% 5% 5%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body {
        padding: 0% 5% calc(5% + 40px) 5%;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-general-dets {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 40px;
    row-gap: 10px;
    margin-top: 20px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-general-dets span {
    color: white;
    position: relative;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-general-dets span:first-child {
    padding-left: 0px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-general-dets span::after {
    content: '';
    width: 1px;
    height: 60%;
    background-color: white;
    position: absolute;
    top: 20%;
    left: calc(100% + 20px);
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-general-dets span:last-child::after {
    display: none;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-header-info {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-header-info h3 {
    font-size: var(--big-font-size);
    color: white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-header-info p {
    width: 90%;
    color: white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-services-tags {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-services-tags span {
    width: auto;
    height: auto;
    padding: 20px;
    background-color: white;
    color: #000210;
    border-radius: 50px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-info-row {
    width: 100%;
    height: auto;
    display: flex;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-info-row {
        flex-direction: column;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-info-row h4 {
    width: fit-content;
    font-size: var(--regular-font-size);
    color: white;
    padding: 0px 0px 20px 0px;
    position: relative;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-info-row h4::after {
    content: '';
    width: 60%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.356);
    position: absolute;
    top: 100%;
    left: 0%;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row {
    justify-content: space-between;
    align-items: stretch;
    gap: 50px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper {
    width: 60%;
    overflow: auto;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper {
        width: 50%;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper {
        width: 100%;
    }
}

.sapphire-cms-body main section .clients-ajax .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    margin-top: 30px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper table thead {
    width: auto;
    height: auto;
    background-color: white;
    overflow: hidden;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper table thead td {
    color: #000210;
    padding: 20px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.274);
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-social-media-table-wrapper table tbody td {
    color: white;
    padding: 20px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container {
    width: 35%;
    height: auto;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container {
        width: 45%;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container {
        width: 100%;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container h4 {
    width: fit-content;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container h4::after {
    width: 30%;
    left: 0%;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .color-palette {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 30px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .color-palette div {
    width: 25%;
    height: 120px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .color-palette div:nth-child(1) {
    border-radius: 16px 0px 0px 16px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .color-palette div:nth-child(3) {
    border-radius: 0px 16px 16px 0px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .colors-hexs {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .colors-hexs {
        gap: 15px;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .colors-hexs .colors-hex-item {
    width: auto;
    height: auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 15px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .colors-hexs .colors-hex-item div {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .colors-hexs .colors-hex-item div {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-first-info-row .client-color-palette-container .colors-hexs .colors-hex-item span {
    color: white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: stretch;
    gap: 50px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container {
    width: 50%;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container {
        width: 100%;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container > div {
    display: flex;
    justify-content: start;
    align-items: stretch;
    gap: 100px;
    margin-top: 30px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container > div {
        gap: 50px;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container .lang-fonts {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container .lang-fonts h5 {
    font-size: var(--intermediate-font-size);
    color: white;
    padding: 0px 0px 20px 0px;
    position: relative;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container .lang-fonts p {
    width: 100%;
    color: white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-fonts-container .lang-fonts span {
    color: white;
    opacity: .6;
    display: block;
    font-size: var(--big-font-size);
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container {
    width: 50%;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container {
        width: 100%;
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container h5 {
    font-size: var(--intermediate-font-size);
    color: white;
    padding: 0px 0px 20px 0px;
    position: relative;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:500px) and (max-width:1025px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div {
        grid-template-columns: repeat(1, 1fr);
    }
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div > a {
    height: auto;
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.274);
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    border-radius: 50px;
    transition: all ease-in-out .5s;
    text-decoration: none;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div > a:hover {
    background-color: white;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div > a svg {
    width: 30px;
    height: 30px;
    fill: white;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div > a:hover svg {
    fill: #000210;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div > a span {
    color: white;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .clients-ajax .ajax-sec-body .clients-grid-container .client-grid-item .client-grid-item-body .client-second-info-row .client-downloadables-container > div > a:hover span {
    color: #000210;
}


/* ==================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - LOG HISTORY AJAX */
/* ==================================================== */


.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper {
    width: 100%;
    height: auto;
    overflow: auto;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table thead tr td {
    padding: 20px 20px;
    color: white;
    border-top: unset;
    background-color: black;
    white-space: nowrap;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table thead tr td:first-child {
    border-left: unset;
    border-radius: 16px 0px 0px 16px;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table thead tr td:last-child {
    border-right: unset;
    border-radius: 0px 16px 16px 0px;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td {
    padding: 20px 20px;
    color: white;
    border: 1px solid rgba(128, 128, 128, 0.096);
    white-space: nowrap;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td:first-child {
    border-left: unset;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td:last-child {
    border-right: unset;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr:last-child td {
    border-bottom: unset;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td span {
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 50px;
    color: #000210;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td span.NEW {
    background-color: #ecf1eb;
    color: #7cbb82;
    border: 1px solid #7cbb82;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td span.UPDATED {
    background-color: #ecf1eb;
    color: #000210;
    border: 1px solid #000210;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td span.DELETE {
    background-color: #fbeced;
    color: #e5787c;
    border: 1px solid #e5787c;
}

.sapphire-cms-body main section .log-history-ajax .ajax-sec-body .log-history-table-wrapper table tbody tr td span.EDIT {
    background-color: #f7f4e7;
    color: #de9954;
    border: 1px solid #de9954;
}



/* ================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - PASSWORDS AJAX */
/* ================================================== */


.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item {
    flex: 0 0 calc(25% - 15px);
    height: 300px;
    overflow: hidden;
    position: relative;
    background-color: #000210;
    border-radius: 16px;
}

@media (min-width:768px) and (max-width:1200px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item {
        flex: 0 0 calc(33% - 15px);
    }
}

@media (min-width:500px) and (max-width:768px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item {
        flex: 0 0 100%;
    }
}

.password-grid-item.active {
    flex: 0 0 100% !important;
    height: auto !important;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-initial {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 16px;
    z-index: 2;
    position: relative;
}

.password-grid-item.active .password-grid-item-initial {
    width: 300px !important;
    height: 300px !important;
    margin-left: 5% !important;
}

@media (max-width:500px) {
    .password-grid-item.active .password-grid-item-initial {
        width: 200px !important;
        height: 200px !important;
        margin-left: 5% !important;
    }
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-initial img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body {
    width: 100%;
    height: auto;
    padding: 0% 5% 5% 5%;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body {
        gap: 30px;
        padding: 0% 5% calc(5% + 40px) 5%;
    }
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body > a {
    width: 50px;
    height: 50px;
    padding: 5px;
    background-color: white;
    border-radius: 8px;
    color: #000210;
    border: 1px solid #ffffff33;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body > a:hover {
    background-color: transparent;
    color: white;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body > a svg {
    width: 100%;
    height: 100%;
    stroke: #000210;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row {
    width: auto;
    height: auto;
    max-width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row {
        width: 100%;
        max-width: unset;
        padding: 0px 20px;
        gap: 10px;
    }
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row span {
    color: white;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div {
    width: 100%;
    height: auto;
    padding: 20px;
    background-color: white;
    border: 1px solid white;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

@media (min-width:500px) and (max-width:1025px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div  {
        padding: 10px 20px;
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div  {
        padding: 10px 20px;
        flex-direction: column;
        gap: 0px;
    }
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div p {
    color: #000210;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div .password-actions {
    display: flex;
    gap: 10px;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div .password-actions  {
        gap: 30px;
    }
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div .password-actions a {
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: white;
    border-radius: 8px;
    color: #000210;
    border: 1px solid #ffffff33;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div .password-actions a:hover {
    background-color: transparent;
    color: white;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div .password-actions a svg {
    width: 100%;
    height: 100%;
    stroke: #000210;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row > div .password-actions a.delete svg {
    stroke: red;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row .password-note {
    color: red;
    opacity: .8;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-row .password-note.empty {
    opacity: 0;
    pointer-events: none;
}

.sapphire-cms-body main section .passwords-ajax .ajax-sec-body .password-grid .password-grid-item .password-grid-item-body .password-empty {
    width: 30%;
    color: white;
}


/* ============================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - TASKS AJAX */
/* ============================================== */


.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    margin-top: 50px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-filter {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-filter button {
    width: auto;
    height: auto;
    padding: 20px;
    border-radius: 50px;
    background-color: white;
    color: black;
    border: 1px solid white;
    transition: all ease-in-out .5s;
    cursor: pointer;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-filter button:hover {
    background-color: transparent;
    color: white;
}

.task-filter-btn.active{
    background-color: transparent !important; 
    color: white !important;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    gap: 20px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div {
    width: auto;
    height: auto;
    background-color: black;
    box-shadow: 10px 10px 10px 10px #00021007;
    border: 1px solid black;
    padding: 20px 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width:550px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div {
        width: 100%;
        box-shadow: unset;
        padding: 20px;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div:nth-child(2) > div div {
    background-color: green;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div:nth-child(3) > div div {
    background-color: orange;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div:nth-child(4) > div div {
    background-color: red;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div > div {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div > div div {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div p {
    color: white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div span {
    font-size: var(--intermediate-font-size);
    font-weight: bold;
    color: white;
}

@media (max-width:550px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-container .tasks-header-stats > div span {
        font-size: var(--big-font-size);
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    border-bottom: 1px solid white;
}

@media (max-width:550px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns {
        margin-top: 30px;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div {
    width: auto;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div {
        gap: 10px;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div .tasks-sec-btn {
    width: auto;
    height: auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all ease-in-out .5s;
    padding-bottom: 20px;
    position: relative;
    color: white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div:first-child .tasks-sec-btn::after {
    content: '';
    width: 0%;
    height: 2px;
    background-color: white;
    position: absolute;
    top: calc(100% - 2px);
    left: 0%;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div:first-child .tasks-sec-btn:hover::after {
    width: 100%;
}

.tasks-sec-btn.active::after {
    width: 100% !important;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div:last-child .tasks-gallery-type-btn {
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    transform: translateY(-10px);
    cursor: pointer;
    transition: all ease-in-out .5s;
    background-color: black;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div:last-child .tasks-gallery-type-btn:hover {
    background-color: white;
}

.tasks-gallery-type-btn.active {
    background-color: white !important;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div .tasks-gallery-type-btn svg {
    width: 30px;
    height: 30px;
    stroke: white;
    transition: all ease-in-out .5s;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div .tasks-gallery-type-btn svg {
        width: 20px;
        height: 20px;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-header-btns > div:last-child .tasks-gallery-type-btn:hover svg {
    stroke: black;
}

.tasks-gallery-type-btn.active svg {
    stroke: black !important;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-sec {
    width: 100%;
    min-height: 100px;
    display: none;
}

.tasks-gallery-sec.active {
    display: block !important;
}

.tasks-columns-container.active {
    display: grid !important;
}

.tasks-show-table-way {
    display: none;
}

.tasks-show-table-way.active {
    display: block !important;
}

.is-hidden { 
    display:none !important; 
}


/* =============================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - TASKS AJAX - TABLES GALLERY */
/* =============================================================== */


.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-gallery-type-table-btns-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-gallery-type-table-btns-container button {
    width: auto;
    height: auto;
    padding: 20px;
    cursor: pointer;
    background-color: black;
    color: white;
    border: 1px solid black;
    transition: all ease-in-out .5s;
    border-radius: 50px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-gallery-type-table-btns-container button:hover {
    background-color: white;
    color: #000210;
}


.tasks-gallery-type-table-btns-container button.active{
    background-color: white !important;
    color: #000210 !important;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper {
    width: 100%;
    max-height: 600px;
    padding-bottom: 100px;
    overflow: auto;
    display: none;
}

.tasks-table-wrapper.active {
    display: block !important;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table {
    min-width: 100%;
    height: auto;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 50px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table thead {
    width: 100%;
    background-color: black;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table thead td {
    padding: 20px;
    color: white;
    white-space: nowrap;
    text-align: center;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table thead td:first-child {
    border-radius: 16px 0px 0px 16px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table thead td:last-child {
    border-radius: 0px 16px 16px 0px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody td {
    padding: 20px;
    white-space: nowrap;
    text-align: center;
    color: white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .tasks-actors-td-inner-container {
    display: flex; 
    gap: 6px; 
    justify-content: center; 
    flex-wrap: wrap;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .task-priority-td-span {
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 50px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .task-priority-td-span.High {
    background-color: #fbeced;
    color: #e5787c;
    border: 1px solid #e5787c;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .task-priority-td-span.Normal {
    background-color: #f7f4e7;
    color: #de9954;
    border: 1px solid #de9954;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .task-priority-td-span.Low {
    background-color: #ecf1eb;
    color: #7cbb82;
    border: 1px solid #7cbb82;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr .cats-tags-td > div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr .cats-tags-td span {
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 50px;
    background-color: white;
    color: #000210b4;
    border: 1px solid white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .task-description-clip-tooltip,
.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .task-title-clip-tooltip {
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .task-description-clip-tooltip .clip-text,
.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .task-title-clip-tooltip .clip-text {
    display: block;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .task-description-clip-tooltip:hover::after,
.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .task-title-clip-tooltip:hover::after {
    content: attr(data-full);
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    background: #111;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: normal;
    width: max-content;
    max-width: 350px;
    z-index: 9999;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody .tasks-actors-td-inner-container img {
    width: 40px; 
    height: 40px; 
    border-radius: 999px; 
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .status-tag {
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 50px;
    white-space: nowrap;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .status-tag.On-Going {
    background-color: white;
    color: #000210b4;
    border: 1px solid #00021067;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .status-tag.Complete {
    background-color: #ecf1eb;
    color: #7cbb82;
    border: 1px solid #7cbb82;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .status-tag.Pending {
    background-color: #f7f4e7;
    color: #de9954;
    border: 1px solid #de9954;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td .status-tag.Cancelled {
    background-color: #fbeced;
    color: #e5787c;
    border: 1px solid #e5787c;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec > .tasks-show-table-way .tasks-table-wrapper table tbody tr td > a {
    text-underline-offset: 5px;
    color: white;
}


/* ================================================================ */
/* ===== SAPPHIRE CMS PAGE - CONTENT - TASKS AJAX - COLUMNS GALLERY */
/* ================================================================ */


.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container {
    width: 100%;
    min-height: 100px;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    display: none;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column {
    height: auto;
    background-color: black;
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column {
        display: flex;
        flex-direction: column;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-header {
    width: 100%;
    height: auto;
    padding: 20px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-header h3 {
    width: 100%;
    height: auto;
    font-size: var(--regular-font-size);
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-header h3.high {
    color: #e5787c;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-header h3.normal {
    color: #de9954;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-header h3.low {
    color: #7cbb82;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-header span {
    display: block;
    color: white;
    margin-top: 10px;
    opacity: .5;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body {
    width: 100%;
    height: auto;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
    padding: 20px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body {
        min-width: 100%;
        display: flex;
        flex-direction: row;
        overflow: auto;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card {
    width: 100%;
    height: auto;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: rgba(255, 255, 255, 0.171);
    box-shadow: 10px 10px 10px 10px #00021007;
    border: 1px solid #00021007;
    position: relative;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card {
        min-width: fit-content;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card > a {
    width: 50px;
    height: 50px;
    padding: 10px;
    background-color: #000210;
    border: 1px solid #000210;
    transition: all ease-in-out .5s;
    border-radius: 8px;
    position: absolute;
    top: 20px;
    right: 20px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card > a:hover {
    background-color: transparent;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card > a svg {
    width: 100%;
    height: 100%;
    stroke: white;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card > a:hover svg {
    stroke: #000210;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-status {
    width: fit-content;
    height: auto;
    padding: 10px;
    border-radius: 50px;
    background-color: white;
    color: #000210;
    border: 1px solid #000210;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-status.Pending {
    background-color: #f7f4e7;
    color: #de9954;
    border: 1px solid #de9954;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-status.Cancelled {
    background-color: #fbeced;
    color: #e5787c;
    border: 1px solid #e5787c;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-status.Completed {
    background-color: #ecf1eb;
    color: #7cbb82;
    border: 1px solid #7cbb82;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-tags {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-tags span {
    width: auto;
    height: auto;
    padding: 10px;
    background-color: #000210;
    color: white;
    border-radius: 50px;
    border: 1px solid #00021067;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-client {
    font-weight: bolder;
    font-size: var(--big-font-size);
    color: white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-deadline {
    width: 100%;
    color: white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-dets {
    width: 100%;
    height: auto;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-dets h4 {
    font-size: var(--intermediate-font-size);
    opacity: .9;
    color: white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-dets p {
    margin-top: 20px;
    color: white;
    opacity: .9;
    font-size: var(--tiny-font-size);
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-actors {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-gallery-sec .tasks-columns-container .column .column-body .column-task-card .column-task-card-actors img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}


/* ================================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - TASKS AJAX - EMPLOYEES GALLERY */
/* ================================================================== */


.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec {
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (min-width:600px) and (max-width:768px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:600px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec {
        grid-template-columns: repeat(1,1fr);
    }
}

.tasks-summary-sec.active {
    display: grid !important;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card {
    height: auto;
    padding: 20px;
    border-radius: 36px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 35%),
        black;
    border: 1px solid rgba(255, 255, 255, 0.082);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card::before {
    content: "";
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    position: absolute;
    top: -70px;
    right: -70px;
    pointer-events: none;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card::after {
    content: "";
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.035);
    position: absolute;
    bottom: -50px;
    left: -50px;
    pointer-events: none;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card:hover {
    transform: translateY(-6px);
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 38%),
        #0f0f0f;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-card-cover {
    width: 100%;
    height: 180px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
        #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.082);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-card-cover::before {
    content: "";
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.04);
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-avatar-orbit {
    width: 150px;
    height: 150px;
    padding: 10px;
    border-radius: 50%;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, 0.16);
    position: absolute;
    bottom: -75px;
    z-index: 3;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-avatar-orbit::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.20);
    animation: employeeAvatarOrbit 12s linear infinite;
}

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

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

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-avatar-orbit img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-card-content {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-card-label {
    width: fit-content;
    display: block;
    margin: 0 auto 20px auto;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.082);
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card h3 {
    font-size: var(--intermediate-font-size);
    color: white;
    text-align: center;
    margin: 0;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card h4 {
    color: white;
    opacity: .65;
    text-align: center;
    font-weight: normal;
    margin-top: 10px;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container {
    width: 100%;
    height: auto;
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.082);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    position: relative;
    transition: all ease-in-out .5s;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card {
        padding: 0px;
        gap: 0px;
    }
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card:hover {
    transform: scale(1.04);
    background-color: white;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card span {
    color: white;
    font-size: var(--medium-font-size);
    position: relative;
    z-index: 2;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card p {
    color: white;
    opacity: .65;
    position: relative;
    z-index: 2;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card.pending span {
    color: #de9954;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card.cancelled span {
    color: #e5787c;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card.completed span {
    color: #7cbb82;
}

.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card:hover span,
.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card:hover p,
.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card:hover.pending span,
.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card:hover.cancelled span,
.sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container > .stat-card:hover.completed span {
    color: black;
}

@media (max-width: 500px) {

    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-stats-container {
        gap: 10px;
    }

    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-avatar-orbit {
        width: 130px;
        height: 130px;
        bottom: -65px;
    }

    .sapphire-cms-body main section .tasks-ajax .ajax-sec-body .tasks-summary-sec > .task-summary-card .employee-card-cover {
        margin-bottom: 50px;
    }

}




/* =================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - STATISTICS AJAX */
/* =================================================== */




.sapphire-cms-body main section .analytics-ajax .ajax-sec-body h3 {
    width: 100%;
    text-align: center;
    padding: 20px;
    margin-top: 60px;
    color: white;
} 




/* ===================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - SOCIAL MEDIA AJAX */
/* ===================================================== */




.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .socials-header-container .socials-filter {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .socials-header-container .socials-filter button {
    width: auto;
    height: auto;
    padding: 20px;
    border-radius: 50px;
    background-color: white;
    color: black;
    border: 1px solid white;
    transition: all ease-in-out .5s;
    cursor: pointer;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .socials-header-container .socials-filter button:hover {
    background-color: transparent;
    color: white;
}

.social-filter-btn.active{
    background-color: transparent !important; 
    color: white !important;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper {
    width: 100%;
    height: auto;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar {
    width: 100%;
    height: auto;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-clients-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-clients-container button {
    width: auto;
    height: auto;
    padding: 20px;
    background-color: #000210;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 50px;
    transition: all ease-in-out .5s;
    border: 1px solid #000210;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-clients-container button:hover {
    background-color: transparent;
    color: #000210;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-header {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-header {
        flex-direction: column;
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-header span {
    font-size: var(--regular-font-size);
    color: white;
    font-weight: bold;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-header > div {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-header > div p {
    font-size: var(--big-font-size);
    font-weight: bold;
    color: white;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-header > div svg {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    fill: white;
    background-color: black;
    padding: 10px;
    cursor: pointer;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-week {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    margin-top: 20px;
    background-color: black;
    border-radius: 16px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-week {
        display: none;
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-week span {
    text-align: center;
    position: relative;
    padding: 20px 0px;
    color: white;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-week span::after {
    content: '';
    width: 1px;
    height: 30%;
    background-color: white;
    position: absolute;
    top: 35%;
    left: 100%;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-mobile-week {
    width: 100%;
    height: auto;
    display: none;
    margin-top: 20px;
    background-color: black;
    border-radius: 16px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-mobile-week {
        display: grid;
        grid-template-columns: repeat(7,1fr);
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-mobile-week span {
    text-align: center;
    position: relative;
    padding: 20px 0px;
    color: white;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-mobile-week span::after {
    content: '';
    width: 1px;
    height: 30%;
    background-color: #000210;
    position: absolute;
    top: 35%;
    left: 100%;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    margin-top: 20px;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div {
    height: auto;
    text-align: center;
    position: relative;
    padding: 20px;
    border: 1px solid #00021004;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width:500px) and (max-width:1025px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div {
        padding: 20px 5px;
    }
}

@media (max-width:500px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div {
        padding: 20px 5px;
        align-items: center;
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: black;
    margin-bottom: 20px;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div span {
        width: 25px;
        height: 25px;
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a {
        padding: 10px 3px;
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a p {
    color: #000210;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a.facebook {
    background-color: #1876f23d;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a.instagram {
    background-color: #e1306b1c;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a.tiktok {
    background-color: #00000041;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a svg {
    width: 30px;
    height: 30px;
}

@media (max-width:550px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a svg {
        width: 20px;
        height: 20px;
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a.facebook svg {
    fill: #1877F2;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a.instagram svg {
    fill: #E1306C;
    scale: 0.8;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .schedualing-dets a.tiktok svg {
    fill: white;
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .new-post-btn {
    width: 100%;
    height: auto;
    background-color: black;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 16px;
    cursor: pointer;
}

@media (max-width:550px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .new-post-btn {
        padding: 10px 0px;
    }
}

.sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .new-post-btn svg {
    width: 20px;
    height: 20px;
    color: white;
}

@media (max-width:550px) {
    .sapphire-cms-body main section .social-media-ajax .ajax-sec-body .social-media-calendar-wrapper .social-media-calendar .social-media-calendar-days > div .new-post-btn svg {
        width: 15px;
        height: 15px;
    }
}


/* ============================================= */
/* ===== SAPPHIRE CMS PAGE - CONTENT - HOME AJAX */
/* ============================================= */


.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-counters-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: stretch;
    gap: 20px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-counters-container {
        flex-wrap: wrap;
        gap: 10px;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-counters-container > div {
    width: 25%;
    height: auto;
    background-color: black;
    padding: 20px 40px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.082);
}

@media (min-width:768px) and (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-counters-container > div {
        padding: 10px 20px;
    }
}

@media (max-width:768px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-counters-container > div {
        width: calc(50% - 10px);
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-counters-container > div span {
    font-size: var(--small-font-size);
    opacity: .8;
    color: white;
    font-weight: normal;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-counters-container > div h3 {
    color: white;
    font-size: var(--regular-font-size);
    font-weight: normal;
    margin-top: 20px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    padding: 5%;
    border-radius: 16px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info {
        flex-direction: column;
        padding: 0%;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-img {
    width: 45%;
    max-height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    overflow: hidden;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-img {
        width: 60%;
        flex-direction: column;
        margin-left: 20%;
    }
}

@media (max-width:600px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-img {
        width: 100%;
        flex-direction: column;
        margin-left: 0px;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-img:hover img {
    scale: 0.7;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info-img input[type="file"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    cursor: pointer;
    opacity: 0;
    z-index: 10;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-img button {
    width: auto;
    height: auto;
    position: absolute;
    top: 5%;
    left: 5%;
    padding: 20px;
    background-color: white;
    border: 1px solid white;
    border-radius: 50px;
    color: black;
    transition: all ease-in-out .5s;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-img button {
        opacity: 1;
        position: unset;
        background-color: white;
        padding: 10px 20px;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
    position: relative;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets {
        width: 55%;
    }
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets {
        width: 100%;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets h2 {
    width: 100%;
    font-size: var(--big-font-size);
    color: white;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets h2 {
        text-align: center;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets p {
    width: 100%;
    color: white;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets p {
        text-align: center;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets > div {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    margin-top: 20px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info > .home-company-info-dets > div > div {
    width: calc(50% - 15px);
    height: auto;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info > .home-company-info-dets > div > div {
        width: 100%;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info > .home-company-info-dets > div > div label {
    display: block;
    margin-bottom: 10px;
    color: white;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info > .home-company-info-dets > div > div label {
        text-align: center;
        margin-bottom: 20px;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info > .home-company-info-dets > div input {
    width: 100%;
    height: auto;
    padding: 20px;
    background-color: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.185);
    border-radius: 16px;
    color: white;
    opacity: .8;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets > div input::placeholder {
    color: white;
    opacity: .8;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets > div input[type="submit"] {
    width: 100%;
    background-color: black;
    border: none;
    color: white;
    transition: all ease-in-out .5s;
    cursor: pointer;
    margin-top: 30px;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, 0.082);
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-company-info .home-company-info-dets > div input[type="submit"]:hover {
    background-color: white;
    color: black;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper {
        margin-top: 30px;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .advanced-traffic-card {
    width: calc(75% - 10px);
    padding: 20px;
    border-radius: 18px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, 0.082);
    position: relative;
    overflow: hidden;
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .advanced-traffic-card {
        width: 100%;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card {
    width: calc(25% - 10px);
}

@media (min-width:768px) and (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card {
        width: calc(50% - 10px);
    }
}

@media (max-width:768px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card {
        width: 100%;
        text-align: center;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card h3,
.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card h4 {
    width: 100%;
    color: white;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card .stats-subtitle {
    width: 100%;
    color: white;
    opacity: .7;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card h4 {
    margin-bottom: 20px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-pie-card .task-mini-info p {
    width: 100%;
    color: white;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-bar-card {
    width: calc(40% - 10px);
}

@media (min-width:768px) and (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-bar-card {
        width: calc(50% - 10px);
    }
}

@media (max-width:768px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .tasks-bar-card {
        width: 100%;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .employee-card {
    width: calc(60% - 10px);
}

@media (max-width:1025px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .employee-card {
        width: 100%;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-head {
        flex-direction: column;
        justify-content: center;
    }

    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-head * {
        text-align: center;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.88);
    padding: 8px 10px;
    border-radius: 12px;
    outline: none;
    font-size: 12px;
    cursor: pointer;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-select option {
    color: #000210;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.88);
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s ease;
    font-size: 12px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .stats-controls {
        flex-direction: column;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .range-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .range-tabs .tab {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    transition: 0.2s ease;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .range-tabs .tab.active {
    background: rgba(92, 225, 230, 0.12);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(92, 225, 230, 0.18);
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .compare-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    user-select: none;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .compare-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #5ce1e6;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width:500px) {
    .sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .kpi-row {
        display: flex;
        flex-direction: column;
    }
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .kpi-box {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .kpi-box p {
    margin: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .kpi-box h4 {
    margin: 5px 0 0;
    font-size: 16px;
    color: #fff;
    font-weight: 800;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .kpi-box.good h4 {
    color: #56ffb7;
    text-shadow: 0 0 14px rgba(86, 255, 183, 0.35);
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .chart-area {
    width: 100%;
    height: 360px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .chart-area canvas {
    width: 100% !important;
    height: 100% !important;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .employee-card {
    min-height: 520px;
}

.sapphire-cms-body main section .home-ajax .ajax-sec-body .home-website-stats-charts-wrapper .employee-chart-area {
    height: 360px;
}


/* =============================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - MODELS AJAX */
/* =============================================== */


.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

@media (min-width:1025px) and (max-width:1443px) {
    .sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (min-width:900px) and (max-width:1025px) {
    .sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (min-width:600px) and (max-width:900px) {
    .sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:600px) {
    .sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid {
        grid-template-columns: repeat(1,1fr);
    }
}


/* =================================================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - MODELS AJAX - MODELS AJAX PAGINATION + SKELETON */
/* =================================================================================== */


.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-header {
    width: 100%;
    height: auto;
    padding: 20px;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, 0.082);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-header span {
    color: white;
    opacity: .6;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-header h3 {
    color: white;
    font-size: var(--regular-font-size);
    margin-top: 10px;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-header p {
    color: white;
    opacity: .7;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-tabs {
    width: 100%;
    height: auto;
    padding: 20px;
    border-radius: 36px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

@media (max-width:768px) {
    .sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-tabs {
        flex-wrap: wrap;
    }
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-tabs button {
    width: auto;
    min-width: 50px;
    height: auto;
    padding: 15px 20px;
    border-radius: 50px;
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.082);
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-tabs button.active,
.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-tabs button:hover {
    background-color: white;
    color: black;
    border-color: white;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-skeleton {
    height: 450px;
    padding: 20px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.18), transparent 35%),
        black;
    border: 1px solid rgba(139, 92, 246, 0.20);
    overflow: hidden;
    position: relative;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-skeleton div {
    width: 100%;
    height: 340px;
    border-radius: 16px;
    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(139, 92, 246, 0.12) 28%,
            rgba(190, 167, 255, 0.32) 45%,
            rgba(139, 92, 246, 0.12) 62%,
            rgba(255, 255, 255, 0.04) 100%
        );
    background-size: 240% 100%;
    animation: modelsSkeletonPurpleWave 1.4s ease-in-out infinite;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-skeleton span {
    width: 70%;
    height: 45px;
    display: block;
    border-radius: 50px;
    margin-top: 20px;
    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(139, 92, 246, 0.12) 28%,
            rgba(190, 167, 255, 0.32) 45%,
            rgba(139, 92, 246, 0.12) 62%,
            rgba(255, 255, 255, 0.04) 100%
        );
    background-size: 240% 100%;
    animation: modelsSkeletonPurpleWave 1.4s ease-in-out infinite;
}

@keyframes modelsSkeletonPurpleWave {

    0% {
        background-position: 120% 0;
    }

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

}

@media (max-width: 768px) {

    .sapphire-cms-body main section .models-ajax .ajax-sec-body .models-pagination-header {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* ===================================================================== */
/* ===== SAPPHIRE CMS PAGE - CONTENT - MODELS AJAX - MODELS GALLERY CARD */
/* ===================================================================== */


.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item {
    height: auto;
    min-height: unset;
    padding: 0;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, 0.082);
    overflow: hidden;
    position: relative;
    display: block;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.22);
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .models-gallery-item-left {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .models-gallery-item-left img {
    width: 100%;
    height: 450px;
    display: block;
    object-fit: cover;
    object-position: center top;
    filter: brightness(88%);
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item:hover .models-gallery-item-left img {
    filter: brightness(58%);
    transform: scale(1.04);
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .models-gallery-item-left h3 {
    width: calc(100% - 40px);
    height: auto;
    padding: 20px;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, .62);
    backdrop-filter: blur(12px);
    color: white;
    font-size: var(--regular-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 3;
    margin: 0;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .models-gallery-item-left h3 span {
    color: white;
    opacity: .62;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: rgba(0, 0, 0, .82);
    backdrop-filter: blur(14px);
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all ease-in-out .5s;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item:hover .model-dets-column {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column > div:not(.model-actions) {
    width: 100%;
    min-height: auto;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.082);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column > div:not(.model-actions) span {
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column > div:not(.model-actions) svg {
    width: 20px;
    height: 20px;
    fill: white;
    stroke: white;
    flex-shrink: 0;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column .model-actions {
    width: 100%;
    height: auto;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    z-index: 6;
    flex-shrink: 0;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column .model-actions a {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 15px 20px;
    border-radius: 50px;
    background-color: white;
    border: 1px solid white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: all ease-in-out .5s;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column .model-actions a:hover {
    background-color: transparent;
    color: white;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column .model-actions a.delete {
    color: white;
    background-color: rgba(255, 0, 0, 0.61);
    border: 1px solid red;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column .model-actions a.delete:hover {
    background-color: transparent;
    color: red;
}

.sapphire-cms-body main section .models-ajax .ajax-sec-body .models-gallery-grid > .models-gallery-item .model-dets-column .model-actions a svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: currentColor;
}




/* =========================== */
/* ===== SAPPHIRE PROFILE PAGE */
/* =========================== */




.sapphire-employee-body {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .08), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, .05), transparent 30%),
        var(--main-dark-color, #0B1020);
}

.sapphire-employee-body * {
    box-sizing: border-box;
}

.sapphire-employee-body a {
    text-decoration: none;
}

.sapphire-employee-body svg {
    flex-shrink: 0;
}

.sapphire-employee-body .profile-page-shell {
    width: 100%;
    min-height: calc(100vh - 40px);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.sapphire-employee-body .profile-con-wrapper {
    width: min(100%, 1440px);
    height: auto;
}


/* ================================================== */
/* ===== SAPPHIRE PROFILE PAGE - TOP DASHBOARD LAYOUT */
/* ================================================== */


.sapphire-employee-body .profile-dashboard {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 20px;
    margin-top: 20px;
}

.sapphire-employee-body .profile-side-card,
.sapphire-employee-body .profile-main-panel,
.sapphire-employee-body .profile-details-card,
.sapphire-employee-body .employee-download-center,
.sapphire-employee-body .profile-cleared-secs,
.sapphire-employee-body .profile-tasks-sec {
    border: 1px solid rgba(255, 255, 255, .10);
    background-color: rgba(0, 0, 0, .72);
    backdrop-filter: blur(20px);
}


.sapphire-employee-body .employee-download-center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sapphire-employee-body .profile-side-card {
    min-height: 620px;
    padding: 20px;
    border-radius: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
}

.sapphire-employee-body .profile-image-frame {
    width: 100%;
    flex: 1;
    min-height: 380px;
    border-radius: 36px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    position: relative;
}

.sapphire-employee-body .profile-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .52), transparent 60%);
}

.sapphire-employee-body .profile-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sapphire-employee-body .profile-side-info {
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
}

.sapphire-employee-body .profile-side-info span,
.sapphire-employee-body .profile-welcome-card span,
.sapphire-employee-body .profile-section-title span,
.sapphire-employee-body .profile-metric-card span,
.sapphire-employee-body .profile-clearance-chip span,
.sapphire-employee-body .profile-details-list div span,
.sapphire-employee-body .profile-cleared-grid > div span {
    display: block;
    color: rgba(255, 255, 255, .58);
}

.sapphire-employee-body .profile-side-info h1 {
    color: white;
    font-size: var(--big-font-size);
    margin-top: 20px;
}

.sapphire-employee-body .profile-side-info p {
    color: rgba(255, 255, 255, .75);
    margin-top: 10px;
}

.sapphire-employee-body .profile-main-action {
    width: 100%;
    padding: 20px;
    border-radius: 50px;
    background-color: white;
    color: black;
    text-align: center;
    border: 1px solid white;
    transition: all ease-in-out .5s;
}

.sapphire-employee-body .profile-main-action:hover {
    background-color: transparent;
    color: white;
}

.sapphire-employee-body .profile-main-panel {
    min-height: 620px;
    padding: 20px;
    border-radius: 36px;
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 20px;
}

.sapphire-employee-body .profile-welcome-card {
    width: 100%;
    min-height: 300px;
    padding: 20px;
    border-radius: 36px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
        rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.sapphire-employee-body .profile-welcome-card::after {
    content: "";
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .06);
    position: absolute;
    right: -120px;
    bottom: -160px;
}

.sapphire-employee-body .profile-welcome-card > div {
    position: relative;
    z-index: 2;
}

.sapphire-employee-body .profile-welcome-card h2 {
    color: white;
    font-size: var(--huge-font-size);
    line-height: 1;
    margin-top: 20px;
}

.sapphire-employee-body .profile-welcome-card p {
    width: min(100%, 680px);
    color: rgba(255, 255, 255, .72);
    margin-top: 20px;
}

.sapphire-employee-body .profile-clearance-chip {
    width: auto;
    padding: 20px;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, .10);
}

.sapphire-employee-body .profile-clearance-chip p {
    color: white;
    font-size: var(--medium-font-size);
    margin-top: 20px;
}


/* ===================================== */
/* ===== SAPPHIRE PROFILE PAGE - METRICS */
/* ===================================== */


.sapphire-employee-body .profile-metrics-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sapphire-employee-body .profile-metric-card {
    min-height: 170px;
    padding: 20px;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    transition: all ease-in-out .5s;
}

.sapphire-employee-body .profile-metric-card:hover {
    transform: translateY(-6px);
    background-color: rgba(255, 255, 255, .06);
}

.sapphire-employee-body .profile-metric-card h3 {
    color: white;
    font-size: var(--medium-font-size);
}

.sapphire-employee-body .profile-metric-card p {
    color: rgba(255, 255, 255, .62);
}


/* ================================== */
/* ===== SAPPHIRE PROFILE PAGE - TABS */
/* ================================== */


.sapphire-employee-body .profile-con-btns-container {
    width: 100%;
    padding: 20px;
    border-radius: 36px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    gap: 20px;
    overflow-x: auto;
}

.sapphire-employee-body .profile-con-btns-container button {
    width: 100%;
    padding: 20px;
    border-radius: 50px;
    border: 1px solid transparent;
    background-color: transparent;
    color: white;
    cursor: pointer;
    transition: all ease-in-out .5s;
    white-space: nowrap;
}

.sapphire-employee-body .profile-con-btns-container button.active,
.sapphire-employee-body .profile-con-btns-container button:hover {
    background-color: white;
    color: black;
    border-color: white;
}


/* =========================================== */
/* ===== SAPPHIRE PROFILE PAGE - BODY SECTIONS */
/* =========================================== */


.sapphire-employee-body .profile-con-body {
    width: 100%;
    margin-top: 20px;
}

.sapphire-employee-body .profile-con-sec {
    width: 100%;
    display: none;
}

.sapphire-employee-body .profile-con-sec.active {
    display: block;
}

.sapphire-employee-body .profile-overview-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 480px);
    gap: 20px;
}

.sapphire-employee-body .profile-details-card,
.sapphire-employee-body .employee-download-center,
.sapphire-employee-body .profile-cleared-secs,
.sapphire-employee-body .profile-tasks-sec {
    padding: 20px;
    border-radius: 36px;
}

.sapphire-employee-body .profile-section-title {
    width: 100%;
    margin-bottom: 20px;
}

.sapphire-employee-body .profile-section-title h2 {
    color: white;
    font-size: var(--regular-font-size);
    margin-top: 10px;
}

.sapphire-employee-body .profile-details-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sapphire-employee-body .profile-details-list div {
    height: auto;
    padding: 20px;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.sapphire-employee-body .profile-details-list div p {
    color: white;
    overflow-wrap: anywhere;
}


/* =========================================== */
/* ===== SAPPHIRE PROFILE PAGE - DOWNLOADABLES */
/* =========================================== */


.sapphire-employee-body .employee-download-center .no-files {
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.sapphire-employee-body .employee-download-center .no-files p {
    color: white;
}

.sapphire-employee-body .employee-download-center .no-files a {
    padding: 20px;
    border-radius: 50px;
    background-color: white;
    color: black;
    border: 1px solid white;
    transition: all ease-in-out .5s;
}

.sapphire-employee-body .employee-download-center .no-files a:hover {
    background-color: transparent;
    color: white;
}

.sapphire-employee-body .employee-download-center .have-files {
    width: 100%;
    display: grid;
    gap: 20px;
}

.sapphire-employee-body .employee-download-center .have-files a {
    min-height: 90px;
    padding: 20px;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, .10);
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all ease-in-out .5s;
}

.sapphire-employee-body .employee-download-center .have-files a:hover {
    background-color: white;
    color: black;
}

.sapphire-employee-body .employee-download-center .have-files a svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
    stroke: currentColor;
}

.sapphire-employee-body .employee-download-center .have-files a span {
    color: currentColor;
    overflow-wrap: anywhere;
}

.sapphire-employee-body .employee-download-center .have-files a.add-file {
    justify-content: center;
}


/* ============================================== */
/* ===== SAPPHIRE PROFILE PAGE - CLEARED SECTIONS */
/* ============================================== */


.sapphire-employee-body .profile-cleared-secs {
    margin-top: 20px;
}

.sapphire-employee-body .profile-cleared-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    gap: 20px;
}

.sapphire-employee-body .profile-cleared-grid > div {
    min-width: 30%;
    height: auto;
    max-width: 28%;
    padding: 20px;
    border-radius: 16px;
    background-color: black;
    border: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    transition: all ease-in-out .5s;
}

@media (max-width:1025px) {
    .sapphire-employee-body .profile-cleared-grid > div {
        min-width: calc(50% - 10px);
    }
}

@media (max-width:500px) {
    .sapphire-employee-body .profile-cleared-grid > div {
        min-width: 100%;
    }
}

.sapphire-employee-body .profile-cleared-grid > div:hover {
    transform: translateY(-6px);
    background-color: rgba(255, 255, 255, .06);
}

.sapphire-employee-body .profile-cleared-grid > div h3 {
    color: white;
    font-size: var(--big-font-size);
}

.sapphire-employee-body .profile-cleared-grid > div p {
    color: rgba(255, 255, 255, .68);
}


/* =================================== */
/* ===== SAPPHIRE PROFILE PAGE - TASKS */
/* =================================== */


.sapphire-employee-body .profile-tasks-sec {
    width: 100%;
}

.sapphire-employee-body .profile-tasks-update {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sapphire-employee-body .profile-tasks-table-wrapper {
    width: 100%;
    max-height: 620px;
    overflow: auto;
    padding-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .30) transparent;
}

.sapphire-employee-body .profile-tasks-table-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 20px;
}

.sapphire-employee-body .profile-tasks-table-wrapper table thead {
    position: sticky;
    top: 0;
    z-index: 4;
}

.sapphire-employee-body .profile-tasks-table-wrapper table thead td {
    padding: 20px;
    background-color: white;
    color: black;
    white-space: nowrap;
}

.sapphire-employee-body .profile-tasks-table-wrapper table thead td:first-child {
    border-radius: 16px 0 0 16px;
}

.sapphire-employee-body .profile-tasks-table-wrapper table thead td:last-child {
    border-radius: 0 16px 16px 0;
}

.sapphire-employee-body .profile-tasks-table-wrapper table tbody tr {
    background-color: black;
}

.sapphire-employee-body .profile-tasks-table-wrapper table tbody td {
    padding: 20px;
    color: white;
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    white-space: nowrap;
    vertical-align: middle;
}

.sapphire-employee-body .profile-tasks-table-wrapper table tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px 0 0 16px;
}

.sapphire-employee-body .profile-tasks-table-wrapper table tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, .10);
    border-radius: 0 16px 16px 0;
}

.sapphire-employee-body .profile-tasks-table-wrapper table tbody td:nth-child(4) {
    min-width: 420px;
    white-space: normal;
    color: rgba(255, 255, 255, .70);
}

.sapphire-employee-body .task-priority {
    width: fit-content;
    display: inline-flex;
    padding: 10px 20px;
    border-radius: 50px;
}

.sapphire-employee-body .task-priority.High {
    background-color: #fbeced;
    color: #e5787c;
    border: 1px solid #e5787c;
}

.sapphire-employee-body .task-priority.Low {
    background-color: #ecf1eb;
    color: #7cbb82;
    border: 1px solid #7cbb82;
}

.sapphire-employee-body .profile-tasks-table-wrapper select {
    width: auto;
    padding: 20px;
    border-radius: 50px;
    border: 1px solid transparent;
    cursor: pointer;
}

.sapphire-employee-body .profile-tasks-table-wrapper select.on-going {
    background-color: #fafafa;
    color: #000210;
}

.sapphire-employee-body .profile-tasks-table-wrapper select.completed {
    background-color: #ecf1eb;
    color: #7cbb82;
}

.sapphire-employee-body .profile-tasks-table-wrapper select.cancelled {
    background-color: #fbeced;
    color: #e5787c;
}

.sapphire-employee-body .profile-tasks-table-wrapper select.pending {
    background-color: #f7f4e7;
    color: #de9954;
}

.sapphire-employee-body .profile-tasks-table-wrapper select option {
    color: black;
    background-color: white;
}

.sapphire-employee-body .profile-tasks-update input[type="submit"] {
    width: fit-content;
    padding: 20px;
    border-radius: 50px;
    border: 1px solid white;
    background-color: white;
    color: black;
    cursor: pointer;
    margin-top: 20px;
    transition: all ease-in-out .5s;
}

.sapphire-employee-body .profile-tasks-update input[type="submit"]:hover {
    background-color: transparent;
    color: white;
}

.sapphire-employee-body .empty-table-row {
    text-align: center;
    border-radius: 16px !important;
}


/* ======================================== */
/* ===== SAPPHIRE PROFILE PAGE - RESPONSIVE */
/* ======================================== */


@media (max-width: 1025px) {

    .sapphire-employee-body .profile-dashboard {
        grid-template-columns: 1fr;
    }

    .sapphire-employee-body .profile-side-card {
        min-height: unset;
        position: static;
    }

    .sapphire-employee-body .profile-image-frame {
        min-height: 520px;
    }

    .sapphire-employee-body .profile-main-panel {
        min-height: unset;
    }

    .sapphire-employee-body .profile-overview-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {

    .sapphire-employee-body {
        padding: 20px;
    }

    .sapphire-employee-body .profile-page-shell {
        padding: 0;
    }

    .sapphire-employee-body .profile-welcome-card {
        flex-direction: column;
    }

    .sapphire-employee-body .profile-clearance-chip {
        width: 100%;
    }

    .sapphire-employee-body .profile-metrics-grid {
        grid-template-columns: 1fr;
    }

    .sapphire-employee-body .profile-details-list {
        grid-template-columns: 1fr;
    }

    .sapphire-employee-body .profile-con-btns-container button {
        width: auto;
    }

}

@media (max-width: 500px) {

    .sapphire-employee-body .profile-image-frame {
        min-height: 380px;
    }

}




/* ========================================================================================================= LITEPICKERS CUSTOMIZATIONS */




:root {

    --litepicker-day-color-hover: #000210;
    --litepicker-button-next-month-color-hover: #000210;
    --litepicker-button-prev-month-color-hover: #000210;
}

.litepicker {
    margin: 5px 0px;
}

.litepicker .container__months {
    box-shadow: none !important;
}

.litepicker .container__months .month-item {
    background-color: #fafafa;
    border-radius: 16px;
}




/* ========================================================================================================= CMS MESSAGES */




.process-handle-body {
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at 14% 12%, rgba(244, 0, 255, 0.16), transparent 30%), 
    radial-gradient(circle at 84% 18%, rgba(139, 92, 246, 0.18), transparent 34%), 
    radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.045), transparent 28%), 
    linear-gradient(135deg, #02030f 0%, #050617 45%, #000210 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-handle-body .cms-process-msg {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 5%;
}

.process-handle-body .cms-process-msg p {
    font-size: var(--intermediate-font-size);
}

.process-handle-body .cms-process-msg.ok p {
    color: green;
}

.process-handle-body .cms-process-msg.err p {
    color: red;
}

.process-handle-body .cms-process-msg a {
    width: fit-content;
    height: auto;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.534);
    border-radius: 50px;
    transition: all ease-in-out .5s;
    background-color: white;
    color: #000210;
    text-decoration: none;
}

.process-handle-body .cms-process-msg a:hover {
    background-color: transparent;
    color: white;
}

.process-handle-body .cms-process-msg.two-step-proccess p {
    color: white;
    text-align: center;
}

.process-handle-body .cms-process-msg.two-step-proccess p span {
    color: red;
    font-size: var(--intermediate-font-size);
}

.process-handle-body .cms-process-msg.two-step-proccess > div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.process-handle-body .cms-process-msg.two-step-proccess > div button {
    width: fit-content;
    height: auto;
    padding: 20px;
    border: 1px solid red;
    border-radius: 50px;
    transition: all ease-in-out .5s;
    background-color: red;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.process-handle-body .cms-process-msg.two-step-proccess > div button:hover {
    background-color: transparent;
    color: red;
}



/* ========================================================================================================= PROCESSES PAGES */



.processes-body {
    width: 100%;
    height: auto;
    overflow-x: hidden;
}

.processes-body section {
    width: 100%;
    min-height: 100vh;
    padding: 100px 5%;
}

.processes-body section > a {
    width: fit-content;
    height: auto;
    padding: 15px 20px;
    background-color: #000210;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all ease-in-out .5s;
    border: 1px solid #00021079;
    z-index: 6;
    cursor: pointer;
    border-radius: 50px;
}

.processes-body section > a:hover {
    background-color: transparent;
}

.processes-body section > a svg {
    width: 25px;
    height: 25px;
    stroke: white;
    transition: all ease-in-out .5s;
}

.processes-body section > a:hover svg {
    stroke: #000210;
}

.processes-body section > a span {
    color: white;
    display: block;
    transition: all ease-in-out .5s;
}

.processes-body section > a:hover span {
    color: #000210;
}

.processes-body section .pseudo-back-color {
    width: 400px;
    height: 400px;
    background-color: white;
    position: absolute;
    z-index: 4;
}

.processes-body section .pseudo-back-color.top {
    bottom: 100%;
    right: 100%;
    filter: drop-shadow(650px 650px 300px rgb(119, 0, 255));
}

.processes-body section .pseudo-back-color.bottom {
    bottom: 0px;
    left: 100%;
    filter: drop-shadow(-850px -400px 300px rgb(255, 0, 0));
    opacity: .8;
}

.processes-body section .social-media-post-delete-btn {
    width: 100%;
    height: auto;
    margin-top: 30px;
    display: flex;
    justify-content: end;
}

@media (min-width:1025px) {
    .processes-body section .social-media-post-delete-btn {
        padding-right: 5%;
    }
}

.processes-body section .social-media-post-delete-btn a {
    width: auto;
    height: auto;
    padding: 20px;
    border-radius: 50px;
    background-color: red !important;
    color: white;
    border: 1px solid red !important;
    transition: all ease-in-out .3s;
    text-decoration: none;
}

.processes-body section .social-media-post-delete-btn a:hover {
    background-color: transparent !important;
    color: red;
}

.processes-body section form {
    width: 100%;
    height: auto;
    padding: 5%;
    border-radius: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

@media (max-width:1025px) {
    .processes-body section form {
        padding: 10% 0%;
    }
}

.processes-body section form input[type="submit"] {
    width: fit-content;
    height: auto;
    padding: 20px;
    background-color: #000210;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all ease-in-out .5s;
    border: 1px solid #00021079;
    z-index: 6;
    cursor: pointer;
    color: white;
    border-radius: 50px;
}

.processes-body section form input[type="submit"]:hover {
    background-color: transparent;
    color: #000210;
}

.processes-body section form .process-form-sec {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

.processes-body section form .process-form-sec h2 {
    width: 100%;
    font-size: var(--regular-font-size);
    padding-bottom: 20px;
    border-bottom: 1px solid #00021038;
}

.processes-body section form .process-form-sec > div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
}

@media (max-width:1025px) {
    .processes-body section form .process-form-sec > div {
        flex-direction: column;
    }
}

.processes-body section form .process-form-sec > div > .process-form-sec-header {
    width: 40%;
    height: auto;
}

@media (max-width:1025px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-header {
        width: 100%;
    }
}

.processes-body section form .process-form-sec > div > .process-form-sec-header h3 {
    font-size: var(--intermediate-font-size);
    font-weight: normal;
}

.processes-body section form .process-form-sec > div > .process-form-sec-header p {
    margin-top: 10px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body {
    width: 55%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 40px;
}

@media (max-width:1025px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body {
        width: 100%;
        margin-top: 30px;
    }
}

@media (max-width:500px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body {
        gap: 20px;
    }
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: end;
    gap: 40px;
}

@media (max-width:1443px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row#enPrimaryFontRow,
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row#arPrimaryFontRow {
        flex-wrap: wrap;
    }
}

@media (max-width:768px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row {
        flex-wrap: wrap;
    }
}

@media (max-width:500px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row {
        gap: 20px;
    }
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row.colors-palette-row {
    align-items: center;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp {
    width: 45%;
    height: auto;
}

@media (max-width:500px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp {
        width: 100%;
    }
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.full {
    width: 100%;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp label {
    width: 100%;
    white-space: nowrap;
    display: block;
    margin-bottom: 10px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp label span.mandatory {
    color: red;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp label span.optional {
    color: #000210;
    opacity: .7;
    font-size: var(--tiny-font-size);
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.full input {
    width: calc(45% + 40px + 45%);
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp input {
    width: 100%;
    padding: 20px;
    border: none;
    background-color: #fafafa;
    color: #000210;
    box-shadow: 0px 0px 10px 10px #0002100e;
    border-radius: 50px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.custom-date-picker .custome-date-picker {
    position: relative;
    display: flex;
    align-items: center;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.custom-date-picker .custome-date-picker input {
    width: 100%;
    padding: 20px;
    background-color: #fafafa;
    color: #000210;
    box-shadow: 0px 0px 10px 10px #0002100e;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.custom-date-picker .custome-date-picker svg {
    width: 30px;
    height: 30px;
    stroke: #000210;
    position: absolute;
    right: 20px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp select {
    width: 100%;
    height: auto;
    padding: 20px;
    border: none;
    background-color: #fafafa;
    color: #000210;
    box-shadow: 0px 0px 10px 10px #0002100e;
    border-radius: 50px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.full select {
    width: calc(45% + 40px + 45%);
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.full textarea {
    width: calc(45% + 40px + 45%);
    min-height: 200px;
    padding: 40px 20px;
    border: none;
    background-color: #fafafa;
    color: #000210;
    box-shadow: 0px 0px 10px 10px #0002100e;
    border-radius: 50px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: end;
    gap: 40px;
    margin-top: 50px;
    margin-bottom: 30px;
}

@media (min-width:1025px) and (max-width:1443px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:768px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:500px) {
    .processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid {
        grid-template-columns: repeat(1,1fr);
    }
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid.files-grid,
.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid.models-numbers-grid {
    margin-top: 0px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid > div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid > div input[type="checkbox"] {
    width: fit-content;
    padding: 0px;
    box-shadow: unset;
    border: none;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid > div label {
    margin: 0px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid.numbers-grid > div,
.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid.files-grid > div {
    width: 100%;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid.numbers-grid > div input[type="number"] {
    width: 100%;
    padding: 20px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp > div.grid.files-grid > div input[type="file"] {
    padding: 20px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row button {
    width: 50px;
    height: 50px;
    padding: 10px;
    background-color: #000210;
    color: white;
    border: 1px solid #0002104f;
    border-radius: 8px;
    transition: all ease-in-out .5s;
    cursor: pointer;
    margin-bottom: 8px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row button:hover {
    background-color: transparent;
    color: #000210;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row button svg {
    width: 100%;
    height: 100%;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.color p {
    width: fit-content;
    background-color: #000210;
    color: white;
    font-weight: normal;
    padding: 10px;
    margin-top: 20px;
    border-radius: 8px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.color p b {
    font-weight: normal;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.color .color-btn-wrap {
    width: 100%;
    height: 150px;
    position: relative;
    margin-top: 20px;
    display: block;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.color .color-btn-wrap button {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    border-radius: 8px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.color .color-btn-wrap input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.color.hidden {
    display: none;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .process-form-sec-body-row .opt-grp.color.active {
    display: block !important;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .form-hint {
    margin-top: 10px;
    font-size: var(--tiny-font-size);
    opacity: .7;
    color: #000210;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .form-hint.is-max {
    opacity: 1;
    font-weight: 600;
    color: red;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body #socialMediaInputs { 
    display: none; 
}

.processes-body section form .process-form-sec > div > .process-form-sec-body #socialMediaInputs.is-visible { 
    display: block; 
}

/* PASSWORD VALIDATION */

.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row {
    flex-direction: column;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
} 

.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > div {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > div > .password-strength-point {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(128, 128, 128, 0.007);
    border: 1px solid #00021011;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > div > .password-strength-point.active {
    background-color: rgb(0, 197, 0);
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > div p {
    color: #000210;
}


/* == GLOW EFFECT == */


.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > div > .password-strength-point {
    background-color: rgba(49, 48, 46, 0.06);     /* radiant idle fill */
    border: 1px solid rgba(48, 47, 45, 0.22);     /* radiant idle border */
    box-shadow: 0 0 10px rgba(24, 24, 23, 0.1);  /* soft glow */
    transition: all .25s ease;
}

.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > div > .password-strength-point.active {
    background-color: #00ff7b;                       /* strong green */
    border: 1px solid rgba(0, 255, 123, 0.55);
    box-shadow:
        0 0 10px rgba(0, 255, 123, 0.55),
        0 0 22px rgba(0, 255, 123, 0.35);           /* glow */
}

/* optional: make text a bit richer without changing layout */
.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > div p,
.processes-body section form .process-form-sec > div > .process-form-sec-body .password-row .password-strength-meter > p {
    color: #000210; /* keep your base, no layout change */
}

/* Red glow ONLY when submit is clicked and rule is missing */
.password-strength-point.invalid{
    background-color: rgba(255, 40, 40, 0.12) !important;
    border: 1px solid rgba(255, 40, 40, 0.75) !important;
    box-shadow:
        0 0 10px rgba(255, 40, 40, 0.60),
        0 0 22px rgba(255, 40, 40, 0.35) !important;
}

/* Keep your green active on top (still wins) */
.password-strength-point.active{
    background-color: #00ff7b !important;
    border: 1px solid rgba(0, 255, 123, 0.55) !important;
    box-shadow:
        0 0 10px rgba(0, 255, 123, 0.55),
        0 0 22px rgba(0, 255, 123, 0.35) !important;
}



/* == END == */