@charset "UTF-8";
@import "../css/all.css";
@import "../css/duotone-light.css";
@import "../css/mania.css";
@import "../css/manialtr.css";

@font-face {
    font-family: Vazir FD;
    src: url("fonts/Vazir-Light-FD.woff");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: Vazir FD;
    src: url("fonts/Vazir-Regular-FD.woff");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazir FD;
    src: url("fonts/Vazir-Bold-FD.woff");
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: Vazir FD;
    src: url("fonts/Vazir-Medium-FD.woff");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "mania";
    src: url("fonts/mania.woff?ahg0bg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
/*============================ [ breakpoints for responsive in sass ] ==================================*/
/*==============================================  css Reset ==============================================*/
* {
    direction: rtl;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

    *:focus {
        outline: none !important;
    }

audio, video {
    display: inline-block;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.125rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.8125rem;
}

h6 {
    font-size: 0.9375rem;
}

p {
    margin: 0;
    padding: 0;
}

blockquote {
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.7;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

    blockquote cite {
        display: block;
        font-style: normal;
        font-weight: 600;
        margin-top: 0.5em;
    }

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: Vazir FD;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code, kbd, tt, var {
    font-family: Vazir FD;
    font-size: 0.9375rem;
}

abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark, ins {
    background: #eee;
    text-decoration: none;
}

big {
    font-size: 125%;
}

blockquote {
    quotes: "" "";
}

q {
    quotes: "“" "”" "‘" "’";
}

blockquote:before, blockquote:after {
    content: "";
}

label {
    display: block;
    font-weight: 500;
    margin-bottom: 0;
}

fieldset {
    margin-bottom: 1em;
}

select {
    border: 1px solid #bbb;
    border-radius: 3px;
    height: 3em;
    max-width: 100%;
}

b, strong {
    font-weight: bold;
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
}

body {
    font-family: Vazir FD;
    direction: ltr;
    position: relative;
    overflow-x: hidden;
    font-weight: normal;
    text-align: right;
    color: #003366;
    font-size: 1rem;
}

input, textarea, button, select, option {
    font-family: Vazir FD;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
}

    button, input[type=submit] {
        cursor: pointer;
    }

a {
    text-decoration: none;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    color: inherit;
    font-weight: 500;
    font-size: 1rem;
}

ul {
    list-style: none;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

figure {
    margin: 0;
}

button {
    background-color: transparent;
    border: none;
}

label {
    margin-bottom: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

/*===================== [ root ] =================================*/
:root {
    /*==== colors ====*/
    --color1: #044464;
    --color2: #1FABE2;
    --color3: #fff;
    --color4: #DCECF2;
    --color5: #E2C064;
    --color6: #3B3E40;
    --color7: #FF8357;
    --color8: #94C573;
    --color9: #7D8E99;
    --color10: #CDDAE0;
    --color11: #CFE0E7;
    --color12: #D12929;
    --color13: #F6CF00;
    --color14: #588298;
    --color15: #2E637E;
    --color16: #E2C064;
    --color-bg: #F8FBFC;
    --color17: #2E637E;
    --color18: #64CBCA;
    --color19: #94C573;
    --color20: #F8FBFC;
    --color21: #D1DDE2;
    --color-blue-icon: #D6E7ED;
    /*==== shadow ====*/
    --shadow-darkblue: 0 0 15px rgba(8,65,120,.2);
    --shadow-tooltip: 0 0 20px rgba(0,0,0,.08);
    --shadow-light: 0 2px 5px rgba(0,0,0,.08);
    --shadow-med: 0 2px 8px rgba(0,0,0,.05);
    --shadow-dropdown: 0 5px 15px rgba(8,65,120,.1);
    --shadow-box: 0 4px 10px rgba(8,65,120,.01);
    --shadow-boxfile: 0 10px 25px rgba(29, 113, 184, 0.1);
    --shadow-modal: 0 0 30px rgba(8,65,120,.1);
    --shadow-inset-white: inset 0 5px 45px rgba(255,255,255,1), inset 0 -5px 45px rgba(255,255,255,1);
    --shadow-form: 0 4px 10px rgba(0, 0, 0, .06 );
    /*==== fonts ====*/
    --text12: .75rem;
    --text14: .875rem;
    --text16: 1rem;
    --text18: 1.125rem;
    --text20: 1.25rem;
    --text22: 1.375rem;
    --text25: 1.563rem;
    --text30: 1.875rem;
    --text38: 2.375rem;
    --text40: 2.5rem;
}

@media (max-width:576px) {
    :root {
        --shadow-boxfile: 0 2px 5px rgba(29, 113, 184, 0.05);
    }
}

/*==== font ====*/
.text14 {
    font-size: var(--text14);
}

.text20 {
    font-size: var(--text20);
}

.text38 {
    font-size: var(--text38);
}

/*-------------------------------------------------------------------------------------------*/
.content__container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 10px 0 10px;
    z-index: 20;
}

@media (max-width:1800px) {
    .content__container {
        padding: 0 10px 0 10px;
    }
}

@media (max-width:768px) {
    .content__container {
        padding: 0 10px;
    }
}

@media (max-width:576px) {
    .content__container {
        padding: 0 10px;
    }
}

/*===================== [ slick slider ] =========================*/
.slick-track {
    display: flex !important;
    width: 100%;
}

/*need for slick*/
* {
    min-height: 0;
    min-width: 0;
}

.slick-slide {
    height: auto;
    width: 100%;
}

/*-------------------------------------------------------------------------------------------*/
i.mania,
span.mania {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "mania" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

i {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'Font Awesome 6 Pro' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mania-calender-add:before {
    content: "\e9ba";
}

.mania-imortant:before {
    content: "\e9bb";
}

.mania-important-2:before {
    content: "\e9bc";
}

.mania-spam:before {
    content: "\e9b8";
}

.mania-move:before {
    content: "\e9b9";
}

.mania-reply:before {
    content: "\e9b4";
}

.mania-refresh-2:before {
    content: "\e9b7";
}

.mania-new-mail:before {
    content: "\e9b2";
}

.mania-star-mail:before {
    content: "\e9ab";
}

.mania-draft-mail:before {
    content: "\e9ac";
}

.mania-important-mail:before {
    content: "\e9ad";
}

.mania-inbox-mail:before {
    content: "\e9ae";
}

.mania-outbox-mail:before {
    content: "\e9af";
}

.mania-recycle-bin:before {
    content: "\e9b0";
}

.mania-send-mail:before {
    content: "\e9b1";
}

.mania-refresh:before {
    content: "\e9a9";
}

.mania-padlock:before {
    content: "\e9aa";
}

.mania-albums:before {
    content: "\e99d";
}

.mania-albums-share:before {
    content: "\e99e";
}

.mania-calender-6:before {
    content: "\e9a0";
}

.mania-back:before {
    content: "\e99f";
}

.mania-delete-tik:before {
    content: "\e9a1";
}

.mania-document-2:before {
    content: "\e9a2";
}

.mania-download-cloud:before {
    content: "\e9a3";
}

.mania-download-cloud-tik:before {
    content: "\e9a4";
}

.mania-films:before {
    content: "\e9a5";
}

.mania-pictures:before {
    content: "\e9a6";
}

.mania-star-tik:before {
    content: "\e9a7";
}

.mania-user-share:before {
    content: "\e9a8";
}

.mania-user-add:before {
    content: "\e99c";
}

.mania-upload:before {
    content: "\e99b";
}

.mania-forbidden:before {
    content: "\e98f";
}

.mania-online:before {
    content: "\e992";
}

.mania-gallery:before {
    content: "\e90b";
}

.mania-edit:before {
    content: "\e905";
}

.mania-edit-2:before {
    content: "\e906";
}

.mania-net-stroke:before {
    content: "\e990";
}

.mania-job-stroke:before {
    content: "\e991";
}

.mania-puzzle:before {
    content: "\e917";
}

.mania-folder:before {
    content: "\e91e";
}

.mania-activity:before {
    content: "\e900";
}

.mania-chart:before {
    content: "\e920";
}

.mania-files:before {
    content: "\e925";
}

.mania-medal:before {
    content: "\e930";
}

.mania-azan:before {
    content: "\e901";
}

.mania-note:before {
    content: "\e926";
}

.mania-data:before {
    content: "\e904";
}

.mania-file-event:before {
    content: "\e908";
}

.mania-files1:before {
    content: "\e909";
}

.mania-file-setting:before {
    content: "\e90a";
}

.mania-monitor-man:before {
    content: "\e90c";
}

.mania-brain:before {
    content: "\e91b";
}

.mania-dna:before {
    content: "\e91f";
}

.mania-fluctuation:before {
    content: "\e927";
}

.mania-graduated-1:before {
    content: "\e929";
}

.mania-graduation-hat:before {
    content: "\e92a";
}

.mania-library:before {
    content: "\e92f";
}

.mania-universitatscampus:before {
    content: "\e946";
}

.mania-work-3:before {
    content: "\e94d";
}

.mania-assist:before {
    content: "\e957";
}

.mania-education:before {
    content: "\e958";
}

.mania-research:before {
    content: "\e959";
}

.mania-dashboard:before {
    content: "\e92b";
}

.mania-photo-camera:before {
    content: "\e936";
}

.mania-play:before {
    content: "\e939";
}

.mania-play-button1:before {
    content: "\e93a";
}

.mania-video-camera:before {
    content: "\e94a";
}

.mania-image-gallery:before {
    content: "\e9b3";
}

.mania-pdf:before {
    content: "\e970";
}

.mania-tik:before {
    content: "\e913";
}

.mania-close:before {
    content: "\e94b";
}

.mania-add:before {
    content: "\e94c";
}

.mania-minus:before {
    content: "\e95e";
}

.mania-plus:before {
    content: "\e9b6";
}

.mania-minus2:before {
    content: "\e9b5";
}

.mania-plus1:before {
    content: "\ea2c";
}

.mania-add2:before {
    content: "\e92d";
}

.mania-more:before {
    content: "\e96a";
}

.mania-more2:before {
    content: "\e92e";
}

.mania-bars:before {
    content: "\e96c";
}

.mania-phone-stroke:before {
    content: "\e993";
}

.mania-map-stroke:before {
    content: "\e994";
}

.mania-placeholder-2:before {
    content: "\e938";
}

.mania-pin:before {
    content: "\e937";
}

.mania-contact:before {
    content: "\e903";
}

.mania-phone-call:before {
    content: "\e935";
}

.mania-phone1:before {
    content: "\e97b";
}

.mania-phone:before {
    content: "\e984";
}

.mania-phone-call1:before {
    content: "\e95d";
}

.mania-envelope:before {
    content: "\e922";
}

.mania-envelope-02:before {
    content: "\e923";
}

.mania-mail1:before {
    content: "\e975";
}

.mania-mail2:before {
    content: "\e97a";
}

.mania-mail:before {
    content: "\e95b";
}

.mania-envelope-21:before {
    content: "\e924";
}

.mania-fax2:before {
    content: "\e95f";
}

.mania-fax1:before {
    content: "\e960";
}

.mania-company-stroke:before {
    content: "\e995";
}

.mania-user3:before {
    content: "\e931";
}

.mania-login:before {
    content: "\e967";
}

.mania-user1:before {
    content: "\e971";
}

.mania-user2:before {
    content: "\e989";
}

.mania-profile:before {
    content: "\e90e";
}

.mania-user-02:before {
    content: "\e948";
}

.mania-user:before {
    content: "\e97e";
}

.mania-profile-left:before {
    content: "\e90f";
}

.mania-members:before {
    content: "\e932";
}

.mania-global-assist:before {
    content: "\e95c";
}

.mania-world-pride-day:before {
    content: "\e94e";
}

.mania-calender-5:before {
    content: "\e996";
}

.mania-history:before {
    content: "\e933";
}

.mania-Group-56:before {
    content: "\e94f";
}

.mania-time:before {
    content: "\e955";
}

.mania-clock:before {
    content: "\e986";
}

.mania-Group-721:before {
    content: "\e951";
}

.mania-calender-event:before {
    content: "\e902";
}

.mania-calender-4:before {
    content: "\e934";
}

.mania-calendar:before {
    content: "\e91c";
}

.mania-calendar-02:before {
    content: "\e91d";
}

.mania-Schedue:before {
    content: "\e976";
}

.mania-table:before {
    content: "\e96f";
}

.mania-calendar-2:before {
    content: "\e95a";
}

.mania-eita:before {
    content: "\e921";
}

.mania-bisphon:before {
    content: "\e91a";
}

.mania-pinterest:before {
    content: "\e961";
}

.mania-instagram:before {
    content: "\e962";
}

.mania-youtube:before {
    content: "\e963";
}

.mania-facebook:before {
    content: "\e965";
}

.mania-aparat:before {
    content: "\e918";
}

.mania-bale:before {
    content: "\e919";
}

.mania-instagram-2:before {
    content: "\e92c";
}

.mania-linkedin11:before {
    content: "\e956";
}

.mania-rubika1:before {
    content: "\e93d";
}

.mania-soroush:before {
    content: "\e941";
}

.mania-telegram:before {
    content: "\e944";
}

.mania-twitter:before {
    content: "\e945";
}

.mania-speech-bubble:before {
    content: "\e979";
}

.mania-Soroush-Logo-LimooGraphic:before {
    content: "\e9ec";
}

.mania-whatsapp:before {
    content: "\ea1a";
}

.mania-youtube2:before {
    content: "\ea1b";
}

.mania-rss1:before {
    content: "\ea2e";
}

.mania-left-arrow:before {
    content: "\e98e";
}

.mania-right-arrow:before {
    content: "\e98c";
}

.mania-up-arrow:before {
    content: "\e964";
}

.mania-down-arrow:before {
    content: "\e998";
}

.mania-up-arrow1:before {
    content: "\e999";
}

.mania-up-arrow-2:before {
    content: "\e96e";
}

.mania-right-arrow-2:before {
    content: "\e98b";
}

.mania-down-arrow-2:before {
    content: "\e99a";
}

.mania-left-arrow-2:before {
    content: "\e98d";
}

.mania-copy:before {
    content: "\e947";
}

.mania-info:before {
    content: "\e997";
}

.mania-weather:before {
    content: "\e915";
}

.mania-notification:before {
    content: "\e90d";
}

.mania-bell-fill-1:before {
    content: "\e950";
}

.mania-setting:before {
    content: "\e911";
}

.mania-gears:before {
    content: "\e9d8";
}

.mania-login1:before {
    content: "\ea29";
}

.mania-logout:before {
    content: "\e93b";
}

.mania-view1:before {
    content: "\e914";
}

.mania-view:before {
    content: "\e988";
}

.mania-search2:before {
    content: "\e910";
}

.mania-search1:before {
    content: "\e987";
}

.mania-status:before {
    content: "\e912";
}

.mania-delete:before {
    content: "\e93c";
}

.mania-share:before {
    content: "\e93e";
}

.mania-share1:before {
    content: "\e977";
}

.mania-share-fill-1:before {
    content: "\e952";
}

.mania-star:before {
    content: "\e942";
}

.mania-english:before {
    content: "\e907";
}

.mania-link:before {
    content: "\e96b";
}

.mania-tags:before {
    content: "\e943";
}

.mania-unavailable2:before {
    content: "\e949";
}

.mania-home-1:before {
    content: "\ea26";
}

.mania-late:before {
    content: "\e98a";
}

.mania-accessibility:before {
    content: "\e916";
}

.mania-gap:before {
    content: "\e928";
}

.mania-sitemap:before {
    content: "\e93f";
}

.mania-sitemap-2:before {
    content: "\e940";
}

.mania-mic:before {
    content: "\e968";
}

.mania-mic-fill-1:before {
    content: "\e953";
}

.mania-Vector1:before {
    content: "\e954";
}

.mania-like:before {
    content: "\e966";
}

.mania-Icon-awesome-sitemap:before {
    content: "\e9c6";
}

.mania-archive:before {
    content: "\e96d";
}

.mania-network:before {
    content: "\e973";
}

.mania-visit-card:before {
    content: "\e969";
}

.mania-pdf1:before {
    content: "\e972";
}

.mania-news:before {
    content: "\e974";
}

.mania-file-search:before {
    content: "\e978";
}

.mania-filter_icon:before {
    content: "\e97c";
}

.mania-chat:before {
    content: "\e97d";
}

.mania-article:before {
    content: "\e97f";
}

.mania-book:before {
    content: "\e980";
}

.mania-chart1:before {
    content: "\e981";
}

.mania-edu:before {
    content: "\e982";
}

.mania-pencil:before {
    content: "\e983";
}

.mania-print:before {
    content: "\e985";
}

input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
    color: var(--color9);
    opacity: 1; /* Firefox */
}

input::placeholder, textarea::placeholder, select::placeholder {
    color: var(--color9);
    opacity: 1; /* Firefox */
}

.form__personal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
    margin: 20px 0 30px 0;
}

@media (max-width:1200px) {
    .form__personal {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width:1080px) {
    .form__personal {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:489px) {
    .form__personal {
        grid-template-columns: 1fr;
    }
}

.form__status {
    margin: 20px 0 5px 0;
}

.radio-list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
}

@media (max-width:1200px) {
    .radio-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:576px) {
    .radio-list {
        grid-template-columns: 1fr;
    }
}

/*=== [ login > checkbox ] ===*/
/* Create a custom checkbox */
.check-item {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-max-content;
    width: max-content;
    /* Create a custom checkbox */
    /* Create the checkmark/indicator (hidden when not checked) */
    /* Show the checkmark when checked */
    /* =============== Create a custom checkbox style 2 ==============*/
}

    .check-item input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .check-item .checkmark {
        position: absolute;
        top: 50%;
        left: -35px;
        height: 20px;
        width: 20px;
        background-color: var(--color4);
        border-radius: 50%;
        transform: translateY(-50%);
    }

        .check-item .checkmark:after {
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-family: "mania";
            content: "\e913";
            font-size: 8px;
            color: var(--color8);
            position: absolute;
            display: none;
        }

    .check-item input:checked ~ .checkmark:after {
        display: block;
    }

    .check-item .check-name {
        transition: 0.3s;
        font-weight: normal;
        font-size: var(--text14);
        font-weight: 300;
    }

@media (max-width:576px) {
    .check-item .check-name {
        font-size: var(--text12);
    }
}

.check-item .check-name span {
    transition: 0.3s;
    font-weight: normal;
    font-size: var(--text14);
}

@media (max-width:576px) {
    .check-item .check-name span {
        font-size: var(--text12);
    }
}

.check-item:hover {
    /* Show the checkmark when checked */
}

    .check-item:hover .checkmark:after {
        display: block;
    }

.check-item__style2 {
    width: auto;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 15px;
    /* The container */
    position: relative;
    cursor: pointer;
    font-size: var(--text12);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--color6);
    padding: 15px;
    transition: 0.3s;
    background-color: var(--color-bg);
    border: 1px solid var(--color4);
    /* Hide the browser's default checkbox */
    /* Create a custom checkbox */
}

@media (max-width:1200px) {
    .check-item__style2 {
        padding: 10px;
    }
}

.check-item__style2:hover {
    border: 1px solid var(--color8);
    background-color: var(--color3);
}

.check-item__style2 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.check-item__style2 .checkmark {
    position: absolute;
    top: 50%;
    left: 15px;
    height: 20px;
    width: 20px;
    background-color: transparent;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid var(--color4);
    transition: 0.3s;
    color: var(--color3);
}

@media (max-width:1200px) {
    .check-item__style2 .checkmark {
        left: 10px;
    }
}

.check-item__style2:hover input ~ .checkmark {
    background-color: var(--color8);
    border: 1px solid var(--color8);
}

.check-item__style2 input:checked ~ .checkmark {
    background-color: var(--color8);
    color: var(--color3);
    border: 1px solid var(--color8);
}

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

.check-item__style2 input:checked ~ .checkmark:after {
    display: block;
}

.check-item__style2 .checkmark:after {
    content: "\e913";
    font-family: mania;
    left: 50%;
    top: 50%;
    font-size: 8px;
    transform: translateX(-50%) translateY(-50%);
}

.check-item__style3 {
    width: 100%;
    display: flex;
    align-items: center;
    /* The container */
    position: relative;
    cursor: pointer;
    font-size: var(--text14);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: 0.3s;
    color: var(--color3);
    padding-right: 30px;
    margin-bottom: 10px;
    font-weight: 300;
    /* Hide the browser's default checkbox */
    /* Create a custom checkbox */
}

@media (max-width:1800px) {
    .check-item__style3 {
        font-size: var(--text12);
    }
}

.check-item__style3 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.check-item__style3 .checkmark {
    position: absolute;
    top: 50%;
    right: 0;
    height: 20px;
    width: 20px;
    background-color: var(--color-bg);
    transform: translateY(-50%);
    border-radius: 5px;
    border: 1px solid var(--color4);
    transition: 0.3s;
    color: var(--color3);
}

.check-item__style3:hover input ~ .checkmark {
    background-color: var(--color8);
    border: 1px solid var(--color8);
}

.check-item__style3 input:checked ~ .checkmark {
    background-color: var(--color8);
    color: var(--color3);
    border: 1px solid var(--color8);
}

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

.check-item__style3 input:checked ~ .checkmark:after {
    display: block;
}

.check-item__style3 .checkmark:after {
    content: "\e913";
    font-family: mania;
    left: 50%;
    top: 50%;
    font-size: 8px;
    transform: translateX(-50%) translateY(-50%);
}

.check-item__style4 {
    display: flex;
    align-items: center;
    /* The container */
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    padding-right: 30px;
    width: 100%;
    /* Create a custom checkbox */
}

    .check-item__style4 .checkmark {
        position: absolute;
        top: 50%;
        right: 0;
        height: 20px;
        width: 20px;
        transform: translateY(-50%);
        transition: 0.3s;
    }

.check-item__style5 {
    /* Hide the browser's default checkbox */
    /* Create a custom checkbox */
}

@media (max-width:1800px) {
    .check-item__style5 {
        font-size: var(--text12);
    }
}

.check-item__style5 .check-item5 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The container */
    position: relative;
    cursor: pointer;
    font-size: var(--text12);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: 0.3s;
    color: var(--color3);
    padding-right: 30px;
    margin-bottom: 10px;
    font-weight: 300;
}

.check-item__style5 input[type=checkbox] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.check-item__style5 .checkmark {
    position: absolute;
    top: 50%;
    right: 0;
    height: 20px;
    width: 20px;
    background-color: var(--color5);
    transform: translateY(-50%);
    border-radius: 5px;
    border: 1px solid var(--color5);
    transition: 0.3s;
    color: var(--color8);
}

.check-item__style5:hover input ~ .checkmark {
    background-color: var(--color5);
    border: 1px solid var(--color5);
}

.check-item__style5 input:checked ~ .checkmark {
    background-color: var(--color5);
    color: var(--color8);
    border: 1px solid var(--color5);
}

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

.check-item__style5 input:checked ~ .checkmark:after {
    display: block;
}

.check-item__style5 input:hover ~ .checkmark:after {
    display: block;
}

.check-item__style5 .checkmark:after {
    content: "\e913";
    font-family: mania;
    left: 50%;
    top: 50%;
    font-size: 8px;
    transform: translateX(-50%) translateY(-50%);
    color: var(--color8);
}

.check-item__style5 .icon-check {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color5);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .check-item__style5 .icon-check i, .check-item__style5 .icon-check svg, .check-item__style5 .icon-check img {
        width: 12px;
        height: 12px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* check choose */
.check-choose__item {
    display: none;
}

.check-choose .check-choose__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.check-choose__item {
    height: 45px;
    font-size: var(--text12);
    width: 100%;
    position: relative;
}

@media (max-width:1800px) {
    .check-choose__item {
        height: 40px;
    }
}

.check-choose__item input[type=text] {
    width: calc(100% - 45px);
    height: 100%;
    border-radius: 60px;
    padding: 0 10px;
    background-color: var(--color5);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: lighter;
}

@media (max-width:1800px) {
    .check-choose__item input[type=text] {
        width: calc(100% - 40px);
        font-size: 10px;
    }
}

.check-choose__icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--color5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

@media (max-width:1800px) {
    .check-choose__icon {
        width: 40px;
        height: 40px;
    }
}

.check-choose__icon i, .check-choose__icon svg, .check-choose__icon img {
    width: 15px;
    height: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.check-choose__icon:hover {
    background-color: var(--color5);
}

    .check-choose__icon:hover i, .check-choose__icon:hover svg, .check-choose__icon:hover img {
        transform: scale(1.2);
    }

.check-choose__icon.tooltip__parent .tooltip__item {
    display: none;
    opacity: 0;
    position: absolute;
}

.check-choose__icon.tooltip__parent:hover .tooltip__item {
    display: none;
    opacity: 0;
    position: absolute;
}

.check-choose__icon.tooltip__parent_done .tooltip__item {
    display: inline-flex;
    opacity: 1;
    position: absolute;
}

.check-choose__shape {
    position: absolute;
    right: 33px;
}

@media (max-width:1800px) {
    .check-choose__shape {
        right: 31px;
    }
}

.check-choose__shape svg {
    fill: var(--color5);
    color: var(--color5);
    width: 30px;
    height: 30px;
}

@media (max-width:1800px) {
    .check-choose__shape svg {
        height: 25px;
        width: 25px;
    }
}

.check-item__style2 [type=checkbox]:checked ~ label {
    border: 1px solid var(--color8);
}

.radio-item label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    height: 80px;
    background: var(--color-bg);
    border: 1px solid var(--color4);
    border-radius: 15px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    position: relative;
    transition: 0.4s ease-in-out 0s;
    color: var(--color6);
}

    .radio-item label h6 {
        font-size: var(--text14);
    }

@media (max-width:576px) {
    .radio-item label h6 {
        font-size: var(--text12);
    }
}

.radio-item label p {
    font-size: var(--text12);
    color: var(--color9);
    margin-top: 5px;
}

.radio-item label::after, .radio-item label::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    display: none;
}

.radio-item label::after {
    height: 19px;
    width: 19px;
    border: 2px solid var(--color4);
    left: 19px;
    top: calc(50% - 12px);
}

.radio-item label::before {
    background: var(--color8);
    height: 15px;
    width: 15px;
    left: 21px;
    top: calc(50% - 10px);
    transform: scale(1.5) translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in-out 0s;
}

.radio-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color9);
}

    .radio-icon i, .radio-icon svg, .radio-icon img {
        width: 100%;
        height: 100%;
    }

.radio-item [type=radio] {
    display: none;
}

    .radio-item [type=radio]:checked ~ label::before {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

.radio-item-green [type=radio]:checked ~ label {
    border-color: var(--color8);
    color: var(--color8);
}

    .radio-item-green [type=radio]:checked ~ label::after {
        border-color: var(--color8);
    }

.radio-item-green .radio-icon {
    color: var(--color8);
}

.radio-item-green:hover label h6 {
    color: var(--color8);
}

.radio-item-orange [type=radio]:checked ~ label {
    border-color: var(--color7);
    color: var(--color7);
}

    .radio-item-orange [type=radio]:checked ~ label::after {
        border-color: var(--color7);
    }

    .radio-item-orange [type=radio]:checked ~ label .radio-icon {
        color: var(--color7);
    }

.radio-item-orange .radio-icon {
    color: var(--color7);
}

.radio-item-orange:hover label h6 {
    color: var(--color7);
}

.radio-item-red [type=radio]:checked ~ label {
    border-color: var(--color12);
    color: var(--color12);
}

    .radio-item-red [type=radio]:checked ~ label::after {
        border-color: var(--color12);
    }

    .radio-item-red [type=radio]:checked ~ label .radio-icon {
        color: var(--color12);
    }

.radio-item-red .radio-icon {
    color: var(--color12);
}

.radio-item-red:hover label h6 {
    color: var(--color12);
}

.radio-item-gray [type=radio]:checked ~ label {
    border-color: var(--color9);
    color: var(--color9);
}

    .radio-item-gray [type=radio]:checked ~ label::after {
        border-color: var(--color9);
    }

    .radio-item-gray [type=radio]:checked ~ label .radio-icon {
        color: var(--color9);
    }

.radio-item-gray .radio-icon {
    color: var(--color9);
}

.radio-item-gray:hover label h6 {
    color: var(--color9);
}

.form__radio--s2 .radio-item label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 15px;
    height: 45px;
    background: var(--color3);
    border: none;
    border-radius: 60px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    position: relative;
    transition: 0.4s ease-in-out 0s;
    color: var(--color5);
    box-shadow: var(--shadow-form);
}

    .form__radio--s2 .radio-item label .radio-icon--s2 {
        display: flex;
        align-items: center;
        font-size: var(--text14);
        height: 14px;
        width: 14px;
        color: var(--color5);
        margin-left: 10px;
    }

        .form__radio--s2 .radio-item label .radio-icon--s2 i, .form__radio--s2 .radio-item label .radio-icon--s2 svg, .form__radio--s2 .radio-item label .radio-icon--s2 img {
            height: 14px;
            width: 14px;
            fill: var(--color5);
            color: var(--color5);
        }

    .form__radio--s2 .radio-item label .radio-text--s2 {
        display: flex;
        align-items: center;
        font-size: var(--text12);
        font-weight: 500;
    }

        .form__radio--s2 .radio-item label .radio-text--s2 p {
            position: relative;
            padding-right: 10px;
            margin-right: 10px;
            margin-top: 0;
            font-size: 11px;
            font-weight: lighter;
        }

            .form__radio--s2 .radio-item label .radio-text--s2 p::before {
                content: "-";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
            }

.form__radio--s2 .radio-item:hover label {
    background-color: var(--color4);
}

.form__radio--s2 .radio-tab {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.form__radio--s2 .radio-item [type=radio]:checked ~ label {
    background-color: var(--color4);
    color: var(--color5);
}

.form__input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

@media (max-width:1200px) {
    .form__input {
        grid-template-columns: 1fr;
    }
}

.form__input label {
    width: 100%;
}

    .form__input label .input {
        width: 100%;
    }

    .form__input label .input__title h6 {
        font-size: var(--text14);
        font-weight: 500;
        margin-bottom: 15px;
    }

    .form__input label .input__box {
        width: 100%;
        position: relative;
    }

        .form__input label .input__box input {
            width: 100%;
            background-color: var(--color-bg);
            border: 1px solid var(--color4);
            font-size: var(--text12);
            padding: 10px 15px;
            height: 50px;
            border-radius: 10px;
            color: var(--color5);
            box-shadow: var(--shadow-form);
            transition: 0.3;
        }

            .form__input label .input__box input:focus, .form__input label .input__box input:hover {
                border: 1px solid var(--color9);
            }

        .form__input label .input__box ::-moz-placeholder {
            color: var(--color9);
            opacity: 1; /* Firefox */
        }

        .form__input label .input__box ::placeholder {
            color: var(--color9);
            opacity: 1; /* Firefox */
        }

        .form__input label .input__box :-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: var(--color9);
        }

        .form__input label .input__box ::-ms-input-placeholder { /* Microsoft Edge */
            color: var(--color9);
        }

        .form__input label .input__box .btn__icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            border-right: 1px solid var(--color4);
            padding-right: 15px;
        }

            .form__input label .input__box .btn__icon svg, .form__input label .input__box .btn__icon img, .form__input label .input__box .btn__icon i {
                width: 20px;
                height: 20px;
                font-size: 20px;
                display: flex;
                align-items: center;
                color: var(--color9);
            }

.form__offer {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}

    .form__offer ul {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
    }

        .form__offer ul li a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 45px;
            width: 100%;
            font-size: var(--text12);
            box-shadow: var(--shadow-form);
            padding: 10px 20px;
            border-radius: 30px;
            transition: 0.3s;
        }

            .form__offer ul li a span {
                font-size: 11px;
                color: var(--color9);
                font-weight: 400;
                padding-right: 15px;
                position: relative;
            }

                .form__offer ul li a span::before {
                    content: "-";
                    position: absolute;
                    right: 5px;
                    top: 50%;
                    transform: translateY(-50%);
                }

            .form__offer ul li a:hover {
                background-color: var(--color4);
            }

.form__offer--icon {
    margin-left: 5px;
}

    .form__offer--icon img, .form__offer--icon i, .form__offer--icon svg {
        width: 15px;
        height: 15px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.label__relative {
    position: relative;
}

.label__submit {
    display: flex;
    align-items: center;
    height: 100%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

    .label__submit .btn__circle--submit {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 35px;
        width: 35px;
        background-color: var(--color-bg);
        border-radius: 50%;
    }

        .label__submit .btn__circle--submit i, .label__submit .btn__circle--submit img, .label__submit .btn__circle--submit svg {
            width: 15px;
            height: 15px;
            color: var(--color9);
            fill: var(--color9);
            font-size: 15px;
        }

    .label__submit:hover .btn__circle--submit {
        background-color: var(--color1);
    }

        .label__submit:hover .btn__circle--submit i, .label__submit:hover .btn__circle--submit img, .label__submit:hover .btn__circle--submit svg {
            color: var(--color3);
            fill: var(--color3);
        }

textarea {
    resize: none;
    color: var(--color9);
    width: 100%;
    border-radius: 15px;
    border: none;
    overflow: hidden;
    font-size: var(--text12);
}

    textarea ::-moz-placeholder {
        color: var(--color9);
        opacity: 1; /* Firefox */
    }

    textarea ::placeholder {
        color: var(--color9);
        opacity: 1; /* Firefox */
    }

.avatar-upload .avatar-edit input {
    display: none;
}

    .avatar-upload .avatar-edit input + label {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
        border-radius: 100%;
        cursor: pointer;
        font-weight: normal;
        transition: all 0.2s ease-in-out;
    }

        .avatar-upload .avatar-edit input + label:hover {
            background: var(--color5);
            color: white;
        }

            .avatar-upload .avatar-edit input + label:hover::after {
                color: white;
            }

        .avatar-upload .avatar-edit input + label:after {
            content: "\e99b";
            font-family: "mania";
            color: var(--color5);
            position: absolute;
            top: 10px;
            left: 0;
            right: 0;
            text-align: center;
            margin: auto;
            transition: 0.3s;
            height: 15px;
            width: 15px;
            font-size: 15px;
        }

.avatar-upload .avatar-preview {
    width: 100%;
    height: 100%;
    position: relative;
}

    .avatar-upload .avatar-preview > div {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

.form__tab form {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 15px;
    column-gap: 15px;
    row-gap: 30px;
}

@media (max-width:1080px) {
    .form__tab form {
        row-gap: 15px;
    }
}

.form__tab .formbox__parent {
    flex-basis: calc(50% - 7.5px);
    position: relative;
}

@media (max-width:1080px) {
    .form__tab .formbox__parent {
        flex-basis: 100%;
    }
}

.form__tab .formbox__parent .form__title {
    margin-bottom: 10px;
    display: inline-block;
    font-size: var(--text14);
    font-weight: 500;
    color: var(--color5);
}

@media (max-width:1080px) {
    .form__tab .formbox__parent .form__title {
        font-size: var(--text12);
    }
}

.form__tab .w-100 {
    width: 100%;
    flex-basis: 100%;
}

.data__form {
    font-size: var(--text12);
    font-weight: lighter;
    color: var(--color9);
    margin-top: 10px;
    display: inline-block;
}

.formbox__parent {
    flex-basis: 100%;
    position: relative;
}

    .formbox__parent label {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .formbox__parent label > span {
            font-size: var(--text14);
            color: var(--color5);
            margin-bottom: 10px;
            display: inline-block;
            font-weight: 500;
        }

@media (max-width:1080px) {
    .formbox__parent label > span {
        font-size: var(--text12);
    }
}

.formbox__parent .label__name {
    margin-bottom: 10px;
    font-size: var(--text14);
    color: var(--color5);
    font-weight: 500;
}

@media (max-width:1080px) {
    .formbox__parent .label__name {
        font-size: var(--text12);
    }
}

.formbox__parent input {
    width: 100%;
    border-radius: 30px;
    height: 45px;
    font-size: var(--text12);
    border: 1px solid var(--color4);
    padding: 0 10px;
}

    .formbox__parent input::-moz-placeholder {
        color: var(--color9);
        opacity: 1; /* Firefox */
    }

    .formbox__parent input::placeholder {
        color: var(--color9);
        opacity: 1; /* Firefox */
    }

    .formbox__parent input:hover, .formbox__parent input:focus {
        border: 1px solid var(--color1);
    }

.formbox__textarea {
    width: 100%;
    flex-basis: 100% !important;
}

    .formbox__textarea textarea {
        width: 100%;
        height: 150px;
        width: 100%;
        border-radius: 30px;
        font-size: var(--text12);
        border: 1px solid var(--color4);
        padding: 10px;
    }

        .formbox__textarea textarea:hover, .formbox__textarea textarea:focus {
            border: 1px solid var(--color1);
        }

.formbox__arrow {
    position: relative;
}

.formbox__heading h4 {
    font-size: var(--text18);
    font-weight: bold;
    color: var(--color7);
}

.formbox__requierd .form__title {
    position: relative;
    width: -moz-max-content;
    width: max-content;
}

    .formbox__requierd .form__title::after {
        content: "*";
        position: absolute;
        left: -15px;
        top: 0;
        color: var(--color7);
        font-size: var(--text16);
    }

.form__notfound {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0;
}

    .form__notfound i, .form__notfound svg, .form__notfound img, .form__notfound .icon, .form__notfound .mania {
        width: 40px;
        height: 40px;
        font-size: 40px;
        fill: var(--color7);
        color: var(--color7);
    }

    .form__notfound p {
        margin-top: 15px;
        font-size: var(--text14);
        color: var(--color7);
    }

.select__parent > span {
    margin-bottom: 10px;
    font-size: var(--text14);
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid var(--color4);
}

.select2-container .select2-selection--single {
    height: 45px;
    border-radius: 30px;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: var(--text12);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color9);
    font-weight: 500;
    font-size: var(--text12);
    padding: 0 25px 0 0;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered span {
        margin: 0 -5px 0 0;
    }

        .select2-container--default .select2-selection--single .select2-selection__rendered span img {
            border-radius: 50%;
        }

.tags__multiple-height {
    height: 300px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 10px;
    height: 100%;
    width: 20px;
    color: white;
    height: 20px;
    background-color: var(--color4);
    border-radius: 50%;
    transform: translateY(-50%);
    top: 50%;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #F4F9FD;
    color: #4E4E4E;
}

.select2-results__option--selectable {
    color: #4E4E4E;
    font-size: 0.875rem;
}

.select2-container--default .select2-results__option--selected {
    background-color: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #a2b0ca transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #a2b0ca transparent;
    border-width: 0 4px 5px 4px;
}

.select2-dropdown {
    background-color: white;
    border: 1px solid var(--color4);
    border-radius: 15px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color4);
    border-radius: 10px;
    font-size: var(--text14);
}

    .select2-container--default .select2-search--dropdown .select2-search__field:hover, .select2-container--default .select2-search--dropdown .select2-search__field:focus {
        border: 1px solid var(--color1);
    }

.select2-results__option {
    font-size: var(--text12);
}

    .select2-results__option:last-child {
        border-radius: 0 0 15px 15px;
    }

.select2-container--default .select2-search--inline .select2-search__field {
    font-family: vazir fd;
}

.select__parent > span {
    margin-bottom: 10px;
    display: inline-block;
}

.modal__form .formbox__parent {
    margin-bottom: 30px;
}

.user--inselect .select2-container .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    padding: 0;
    position: relative;
    top: 0;
    right: 0;
    width: -moz-max-content;
    width: max-content;
    max-height: 180px;
    padding-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
}

.user--inselect .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice {
    width: -moz-max-content;
    width: max-content;
    padding: 3px 0px 3px 30px;
    margin-left: 10px;
    display: inline-block;
}

.user--inselect .select2-container--default .select2-selection--multiple {
    height: auto;
}

.tags--inselect .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 5px;
    border-radius: 30px;
    background-color: var(--color3);
    padding: 5px 5px 5px 30px;
    font-size: var(--text12);
    border: 1px solid var(--color4);
    color: var(--color6);
    min-height: 45px;
    display: flex;
    align-items: center;
}

.tags--inselect .tags__select .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    list-style: none;
    padding: 0;
    padding-left: 0px;
    position: unset;
    top: 0;
    right: 0;
    width: -moz-max-content;
    width: max-content;
    max-height: -moz-max-content;
    max-height: max-content;
}

.tags--inselect .tags__select .select2-container--default .select2-selection--multiple {
    height: auto;
}

    .tags--inselect .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        background-color: transparent;
        border: none;
        border-right: 1px solid #aaa;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        color: #999;
        cursor: pointer;
        font-size: 1em;
        font-weight: bold;
        padding: 0 4px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .tags--inselect .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        border: navajowhite;
        border-right: 1px solid var(--color4);
        border-radius: 0;
        min-height: 45px;
        margin: 0;
        padding: 0 4px;
        display: flex;
        align-items: center;
        font-size: 12px;
        transform: none;
    }

        .tags--inselect .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            background-color: var(--color4);
            color: var(--color7);
        }

.option-style option::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--color11);
}

/*=== [ modal__form--contact ] ===*/
.modal__form--contact .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--color4);
    border-radius: 60px;
    height: 45px;
    min-height: 45px;
    margin: 0;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: auto;
}

.modal__form--contact .select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
}

.modal__form--contact .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline;
    list-style: none;
    padding: 0;
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 100%;
    max-height: 180px;
    padding-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal__form--contact .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice {
    width: 100%;
    margin: 5px 0 5px 0;
    display: flex;
    align-items: center;
}

.modal__form--contact .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-right: none;
    font-size: 18px;
    font-weight: 400;
}

    .modal__form--contact .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .modal__form--contact .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        background-color: transparent;
    }

.modal__form--contact .dropdown__button .dropdown__holder {
    left: 0;
    transform: none;
    bottom: calc(100% + 10px);
    top: auto;
}

.modal__form--contact .dropdown__button .dropdown__parent {
    min-width: 260px;
}

@media (max-width:768px) {
    .modal__form--contact .dropdown__button {
        position: relative !important;
    }
}

.formbox__parent--flex {
    display: flex;
}

.formbox__parent .form__text {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

    .formbox__parent .form__text span {
        display: flex;
        align-items: center;
        font-size: var(--text14);
        color: var(--color9);
        margin-top: 22px;
    }

.formbox__parent h5 {
    font-size: var(--text14);
    color: var(--color5);
    margin-bottom: 20px;
    display: inline-block;
    font-weight: 500;
}

@media (max-width:1080px) {
    .formbox__parent h5 {
        font-size: var(--text12);
    }
}

.formbox__parent label {
    flex: 1;
}

    .formbox__parent label.check-item {
        max-width: -moz-max-content;
        max-width: max-content;
        min-width: 80px;
    }

        .formbox__parent label.check-item span {
            margin-bottom: 0;
            font-size: var(--text12);
            color: var(--color6);
        }

.formbox__parent input[type=checkbox] {
    width: 100%;
    border-radius: 0;
    height: auto;
    font-size: var(--text12);
    border: none;
    padding: 0;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-flex;
    align-items: center;
}

.select2-results__option span img, .select2-container--default .select2-selection--multiple .select2-selection__choice__display span img {
    border-radius: 50%;
    margin-left: 10px;
    width: 40px;
    height: 40px;
}

@media (max-width:1200px) {
    .select2-results__option span img, .select2-container--default .select2-selection--multiple .select2-selection__choice__display span img {
        width: 30px;
        height: 30px;
    }
}

.select2-results__option span, .select2-container--default .select2-selection--multiple .select2-selection__choice__display span {
    font-size: var(--text12);
    white-space: normal;
}

/* check-item in gallery*/
.check-item__gallery {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    border-radius: 15px;
    /* The container */
    position: absolute;
    cursor: pointer;
    font-size: var(--text12);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--color6);
    padding: 15px;
    transition: 0.3s;
    background-color: transparent;
    border: 1px solid var(--color4);
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* Hide the browser's default checkbox */
    /* Create a custom checkbox */
}

@media (max-width:1200px) {
    .check-item__gallery {
        padding: 10px;
    }
}

.check-item__gallery:hover {
    border: 1px solid var(--color8);
}

.check-item__gallery input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.check-item__gallery .checkmark-parent {
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 15px;
    opacity: 0;
    transition: 0.3s;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .check-item__gallery .checkmark-parent i, .check-item__gallery .checkmark-parent svg {
        width: 30px;
        height: 30px;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        fill: white;
        color: white;
    }

.check-item__gallery .checkmark {
    position: absolute;
    bottom: calc(100% - 40px);
    left: calc(100% - 30px);
    height: 20px;
    width: 20px;
    background-color: transparent;
    transform: translateY(-50%);
    border-radius: 5px;
    border: 1px solid var(--color4);
    transition: 0.3s;
    color: var(--color3);
    z-index: 3;
}

@media (max-width:1200px) {
    .check-item__gallery .checkmark {
        left: 10px;
    }
}

.check-item__gallery:hover input ~ .checkmark-parent .checkmark {
    background-color: var(--color8);
    border: 1px solid var(--color8);
    opacity: 1;
}

.check-item__gallery:hover input ~ .checkmark-parent {
    opacity: 1;
}

.check-item__gallery input:checked ~ .checkmark-parent .checkmark {
    background-color: var(--color8);
    color: var(--color3);
    border: 1px solid var(--color8);
    opacity: 1;
}

.check-item__gallery input:checked ~ .checkmark-parent {
    opacity: 1;
}

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

.check-item__gallery input:checked ~ .checkmark-parent .checkmark:after {
    display: block;
}

.check-item__gallery .checkmark:after {
    content: "\e913";
    font-family: mania;
    left: 50%;
    top: 50%;
    font-size: 8px;
    transform: translateX(-50%) translateY(-50%);
}

.check-item__gallery img {
    width: auto;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover;
}

.check-multi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    -moz-column-gap: 100px;
    column-gap: 100px;
    row-gap: 15px;
}

    .check-multi .check-item .checkmark {
        border-radius: 5px;
    }

    .check-multi .check-item__style4 .checkmark {
        border-radius: 50%;
    }

.formbox__parent label.check-item__style4 {
    width: -moz-max-content;
    width: max-content;
    min-width: auto;
}

/* switch*/
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color4);
    transition: 0.4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 5px;
        bottom: 50%;
        transform: translateY(50%);
        background-color: white;
        transition: 0.4s;
    }

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

    input:checked + .slider:before {
        transform: translateX(100%) translateY(50%);
    }

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

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

.dropdown__holder .check-item__style3 {
    border-top: 1px solid var(--color4);
    width: 100%;
    display: flex;
    align-items: center;
    /* The container */
    position: relative;
    cursor: pointer;
    font-size: var(--text14);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: 0.3s;
    color: var(--color5);
    padding-right: 30px;
    margin-bottom: 10px;
    font-weight: 500;
    padding-top: 15px;
    /* Hide the browser's default checkbox */
    /* Create a custom checkbox */
}

@media (max-width:1800px) {
    .dropdown__holder .check-item__style3 {
        font-size: var(--text12);
    }
}

.dropdown__holder .check-item__style3 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.dropdown__holder .check-item__style3 .checkmark {
    position: absolute;
    top: calc(50% + 5px);
    right: 0;
    height: 20px;
    width: 20px;
    background-color: var(--color4);
    transform: translateY(-50%);
    border-radius: 5px;
    border: 1px solid var(--color5);
    transition: 0.3s;
    color: var(--color3);
}

@media (max-width:1800px) {
    .dropdown__holder .check-item__style3 .checkmark {
        height: 18px;
        width: 18px;
    }
}

.dropdown__holder .check-item__style3:hover input ~ .checkmark {
    background-color: var(--color8);
    border: 1px solid var(--color8);
}

.dropdown__holder .check-item__style3 input:checked ~ .checkmark {
    background-color: var(--color8);
    color: var(--color3);
    border: 1px solid var(--color8);
}

.dropdown__holder .check-item__style3 .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.dropdown__holder .check-item__style3 input:checked ~ .checkmark:after {
    display: block;
}

.dropdown__holder .check-item__style3 .checkmark:after {
    content: "\e913";
    font-family: mania;
    left: 50%;
    top: 50%;
    font-size: 8px;
    transform: translateX(-50%) translateY(-50%);
}

@media (max-width:1800px) {
    .dropdown__holder .check-item__style3 .checkmark:after {
        font-size: 7px;
    }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.quantity-block {
    margin: auto;
    position: relative;
}

.input-number-btn {
    position: absolute;
    left: 15px;
    bottom: 3px;
    display: flex;
    flex-direction: column;
    row-gap: 2px;
}

.quantity-arrow-minus,
.quantity-arrow-plus {
    cursor: pointer;
    font-size: 11px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 4px;
    outline: none;
    background-color: var(--color4);
    color: var(--color5);
}

    .quantity-arrow-minus:hover,
    .quantity-arrow-plus:hover {
        background-color: var(--color5);
        color: var(--color3);
    }

.quantity-num {
    font-size: 20px;
    padding: 5px 10px;
    border-radius: 4px;
    outline: none;
}

/*=== [ login > login__left > text__motion ] ===*/
@keyframes azan-animate {
    0% {
        text-shadow: none;
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        text-shadow: none;
        transform: scale(1);
    }
}

.motion__text div {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    font-size: 38px;
    font-weight: bold;
}

@media (max-width:1080px) {
    .motion__text div {
        animation: none;
    }

        .motion__text div div:first-of-type {
            overflow: visible;
        }
}

.motion__text1 div:first-of-type {
    /* For increasing performance 
  ID/Class should've been used. 
  For a small demo 
  it's okaish for now */
    margin-left: 10px;
    animation: showup 10s infinite;
}

@media (max-width:1080px) {
    .motion__text1 div:first-of-type {
        animation: none;
        margin-left: 5px;
    }
}

.motion__text1 div:last-of-type {
    width: 0px;
    animation: reveal 10s infinite;
}

@media (max-width:1080px) {
    .motion__text1 div:last-of-type {
        animation: none;
        width: auto;
    }
}

.motion__text1 div:last-of-type span {
    margin-left: 0;
    animation: slidein 10s infinite;
}

@media (max-width:1080px) {
    .motion__text1 div:last-of-type span {
        animation: none;
    }
}

@keyframes showup {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slidein {
    0% {
        margin-left: 0px;
    }

    20% {
        margin-left: 0px;
    }

    35% {
        margin-left: 0px;
    }

    100% {
        margin-left: 0px;
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
        width: 0px;
    }

    20% {
        opacity: 1;
        width: 0px;
    }

    30% {
        width: 120px;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 120px;
    }
}

.motion__text2 div:first-of-type {
    animation-name: fadeintext;
    animation-duration: 1s;
    animation-delay: 0.5s;
}

.motion__text2 div:last-of-type {
    animation-name: fadeintext;
    animation-duration: 1s;
    animation-delay: 2s;
}

@keyframes fadeintext {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/*===================== [ login ] =================================*/
.login {
    height: 100vh;
    /*=== [ login > login__left ] ===*/
    /*=== [ login > login__right ] ===*/
}

@media (max-width:1080px) {
    .login {
        flex-direction: column;
        /*height: auto;*/
    }
}

.login .login__left {
    flex-basis: 50%;
    height: 100%;
    background-color: var(--color1);
    color: var(--color3);
    border-radius: 0 60px 60px 0;
    padding: 30px;
}

@media (max-width:1080px) {
    .login .login__left {
        border-radius: 60px 60px 0 0;
    }
}

@media (max-width:576px) {
    .login .login__left {
        padding: 15px;
    }
}

.login .login__left--top h2 {
    margin-top: 80px;
    display: flex;
}

    .login .login__left--top h2 div {
        font-size: var(--text38);
        font-weight: bold;
    }

        .login .login__left--top h2 div span {
            font-size: var(--text38);
        }

@media (max-width:1800px) {
    .login .login__left--top h2 div {
        font-size: var(--text30);
    }

        .login .login__left--top h2 div span {
            font-size: var(--text30);
        }
}

@media (max-width:1080px) {
    .login .login__left--top h2 div {
        font-size: var(--text30);
    }

        .login .login__left--top h2 div span {
            font-size: var(--text30);
        }
}

@media (max-width:576px) {
    .login .login__left--top h2 div {
        font-size: var(--text25);
    }

        .login .login__left--top h2 div span {
            font-size: var(--text25);
        }
}

@media (max-width:1800px) {
    .login .login__left--top h2 {
        margin-top: 60px;
    }
}

@media (max-width:1400px) {
    .login .login__left--top h2 {
        margin-top: 30px;
    }
}

.login .login__left--top img {
    width: 500px;
    height: 500px;
    margin-top: 80px;
}

@media (max-width:1800px) {
    .login .login__left--top img {
        width: 400px;
        height: 400px;
    }
}

@media (max-width:1200px) {
    .login .login__left--top img {
        width: 300px;
        height: 300px;
    }
}

@media (max-width:1080px) {
    .login .login__left--top img {
        width: 250px;
        height: 250px;
        margin-top: 40px;
    }
}

@media (max-width:576px) {
    .login .login__left--top img {
        width: 200px;
        height: 200px;
    }
}

.login .login__left--down {
    font-weight: 200;
    width: 100%;
}

    .login .login__left--down a {
        font-weight: bold;
        margin: 0 2px;
    }

        .login .login__left--down a:hover {
            text-shadow: 0 0 1px rgb(255, 255, 255);
        }

@media (max-width:1800px) {
    .login .login__left--down {
        font-size: var(--text14);
    }

        .login .login__left--down a {
            font-size: var(--text14);
        }
}

@media (max-width:768px) {
    .login .login__left--down {
        font-size: var(--text12);
    }

        .login .login__left--down a {
            font-size: var(--text12);
        }
}

@media (max-width:576px) {
    .login .login__left--down {
        flex-direction: column;
        align-items: center !important;
        font-size: var(--text12);
    }

        .login .login__left--down a {
            font-size: var(--text12);
        }
}

.login .login__right {
    flex-basis: 50%;
    height: 100%;
    padding: 30px;
}

.login .login__right--content h3 {
    margin-bottom: 80px;
    font-size: var(--text38);
    color: var(--color5);
    font-weight: bold;
    width: 50%;
}

@media (max-width:1800px) {
    .login .login__right--content h3 {
        font-size: var(--text30);
        margin-bottom: 60px;
    }
}

@media (max-width:576px) {
    .login .login__right--content h3 {
        font-size: var(--text22);
        margin-bottom: 40px;
    }
}

.login .form__box {
    margin-bottom: 30px;
}

.login .form__box--password .check-item {
    margin-left: 35px;
}

.login .form__box--password-sent span {
    font-size: var(--text14);
    font-weight: 300;
}

    .login .form__box--password-sent span a {
        font-size: var(--text14);
    }

        .login .form__box--password-sent span a:hover {
            color: var(--color1);
        }

@media (max-width:576px) {
    .login .form__box--password {
        flex-direction: column;
        align-items: flex-start !important;
        width: 100%;
        text-align: right;
    }

        .login .form__box--password .check-item {
            margin-left: 0;
        }

    .login .form__box--password-sent {
        width: 100%;
    }

        .login .form__box--password-sent span {
            font-size: var(--text12);
            margin-top: 10px;
            display: inline-block;
        }

            .login .form__box--password-sent span a {
                font-size: var(--text12);
            }
}

.login .login__text {
    width: 80%;
}

@media (max-width:1800px) {
    .login .login__text {
        width: 60%;
    }
}

@media (max-width:1400px) {
    .login .login__text {
        width: 80%;
    }
}

@media (max-width:576px) {
    .login .login__text {
        width: 95%;
    }
}

.login__notif {
    color: var(--color7);
    font-weight: 500;
    font-size: var(--text18);
    text-align: center;
}

@media (max-width:1080px) {
    .login__notif {
        margin-top: 100px;
    }
}

label.pass {
    position: relative;
    height: 100%;
}

    label.pass i {
        width: 25px;
        height: 25px;
        color: var(--color9);
        top: 50%;
        left: 0;
        position: absolute;
        transform: translateY(-50%);
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    label.pass .password-visibility {
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 30px;
        width: 25px;
        transform: translateY(-50%);
    }

        label.pass .password-visibility .line {
            width: 23px;
            height: 1px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: rotate(45deg) translateY(-50%);
            background-color: var(--color9);
            transition: 0.3s;
        }

        label.pass .password-visibility.active i {
            color: var(--color1);
        }

        label.pass .password-visibility.active .line {
            display: none;
        }

        label.pass .password-visibility.active:hover i {
            color: var(--color9);
        }

        label.pass .password-visibility:hover i {
            color: var(--color1);
        }

        label.pass .password-visibility:hover .line {
            display: none;
        }

.login__left--top .text__motion,
.login__right--content {
    margin-top: 10px;
}

@media (max-width:1800px) {
    .login__left--top .text__motion,
    .login__right--content {
        margin-top: 10px;
    }
}

@media (max-width:1400px) {
    .login__left--top .text__motion,
    .login__right--content {
        margin-top: 10px;
    }
}

@media (max-width:576px) {
    .login__left--top .text__motion,
    .login__right--content {
        margin-top: 10px;
    }
}

.linktoweb {
    font-size: var(--text16);
}

@media (max-width:1800px) {
    .linktoweb {
        font-size: var(--text14);
    }
}

@media (max-width:768px) {
    .linktoweb {
        font-size: var(--text12);
    }
}

.copyright {
    display: flex;
    align-items: center;
}

    .copyright img {
        height: 35px;
        width: 35px;
        margin-right: 10px;
    }

@media (max-width:1800px) {
    .copyright img {
        height: 30px;
        width: 30px;
        margin-right: 5px;
    }
}

@media (max-width:576px) {
    .copyright img {
        height: 25px;
        width: 25px;
    }
}

.copyright h6 {
    font-weight: 200;
    font-size: var(--text16);
    text-align: left;
}

@media (max-width:1800px) {
    .copyright h6 {
        font-size: var(--text14);
    }
}

@media (max-width:768px) {
    .copyright h6 {
        font-size: var(--text12);
    }
}

@media (max-width:576px) {
    .copyright {
        margin-top: 10px;
    }
}

.login__form span.form__title {
    margin-bottom: 15px;
    font-size: var(--text18);
    color: var(--color6);
    font-weight: 500;
    display: inline-block;
}

@media (max-width:1800px) {
    .login__form span.form__title {
        font-size: var(--text16);
    }
}

.login__form input {
    width: 100%;
    border-radius: 60px;
    border: none;
    background-color: var(--color4);
    font-size: var(--text18);
    border: 1px solid transparent;
    height: 60px;
    padding: 5px 30px;
    font-size: var(--text16);
    color: var(--color6);
}

    .login__form input:focus, .login__form input:hover {
        border: 1px solid var(--color1);
    }

    .login__form input::-moz-placeholder {
        color: var(--color9);
    }

    .login__form input::placeholder {
        color: var(--color9);
    }

    .login__form input:-moz-placeholder-shown {
        color: var(--color1);
    }

    .login__form input:placeholder-shown {
        color: var(--color1);
    }

    .login__form input[type=submit] {
        background-color: var(--color1);
        color: var(--color3);
        font-size: var(--text20);
        margin-top: 30px;
        margin-bottom: 0;
    }

        .login__form input[type=submit]:hover {
            background-color: var(--color5);
            box-shadow: 0 10px 15px rgba(8, 65, 120, 0.2);
        }

@media (max-width:1800px) {
    .login__form input[type=submit] {
        font-size: var(--text16);
    }
}

.login__form input[type=checkbox] {
    height: auto;
}

.login__form input[type=email] {
    text-align: left;
}

@media (max-width:1800px) {
    .login__form input {
        height: 50px;
        font-size: var(--text14);
    }
}

.form__box {
    margin-bottom: 30px;
}

.form__box--password .check-item {
    margin-left: 35px;
}

.form__box--password-sent span {
    font-size: var(--text14);
    font-weight: 300;
}

    .form__box--password-sent span a {
        font-size: var(--text14);
    }

        .form__box--password-sent span a:hover {
            color: var(--color1);
        }

@media (max-width:576px) {
    .form__box--password {
        flex-direction: column;
        align-items: flex-start !important;
        width: 100%;
        text-align: right;
    }

        .form__box--password .check-item {
            margin-left: 0;
        }

    .form__box--password-sent {
        width: 100%;
    }

        .form__box--password-sent span {
            font-size: var(--text12);
            margin-top: 10px;
            display: inline-block;
        }

            .form__box--password-sent span a {
                font-size: var(--text12);
            }
}

/*=== [ back-to-page ] ===*/
.back-to-page {
    margin-top: 30px;
    color: var(--color1);
}

    .back-to-page a {
        margin-left: 15px;
    }

    .back-to-page i {
        transition: 0.3s;
    }

    .back-to-page:hover i {
        transform: translateX(-10px);
    }

/*=== [ btn-main ] ===*/
.buttons {
    display: flex;
}

    .buttons .btn__main {
        margin-right: 15px;
    }

.btn__main {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn__main > a,
    .btn__main > button {
        color: var(--color3);
        font-weight: 400;
        padding: 8px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--text12);
        border-radius: 60px;
        font-weight: 500;
        padding: 5px 30px;
        height: 45px;
        background-color: var(--color5);
    }

@media (max-width:1800px) {
    .btn__main > a,
    .btn__main > button {
        font-size: var(--text12);
        height: 40px;
        padding: 5px 20px;
    }
}

@media (max-width:489px) {
    .btn__main > a,
    .btn__main > button {
        font-size: 11px;
    }
}

@media (max-width:420px) {
    .btn__main > a,
    .btn__main > button {
        padding: 5px 10px;
    }
}

.btn__main > a span,
.btn__main > button span {
    display: inline-block;
}

.btn__main > a i,
.btn__main > a svg,
.btn__main > a img,
.btn__main > button i,
.btn__main > button svg,
.btn__main > button img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text16);
    margin-left: 10px;
    width: 16px;
    height: 16px;
}

@media (max-width:1800px) {
    .btn__main > a i,
    .btn__main > a svg,
    .btn__main > a img,
    .btn__main > button i,
    .btn__main > button svg,
    .btn__main > button img {
        font-size: var(--text12);
        width: 12px;
        height: 12px;
    }
}

.btn__main > a svg,
.btn__main > a img,
.btn__main > button svg,
.btn__main > button img {
    width: 18px;
    height: 18px;
}

.btn__darkblue > a,
.btn__darkblue > button {
    background-color: var(--color5);
    box-shadow: var(--shadow-darkblue);
}

    .btn__darkblue > a:hover,
    .btn__darkblue > button:hover {
        background-color: #052b4f;
    }

.btn__green > a,
.btn__green > button, .btn__green input[type=submit] {
    background-color: var(--color8);
    box-shadow: var(--shadow-darkblue);
}

    .btn__green > a:hover,
    .btn__green > button:hover, .btn__green input[type=submit]:hover {
        background-color: #70ac49;
    }

.btn__lightblue > a,
.btn__lightblue > button {
    background-color: var(--color4);
    color: var(--color5);
}

    .btn__lightblue > a:hover,
    .btn__lightblue > button:hover {
        background-color: #C1DDE8;
        color: var(--color5);
    }

.btn__status {
    width: 100%;
    height: 45px;
    margin-top: 15px;
}

@media (max-width:1800px) {
    .btn__status {
        height: 40px;
    }
}

.btn__status a,
.btn__status button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    position: relative;
    padding: 0 10px;
    border-radius: 60px;
    background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width:1800px) {
    .btn__status a,
    .btn__status button {
        padding: 0 5px;
    }
}

.btn__status a span,
.btn__status button span {
    font-size: var(--text14);
    font-weight: normal;
}

@media (max-width:1800px) {
    .btn__status a span,
    .btn__status button span {
        font-size: var(--text12);
    }
}

.btn__status a span i,
.btn__status button span i {
    font-size: 12px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width:1800px) {
    .btn__status a span i,
    .btn__status button span i {
        font-size: 10px;
    }
}

.btn__status a:hover,
.btn__status button:hover {
    background-color: var(--color3);
    color: var(--color1);
}

.btn__personal {
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

    .btn__personal i {
        margin-left: 10px;
        font-size: 15px;
    }

    .btn__personal a,
    .btn__personal button {
        color: var(--color5);
        background-color: var(--color-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 60px;
        height: 45px;
        font-size: var(--text14);
        width: 100%;
        font-weight: 500;
    }

@media (max-width:1800px) {
    .btn__personal a,
    .btn__personal button {
        height: 40px;
        font-size: var(--text12);
    }
}

@media (max-width:768px) {
    .btn__personal a,
    .btn__personal button {
        width: -moz-max-content;
        width: max-content;
        padding: 0 30px;
    }
}

.btn__personal a:hover,
.btn__personal button:hover {
    background-color: var(--color7);
    color: white;
}

.btn__activity a, .btn__activity button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--color4);
    color: var(--color6);
    background-color: var(--color3);
    padding: 5px 10px 5px 15px;
    border-radius: 30px;
}

    .btn__activity a:hover, .btn__activity button:hover {
        border: 1px solid var(--color8);
    }

        .btn__activity a:hover .btn__activity--icon, .btn__activity button:hover .btn__activity--icon {
            background-color: var(--color8);
        }

.btn__activity--icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color4);
    display: inline-block;
    font-size: var(--text12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.btn__activity--text {
    flex: 1;
    display: inline-block;
    margin-right: 10px;
    font-size: var(--text14);
}

.btn__circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color3);
    color: var(--color5);
    margin-right: 10px;
    transition: 0.3s;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

@media (max-width:1800px) {
    .btn__circle {
        height: 40px;
        width: 40px;
    }
}

.btn__circle i, .btn__circle img, .btn__circle svg {
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: var(--color5);
    fill: var(--color5);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
}

.btn__circle:hover {
    background-color: var(--color5);
    color: var(--color3);
}

    .btn__circle:hover button > i, .btn__circle:hover button > svg, .btn__circle:hover a > i, .btn__circle:hover a > svg {
        color: var(--color3) !important;
        fill: var(--color3) !important;
    }

    .btn__circle:hover > i, .btn__circle:hover > svg {
        color: var(--color3) !important;
        fill: var(--color3) !important;
    }

.btn__circle > button, .btn__circle > a, .btn__circle input[type=submit] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
}

.btn__circle--md {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color4);
    color: var(--color5);
    margin-right: 10px;
    transition: 0.3s;
}

    .btn__circle--md:hover {
        background-color: var(--color5);
        color: var(--color3);
    }

        .btn__circle--md:hover button > i, .btn__circle--md:hover button > svg, .btn__circle--md:hover a > i, .btn__circle--md:hover a > svg {
            color: var(--color3) !important;
            fill: var(--color3) !important;
        }

        .btn__circle--md:hover > i, .btn__circle--md:hover > svg {
            color: var(--color3) !important;
            fill: var(--color3) !important;
        }

    .btn__circle--md i, .btn__circle--md img, .btn__circle--md svg {
        width: 15px;
        height: 15px;
        font-size: 15px;
        color: var(--color5);
        fill: var(--color5);
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn__circle--md > button, .btn__circle--md > a, .btn__circle--md input[type=submit] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 0;
    }

.btn__circle--sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

    .btn__circle--sm i, .btn__circle--sm img, .btn__circle--sm svg {
        width: 14px;
        height: 14px;
        font-size: 14px;
        color: var(--color5);
        fill: var(--color5);
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn__circle--sm:hover {
        background-color: var(--color5);
        color: var(--color3);
    }

        .btn__circle--sm:hover button > i, .btn__circle--sm:hover button > svg, .btn__circle--sm:hover a > i, .btn__circle--sm:hover a > svg {
            color: var(--color3) !important;
            fill: var(--color3) !important;
        }

        .btn__circle--sm:hover > i, .btn__circle--sm:hover > svg {
            color: var(--color3) !important;
            fill: var(--color3) !important;
        }

    .btn__circle--sm > button, .btn__circle--sm > a, .btn__circle--sm input[type=submit] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 0;
    }

.btn__home {
    position: relative;
    padding-left: 25px;
    color: var(--color9);
}

    .btn__home::before {
        content: "\e98e";
        font-family: mania;
        position: absolute;
        left: -35px;
        top: 50%;
        transform: translateY(-50%);
        font-size: var(--text12);
        color: var(--color9);
    }

    .btn__home i, .btn__home svg, .btn__home img {
        font-size: 15px;
        width: 15px;
        height: 15px;
        color: var(--color9);
        fill: var(--color9);
        transition: 0.3s;
    }

    .btn__home:hover i, .btn__home:hover svg, .btn__home:hover img {
        color: var(--color6);
        fill: var(--color6);
    }

.btn__mobile {
    display: none;
}

@media (max-width:1080px) {
    .btn__mobile {
        display: flex;
    }
}

.btn__disabled > button, .btn__disabled > a {
    background-color: var(--color-bg);
    color: var(--color5);
}

.btn__disabled:hover > button, .btn__disabled:hover > a {
    background-color: var(--color-bg);
    color: var(--color5);
}

.btn_active > button, .btn_active > a {
    background-color: var(--color5);
    color: var(--color3);
}

.btn_active:hover > button, .btn_active:hover > a {
    background-color: #052b4f;
    color: var(--color3);
}

.btn__delete {
    box-shadow: none;
}

    .btn__delete > a,
    .btn__delete > button {
        background-color: var(--color4);
        color: var(--color5);
    }

        .btn__delete > a:hover,
        .btn__delete > button:hover {
            background-color: var(--color7);
            color: white;
            box-shadow: none;
        }

    .btn__delete:hover {
        background-color: var(--color7);
        color: white;
        box-shadow: none;
    }

.btn__icon button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

    .btn__icon button:hover .btn__icon--right {
        background-color: white;
    }

        .btn__icon button:hover .btn__icon--right svg, .btn__icon button:hover .btn__icon--right img, .btn__icon button:hover .btn__icon--right i, .btn__icon button:hover .btn__icon--right .icon {
            color: var(--color5);
            fill: var(--color5);
        }

    .btn__icon button:hover .btn__icon--left {
        text-shadow: 0 0 1px white;
    }

.btn__icon--left {
    display: flex;
    align-items: center;
    color: white;
}

    .btn__icon--left span {
        font-size: var(--text14);
    }

@media (max-width:1800px) {
    .btn__icon--left span {
        font-size: var(--text12);
    }
}

.btn__icon--color {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    margin-left: 10px;
}

.btn__icon--color-green {
    background-color: var(--color8);
}

.btn__icon--color-orange {
    background-color: var(--color7);
}

.btn__icon--color-red {
    background-color: var(--color12);
}

.btn__icon--right {
    width: 30px;
    height: 30px;
    background-color: var(--color5);
    border-radius: 50%;
    color: var(--color3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

    .btn__icon--right svg, .btn__icon--right img, .btn__icon--right i, .btn__icon--right .icon {
        width: 15px;
        height: 15px;
        font-size: 15px;
        color: white;
        fill: white;
        transition: 0.3s;
    }

.btn__arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color5);
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s;
}

    .btn__arrow:hover {
        background-color: var(--color3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

.hover__green {
    transition: 0.3s;
}

    .hover__green:hover {
        background-color: var(--color8);
        color: white;
    }

        .hover__green:hover i, .hover__green:hover img, .hover__green:hover svg {
            color: white;
            fill: white;
        }

.icon-circle {
    width: 30px;
    height: 30px;
    background-color: var(--color1);
    border-radius: 50%;
    color: white;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

@media (max-width:1800px) {
    .icon-circle {
        width: 25px;
        height: 25px;
        margin-left: 8px;
    }
}

.modal__buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 40px;
}

    .modal__buttons .btn__main > a, .modal__buttons .btn__main > button {
        min-width: 100px;
    }

@media (max-width:1800px) {
    .modal__buttons .btn__main {
        margin-top: 30px;
    }
}

.modal__buttons > a, .modal__buttons > button {
    min-width: 100px;
}

@media (max-width:1800px) {
    .modal__buttons {
        margin-top: 30px;
    }
}

.btn__double {
    display: flex;
    margin-top: 30px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

    .btn__double .btn__main, .btn__double .btn__circle, .btn__double .draft__save {
        margin-right: 15px;
        margin-bottom: 5px;
    }

@media (max-width:1200px) {
    .btn__double .btn__main, .btn__double .btn__circle, .btn__double .draft__save {
        margin-right: 10px;
    }
}

@media (max-width:489px) {
    .btn__double .btn__main, .btn__double .btn__circle, .btn__double .draft__save {
        margin-right: 5px;
    }
}

.btn__double .btn__main:first-child, .btn__double .btn__circle:first-child, .btn__double .draft__save:first-child {
    margin-right: 0;
}

.btn__double .draft__save {
    margin-bottom: 0;
}

.content__section--heading-btns .btn__double .btn__main {
    margin-bottom: 5px;
}

.content__section--heading-btns .btn__circle {
    margin-bottom: 5px;
    margin-right: 15px;
}

@media (max-width:1200px) {
    .content__section--heading-btns .btn__circle {
        margin-right: 10px;
    }
}

@media (max-width:489px) {
    .content__section--heading-btns .btn__circle {
        margin-right: 5px;
    }
}

.linkaddress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--color9);
}

    .linkaddress a {
        font-size: var(--text12);
        font-weight: 400;
    }

        .linkaddress a:hover {
            color: var(--color6);
        }

    .linkaddress i, .linkaddress svg, .linkaddress img {
        font-size: 15px;
        width: 15px;
        height: 15px;
    }

.email__modal .draft__save {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    margin-left: 30px;
}

    .email__modal .draft__save p {
        margin-right: 15px;
        font-size: var(--text14);
        color: var(--color6);
    }

@media (max-width:1800px) {
    .email__modal .draft__save p {
        font-size: var(--text12);
    }
}

@media (max-width:1800px) {
    .email__modal .draft__save {
        margin-top: 30px;
    }
}

@media (max-width:1800px) {
    .email__modal .btn__double > .btn__circle, .email__modal .btn__double > .btn__main {
        margin-top: 30px;
    }
}

@media (max-width:768px) {
    .email__modal .btn__double > .btn__circle, .email__modal .btn__double > .btn__main {
        margin-top: 5px;
    }
}

.email__modal .btn__double .draft__save {
    margin-bottom: 0;
}

@media (max-width:768px) {
    .email__modal .btn__double .draft__save {
        width: 100%;
        margin-left: 0;
    }
}

.dashboard__gridbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

@media (max-width:1800px) {
    .dashboard__gridbox {
        gap: 20px;
    }
}

@media (max-width:1200px) {
    .dashboard__gridbox {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:1080px) {
    .dashboard__gridbox {
        grid-template-columns: 1fr;
    }
}

@media (max-width:768px) {
    .dashboard__gridbox {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:576px) {
    .dashboard__gridbox {
        grid-template-columns: 1fr;
    }
}

.dashboard .box__top {
    height: 80px;
    display: flex;
}

@media (max-width:1800px) {
    .dashboard .box__top {
        height: 60px;
    }
}

.dashboard .box__top--icon, .dashboard .box__top--text {
    height: 100%;
    border-radius: 15px;
    background-color: var(--color3);
    box-shadow: var(--shadow-box), var(--shadow-inset-white);
}

.dashboard .box__top--icon {
    height: 100%;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}

@media (max-width:1800px) {
    .dashboard .box__top--icon {
        margin-left: 10px;
    }
}

.dashboard .box__top--icon i {
    font-size: 40px;
}

@media (max-width:1800px) {
    .dashboard .box__top--icon i {
        font-size: 30px;
    }
}

.dashboard .box__top--icon svg,
.dashboard .box__top--icon img {
    height: 40px;
    width: 40px;
}

@media (max-width:1800px) {
    .dashboard .box__top--icon svg,
    .dashboard .box__top--icon img {
        height: 30px;
        width: 30px;
    }
}

@media (max-width:1800px) {
    .dashboard .box__top--icon {
        width: 60px;
    }
}

.dashboard .box__top--text {
    width: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    color: var(--color5);
}

@media (max-width:1800px) {
    .dashboard .box__top--text {
        width: calc(100% - 60px);
        padding: 5px 10px;
    }
}

.dashboard .box__top--text h5 {
    margin-bottom: 10px;
    font-size: var(--text14);
    font-weight: bold;
}

@media (max-width:1800px) {
    .dashboard .box__top--text h5 {
        font-size: var(--text12);
    }
}

.dashboard .box__top--text h6 {
    display: flex;
    align-items: center;
}

    .dashboard .box__top--text h6 span {
        font-size: var(--text14);
    }

        .dashboard .box__top--text h6 span:nth-child(1) {
            margin-left: 5px;
            color: var(--color5);
        }

        .dashboard .box__top--text h6 span:nth-child(2) {
            font-weight: bold;
        }

@media (max-width:1800px) {
    .dashboard .box__top--text h6 span {
        font-size: var(--text12);
    }
}

.dashboard .box__down {
    margin-top: 15px;
    border-radius: 15px;
    background-color: var(--color3);
    box-shadow: var(--shadow-box), var(--shadow-inset-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 225px;
}

@media (max-width:1800px) {
    .dashboard .box__down {
        height: 172px;
        margin-top: 10px;
    }
}

.dashboard .box__down--list {
    padding: 15px 15px 15px 5px;
}

    .dashboard .box__down--list ul {
        overflow-y: auto;
        overflow-x: hidden;
        padding-left: 10px;
        max-height: 185px;
        scrollbar-color: var(--color11) var(--color11);
        scrollbar-width: thin;
        /* Designing for scroll-bar */
        /* Track */
        /* Track */
        /* Handle */
        /* Handle on hover */
    }

@media (max-width:1800px) {
    .dashboard .box__down--list ul {
        max-height: 135px;
    }
}

.dashboard .box__down--list ul::-webkit-scrollbar {
    width: 5px;
}

.dashboard .box__down--list ul::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
}

.dashboard .box__down--list ul::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
}

.dashboard .box__down--list ul::-webkit-scrollbar-thumb {
    background: var(--color11);
    border-radius: 5px !important;
}

    .dashboard .box__down--list ul::-webkit-scrollbar-thumb:hover {
        background: var(--color9);
    }

.dashboard .box__down--list ul li {
    list-style: circle;
    transition: 0.3s;
    margin-right: 20px;
    margin-bottom: 15px;
}

@media (max-width:1800px) {
    .dashboard .box__down--list ul li {
        margin-bottom: 10px;
    }
}

.dashboard .box__down--list ul li a {
    font-size: var(--text14);
    font-weight: 500;
    color: var(--color6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

@media (max-width:1800px) {
    .dashboard .box__down--list ul li a {
        font-size: var(--text12);
    }
}

.dashboard .box__down--list ul li a > span {
    flex: 1;
    margin-left: 10px;
}

.dashboard .box__down--list ul li a:hover {
    text-shadow: 0 0 0.5px var(--color6);
}

    .dashboard .box__down--list ul li a:hover .box__down--list-icon span {
        background-color: var(--color11);
        color: initial;
    }

.dashboard .box__down--list ul li:hover {
    list-style: disc;
    color: var(--color1);
}

.dashboard .box__down--list-icon span {
    width: 25px;
    height: 25px;
    background-color: var(--color4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

@media (max-width:1800px) {
    .dashboard .box__down--list-icon span {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }
}

.dashboard .box__down--list-icon i, .dashboard .box__down--list-icon svg, .dashboard .box__down--list-icon img {
    font-weight: 500;
    font-size: 12px;
    width: 12px;
    height: 12px;
}

@media (max-width:1800px) {
    .dashboard .box__down--list-icon i, .dashboard .box__down--list-icon svg, .dashboard .box__down--list-icon img {
        font-size: 10px;
        width: 10px;
        height: 10px;
    }
}

.dashboard .box__down--list-notfound {
    display: none;
}

.dashboard .box__down--btn {
    width: 100%;
    height: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: flex-end;
    position: relative;
    text-align: center;
    transition: 0.3s;
}

    .dashboard .box__down--btn a, .dashboard .box__down--btn button {
        background-color: var(--color4);
        width: 100%;
        height: 100%;
        border-radius: 0 0 15px 15px;
    }

@media (max-width:1800px) {
    .dashboard .box__down--btn {
        height: 10px;
    }
}

.dashboard .box__down--btn-plus {
    width: 20px;
    height: 20px;
    background-color: var(--color4);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0 5px 0;
    transform: rotate(45deg) translateX(-50%);
    position: absolute;
    left: 50%;
    top: -2px;
    color: white;
    font-size: var(--text12);
    font-weight: 200;
    z-index: 3;
}

    .dashboard .box__down--btn-plus i {
        transform: rotate(-45deg);
    }

@media (max-width:1800px) {
    .dashboard .box__down--btn-plus {
        height: 15px;
        width: 15px;
        font-size: 10px;
        top: -2px;
        border-radius: 4px 0 4px 0;
    }
}

.dashboard .box__down--btn-more {
    transform: rotate(0deg);
    display: inline-block;
    color: white;
    font-weight: 300;
    margin-top: 8px;
    font-size: var(--text14);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

    .dashboard .box__down--btn-more:hover {
        text-shadow: 0 0 1px #fff;
    }

@media (max-width:1800px) {
    .dashboard .box__down--btn-more {
        font-size: var(--text12);
        margin-top: 5px;
    }
}

.dashboard .box__down:hover .box__down--btn {
    height: 40px;
}

.dashboard .box__down:hover .box__down--btn-more {
    opacity: 1;
    visibility: visible;
}

@media (max-width:1800px) {
    .dashboard .box__down:hover .box__down--btn {
        height: 30px;
    }
}

.dashboard .box__iconclear .box__down--list-icon {
    display: none;
}

.dashboard .box__notfound .box__down--list ul {
    display: none;
}

.dashboard .box__notfound .box__down--list-notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color9);
    height: 185px;
}

@media (max-width:1800px) {
    .dashboard .box__notfound .box__down--list-notfound {
        height: 135px;
    }
}

.dashboard .box__notfound .box__down--list-notfound span {
    display: inline-block;
    font-size: var(--text14);
}

.dashboard .box__notfound .box__down--list-notfound i {
    font-size: 40px;
    margin-bottom: 15px;
}

.dashboard .box__green .box__down {
    border: 1px solid var(--color8);
}

.dashboard .box__green .box__down--btn a, .dashboard .box__green .box__down--btn button {
    background-color: var(--color8);
}

.dashboard .box__green .box__down--btn-plus {
    background-color: var(--color8);
}

.dashboard .box__green .box__down--list ul li a:hover {
    text-shadow: none;
    color: var(--color8);
}

.dashboard .box__green .box__down--list ul li:hover {
    list-style: disc;
    color: var(--color8);
}

.dashboard .box__green .box__top--icon {
    background-color: #E7F3DE;
    color: var(--color8);
}

.dashboard .box__green .box__top--text h6 span:nth-child(2) {
    color: var(--color8);
}

.dashboard .box__orange .box__down {
    border: 1px solid var(--color7);
}

.dashboard .box__orange .box__down--btn a, .dashboard .box__orange .box__down--btn button {
    background-color: var(--color7);
}

.dashboard .box__orange .box__down--btn-plus {
    background-color: var(--color7);
}

.dashboard .box__orange .box__down--list ul li a:hover {
    text-shadow: none;
    color: var(--color7);
}

.dashboard .box__orange .box__down--list ul li:hover {
    list-style: disc;
    color: var(--color7);
}

.dashboard .box__orange .box__top--icon {
    background-color: #FFECE6;
    color: var(--color7);
}

.dashboard .box__orange .box__top--text h6 span:nth-child(2) {
    color: var(--color7);
}

.dashboard .box__lightblue .box__down {
    border: 1px solid var(--color2);
}

.dashboard .box__lightblue .box__down--btn a, .dashboard .box__lightblue .box__down--btn button {
    background-color: var(--color2);
}

.dashboard .box__lightblue .box__down--btn-plus {
    background-color: var(--color2);
}

.dashboard .box__lightblue .box__down--list ul li a:hover {
    text-shadow: none;
    color: var(--color2);
}

.dashboard .box__lightblue .box__down--list ul li:hover {
    list-style: disc;
    color: var(--color2);
}

.dashboard .box__lightblue .box__top--icon {
    background-color: #D7F4FF;
    color: var(--color2);
}

.dashboard .box__lightblue .box__top--text h6 span:nth-child(2) {
    color: var(--color2);
}

.dashboard .box__darkblue .box__down {
    border: 1px solid var(--color5);
}

.dashboard .box__darkblue .box__down--btn a, .dashboard .box__darkblue .box__down--btn button {
    background-color: var(--color5);
}

.dashboard .box__darkblue .box__down--btn-plus {
    background-color: var(--color5);
}

.dashboard .box__darkblue .box__down--list ul li a:hover {
    text-shadow: none;
    color: var(--color5);
}

.dashboard .box__darkblue .box__down--list ul li:hover {
    list-style: disc;
    color: var(--color5);
}

.dashboard .box__darkblue .box__top--icon {
    background-color: #D1E3F5;
    color: var(--color5);
}

.dashboard .box__darkblue .box__top--text h6 span:nth-child(2) {
    color: var(--color5);
}

.dashboard .box__yellow .box__down {
    border: 1px solid var(--color13);
}

.dashboard .box__yellow .box__down--btn a, .dashboard .box__yellow .box__down--btn button {
    background-color: var(--color13);
}

.dashboard .box__yellow .box__down--btn-plus {
    background-color: var(--color13);
}

.dashboard .box__yellow .box__down--list ul li a:hover {
    text-shadow: none;
    color: var(--color13);
}

.dashboard .box__yellow .box__down--list ul li:hover {
    list-style: disc;
    color: var(--color13);
}

.dashboard .box__yellow .box__top--icon {
    background-color: #FFF9DB;
    color: var(--color13);
}

.dashboard .box__yellow .box__top--text h6 span:nth-child(2) {
    color: var(--color13);
}

.dashboard .box__red .box__down {
    border: 1px solid var(--color12);
}

.dashboard .box__red .box__down--btn a, .dashboard .box__red .box__down--btn button {
    background-color: var(--color12);
}

.dashboard .box__red .box__down--btn-plus {
    background-color: var(--color12);
}

.dashboard .box__red .box__down--list ul li a:hover {
    text-shadow: none;
    color: var(--color12);
}

.dashboard .box__red .box__down--list ul li:hover {
    list-style: disc;
    color: var(--color12);
}

.dashboard .box__red .box__top--icon {
    background-color: #FFE7E7;
    color: var(--color12);
}

.dashboard .box__red .box__top--text h6 span:nth-child(2) {
    color: var(--color12);
}

/*==== error__form ====*/
.error__form {
    color: var(--color7);
    font-weight: 500;
    font-size: var(--text14);
}

.error__form--circle {
    width: 20px;
    height: 20px;
    background-color: var(--color7);
    display: inline-block;
    border-radius: 50%;
    color: var(--color3);
    padding-top: 5px;
    margin-left: 10px;
}

@media (max-width:576px) {
    .error__form--circle {
        width: 15px;
        height: 15px;
        font-size: var(--text12);
        padding-top: 0;
    }
}

@media (max-width:576px) {
    .error__form {
        font-size: var(--text12);
    }
}

/* dropdown */
.dropdown {
    /* dropdown__parent */
    /* dropdown__arrow */
    /* dropdown__all */
    /* dropdown__button */
    /* dropdown__result */
    /* dropdown__notfound */
}

.dropdown__holder {
    padding-top: 15px;
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    z-index: 30;
    min-width: 100%;
}

@media (max-width:768px) {
    .dropdown__holder {
        left: calc(-100% + 35px);
        transform: none;
    }
}

.dropdown__parent {
    display: block;
    background-color: var(--color-bg);
    min-width: 280px;
    min-height: 45px;
    border-radius: 15px;
    box-shadow: var(--shadow-dropdown), 0 -2px 10px rgba(0, 0, 0, 0.05);
    transition: 0.1s;
    z-index: 99;
    padding-top: 15px;
}

    .dropdown__parent select {
        width: 290px;
        height: 45px;
    }

.dropdown__arrow {
    padding: 15px 0 0 0;
    position: relative;
}

    .dropdown__arrow::after {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 15px;
        height: 15px;
        background-color: var(--color-bg);
        z-index: 6;
        box-shadow: -3px -3px 3px rgba(0, 0, 0, 0.03);
    }

@media (max-width:768px) {
    .dropdown__arrow::after {
        left: 18px;
        transform: translateX(0) rotate(45deg);
    }
}

@media (max-width:576px) {
    .dropdown__arrow::after {
        display: none;
    }
}

.dropdown__all {
    padding: 0 0 0 3px;
}

    .dropdown__all input[type=search] {
        min-width: calc(100% - 25px);
        height: 45px;
        border-radius: 8px;
        border: 1px solid var(--color4);
        background-color: var(--color10);
        font-size: var(--text12);
        color: var(--color9);
        padding: 5px 15px;
        margin: 0 15px 15px 10px;
        position: relative;
    }

        .dropdown__all input[type=search]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-left: 0px;
            cursor: pointer;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 43%, #D12929 45%, #D12929 55%, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0, 0) 100%), linear-gradient(135deg, transparent 0%, transparent 43%, #D12929 45%, #D12929 55%, transparent 57%, transparent 100%);
        }

    .dropdown__all input::-moz-placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: var(--color9);
        opacity: 1;
        /* Firefox */
    }

    .dropdown__all input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: var(--color9);
        opacity: 1;
        /* Firefox */
    }

    .dropdown__all input::-webkit-search-cancel-button {
        color: red;
    }

    .dropdown__all input:focus, .dropdown__all input:hover {
        border: 1px solid var(--color1);
    }

.dropdown__button {
    cursor: pointer;
    position: relative;
}

.dropdown__button_open .dropdown__holder {
    visibility: visible;
    display: block;
    opacity: 1;
}

.dropdown__button_open .arrow-change {
    transform: rotate(180deg) translateX(-10px);
}

.dropdown__result {
    padding: 5px 15px 15px 15px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
    /* Designing for scroll-bar */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

    .dropdown__result::-webkit-scrollbar {
        width: 5px;
    }

    .dropdown__result::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
    }

    .dropdown__result::-webkit-scrollbar-thumb {
        background: var(--color11);
        border-radius: 5px;
    }

        .dropdown__result::-webkit-scrollbar-thumb:hover {
            background: var(--color9);
        }

    .dropdown__result .notfound {
        display: none;
    }

.dropdown__notfound .found :not(.notfound), .dropdown__notfound .found :not(.notfound span) {
    display: none;
    opacity: 0;
}

.dropdown__notfound .notfound {
    color: var(--color7);
    min-width: 250px;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: var(--text14);
    padding: 15px 15px 30px 15px;
    opacity: 1 !important;
}

@media (max-width:1800px) {
    .dropdown__notfound .notfound {
        font-size: var(--text12);
    }
}

.dropdown__notfound .notfound span {
    display: block !important;
    opacity: 1 !important;
}

.dropdown__holder {
    z-index: 30;
}

.dropdown__holder--leftside {
    left: calc(-100% + 35px);
    transform: none;
}

    .dropdown__holder--leftside .dropdown__arrow::after {
        left: 27px;
        transform: translateX(0) rotate(45deg);
    }

.dropdown__holder--leftside-md {
    left: calc(-100% + 30px);
    transform: none;
}

    .dropdown__holder--leftside-md .dropdown__arrow::after {
        left: 23px;
        transform: translateX(0) rotate(45deg);
    }

.dropdown__holder--leftside2 {
    left: 0;
    transform: none;
}

    .dropdown__holder--leftside2 .dropdown__arrow::after {
        left: 20px;
        transform: translateX(0) rotate(45deg);
    }

.dropdown__holder--rightside {
    left: auto;
    right: -35px;
    transform: translateX(0);
}

    .dropdown__holder--rightside .dropdown__arrow::after {
        left: auto;
        right: 57px;
        transform: translateX(0) rotate(45deg);
    }

.dropdown__holder--rightside2 {
    left: auto;
    right: -15px;
    transform: translateX(0);
}

    .dropdown__holder--rightside2 .dropdown__arrow::after {
        left: auto;
        right: 25px;
        transform: translateX(0) rotate(45deg);
    }

@media (max-width:768px) {
    .dropdown__holder--rightside2 {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) !important;
        top: auto !important;
    }

        .dropdown__holder--rightside2 .dropdown__arrow::after {
            left: auto;
            right: 25px;
            transform: translateX(0) rotate(45deg);
        }
}

/* search */
.search__box {
    margin-top: 20px;
}

    .search__box:first-child {
        margin-top: 0;
    }

.search__box-subject {
    margin-bottom: 10px;
}

    .search__box-subject h3 {
        font-size: var(--text16);
        font-weight: bold;
        color: var(--color5);
    }

@media (max-width:1800px) {
    .search__box-subject h3 {
        font-size: var(--text14);
    }
}

.search__box-items {
    width: 100%;
}

    .search__box-items li {
        margin-bottom: 10px;
        width: 100%;
        margin: 0 !important;
    }

        .search__box-items li a {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: var(--color6);
            width: 100%;
            height: 100%;
            margin-bottom: 10px;
        }

            .search__box-items li a i {
                font-size: 15px !important;
                font-weight: 500 !important;
            }

            .search__box-items li a span {
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 5px;
                border: 1px solid var(--color11);
                background-color: var(--color10);
                margin-left: 10px;
                transition: 0.3s;
            }

            .search__box-items li a h6 {
                font-size: var(--text14);
                color: var(--color6);
                transition: 0.3s;
            }

@media (max-width:1800px) {
    .search__box-items li a h6 {
        font-size: var(--text12);
    }
}

.search__box-items li a:hover span {
    background-color: var(--color4);
    color: var(--color1);
}

.search__box-items li a:hover h6 {
    color: var(--color1);
}

#dropdown__admin {
    min-width: 180px;
}

/* notif */
#dropdown__notif {
    background-color: var(--color3);
}

    #dropdown__notif::after {
        background-color: var(--color3);
    }

/* contact */
.contact__item {
    border-bottom: 1px solid var(--color4);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

    .contact__item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

.contact__right {
    flex: 1;
    display: flex;
    align-items: center;
}

.contact__right--pic {
    margin-left: 10px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: var(--shadow-box);
}

@media (max-width:1800px) {
    .contact__right--pic {
        width: 40px;
        height: 40px;
    }
}

.contact__right--pic img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.contact__right--name {
    font-size: var(--text14);
    color: var(--color6);
    flex: 1;
}

@media (max-width:1800px) {
    .contact__right--name {
        font-size: var(--text12);
    }
}

.contact__left--icon {
    display: flex;
    align-items: center;
}

    .contact__left--icon a {
        margin-right: 5px;
        color: var(--color1);
        background-color: var(--color4);
        border-radius: 10px;
        width: 30px;
        height: 35px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .contact__left--icon a:hover {
            background-color: var(--color5);
            color: var(--color3);
        }

@media (max-width:1800px) {
    .contact__left--icon a {
        width: 25px;
        height: 30px;
        font-size: 12px;
        border-radius: 8px;
    }
}

.content__section--heading-btns .dropdown__holder--leftside2 .dropdown__arrow::after {
    left: 15px;
    transform: translateX(0) rotate(45deg);
}

td {
    position: relative;
}

.fileActionsMenu {
    background-color: var(--color-bg);
    min-width: -moz-max-content;
    min-width: max-content;
    min-height: 45px;
    border-radius: 15px;
    box-shadow: var(--shadow-dropdown), 0 -2px 10px rgba(0, 0, 0, 0.05);
    transition: 0.1s;
    z-index: 99;
    padding: 15px;
    position: absolute;
    right: 100%;
    top: calc(100% + 10px);
}

    .fileActionsMenu i,
    .fileActionsMenu svg,
    .fileActionsMenu img {
        width: 15px;
        height: 15px;
        font-size: 15px;
        margin-left: 10px;
        color: var(--color1);
    }

    .fileActionsMenu ul {
        border-bottom: 1px solid var(--color4);
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

        .fileActionsMenu ul:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .fileActionsMenu ul li {
            margin-bottom: 10px;
        }

            .fileActionsMenu ul li:last-child {
                margin-bottom: 0;
            }

            .fileActionsMenu ul li a {
                display: flex;
                align-items: center;
                width: 100%;
                font-size: var(--text14);
                color: var(--color6);
            }

                .fileActionsMenu ul li a:hover {
                    color: var(--color1);
                    text-shadow: 0 0 0.5px var(--color1);
                }

@media (max-width:1800px) {
    .fileActionsMenu ul li a {
        font-size: var(--text12);
    }
}

.fileActionsMenu ul li a > span {
    display: flex;
}

.fileActionsMenu ul li h6 {
    font-size: var(--text14);
    font-weight: 500;
}

@media (max-width:1800px) {
    .fileActionsMenu ul li h6 {
        font-size: var(--text12);
    }
}

.modal__parent {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 113, 184, 0.8);
    z-index: 90;
    opacity: 0;
    display: none;
    border-radius: 0 60px 0 0;
}

.modal__box {
    width: 50%;
    background-color: white;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(calc(-100% + 350px)) translateY(-50%) !important;
    box-shadow: var(--shadow-modal);
    padding: 30px !important;
    max-height: 80%;
    overflow-y: auto;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
    /* Designing for scroll-bar */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

    .modal__box::-webkit-scrollbar {
        width: 5px;
    }

    .modal__box::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
    }

    .modal__box::-webkit-scrollbar-thumb {
        background: var(--color11);
        border-radius: 5px;
    }

        .modal__box::-webkit-scrollbar-thumb:hover {
            background: var(--color9);
        }

@media (max-width:1800px) {
    .modal__box {
        width: 70%;
        top: 50%;
        left: calc(50% - 100px);
        transform: translateX(-50%) translateY(-50%) !important;
    }
}

@media (max-width:1400px) {
    .modal__box {
        width: 65%;
        left: calc(50% - 120px);
    }
}

@media (max-width:1200px) {
    .modal__box {
        width: 65%;
        top: 50%;
        left: calc(50% - 120px);
        transform: translateX(-50%) translateY(-50%) !important;
    }
}

@media (max-width:1080px) {
    .modal__box {
        width: 60%;
        top: 50%;
        left: calc(50% - 140px);
    }
}

@media (max-width:768px) {
    .modal__box {
        width: 90%;
        left: 50%;
        padding: 15px !important;
    }
}

.modal__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color4);
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.modal__heading--title {
    display: flex;
    align-items: center;
}

    .modal__heading--title i, .modal__heading--title svg {
        margin-left: 10px;
        height: 20px;
        width: 20px;
        font-size: 20px;
    }

    .modal__heading--title h4 {
        font-weight: bold;
    }

.modal__content {
    margin-top: 15px;
}

    .modal__content .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice {
        padding: 5px 0 5px 30px;
    }

.modal__close {
    color: var(--color7);
}

.modal__explain {
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--color5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .modal__explain h4 {
        font-weight: 500;
        font-size: var(--text14);
    }

@media (max-width:768px) {
    .modal__explain h4 {
        font-size: 13px;
    }
}

.modal__explain p {
    font-size: var(--text14);
    color: var(--color6);
}

@media (max-width:768px) {
    .modal__explain p {
        font-size: var(--text12);
    }
}

.modal__explain span {
    font-size: var(--text12);
    color: var(--color9);
    margin-top: 5px;
}

@media (max-width:768px) {
    .modal__explain span {
        font-size: 11px;
    }
}

.modal__explain--activities {
    display: flex;
    align-items: center;
}

.modal__open {
    opacity: 1;
    display: block;
}

.modal__add {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 15px;
}

@media (max-width:1200px) {
    .modal__add {
        grid-template-columns: 1fr 2fr;
        gap: 10px;
    }
}

@media (max-width:768px) {
    .modal__add {
        grid-template-columns: 1fr 2fr;
    }
}

.modal__add--list {
    background-color: var(--color-bg);
    border: 1px solid var(--color4);
    padding: 15px;
    border-radius: 15px;
}

@media (max-width:1200px) {
    .modal__add--list {
        padding: 10px 5px;
    }
}

.modal__add--list ul {
    width: 100%;
}

    .modal__add--list ul > li {
        margin-bottom: 10px;
        width: 100%;
    }

        .modal__add--list ul > li > a, .modal__add--list ul > li > button {
            background-color: white;
            padding: 10px 15px;
            display: inline-block;
            width: 100%;
            border-radius: 60px;
            color: var(--color9);
            font-size: var(--text14);
        }

            .modal__add--list ul > li > a:hover, .modal__add--list ul > li > button:hover {
                background-color: var(--color4);
                color: var(--color5);
            }

@media (max-width:1200px) {
    .modal__add--list ul > li > a, .modal__add--list ul > li > button {
        font-size: var(--text12);
    }
}

@media (max-width:768px) {
    .modal__add--list ul > li > a, .modal__add--list ul > li > button {
        font-size: 10px;
        padding: 8px 5px;
    }
}

.modal__add--list ul > li.add_active > a, .modal__add--list ul > li.add_active > button {
    background-color: var(--color4);
    color: var(--color5);
}

.modal__add--content {
    background-color: var(--color-bg);
    border: 1px solid var(--color4);
    padding: 15px;
    border-radius: 15px;
    max-height: 400px;
    overflow-y: scroll;
}

@media (max-width:1200px) {
    .modal__add--content {
        padding: 10px;
    }
}

.modal__add--box {
    margin-bottom: 30px;
}

@media (max-width:1200px) {
    .modal__add--box {
        margin-bottom: 15px;
    }
}

.modal__add--box-date {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    padding: 10px 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    font-weight: bold;
}

@media (max-width:1200px) {
    .modal__add--box-date {
        padding: 8px 10px;
        margin-bottom: 10px;
    }
}

.modal__add--box-date i, .modal__add--box-date svg, .modal__add--box-date img {
    width: 20px;
    height: 20px;
    font-size: 20px;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

@media (max-width:1200px) {
    .modal__add--box-date i, .modal__add--box-date svg, .modal__add--box-date img {
        font-size: var(--text14);
        margin-left: 5px;
    }
}

.modal__add--box-date span {
    font-size: var(--text16);
}

@media (max-width:1200px) {
    .modal__add--box-date span {
        font-size: var(--text14);
    }
}

.modal__add .gallery__parent {
    gap: 10px;
}

.modal__form .tabs__box {
    min-height: 300px;
    height: auto;
}

.modal__heading--title-btn .btn__circle {
    background-color: var(--color4);
    margin-right: 0px !important;
    margin-left: 15px;
    width: 35px;
    height: 35px;
    font-size: 15px;
}

    .modal__heading--title-btn .btn__circle i, .modal__heading--title-btn .btn__circle svg {
        margin-left: 0;
        height: 10px;
        width: 10px;
        font-size: 10px;
    }

    .modal__heading--title-btn .btn__circle:hover {
        background-color: var(--color5);
    }

.files__container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 5px;
    width: 100%;
}

.files__container--1fr {
    grid-template-columns: 1fr;
}

    .files__container--1fr .files__information {
        width: calc(100% - 30px);
        margin: 0 auto;
        margin-bottom: 15px;
        border-radius: 15px;
    }

        .files__container--1fr .files__information .total {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

    .files__container--1fr .files__information--heading {
        margin-left: 30px;
    }

@media (max-width:576px) {
    .files__container--1fr .files__information--heading {
        margin-left: 15px;
    }
}

.files__container--1fr .files__information--list {
    display: inline-flex;
    justify-content: flex-start;
    margin: 0;
    width: auto;
}

    .files__container--1fr .files__information--list li {
        border-left: 1px solid var(--color4);
        padding: 0 30px;
        min-width: -moz-max-content;
        min-width: max-content;
    }

        .files__container--1fr .files__information--list li:last-child {
            border-left: none;
            padding: 0 30px 0 0;
        }

        .files__container--1fr .files__information--list li:first-child {
            padding: 0 0 0 30px;
        }

@media (max-width:576px) {
    .files__container--1fr .files__information--list li {
        padding: 0 5px;
    }
}

.files__container--1fr .files__information--choose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    font-size: var(--text12);
    color: var(--color6);
}

@media (max-width:1200px) {
    .files__container {
        grid-template-columns: 1fr;
    }
}

.files__right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (max-width:1800px) {
    .files__right {
        gap: 15px;
    }
}

@media (max-width:1200px) {
    .files__right {
        padding: 0 15px;
        margin-bottom: 15px;
        flex-direction: column-reverse;
    }
}

@media (max-width:576px) {
    .files__right {
        padding: 0 5px;
    }
}

.files__left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 15px;
}

@media (max-width:1800px) {
    .files__left {
        gap: 15px;
    }
}

@media (max-width:576px) {
    .files__left {
        padding: 0 5px;
    }
}

.files__widget {
    border-radius: 15px;
    padding: 15px;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-boxfile);
}

.files__information {
    width: 100%;
}

.files__information--heading h3 {
    font-size: var(--text14);
    color: var(--color6);
}

.files__information--list {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}

    .files__information--list li {
        border-left: 1px solid var(--color4);
        padding-left: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: var(--text12);
        color: var(--color9);
    }

        .files__information--list li:last-child {
            border-left: none;
            padding-left: 0;
        }

@media (max-width:1800px) {
    .files__information--list li {
        font-size: 11px;
    }
}

.files__information--choose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    font-size: var(--text12);
    color: var(--color6);
}

.files__cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

@media (max-width:1800px) {
    .files__cards {
        gap: 15px;
    }
}

@media (max-width:1200px) {
    .files__cards {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (max-width:1080px) {
    .files__cards {
        flex-direction: column;
        justify-content: flex-start;
    }
}

@media (max-width:768px) {
    .files__cards {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (max-width:576px) {
    .files__cards {
        flex-direction: column;
        justify-content: flex-start;
    }
}

.files__cards--item {
    border-radius: 15px;
    padding: 35px 15px 25px 15px;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-boxfile);
    position: relative;
}

@media (max-width:1800px) {
    .files__cards--item {
        padding: 15px 15px 25px 15px;
    }
}

@media (max-width:1400px) {
    .files__cards--item {
        flex-basis: calc(33% - 15px);
    }
}

.files__cards--item-text {
    z-index: 6;
    position: relative;
}

    .files__cards--item-text h4 {
        font-size: var(--text14);
        color: var(--color6);
        margin-bottom: 15px;
        transition: 0.3s;
    }

    .files__cards--item-text span {
        font-size: var(--text12);
        color: var(--color9);
        transition: 0.3s;
    }

.files__cards--item-border {
    height: 10px;
    width: 70%;
    border-radius: 0 30px 0 30px;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: 0.3s;
    z-index: 0;
}

@media (max-width:1800px) {
    .files__cards--item-border {
        border-radius: 0 15px 0 15px;
    }
}

.files__cards--item-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color4);
    transition: 0.3s;
}

    .files__cards--item-icon i {
        font-size: 35px;
    }

.files__cards--item:hover .files__cards--item-text {
    color: var(--color3);
}

    .files__cards--item:hover .files__cards--item-text h4 {
        color: var(--color3);
    }

    .files__cards--item:hover .files__cards--item-text span {
        color: var(--color3);
    }

.files__cards--item:hover .files__cards--item-border {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.files__cards--item:hover .files__cards--item-icon {
    transform: scale(1.2) translateY(-50%);
}

.files__cards--green .files__cards--item-border {
    background-color: var(--color8);
}

.files__cards--orange .files__cards--item-border {
    background-color: var(--color7);
}

.files__cards--lightblue .files__cards--item-border {
    background-color: var(--color2);
}

.files__history {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

@media (max-width:1800px) {
    .files__history {
        gap: 15px;
    }
}

@media (max-width:1400px) {
    .files__history {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:1080px) {
    .files__history {
        grid-template-columns: 1fr;
    }
}

@media (max-width:768px) {
    .files__history {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:576px) {
    .files__history {
        grid-template-columns: 1fr;
    }
}

.files__history--item {
    border: 1px solid var(--color4);
    background-color: var(--color-bg);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 10px;
}

    .files__history--item:hover {
        background-color: var(--color4);
    }

        .files__history--item:hover h6 {
            text-shadow: 0 0 0.5px var(--color6);
        }

        .files__history--item:hover .files__name--icon {
            background-color: var(--color3);
        }

.files__name--text {
    flex: 1;
}

    .files__name--text h6 {
        font-size: var(--text12);
        color: var(--color6);
        transition: 0.3s;
    }

    .files__name--text span {
        font-size: 9px;
        color: var(--color9);
    }

.files__name--icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: var(--color8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: 0.3s;
    color: var(--color6);
}

    .files__name--icon img, .files__name--icon svg {
        width: 15px;
        height: 15px;
    }

.files__name--xls .files__name--icon {
    background-color: #E7F3DE;
    color: var(--color8);
}

.files__name--pdf .files__name--icon {
    background-color: #FFE7E7;
    color: var(--color8);
}

.files__name--doc .files__name--icon {
    background-color: #D7F4FF;
    color: var(--color2);
}

.files__name--any .files__name--icon {
    background-color: var(--color4);
    color: var(--color9);
}

.note__add {
    padding: 0 0 0 15px;
    width: 100%;
    margin-bottom: 15px;
    display: none;
}

.note_open {
    display: block;
}

.note__box {
    width: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: var(--shadow-boxfile);
    padding: 15px;
    min-height: 150px;
    position: relative;
}

.note__buttons {
    display: flex;
    align-items: center;
    position: absolute;
    left: 15px;
    top: 15px;
}

.note__save {
    font-size: var(--text12);
    background-color: var(--color4);
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    height: 40px;
}

    .note__save i, .note__save svg, .note__save img {
        width: 10px;
        height: 10px;
        font-size: 10px;
        margin-right: 10px;
        fill: var(--color8);
        color: var(--color8);
    }

.note__share {
    position: relative;
}

.note__share--btn {
    font-size: var(--text12);
    background-color: var(--color4);
    color: var(--color5);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    position: relative;
}

    .note__share--btn:hover {
        background-color: var(--color5);
        color: var(--color3);
    }

        .note__share--btn:hover i, .note__share--btn:hover svg {
            color: var(--color3);
            fill: var(--color3);
        }

.note__share i, .note__share svg, .note__share img {
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: var(--color5);
    fill: var(--color5);
}

.note__result {
    min-width: 200px;
}

.note__date {
    font-size: var(--text12);
    color: var(--color9);
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color4);
}

.note__author {
    display: flex;
    align-items: center;
}

.note__author--pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

    .note__author--pic img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

.note__author--text {
    font-size: var(--text12);
    flex: 1;
    margin-right: 10px;
}

.note__close {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 10px;
}

    .note__close i, .note__close img, .note__close svg {
        width: 10px;
        height: 10px;
        font-size: 10px;
        color: var(--color12);
        fill: var(--color12);
    }

.note__check {
    font-size: var(--text12);
    margin-top: 15px;
}

    .note__check p {
        margin-top: 10px;
        color: var(--color9);
        font-weight: 400;
    }

table,
table tbody,
table thead {
    /*display: block;*/
    width: 100%;
}

tbody,
table,
.files__table {
    height: 100%;
}

/*tbody tr,
thead tr {
  display: grid !important;
  grid-template-columns: 4fr 2fr 1fr 1fr;
}*/

table {
    border-collapse: collapse;
    border-radius: 15px;
    /* min-width: 700px;*/
}

@media (max-width:1400px) {
    table {
        /*width: 1280px;*/
    }
}

thead {
    border-radius: 15px 15px 0 0;
    background-color: #ebf3f7;
}

tbody {
    max-height: 450px;
    overflow: auto;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
    width: 100%;
    /* Designing for scroll-bar */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

@media (max-width:1800px) {
    tbody {
        max-height: 355px;
    }
}

tbody::-webkit-scrollbar {
    width: 5px;
}

tbody::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
}

tbody::-webkit-scrollbar-thumb {
    background: var(--color11);
    border-radius: 5px;
}

    tbody::-webkit-scrollbar-thumb:hover {
        background: var(--color9);
    }
/*tbody tr {
  transition: 0.3s;
  display: flex;
  align-items: center;
}
tbody tr:hover {
  background-color: #e6f1f6;
}
tbody tr:hover .files__name {
  text-shadow: 0 0 0.5px var(--color5);
}
tbody tr:hover .files__buttons > a,
tbody tr:hover .files__buttons > button {
  background-color: var(--color3);
}
tbody tr:hover .dropdown__button > a,
tbody tr:hover .dropdown__button > button {
  background-color: var(--color3);
}
tbody tr:hover .check-item .checkmark {
  background-color: var(--color3);
}
tbody tr .dropdown__button > a:hover,
tbody tr .dropdown__button > button:hover {
  background-color: var(--color5);
}*/

th {
    font-size: var(--text14);
    color: var(--color5);
}

td {
    font-size: var(--text12);
    color: var(--color6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    td .shared {
        font-size: var(--text12);
        font-weight: 400;
        min-width: -moz-max-content;
        min-width: max-content;
        color: var(--color1);
    }

th {
    text-align: right;
    padding: 10.2px 8px;
}

    th .check-item .checkmark {
        background-color: var(--color3);
    }

td {
    text-align: right;
    padding: 0 15px 0 0;
}

tr {
    border-bottom: 1px solid var(--color4);
}

    tr:first-child th:first-child {
        padding-right: 15px;
    }

    tr:last-child {
        border-bottom: none;
    }

    tr td:first-child {
        color: var(--color5);
        font-weight: bold;
    }

.files__name {
    transition: 0.3s;
    font-size: var(--text14);
}

@media (max-width:1800px) {
    .files__name {
        font-size: var(--text12);
    }
}

.files__size,
.files__date {
    color: var(--color9);
}

.files__table {
    border-radius: 30px;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-boxfile);
    width: 100%;
    overflow: hidden;
    border: 1px solid #dde4ea;
    overflow-x: auto;
}

@media (max-width:1800px) {
    .files__table {
        border-radius: 15px;
    }
}

.files__table .files__name {
    width: 100%;
    display: inline-flex;
    padding: 12px 0;
}

.files__table .files__name--table {
    display: flex;
    width: 100%;
    align-items: center;
}

.files__table .picname__pic {
    width: 30px;
    height: 30px;
    margin-left: 5px;
}

.files__buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 40px;
}

.files__buttons--item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.files__buttons i {
    font-size: 14px;
}

@media (max-width:1800px) {
    .files__buttons i {
        font-size: 12px;
    }
}

.files__buttons--favorited {
    background-color: var(--color8);
    color: white;
    fill: white;
    display: none;
}

    .files__buttons--favorited i,
    .files__buttons--favorited svg {
        color: white;
        fill: white;
    }

    .files__buttons--favorited:hover {
        background-color: var(--color8) !important;
        color: white;
        fill: white;
    }

.files__buttons--sharing {
    background-color: var(--color4);
    color: var(--color5);
}

.files__buttons--more {
    background-color: var(--color4);
    color: var(--color5);
}

.files__buttons > a:hover {
    background-color: var(--color5) !important;
    color: var(--color3);
}

.favorite-active .files__buttons--favorited {
    display: flex;
}

.table__list {
    overflow-x: auto;
}

    .table__list table {
        border: 1px solid var(--color11);
    }

    .table__list tbody tr,
    .table__list thead tr {
        display: flex !important;
        justify-content: space-between;
        border-bottom: 1px solid var(--color11);
        align-items: normal;
    }

    .table__list tbody {
        background-color: var(--color3);
        border-radius: 0 0 15px 15px;
    }

        .table__list tbody tr:last-child {
            border-bottom: none;
        }

    .table__list tr td:first-child {
        font-weight: 400;
        color: var(--color6);
    }

    .table__list td {
        padding: 15px;
        border-left: 1px solid var(--color11);
        width: 100%;
        text-align: center;
        justify-content: center;
    }

        .table__list td:last-child {
            border-left: none;
        }

    .table__list th {
        text-align: center;
        border-left: 1px solid var(--color11);
        padding: 15px;
        width: 100%;
    }

        .table__list th:last-child {
            border-left: none;
        }

.table__list--texticon {
    display: flex;
    align-items: center;
}

    .table__list--texticon i,
    .table__list--texticon svg,
    .table__list--texticon img {
        width: 20px;
        height: 20px;
        font-size: var(--text14);
        margin-left: 5px;
    }

.table__list .picname .picname__pic {
    width: 30px;
    height: 30px;
    margin-left: 5px;
}

.table__list .picname .picname__name {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex: 1;
    align-items: center;
}

.table__list .files__buttons {
    padding-left: 0;
}

.table__list .dropdown__holder--leftside2 .dropdown__arrow::after {
    left: 10px;
    transform: translateX(0) rotate(45deg);
}

.table__contact td {
    padding: 15px 5px;
}

.table__contact tbody tr:hover .contact__action input[type=email], .table__contact tbody tr:hover .multiselect__input {
    background-color: var(--color3);
}

.table__contact tbody tr:hover .contact__action .header__admin--name-shape svg {
    color: var(--color3);
}

.table__contact tbody tr:hover .contact__form--submit {
    background-color: var(--color3);
}

.table__contact tbody tr:hover .contact__action .select2-container .select2-selection--single {
    background-color: white;
}

.table__contact tbody tr:hover .contact__action .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-color: var(--color4);
}

.table__month, .table__week, .table__day {
    overflow-x: auto;
}

    .table__month tbody, .table__week tbody, .table__day tbody {
        background-color: var(--color3);
        border-radius: 0 0 15px 15px;
    }

    .table__month tr:first-child th:first-child, .table__week tr:first-child th:first-child, .table__day tr:first-child th:first-child {
        padding-right: 15px;
    }

    .table__month table, .table__week table, .table__day table {
        border: 1px solid var(--color11);
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .table__month tbody tr:last-child, .table__week tbody tr:last-child, .table__day tbody tr:last-child {
        border-bottom: none;
    }

    .table__month tbody tr ul, .table__week tbody tr ul, .table__day tbody tr ul {
        display: flex;
        flex-direction: column;
        font-size: 11px;
    }

        .table__month tbody tr ul li, .table__week tbody tr ul li, .table__day tbody tr ul li {
            width: 100%;
            text-align: right;
            list-style: disc;
            color: var(--color9);
        }

    .table__month tbody tr:hover, .table__week tbody tr:hover, .table__day tbody tr:hover {
        background-color: transparent;
    }

    .table__month tbody td, .table__week tbody td, .table__day tbody td {
        transition: 0.3s;
        padding: 0;
    }

        .table__month tbody td .table__box--item, .table__week tbody td .table__box--item, .table__day tbody td .table__box--item {
            width: 100%;
            height: 100%;
            padding: 15px 15px 15px 5px;
        }

            .table__month tbody td .table__box--item > span,
            .table__month tbody td ul li, .table__week tbody td .table__box--item > span,
            .table__week tbody td ul li, .table__day tbody td .table__box--item > span,
            .table__day tbody td ul li {
                transition: 0.3s;
            }

            .table__month tbody td .table__box--item > span, .table__week tbody td .table__box--item > span, .table__day tbody td .table__box--item > span {
                font-size: var(--text16);
                color: var(--color5);
                font-weight: bold;
            }

        .table__month tbody td:hover, .table__week tbody td:hover, .table__day tbody td:hover {
            background-color: var(--color4);
        }

            .table__month tbody td:hover .table__box--item > span, .table__week tbody td:hover .table__box--item > span, .table__day tbody td:hover .table__box--item > span {
                color: var(--color7);
            }

            .table__month tbody td:hover .table__box--item ul li, .table__week tbody td:hover .table__box--item ul li, .table__day tbody td:hover .table__box--item ul li {
                color: var(--color6);
            }

    .table__month tr td:first-child, .table__week tr td:first-child, .table__day tr td:first-child {
        font-weight: 400;
        color: var(--color6);
    }

    .table__month td, .table__week td, .table__day td {
        padding: 15px 10px;
        border-left: 1px solid var(--color11);
        width: 100%;
        text-align: center;
        justify-content: center;
    }

        .table__month td:last-child, .table__week td:last-child, .table__day td:last-child {
            border-left: none;
        }

    .table__month th, .table__week th, .table__day th {
        text-align: center;
        padding: 15px 10px;
        width: 100%;
    }

        .table__month th:last-child, .table__week th:last-child, .table__day th:last-child {
            border-left: none;
        }

        .table__month th a, .table__week th a, .table__day th a {
            background-color: var(--color3);
            padding: 5px;
            border-radius: 30px;
            font-size: var(--text12);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
            width: 70px;
            display: inline-block;
        }

            .table__month th a:hover, .table__week th a:hover, .table__day th a:hover {
                background-color: var(--color5);
                color: var(--color3);
            }

                .table__month th a:hover span, .table__week th a:hover span, .table__day th a:hover span {
                    color: var(--color3);
                }

            .table__month th a span, .table__week th a span, .table__day th a span {
                font-size: 11px;
                color: var(--color9);
                font-weight: lighter;
                transition: 0.3s;
            }

.table__month--item, .table__week--item, .table__day--item {
    display: flex;
    flex-direction: column;
}

    .table__month--item > span, .table__week--item > span, .table__day--item > span {
        font-size: var(--text16);
        font-weight: bold;
        color: var(--color5);
    }

.table__month tbody tr,
.table__month thead tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--color11);
    align-items: normal;
}

.table__week tbody tr,
.table__week thead tr {
    display: grid !important;
    grid-template-columns: 80px 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--color11);
    align-items: normal;
}

    .table__week tbody tr:first-child {
        border-bottom: 3px solid var(--color4);
    }

.table__week tbody td .table__box--item {
    width: 100%;
    height: 100%;
    padding: 20px 15px 20px 5px;
}

.table__day tbody tr,
.table__day thead tr {
    display: grid !important;
    grid-template-columns: 80px 1fr;
    border-bottom: 1px solid var(--color11);
    align-items: normal;
}

    .table__day tbody tr:first-child {
        border-bottom: 3px solid var(--color4);
    }

.table__day tbody td .table__box--item {
    width: 100%;
    height: 100%;
    padding: 20px 15px 20px 5px;
}

.table__day th a {
    background-color: transparent;
    padding: 5px;
    border-radius: 30px;
    font-size: var(--text14);
    color: var(--color6);
    box-shadow: none;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .table__day th a > span {
        margin-right: 5px;
        font-size: var(--text14);
        color: var(--color6);
        font-weight: 500;
    }

        .table__day th a > span::before {
            content: "-";
        }

    .table__day th a:hover {
        background-color: transparent;
        color: var(--color5);
    }

        .table__day th a:hover > span {
            color: var(--color5);
        }

/*=== [ profile ] ===*/
.profile {
    display: flex;
    align-items: center;
}

.profile__pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-left: 15px;
    box-shadow: var(--shadow-darkblue);
    position: relative;
    background-color: var(--color4);
}

@media (max-width:1800px) {
    .profile__pic {
        width: 65px;
        height: 65px;
        margin-left: 10px;
    }
}

.profile__pic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
}

.profile__pic--status {
    width: 18px;
    height: 18px;
    background-color: var(--color8);
    border-radius: 50%;
    color: white;
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

@media (max-width:1800px) {
    .profile__pic--status {
        width: 15px;
        height: 15px;
        top: 2px;
        right: 1px;
    }
}

.profile__pic--status::after {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

@media (max-width:1800px) {
    .profile__pic--status::after {
        width: 15px;
        height: 15px;
        top: 0.5px;
        right: 0.5px;
    }
}

/*.profile__pic::before {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    top: -1px;
    right: -1px;
    background-color: var(--color1);
    border-radius: 50%;
    z-index: 3;
}*/

/*@media (max-width:1800px) {
    .profile__pic::before {
        width: 20px;
        height: 20px;
    }
}*/

.profile__pic::after {
    content: "\e971";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: "mania";
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color1);
    font-weight: 600;
    z-index: 1;
}

.profile__details {
    flex: 1;
}

.profile__text {
    color: var(--color3);
}

.profile__text--welcome {
    font-size: var(--text14);
}

@media (max-width:1800px) {
    .profile__text--welcome {
        font-size: var(--text12);
        font-weight: 300;
    }
}

.profile__nostatus .profile__pic--status {
    display: none;
}

    .profile__nostatus .profile__pic--status::after {
        display: none;
    }

.profile__nostatus::before {
    display: none;
}

.profile__nostatus::after {
    display: none;
}

.profile__action {
    margin-top: 30px;
}

.profile__section--list ul li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color9);
    margin-bottom: 10px;
}

@media (max-width:1080px) {
    .profile__section--list ul li {
        flex-direction: column;
        align-items: flex-start;
    }
}

.profile__section--list ul li h6 {
    font-size: var(--text14);
    font-weight: bold;
    margin-left: 5px;
}

.profile__section--list ul li span {
    font-size: var(--text14);
    font-weight: 400;
    color: var(--color9);
}

.profile__section--list ul li .btn__main {
    flex: 1;
}

    .profile__section--list ul li .btn__main a, .profile__section--list ul li .btn__main button {
        color: var(--color3);
    }

        .profile__section--list ul li .btn__main a:hover, .profile__section--list ul li .btn__main button:hover {
            color: var(--color3);
        }

.profile__section--list-left {
    display: flex;
    justify-content: space-between;
    row-gap: 15px;
    width: 100%;
    font-size: var(--text14);
    font-weight: 400;
    flex: 1;
}

@media (max-width:1080px) {
    .profile__section--list-left {
        flex-wrap: wrap;
    }
}

.profile__management--heading h3 {
    font-size: var(--text20);
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--color6);
}

.profile__management--heading p {
    font-size: var(--text12);
    color: var(--color9);
}

.profilepage__container {
    margin-top: 60px;
}

@media (max-width:1800px) {
    .profilepage__container {
        margin-top: 30px;
    }
}

.profilepage__content {
    display: flex;
    gap: 30px;
}

@media (max-width:1200px) {
    .profilepage__content {
        flex-direction: column;
    }
}

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

    .profilepage__information .profile__pic {
        width: 150px;
        height: 150px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        margin-bottom: 30px;
    }

        .profilepage__information .profile__pic img {
            height: 100%;
            height: 100%;
            border-radius: 50%;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .profilepage__information .profile__pic::before {
            background-color: var(--color-bg);
            width: 25px;
            height: 25px;
            top: 8px;
            right: 12px;
        }

    .profilepage__information .profile__pic--status {
        width: 20px;
        height: 20px;
        top: 10px;
        right: 14px;
    }

        .profilepage__information .profile__pic--status:after {
            width: 20px;
            height: 20px;
            top: 0;
            right: 0;
        }

.profilepage__information--name {
    display: flex;
    text-align: center;
    justify-content: center;
}

    .profilepage__information--name h6 {
        font-size: var(--text14);
        margin-left: 5px;
    }

@media (max-width:1800px) {
    .profilepage__information--name h6 {
        font-size: var(--text12);
    }
}

.profilepage__information--name span {
    font-size: var(--text14);
}

@media (max-width:1800px) {
    .profilepage__information--name span {
        font-size: var(--text12);
    }
}

.profilepage__information--space span {
    font-size: var(--text12);
    font-weight: 400;
    color: var(--color9);
}

.profilepage__information--title {
    margin-bottom: 20px;
    color: var(--color9);
    font-size: var(--text16);
}

@media (max-width:1800px) {
    .profilepage__information--title {
        font-size: var(--text14);
    }
}

.profilepage__list {
    flex: 1;
}

    .profilepage__list ul {
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 40px;
        column-gap: 40px;
        row-gap: 20px;
    }

        .profilepage__list ul li {
            display: flex;
            align-items: center;
            flex-basis: calc(50% - 40px);
        }

@media (max-width:1200px) {
    .profilepage__list ul li {
        flex-basis: 100%;
    }
}

.profilepage__list--icon {
    width: 35px;
    height: 35px;
    border: 1px solid var(--color5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 10px;
}

    .profilepage__list--icon i, .profilepage__list--icon svg, .profilepage__list--icon img {
        font-size: 16px;
        width: 16px;
        height: 16px;
        color: var(--color5);
        fill: var(--color5);
    }

.profilepage__list--text {
    display: flex;
    flex: 1;
}

    .profilepage__list--text h6 {
        margin-left: 5px;
        font-size: var(--text14);
    }

@media (max-width:1800px) {
    .profilepage__list--text h6 {
        font-size: var(--text12);
    }
}

.profilepage__list--text span {
    font-weight: lighter;
    font-size: var(--text14);
    flex: 1;
}

@media (max-width:1800px) {
    .profilepage__list--text span {
        font-size: var(--text12);
    }
}

.profilepage__explain {
    background-color: var(--color3);
    padding: 30px;
    border-radius: 30px;
    margin-top: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.02);
}

@media (max-width:1200px) {
    .profilepage__explain {
        padding: 15px;
        border-radius: 20px;
    }
}

.profilepage__explain h4 {
    font-size: var(--text14);
    margin-bottom: 10px;
}

.profilepage__explain p {
    font-size: var(--text12);
    font-weight: 400;
    line-height: 2;
}

.profilepage__buttons {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

    .profilepage__buttons .btn__circle {
        background-color: white;
        cursor: pointer;
        position: absolute;
        width: 40px;
        height: 40px;
        margin: 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    }

        .profilepage__buttons .btn__circle i, .profilepage__buttons .btn__circle img, .profilepage__buttons .btn__circle svg {
            height: 15px;
            width: 15px;
            font-size: 15px;
        }

        .profilepage__buttons .btn__circle:hover {
            background-color: var(--color5);
        }

.profilepage__buttons--right .btn__circle:first-child {
    bottom: -5px;
    right: 0px;
}

.profilepage__buttons--right .btn__circle:nth-child(2) {
    bottom: 40px;
    right: -20px;
}

.profilepage__buttons--center .btn__circle:first-child {
    bottom: -15px;
    right: 30px;
}

.profilepage__buttons--center .btn__circle:nth-child(2) {
    bottom: -15px;
    left: 30px;
}

.profilepage__notexist {
    justify-content: center;
}

    .profilepage__notexist .profilepage__information .profile__pic {
        margin-left: 0;
    }

.profilepage__center {
    justify-content: center;
}

    .profilepage__center .profilepage__information .profile__pic {
        margin-left: 0;
    }

.tabs__row {
    background-color: white;
    height: 500px;
    position: relative;
    transition: 0.3s;
    border-radius: 30px;
    width: 50%;
    margin: 0 auto;
}

@media (max-width:1800px) {
    .tabs__row {
        width: 60%;
    }
}

@media (max-width:1400px) {
    .tabs__row {
        width: 100%;
    }
}

.tabs__row--head {
    background-color: var(--color-bg);
    padding: 10px;
    border-radius: 30px 30px 0 0;
    position: relative;
}

@media (max-width:1080px) {
    .tabs__row--head {
        padding: 10px 5px;
    }
}

.tabs__row--head ul {
    display: flex;
    justify-content: center;
}

    .tabs__row--head ul li button {
        font-size: var(--text14);
        font-weight: 500;
        padding: 10px 30px;
        border-bottom: 2px solid transparent;
        transition: 0.3s;
        color: var(--color5);
        border-radius: 30px;
        margin: 0 5px;
        position: relative;
    }

@media (max-width:1800px) {
    .tabs__row--head ul li button {
        font-size: var(--text12);
    }
}

@media (max-width:1080px) {
    .tabs__row--head ul li button {
        padding: 10px 15px;
    }
}

@media (max-width:420px) {
    .tabs__row--head ul li button {
        padding: 10px;
        font-size: 10px;
        margin: 0 2px;
    }
}

.tabs__row--head ul li:last-child {
    margin-left: 0;
}

.tabs__row--head ul li:hover button, .tabs__row--head ul li.tabs__row_active button {
    color: var(--color3);
    background-color: var(--color5);
}

    .tabs__row--head ul li:hover button::before, .tabs__row--head ul li.tabs__row_active button::before {
        content: "";
        width: 10px;
        height: 10px;
        background-color: var(--color7);
        border-radius: 3px;
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: rotate(45deg) translateX(-50%);
    }

.tabs__row--bottom {
    padding: 30px;
    max-height: 420px;
}

@media (max-width:1800px) {
    .tabs__row--bottom {
        max-height: 370px;
    }
}

@media (max-width:768px) {
    .tabs__row--bottom {
        padding: 15px;
    }
}

@media (max-width:1800px) {
    .tabs__row {
        height: 450px;
    }
}

.tabs__top {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 15px;
    column-gap: 15px;
}

.w-half {
    flex-basis: calc(50% - 7.5px);
    width: calc(50% - 7.5px);
}

@media (max-width:1080px) {
    .w-half {
        flex-basis: 100%;
        width: 100%;
    }
}

.gallery__parent {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.gallery__item {
    height: 150px;
    width: auto;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    position: relative;
}

    .gallery__item img, .gallery__item video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 15px;
    }

.gallery__setting--item {
    margin-bottom: 30px;
}

@media (max-width:1200px) {
    .gallery__setting--item {
        margin-bottom: 15px;
    }
}

.gallery__setting--item:last-child {
    margin-bottom: 0;
}

.gallery__setting--item > h4 {
    margin-bottom: 15px;
    font-weight: bold;
}

@media (max-width:1200px) {
    .gallery__setting--item > h4 {
        font-size: var(--text14);
    }
}

.gallery__setting--item-content h5 {
    margin-left: 15px;
    color: var(--color6);
}

@media (max-width:1200px) {
    .gallery__setting--item-content h5 {
        font-size: var(--text12);
    }
}

@media (max-width:576px) {
    .gallery__setting--item-content h5 {
        margin-left: 0;
        margin-bottom: 10px;
    }
}

.gallery__setting--item-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width:576px) {
    .gallery__setting--item-switch {
        flex-direction: column;
        align-items: flex-start;
    }
}

.gallery__setting--item-switch .switch {
    align-self: flex-end;
}

.gallery__item--s2 {
    border: 2px solid transparent;
    transition: 0.3s;
}

    .gallery__item--s2:hover {
        border: 2px solid var(--color1);
    }

        .gallery__item--s2:hover .check-item__gallery {
            background-color: var(--color3);
        }

    .gallery__item--s2 .check-item__gallery {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        position: absolute;
        cursor: pointer;
        font-size: var(--text12);
        padding: 0;
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        top: 10px;
        left: auto;
        right: 10px;
        transform: translateX(0) translateY(0);
        transition: 0.3s;
        /* Create a custom checkbox */
    }

        .gallery__item--s2 .check-item__gallery .checkmark-parent {
            width: 100%;
            height: 100%;
            background-color: transparent;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            border-radius: 5px;
            opacity: 0;
            transition: 0.3s;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .gallery__item--s2 .check-item__gallery .checkmark-parent i, .gallery__item--s2 .check-item__gallery .checkmark-parent svg {
                width: 20px;
                height: 20px;
                font-size: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                fill: white;
                color: white;
                display: none;
            }

        .gallery__item--s2 .check-item__gallery .checkmark {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            height: 19px;
            width: 19px;
            background-color: transparent;
            border-radius: 5px;
            border: none;
            transition: 0.3s;
            color: var(--color3);
            z-index: 3;
        }

@media (max-width:1200px) {
    .gallery__item--s2 .check-item__gallery .checkmark {
        left: 50%;
    }
}

.gallery__item--s2 .check-item__gallery:hover input ~ .checkmark-parent .checkmark {
    background-color: var(--color5);
    border: none;
    opacity: 1;
}

.gallery__item--s2 .check-item__gallery:hover input ~ .checkmark-parent {
    opacity: 1;
}

.gallery__item--s2 .check-item__gallery input:checked ~ .checkmark-parent .checkmark {
    background-color: var(--color5);
    color: var(--color3);
    border: none;
    opacity: 1;
}

.gallery__item--s2 .check-item__gallery input:checked ~ .checkmark-parent {
    background-color: var(--color3);
    opacity: 1;
}

.gallery__item--s2 .check-item__gallery .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.gallery__item--s2 .check-item__gallery input:checked ~ .checkmark-parent .checkmark:after {
    display: block;
}

.gallery__item--s2 .check-item__gallery .checkmark:after {
    content: "\e913";
    font-family: mania;
    left: 50%;
    top: 50%;
    font-size: 8px;
    transform: translateX(-50%) translateY(-50%);
}

.albums__parent {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.albums__item {
    height: 250px;
    flex-basis: calc(25% - 12px);
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 10px;
    border: 1px solid transparent;
    transition: 0.3s;
}

@media (max-width:1400px) {
    .albums__item {
        flex-basis: calc(33% - 8px);
    }
}

@media (max-width:1200px) {
    .albums__item {
        flex-basis: calc(50% - 8px);
    }
}

@media (max-width:420px) {
    .albums__item {
        flex-basis: 100%;
    }
}

.albums__item--pic {
    width: 100%;
    height: 150px;
    background-color: var(--color10);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

    .albums__item--pic > img, .albums__item--pic > video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 15px;
    }

.albums__item--pic-icon i, .albums__item--pic-icon svg, .albums__item--pic-icon img {
    transition: 0.3s;
    width: 50px;
    height: 50px;
    font-size: 50px;
    color: var(--color-blue-icon);
    fill: var(--color-blue-icon);
}

.albums__item--text ul {
    display: flex;
    flex-wrap: wrap;
}

    .albums__item--text ul li {
        display: flex;
        align-items: center;
        font-size: var(--text12);
        color: var(--color9);
        margin-bottom: 5px;
        font-weight: lighter;
        margin-left: 30px;
        transition: 0.3s;
    }

        .albums__item--text ul li i {
            font-size: 12px;
            height: 12px;
            width: 12px;
            fill: var(--color9);
            color: var(--color9);
        }

        .albums__item--text ul li span {
            margin-left: 5px;
            display: flex;
            align-items: center;
        }

        .albums__item--text ul li:last-child {
            margin-left: 0;
        }

        .albums__item--text ul li:first-child {
            font-size: var(--text14);
            width: 100%;
            font-weight: bold;
            margin-left: 0;
            margin-bottom: 10px;
        }

            .albums__item--text ul li:first-child i {
                font-size: 16px;
                height: 16px;
                width: 16px;
                fill: var(--color9);
                color: var(--color9);
            }

            .albums__item--text ul li:first-child span {
                margin-left: 10px;
            }

.albums__item:hover {
    border: 1px solid var(--color5);
    box-shadow: none;
}

    .albums__item:hover ul li {
        color: var(--color5);
    }

    .albums__item:hover .albums__item--pic-icon i, .albums__item:hover .albums__item--pic-icon svg, .albums__item:hover .albums__item--pic-icon img {
        color: var(--color5);
        fill: var(--color5);
    }

.document__parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 15px;
}

@media (max-width:1400px) {
    .document__parent {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media (max-width:1200px) {
    .document__parent {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (max-width:1080px) {
    .document__parent {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:768px) {
    .document__parent {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width:576px) {
    .document__parent {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:330px) {
    .document__parent {
        grid-template-columns: 1fr;
    }
}

.document .albums__item {
    height: 180px;
    flex-basis: 100%;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 10px;
    border: 1px solid transparent;
    transition: 0.3s;
}

@media (max-width:1400px) {
    .document .albums__item {
        flex-basis: calc(33% - 8px);
    }
}

@media (max-width:1200px) {
    .document .albums__item {
        flex-basis: calc(50% - 8px);
    }
}

@media (max-width:420px) {
    .document .albums__item {
        flex-basis: 100%;
    }
}

.document .albums__item--pic {
    width: 100%;
    height: 120px;
    background-color: var(--color10);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

    .document .albums__item--pic > img, .document .albums__item--pic > video {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 15px;
    }

.document .albums__item--pic-icon i, .document .albums__item--pic-icon svg, .document .albums__item--pic-icon img {
    transition: 0.3s;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: var(--color-blue-icon);
    fill: var(--color-blue-icon);
}

.document .albums__item--text ul {
    display: flex;
    flex-wrap: wrap;
}

    .document .albums__item--text ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text12);
        color: var(--color9);
        font-weight: 400;
        margin-bottom: 0;
    }

        .document .albums__item--text ul li span {
            margin-left: 0;
        }

        .document .albums__item--text ul li:first-child {
            margin-bottom: 0;
        }

            .document .albums__item--text ul li:first-child span {
                margin-left: 0;
            }

.document .albums__item:hover {
    border: 1px solid var(--color5);
    box-shadow: none;
}

    .document .albums__item:hover ul li {
        color: var(--color5);
    }

    .document .albums__item:hover .albums__item--pic-icon i, .document .albums__item:hover .albums__item--pic-icon svg, .document .albums__item:hover .albums__item--pic-icon img {
        color: var(--color5);
        fill: var(--color5);
    }

.document .gallery__item {
    height: 180px;
}

.activity__parent {
    margin-bottom: 30px;
}

.activity__item {
    background-color: var(--color3);
    width: 100%;
    padding: 30px;
    border-radius: 30px;
    margin-top: 15px;
}

@media (max-width:1800px) {
    .activity__item {
        border-radius: 20px;
    }
}

.activity__date {
    display: flex;
    align-items: center;
    font-size: var(--text18);
    font-weight: bold;
    color: var(--color6);
}

@media (max-width:1800px) {
    .activity__date {
        font-size: var(--text16);
    }
}

.activity__date i,
.activity__date svg,
.activity__date img {
    width: 18px;
    height: 18px;
    font-size: 18px;
    margin-left: 10px;
}

.activity__box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
    gap: 15px;
}

    .activity__box:last-child {
        margin-bottom: 0;
    }

@media (max-width:1200px) {
    .activity__box {
        border-radius: 15px;
    }
}

.activity__detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.activity__detail--history {
    background-color: var(--color4);
    padding: 5px 10px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 140px;
    color: var(--color6);
}

@media (max-width:1800px) {
    .activity__detail--history {
        width: 130px;
    }
}

.activity__detail--history-text {
    font-size: var(--text12);
    color: var(--color6);
}

@media (max-width:1800px) {
    .activity__detail--history-text {
        font-size: 11px;
    }
}

.activity__detail--history-icon {
    font-size: 15px;
    display: flex;
    align-items: center;
}

    .activity__detail--history-icon i, .activity__detail--history-icon svg, .activity__detail--history-icon img {
        width: 15px;
        height: 15px;
        font-size: 15px;
        color: var(--color6);
        fill: var(--color6);
    }

.activity__detail--icons {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: var(--color4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

    .activity__detail--icons svg, .activity__detail--icons img, .activity__detail--icons i {
        font-size: 15px;
        height: 15px;
        width: 15px;
    }

    .activity__detail--icons:hover {
        background-color: #BBD4DD;
    }

.activity__explain {
    font-size: var(--text14);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color6);
}

    .activity__explain .picname {
        margin-left: 10px;
    }

    .activity__explain .picname__pic {
        width: 30px;
        height: 30px;
        margin-left: 5px;
    }

    .activity__explain .picname__name {
        font-weight: 500;
        color: var(--color5);
    }

@media (max-width:1800px) {
    .activity__explain {
        font-size: var(--text12);
    }
}

.activity__explain a {
    font-size: var(--text14);
    margin: 0 5px;
}

@media (max-width:1800px) {
    .activity__explain a {
        font-size: var(--text12);
    }
}

.activity__explain a:hover {
    color: var(--color1);
}

.activity__error-notfound {
    background-color: white;
    width: 70%;
    padding: 30px;
    border-radius: 30px;
    margin: 0 auto;
}

@media (max-width:1800px) {
    .activity__error-notfound {
        border-radius: 20px;
    }
}

.activity_notfound .notfound__box {
    display: block;
}

.emails__parent input[type=submit] {
    color: white;
    border: none;
    font-weight: 500;
    font-size: var(--text14);
}

    .emails__parent input[type=submit]:hover {
        border: none;
    }

.emails__heading {
    text-align: center;
    margin: 15px 0 30px 0;
    font-size: var(--text16);
}

@media (max-width:1080px) {
    .emails__heading {
        font-size: var(--text14);
    }
}

.emails__add {
    display: flex;
    flex-direction: column;
}

    .emails__add .tags__select .select2-container--default .select2-selection--multiple {
        min-height: 45px;
    }

.emails__container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    margin-top: 30px;
}

@media (max-width:1800px) {
    .emails__container {
        gap: 20px;
    }
}

@media (max-width:1080px) {
    .emails__container {
        margin-top: 70px;
    }
}

@media (max-width:576px) {
    .emails__container {
        gap: 10px;
    }
}

.emails__item {
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    padding: 15px;
}

@media (max-width:1800px) {
    .emails__item {
        border-radius: 20px;
    }
}

.emails__content--top {
    margin-bottom: 15px;
}

.emails__content--top-title h4 {
    font-size: var(--text16);
    color: var(--color6);
    font-weight: bold;
}

.emails__content--top-detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

@media (max-width:1080px) {
    .emails__content--top-detail {
        row-gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
}

.emails__content--top-detail .picname {
    border-left: 1px solid var(--color9);
    padding: 0 10px;
}

    .emails__content--top-detail .picname:first-child {
        padding: 0 0 0 10px;
    }

@media (max-width:1080px) {
    .emails__content--top-detail .picname {
        padding: 0 0 0 10px;
    }
}

.emails__content--top-detail .picname .picname__name {
    font-size: var(--text12);
}

.emails__content--top-detail .picname .picname__pic {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.emails__counter {
    margin-right: 15px;
}

@media (max-width:1080px) {
    .emails__counter {
        margin-right: 0;
    }
}

.emails__counter span {
    background-color: white;
    padding: 5px 10px;
    border-radius: 30px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--color4);
    font-size: var(--text12);
}

.emails__sender {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width:1080px) {
    .emails__sender {
        flex-wrap: wrap;
    }
}

.emails__sender .picname .picname__name {
    font-size: var(--text14);
}

@media (max-width:1200px) {
    .emails__sender .picname .picname__name {
        font-size: var(--text12);
    }
}

.emails__sender .picname .picname__pic {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

.emails__sender--icon {
    display: flex;
    align-items: center;
}

@media (max-width:1080px) {
    .emails__sender--icon {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        align-items: flex-start;
        margin-top: 15px;
    }
}

.emails__sender--icon > ul {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
    flex-wrap: wrap;
}

    .emails__sender--icon > ul li {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .emails__sender--icon > ul li > a, .emails__sender--icon > ul li > button {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text16);
            margin-right: 15px;
        }

@media (max-width:1080px) {
    .emails__sender--icon > ul li > a, .emails__sender--icon > ul li > button {
        margin-right: 0;
    }
}

.emails__sender--icon > ul li > a:hover, .emails__sender--icon > ul li > button:hover {
    color: var(--color7);
}

.emails__sender .btn__circle {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    background-color: var(--color4);
}

    .emails__sender .btn__circle:hover > a, .emails__sender .btn__circle:hover > button {
        background-color: var(--color5);
    }

@media (max-width:1080px) {
    .emails__sender .btn__circle {
        margin-right: 0;
    }
}

.emails__sender .dropdown__holder--leftside {
    left: calc(-100% + 30px);
}

    .emails__sender .dropdown__holder--leftside .dropdown__arrow::after {
        left: 10px;
    }

.emails__sender .dropdown__button .dropdown__holder {
    left: 0;
    transform: none;
}

.emails__sender .dropdown__button .dropdown__parent {
    min-width: 260px;
}

@media (max-width:768px) {
    .emails__sender .dropdown__button {
        position: relative !important;
    }
}

.emails__date {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--color4);
    border-radius: 5px;
    padding-left: 15px;
}

@media (max-width:1080px) {
    .emails__date {
        padding-left: 0;
        border-left: none;
    }
}

.emails__date i, .emails__date svg, .emails__date img, .emails__date .icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: var(--color9);
    fill: var(--color9);
    margin-left: 5px;
    display: flex;
    align-items: center;
}

.emails__date p {
    font-size: var(--text12);
    color: var(--color9);
    text-align: center;
}

.emails__text {
    min-height: 300px;
    max-height: 300px;
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    padding: 15px;
    overflow-y: auto;
}

@media (max-width:1800px) {
    .emails__text {
        border-radius: 20px;
    }
}

.emails__text--error {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

    .emails__text--error i, .emails__text--error svg, .emails__text--error img, .emails__text--error .icon, .emails__text--error .mania, .emails__text--error .svg {
        width: 40px;
        height: 40px;
        font-size: 40px;
        color: var(--color7);
        fill: var(--color7);
        margin-bottom: 15px;
        font-weight: 400;
    }

    .emails__text--error p {
        font-size: var(--text14);
        color: var(--color7);
    }

.emails__search {
    padding: 15px 15px 0 15px;
    display: flex;
}

    .emails__search > .formbox__parent {
        flex: 1;
    }

    .emails__search > .btn__circle {
        border: 1px solid var(--color4);
        box-shadow: none;
        width: 45px;
        height: 45px;
    }

        .emails__search > .btn__circle i, .emails__search > .btn__circle img, .emails__search > .btn__circle svg, .emails__search > .btn__circle .icon {
            color: var(--color9);
            font-size: var(--text12);
        }

@media (max-width:1200px) {
    .emails__search > .btn__circle {
        width: 35px;
        height: 35px;
    }
}

@media (max-width:1080px) {
    .emails__search > .btn__circle {
        width: 45px;
        height: 45px;
    }
}

@media (max-width:1200px) {
    .emails__search .formbox__parent input {
        height: 35px;
    }
}

@media (max-width:1080px) {
    .emails__search .formbox__parent input {
        height: 45px;
    }
}

.emails__search--modal {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 15px;
    column-gap: 15px;
}

    .emails__search--modal .formbox__parent {
        flex-basis: calc(50% - 7.5px);
        width: calc(50% - 7.5px);
    }

        .emails__search--modal .formbox__parent.w-100 {
            flex-basis: 100%;
            width: 100%;
        }

@media (max-width:576px) {
    .emails__search--modal .formbox__parent {
        flex-basis: 100%;
        width: 100%;
    }
}

@media (max-width:1080px) {
    .emails__search {
        position: absolute;
        top: 20px;
        width: calc(100% - 35px);
        padding: 0;
    }
}

@media (max-width:768px) {
    .emails__search {
        width: 100%;
    }
}

.emails__user {
    padding: 0;
}

.emails__person {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    cursor: pointer;
}

@media (max-width:1200px) {
    .emails__person {
        flex-direction: column;
        gap: 5px;
        border-bottom: 1px solid var(--color4);
        padding-bottom: 15px;
    }
}

.emails__person:first-child {
    margin-top: 0;
}

.emails__person--parent {
    overflow-y: auto;
    min-height: 375px;
    max-height: 375px;
    margin-top: 15px;
    padding: 0 15px 15px 10px;
}

@media (max-width:1080px) {
    .emails__person--parent {
        padding: 0 10px 15px 10px;
        max-height: 600px;
    }
}

.emails__person .emails__person--right, .emails__person .emails__person--left {
    transition: 0.3s;
}

.emails__person--left {
    width: 70px;
    height: 80px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--color9);
    text-align: center;
}

@media (max-width:1200px) {
    .emails__person--left {
        width: 100%;
        height: auto;
        padding: 5px 10px;
        flex-direction: row;
        justify-content: space-between;
        box-shadow: none;
    }
}

@media (max-width:1080px) {
    .emails__person--left {
        flex-direction: column;
    }
}

.emails__person--left-date {
    border-bottom: 1px solid var(--color4);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

@media (max-width:1200px) {
    .emails__person--left-date {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (max-width:1080px) {
    .emails__person--left-date {
        border-bottom: 1px solid var(--color4);
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
}

.emails__person--left a {
    font-size: var(--text12);
    color: var(--color9);
    display: flex;
    align-items: center;
}

    .emails__person--left a i, .emails__person--left a svg, .emails__person--left a img, .emails__person--left a .icon {
        margin-left: 5px;
    }

    .emails__person--left a:hover {
        color: var(--color7);
    }

.emails__person--right {
    width: 100%;
    flex: 1;
    height: 80px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    position: relative;
    padding: 15px;
}

@media (max-width:1080px) {
    .emails__person--right {
        flex-direction: column;
        padding: 10px 3px;
    }
}

.emails__person--right-pic {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

@media (max-width:1080px) {
    .emails__person--right-pic {
        margin-bottom: 5px;
        width: 40px;
        height: 40px;
    }
}

.emails__person--right-pic img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.emails__person--right-text {
    flex: 1;
    margin-right: 10px;
    color: var(--color6);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width:1080px) {
    .emails__person--right-text {
        margin-right: 0;
        text-align: center;
    }
}

.emails__person--right-text h3 {
    font-size: var(--text12);
    font-weight: bold;
    color: var(--color6);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (max-width:768px) {
    .emails__person--right-text h3 {
        font-size: 10px;
    }
}

.emails__person--right-text span {
    font-size: 11px;
    color: var(--color6);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-weight: 400;
}

@media (max-width:768px) {
    .emails__person--right-text span {
        font-size: 8px;
    }
}

.emails__person--right-text p {
    font-size: 11px;
    color: var(--color9);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

@media (max-width:768px) {
    .emails__person--right-text p {
        font-size: 8px;
    }
}

.emails__person--right-marked {
    position: absolute;
    right: 6px;
    top: 1px;
    display: flex;
    align-items: center;
}

    .emails__person--right-marked span {
        margin-left: 3px;
    }

        .emails__person--right-marked span:last-child {
            margin-left: 0;
        }

    .emails__person--right-marked i, .emails__person--right-marked img, .emails__person--right-marked svg, .emails__person--right-marked .icon {
        font-size: 12px;
        width: 12px;
        height: 12px;
        fill: var(--color7);
        color: var(--color7);
    }

.emails__person:hover .emails__person--right, .emails__person:hover .emails__person--left {
    background-color: var(--color4);
}

.calender__name--circle {
    background-color: var(--color7);
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.calender__category--color {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    margin-left: 10px;
}

.calender__menu--date {
    background-color: var(--color4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 45px;
    border-radius: 30px;
    padding: 0 10px;
    margin-bottom: 60px;
}

.calender__menu .btn__icon {
    margin-bottom: 15px;
}

.calender__menu .links {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding-top: 15px;
    margin-top: 60px;
}

    .calender__menu .links ul li a {
        padding: 0;
    }

        .calender__menu .links ul li a:hover {
            background-color: transparent;
            color: white;
        }

.contact__action {
    width: 100%;
}

    .contact__action .mailAddress {
        width: 100%;
        font-size: var(--text12);
        display: flex;
        align-items: center;
    }

    .contact__action input[type=email], .contact__action input[type=text] {
        width: 100%;
        border-radius: 30px;
        height: 30px;
        border: none;
        background-color: var(--color4);
        font-size: 9px;
        padding: 0 10px;
        transition: 0.3s;
    }

    .contact__action .header__admin--name-shape {
        left: -13px;
    }

        .contact__action .header__admin--name-shape svg {
            color: var(--color4);
            width: 20px;
            height: 20px;
            transition: 0.3s;
        }

    .contact__action .formbox__parent label > span {
        margin-bottom: 0;
    }

    .contact__action .select2-container .select2-selection--single {
        height: 30px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        background-color: var(--color4);
    }

    .contact__action .select2-container--default .select2-selection--single .select2-selection__placeholder, .contact__action .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 9px;
    }

    .contact__action .select2-container--default .select2-selection--single .select2-selection__arrow {
        left: 8px;
        height: 100%;
        width: 15px;
        height: 15px;
        background-color: var(--color3);
        border-radius: 50%;
        transform: translateY(-50%);
        top: 50%;
    }

.contact__form {
    max-width: 180px;
    border-radius: 30px;
    height: 30px;
    position: relative;
    flex: 1;
}

.contact__form--submit {
    position: relative;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background-color: var(--color4);
    border-radius: 50%;
    transition: 0.3s;
}

    .contact__form--submit::before {
        content: "\e98e";
        position: absolute;
        font-family: mania;
        left: 50%;
        top: 50%;
        font-size: 8px;
        transform: translateX(-50%) translateY(-50%);
    }

    .contact__form--submit input[type=submit] {
        width: 30px;
        height: 30px;
        background-color: transparent;
        border: none;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
    }

    .contact__form--submit:hover::before {
        color: var(--color1);
    }

.multiselect__tags {
    max-width: 180px;
    border-radius: 30px;
    height: 30px;
    position: relative;
    flex: 1;
}

    .multiselect__tags .multiselect__input {
        width: 100%;
        border-radius: 30px;
        height: 30px;
        border: none;
        background-color: var(--color4);
        font-size: 9px;
        padding: 0 10px;
        transition: 0.3s;
    }

/*================================ [ Dashboard ] ================================*/
.button-vue--vue-secondary {
    background-color: var(--color5);
    color: white;
}

    .button-vue--vue-secondary .v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper .v-popper__inner {
        direction: ltr !important;
        overflow-x: hidden !important;
    }

    .button-vue--vue-secondary:hover {
        background-color: #052b4f;
    }

#weather-status-menu-item .button-vue--icon-and-text {
    padding: 0 16px 0 30px !important;
}

.v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper {
    border-radius: 15px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
    background-color: white !important;
}

    .v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper .v-popper__inner {
        padding: 4px;
        max-height: calc(50vh - 16px);
        overflow-x: hidden !important;
        direction: ltr !important;
    }

        .v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper .v-popper__inner .open {
            width: 100%;
            position: relative;
            left: 0;
            right: 0;
        }

            .v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper .v-popper__inner .open li:last-child > .action-input {
                padding-right: 14px !important;
            }

.action-link p {
    text-align: right !important;
}

/*================================ [ Files ] ================================*/
/*======== Files > add file loading ========*/
.ui-progressbar .ui-progressbar-value {
    height: 10px !important;
    border-radius: 30px !important;
    background-color: var(--color-blue-icon);
}

.ui-widget.ui-widget-content {
    height: 50px !important;
    border: none !important;
    font-family: Vazir FD !important;
    font-size: 10px !important;
}

.style__texticon .menuitem .filenameform .icon-confirm {
    transform: rotate(180deg);
}

.style__texticon .menuitem .filenameform {
    min-width: 150px;
    margin-right: 5px;
}

.files__cards--item:hover .files__cards--item-icon {
    opacity: 0.2;
}

/*======== Files > add file > repeat dialog ========*/
.oc-dialog {
    padding: 24px;
    z-index: 10000;
    font-size: 100%;
    box-sizing: border-box;
    min-width: 50vw !important;
    width: auto !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 60px);
    max-width: calc(100% - 60px);
    overflow: auto;
    background-color: white !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    border-radius: 30px !important;
}

.oc-dialog-buttonrow button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 44px;
    min-width: 44px;
    background: var(--color4);
    border-radius: 30px;
    padding: 5px 40px;
}

    .oc-dialog-buttonrow button.cancel {
        background-color: var(--color7);
        color: white;
    }

        .oc-dialog-buttonrow button.cancel:hover {
            background-color: var(--color12);
        }

    .oc-dialog-buttonrow button.continue {
        background-color: var(--color8);
        color: white;
    }

        .oc-dialog-buttonrow button.continue:hover {
            background-color: #70ac49;
        }

.oc-dialog-buttonrow.twobuttons {
    justify-content: flex-end;
    margin-top: 30px;
}

/*======== Files > dropdown__parent ========*/
.dropdown__parent {
    min-width: 150px !important;
}

/*======== Files > details ========*/
.rich-contenteditable__input {
    padding: 30px 10px;
    border: 1px solid var(--color9);
    border-radius: 15px;
}

/*======== Files > details > comment ========*/
.comment__header {
    display: flex;
    align-items: center;
    min-height: 90px;
    border-bottom: 1px solid var(--color-blue-icon);
    padding-bottom: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.comment__editor {
    position: relative !important;
    margin: 30px 0 !important;
}

.comment__submit {
    position: absolute !important;
    right: -60px !important;
    bottom: 50% !important;
    margin: 0px !important;
    transform: translateY(50%) !important;
    background: var(--color2) !important;
    margin: 0 !important;
    height: 40px !important;
}

.avatardiv img {
    border-radius: 50% !important;
}

.empty-content__title {
    font-size: 12px !important;
    color: var(--color7) !important;
}

.empty-content__icon {
    opacity: 0.7 !important;
    color: var(--color7) !important;
}

.button-vue__wrapper, .button-vue, .button-vue span {
    background-color: var(--color-blue-icon) !important;
}

.comment__header .button-vue {
    position: relative !important;
}

.comments__list {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    padding: 20px 10px !important;
}

.comment__author {
    width: 100% !important;
}

.comment_loading, .comment__timestamp {
    font-size: 12px;
    color: var(--color9) !important;
}

.comment__message {
    margin: 15px 0 !important;
    font-size: 14px !important;
    color: var(--color6) !important;
}

.comment__side {
    padding-top: 0 !important;
}

.comments .avatardiv:not(.avatardiv--unknown) {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
}

.comment {
    margin-top: 30px !important;
}

.comments__info {
    color: var(--color7) !important;
    margin-top: 30px !important;
}

/*======== Files > details > activity ========*/
.activity-entry .avatardiv:not(.avatardiv--unknown) {
    width: 20px !important;
    height: 20px !important;
    align-items: center;
    margin: 0 0 0 5px;
    font-size: 12px;
    border-radius: 0 !important;
}

    .activity-entry .avatardiv:not(.avatardiv--unknown) img {
        border-radius: 0 !important;
    }

.hidden-visually, .activity-entry__date {
    color: var(--color9);
    font-size: 10px;
}

.activity-entry__content {
    font-size: 12px;
}

.activity-entry__date {
    margin-left: 0;
    margin-right: 15px;
}

.activity-entry__content a {
    font-size: 12px;
}

.activity-entry:first-child {
    margin-top: 30px !important;
}

.activity-entry .avatardiv img {
    border-radius: 0 !important;
}

/*======== Files > details > share ========*/
.sharing-entry .action-item {
    margin-left: 0 !important;
    margin-right: 15px !important;
}

.sharing-entry .avatar-link-share {
    background-color: var(--color-bg);
}

.sharing-entry {
    margin-top: 60px;
}

/*======== Files > add file - dropdown ========*/
.style__texticon ul li a > span {
    margin-left: 10px;
}

.style__texticon ul li label {
    cursor: pointer;
}

    .style__texticon ul li label:hover {
        color: var(--color1);
        text-shadow: 0 0 0.5px var(--color1);
    }

.fileActionsMenu ul li menuitem span.icon {
    margin-left: 10px;
}

.v-popper--theme-dropdown.v-popper__popper[aria-hidden=false] {
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.input-field__input {
    margin: 0;
    padding: 0 12px;
    background-color: var(--color-bg) !important;
    color: var(--color-main-text);
    height: 36px !important;
    border-radius: var(--border-radius-large);
    text-overflow: ellipsis;
    cursor: pointer;
    width: 100%;
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    border: 1px solid var(--color4) !important;
    border-radius: 5px !important;
    font-size: 14px !important;
}

.fileActionsMenu ul li a > span {
    display: flex;
    margin-left: 10px !important;
}

.files__right {
    margin-top: 15px;
}

.files-list .button-vue__wrapper, .files-list .button-vue, .files-list .button-vue span {
    background-color: transparent !important;
}

.files-list .vue-recycle-scroller__slot[role=thead] {
    position: sticky;
    z-index: 10;
    top: 0;
    height: 70px;
    background-color: var(--color4) !important;
    border-radius: 15px 15px 0 0 !important;
}

.files-list tr {
    position: absolute;
    display: flex !important;
    top: 7px;
    border: none;
}

.files-list .files-list__row-name .files-list__row-name-text {
    font-size: 14px;
}

.v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper .v-popper__inner {
    padding: 4px 4px 4px 10px !important;
    direction: ltr !important;
}

.icon-active img {
    width: 20px !important;
}

/* loop */
.select2-container-multi .select2-choices {
    height: auto !important;
    margin: 0;
    padding: 0 !important;
    border-radius: 15px !important;
    position: relative;
    border: 1px solid var(--color4) !important;
    font-size: 14px;
}

    .select2-container-multi .select2-choices .select2-search-field input {
        padding: 10px !important;
        background: transparent !important;
        font-size: 12px;
        font-family: "Vazir FD" !important;
    }

.emptyfilelist h2 {
    font-size: 14px;
}

.select2-container-multi .select2-choices .select2-search-field {
    width: 100%;
}

.files-controls {
    width: calc(100% - 50px);
    margin: 30px 0;
}

@media (max-width:768px) {
    .files-controls {
        width: 100%;
    }
}

.upload__error p {
    font-size: 14px !important;
}

.v-popper__arrow-container {
    color: white;
}

.button-vue__text {
    font-size: 0.7rem;
}

.action-text__longtext {
    font-size: 0.8rem;
}

.action-link__longtext, .action-button__longtext {
    font-size: 0.9rem;
}

.action-input__form {
    padding-right: 0 !important;
    padding-left: 14px !important;
}

.action-button__text {
    font-size: 0.9rem;
    font-weight: bold;
}

.button-vue {
    min-height: auto !important;
    height: 25px;
    font-size: 0.8rem;
    margin-bottom: 10px;
    padding: 5px 10px !important;
}

.notif__down a {
    font-size: 0.7rem;
}

.notif__pic {
    height: auto;
}

    .notif__pic img {
        -o-object-fit: contain;
        object-fit: contain;
    }

.modal-container {
    background-color: white !important;
}

.dialog__container {
    overflow-x: hidden;
}

.profile__section--list-left label span {
    display: none !important;
}

input#email {
    width: 95%;
    border-radius: 30px;
    height: 45px;
    font-size: var(--text12);
    border: 1px solid var(--color4);
    padding: 0 10px;
    margin-right: 47px;
}

.formbox__parent .vs__search {
    display: none;
}

.formbox__parent .v-select {
    width: 100%;
    border-radius: 30px;
    height: 45px;
    font-size: var(--text12) !important;
    border: 1px solid var(--color4);
    padding: 0 10px;
}

.vs__dropdown-menu {
    background: white !important;
    border: 1px solid gray !important;
}

.profile__section--list em {
    margin-right: 47px;
    font-size: 0.5rem;
}

.timeline__header__left {
    display: flex;
    -moz-column-gap: 6px;
    column-gap: 6px;
}

#viewer .button-vue {
    color: black !important;
}

#viewer .header-close, #viewer .play-pause-icons, #viewer .action-item--single {
    display: none;
}

.gallery__item {
    background: lightgray !important;
}

.files-controls .select2-choices {
    padding: 10px !important;
}

.files-controls .select2-search-choice {
    background: lightgray;
    direction: ltr;
    padding: 3px 15px;
}

.files-controls .select2-search-choice-close {
    margin-right: 5px;
}

.action-editlocally {
    display: none !important;
}

.oc-dialog-title {
    margin-right: 46px;
    margin-top: -7px;
    font-size: 1.2rem;
}

.dirtree .breadcrumb {
    margin-top: 10px;
}

    .dirtree .breadcrumb a {
        background-position: right;
        padding-right: 20px;
        padding-top: 5px;
        font-size: 0.7rem;
    }

#oc-dialog-filepicker-content .filenameform {
    display: flex;
    margin-bottom: 10px;
}

    #oc-dialog-filepicker-content .filenameform input {
        border-radius: 30px;
        height: 34px;
        font-size: var(--text12);
        border: 1px solid var(--color4);
        padding: 0 10px;
    }

        #oc-dialog-filepicker-content .filenameform input.icon-confirm {
            width: 34px;
            margin-right: 5px;
        }

#oc-dialog-filepicker-content #picker-showgridview {
    display: none;
}

#oc-dialog-filepicker-content .filename {
    padding: 4px 24px;
    background-repeat: no-repeat;
    background-position: right;
}

#oc-dialog-filepicker-content .emptycontent .icon-folder {
    display: none;
}

#oc-dialog-filepicker-content .emptycontent h2 {
    font-size: 1rem;
    color: tomato;
    margin-bottom: 14px;
}

.oc-dialog-buttonrow.twobuttons {
    -moz-column-gap: 10px;
    column-gap: 10px;
}

.oc-dialog-content {
    max-width: 100% !important;
}

.tribute-container-emoji {
    background: white;
    border: 1px solid lightblue;
}

.input-field__main-wrapper .input-field__clear-button {
    right: unset;
    left: 1px;
}

.action-radio__radio, .action-checkbox__checkbox {
    left: 0px !important;
    margin-top: 12px !important;
    width: 17px !important;
    height: 17px !important;
}

.action-checkbox__label, .action-radio__label {
    font-size: 0.6rem;
}

.action-input__icon {
    display: none;
}

li[data-cy-files-navigation-item=circlesfilter] {
    display: none;
}

.ui-progressbar-value .inner {
    display: none !important;
}

#uploadprogressbar .mobile {
    display: none !important;
}

#uploadprogresswrapper {
    margin-right: 35px;
    transform: translateX(35px);
}

.emptyfilelist div, .emptyfilelist h2 {
    display: none;
}

#help {
    display: none;
}

.app-content {
    min-height: 100vh !important;
}

.vue-recycle-scroller__slot {
    display: none;
}

.hidden-visually {
    display: none;
}

.breadcrumb {
    display: none !important;
}

.loading-icon {
    display: none !important;
}

/*=== [ page ] ===*/
.hidden {
    display: none !important;
}

.page {
    /*=== [ page__parent ] ===*/
    /*=== [ page__section ] ===*/
}

.page__parent {
    min-height: 100vh;
    position: relative;
}

    .page__parent::before {
        width: 100%;
        height: 200px;
        background-color: var(--color1);
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
    }

.page__section {
    min-height: 100vh;
    display: flex;
    position: relative;
    background-color: var(--color1);
}

.page__section--myright {
    background-color: var(--color1);
    flex-basis: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 3px 30px 30px;
    max-height: 100vh;
}

.page__section--right {
    background-color: var(--color1);
    flex-basis: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 3px 30px 30px;
    max-height: 100vh;
}

@media (max-width:1800px) {
    .page__section--right {
        padding: 0 3px 15px 15px;
        flex-basis: 280px;
    }
}

@media (max-width:768px) {
    .page__section--right {
        display: none;
    }
}

.page__section--right-holder {
    direction: ltr;
    width: 100%;
    height: 100%;
    scrollbar-width: thin;
    padding-right: 5px;
    overflow-y: auto;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
    /* Designing for scroll-bar */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

    .page__section--right-holder::-webkit-scrollbar {
        width: 5px;
    }

    .page__section--right-holder::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
    }

    .page__section--right-holder::-webkit-scrollbar-thumb {
        background: var(--color11);
        border-radius: 5px;
    }

        .page__section--right-holder::-webkit-scrollbar-thumb:hover {
            background: var(--color9);
        }

.page__section--right-dashboard {
    padding: 0 27px 0 0;
}

@media (max-width:1800px) {
    .page__section--right-dashboard {
        padding: 0 12px 0 0;
    }
}

@media (max-width:768px) {
    .page__section--right.menu_open {
        display: block;
        position: fixed;
        right: 0;
        top: 90px;
        transform: translateY(0);
        width: 500px;
        height: calc(100% - 90px);
        z-index: 50;
        border-radius: 60px 0 0 60px;
    }

        .page__section--right.menu_open .btn__menu-close {
            display: block;
        }
}

@media (max-width:576px) {
    .page__section--right.menu_open {
        width: calc(100% - 10px);
    }
}

.page__section--myleft {
    flex-basis: calc(100%);
    /*min-height: 100vh;*/
}

.page__section--left {
    flex-basis: calc(100% - 350px);
    min-height: 100vh;
}

@media (max-width:1800px) {
    .page__section--left {
        flex-basis: calc(100% - 280px);
    }
}

@media (max-width:768px) {
    .page__section--left {
        width: 100%;
        flex-basis: 100%;
    }
}

.page__section--left-content {
    background-color: var(--color10);
    /*height: calc(-moz-max-content );
    height: calc(max-content );*/
    height: 100%;
    border-radius: 0 40px 0 0;
    position: relative;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url(../img/bg-pattern.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /*padding-bottom: 61px;*/
    z-index: 0;
}

@media (max-width:1800px) {
    .page__section--left-content {
        /*height: 91vh;*/
    }
}

@media (max-width:768px) {
    .page__section--left-content {
        height: auto;
        padding-bottom: 150px;
        border-radius: 0;
    }
}

@media (max-width:576px) {
    .page__section--left-content {
        height: auto;
        padding-bottom: 130px;
    }
}

@media (max-width:768px) {
    .page__files .page__section--left-content {
        height: 100%;
    }
}

@media (max-width:768px) {
    .page__lastfiles .page__section--left-content {
        height: 100%;
    }
}

.page__lastfiles .content__section--heading {
    margin-top: 15px;
    padding-bottom: 15px;
}

.btn__menu-close {
    position: absolute;
    top: 30px;
    left: 30px;
    display: none;
}

    .btn__menu-close i {
        color: var(--color7);
        font-size: 15px;
    }

.content__parent {
    position: relative;
}

.header {
    background-color: var(--color1);
    height: 85px;
}

@media (max-width:1800px) {
    .header {
        height: 70px;
    }
}

@media (max-width:1200px) {
    .header {
        /*justify-content: flex-end !important;*/
    }
}

@media (max-width:576px) {
    .header {
        justify-content: center !important;
    }
}

.header__right {
    display: flex;
}

.header__left {
    display: flex;
}

@media (max-width:768px) {
    .header__left {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width:576px) {
    .header__left {
        position: relative;
    }
}

.header__icons .icons__list {
    display: flex;
}

    .header__icons .icons__list li.icons__list--child {
        margin: 0 5px;
        position: relative;
    }

@media (max-width:576px) {
    .header__icons .icons__list li.icons__list--child {
        position: unset;
    }
}

.header__icons .icons__list li.icons__list--child > a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--color10);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color1);
}

    .header__icons .icons__list li.icons__list--child > a i {
        font-size: 15px;
        font-weight: 500;
    }

    .header__icons .icons__list li.icons__list--child > a:hover, .header__icons .icons__list li.icons__list--child > a:focus {
        background-color: var(--color5);
        color: var(--color3);
    }

@media (max-width:1800px) {
    .header__icons .icons__list li.icons__list--child > a {
        height: 40px;
        width: 40px;
    }
}

@media (max-width:576px) {
    .header__icons .icons__list .dropdown__holder {
        left: 50%;
        transform: translateX(-50%);
    }

    .header__icons .icons__list .dropdown__arrow::after {
        display: none;
    }
}

.header__admin {
    margin-right: 5px;
    display: flex;
    position: relative;
}

.header__admin--pic {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color10);
    z-index: 3;
    position: relative;
}

@media (max-width:1800px) {
    .header__admin--pic {
        width: 45px;
        height: 45px;
    }
}

.header__admin--pic::before {
    content: "\e971";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: "mania";
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color1);
    font-weight: 600;
}

.header__admin--pic img {
    width: 85%;
    height: 85%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 4;
}

.header__admin--pic svg {
    height: 25px;
    width: 25px;
}

.header__admin--name {
    background-color: var(--color10);
    height: 45px;
    padding: 5px 15px;
    border-radius: 60px;
    min-width: 150px;
    position: relative;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

@media (max-width:1800px) {
    .header__admin--name {
        height: 40px;
    }
}

@media (max-width:768px) {
    .header__admin--name {
        display: none;
    }
}

.header__admin--name-shape {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}

    .header__admin--name-shape svg {
        color: var(--color10);
        width: 30px;
        height: 25px;
    }

.header__admin--name span {
    font-size: var(--text14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color6);
    font-weight: 500;
}

@media (max-width:1800px) {
    .header__admin--name span {
        font-size: var(--text12);
    }
}

.header__admin--name span i {
    font-size: 10px;
    margin-left: 10px;
    font-weight: bold;
}

.header__admin--showbtn {
    height: 45px;
    background-color: white;
    border-radius: 60px;
    box-shadow: var(--shadow-light);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: var(--text14);
    color: var(--color5);
}

    .header__admin--showbtn i,
    .header__admin--showbtn svg,
    .header__admin--showbtn img {
        width: 20px;
        height: 20px;
        font-size: 20px;
        margin-left: 10px;
    }

@media (max-width:1800px) {
    .header__admin--showbtn {
        height: 40px;
        font-size: var(--text12);
    }
}

.header__admin--showbtn:hover {
    background-color: var(--color4);
}

@media (max-width:576px) {
    .header {
        height: auto;
        padding: 15px 0;
    }
}

.style__texticon i,
.style__texticon svg,
.style__texticon img {
    width: 15px;
    height: 15px;
    font-size: 15px;
    margin-left: 10px;
    color: var(--color1);
}

.style__texticon ul {
    border-bottom: 1px solid var(--color4);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

    .style__texticon ul:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .style__texticon ul li {
        margin-bottom: 10px;
    }

        .style__texticon ul li:last-child {
            margin-bottom: 0;
        }

        .style__texticon ul li a {
            display: flex;
            align-items: center;
            width: 100%;
            font-size: var(--text14);
            color: var(--color6);
            text-align: right;
        }

            .style__texticon ul li a:hover {
                color: var(--color1);
                text-shadow: 0 0 0.5px var(--color1);
            }

@media (max-width:1800px) {
    .style__texticon ul li a {
        font-size: var(--text12);
    }
}

.style__texticon ul li a > span {
    display: flex;
    font-size: var(--text14);
}

@media (max-width:1800px) {
    .style__texticon ul li a > span {
        font-size: var(--text12);
    }
}

.style__texticon ul li h6 {
    font-size: var(--text14);
    font-weight: 500;
    flex: 1;
}

@media (max-width:1800px) {
    .style__texticon ul li h6 {
        font-size: var(--text12);
    }
}

.style__texticon label {
    display: flex;
    align-items: center;
}

    .style__texticon label .icon, .style__texticon label .mania, .style__texticon label i, .style__texticon label svg, .style__texticon label img {
        width: 15px;
        height: 15px;
        font-size: 15px;
        margin-left: 10px;
        color: var(--color1);
    }

    .style__texticon label .displayname {
        font-size: var(--text14);
        color: var(--color6);
        font-weight: 500;
        flex: 1;
    }

@media (max-width:1800px) {
    .style__texticon label .displayname {
        font-size: var(--text12);
    }
}

.style__texticon .menuitem .filenameform {
    border: 1px solid var(--color1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px 5px 5px;
}

    .style__texticon .menuitem .filenameform input[type=text] {
        width: 100%;
        border: none;
        margin-left: 10px;
        background-color: transparent;
    }

    .style__texticon .menuitem .filenameform .icon-confirm {
        width: 50px;
        border: none;
        background-color: var(--color4);
        border-radius: 30px;
        color: var(--color5);
        padding: 5px 10px;
        font-size: var(--text14);
    }

        .style__texticon .menuitem .filenameform .icon-confirm i, .style__texticon .menuitem .filenameform .icon-confirm .icon, .style__texticon .menuitem .filenameform .icon-confirm .svg, .style__texticon .menuitem .filenameform .icon-confirm svg, .style__texticon .menuitem .filenameform .icon-confirm img, .style__texticon .menuitem .filenameform .icon-confirm .mania {
            font-size: var(--text14);
            width: 14px;
            height: 14px;
            color: var(--color5);
            fill: var(--color5);
        }

        .style__texticon .menuitem .filenameform .icon-confirm:hover {
            border: none;
        }

.style__texticon .menuitem .displayname {
    font-size: var(--text14);
}

@media (max-width:1800px) {
    .style__texticon .menuitem .displayname {
        font-size: var(--text12);
    }
}

.dropdown__button {
    position: relative;
}

@media (max-width:768px) {
    .dropdown__button {
        position: unset;
    }

        .dropdown__button .dropdown__holder {
            left: 50%;
            transform: translateX(-50%);
            top: calc(100% - 15px);
        }

        .dropdown__button .dropdown__arrow::after {
            display: none;
        }
}

/*=== [ toolbar ] ===*/
.toolbar {
    position: absolute;
    left: 30px;
    top: calc(50% + 10px);
    transform: translateY(-50%);
    background-color: var(--color1);
    width: 60px;
    border-radius: 60px;
    padding: 30px 0;
    z-index: 80;
    /*=== [ toolbar__menu ] ===*/
}

@media (max-width:1800px) {
    .toolbar {
        width: 55px;
        left: 15px;
    }
}

@media (max-width:768px) {
    .toolbar {
        position: fixed;
        border-radius: 30px;
        top: calc(100% - 60px) !important;
        width: calc(100% - 10px);
        left: 50%;
        transform: translateX(-50%) translateY(-5px);
        padding: 15px 20px;
        border: 0.5px solid var(--color-bg);
    }
}

@media (max-width:489px) {
    .toolbar {
        padding: 10px 15px;
        transform: translateX(-50%) translateY(5px);
    }
}

.toolbar__menu li:last-child .toolbar__menu--box {
    border-bottom: none;
}

@media (max-width:1800px) {
    .toolbar__menu li:last-child .toolbar__menu--box {
        border-right: none;
    }
}

.toolbar__menu li:hover .toolbar__menu--box .toolbar__menu--box-back, .toolbar__menu li.page-active .toolbar__menu--box-back {
    opacity: 1;
    visibility: visible;
    color: var(--color1);
    font-weight: bolder;
}

.toolbar__menu li:hover .toolbar__menu--box .toolbar__menu--box-icon, .toolbar__menu li.page-active .toolbar__menu--box-icon {
    display: none;
    opacity: 0;
}

.toolbar__menu li.page-active .toolbar__menu--box-back-title {
    display: none;
    opacity: 0;
}

@media (max-width:768px) {
    .toolbar__menu li.page-active .toolbar__menu--box-back-title {
        display: flex;
        opacity: 1;
    }
}

@media (max-width:768px) {
    .toolbar__menu li {
        width: 100%;
    }
}

.toolbar__menu--box {
    color: var(--color3);
    position: relative;
    height: 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0 10px;
    width: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width:1800px) {
    .toolbar__menu--box {
        height: 80px;
    }
}

@media (max-width:768px) {
    .toolbar__menu--box {
        min-width: 59px;
        height: auto;
        margin: 0;
        width: 100%;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.4);
    }
}

@media (max-width:489px) {
    .toolbar__menu--box {
        min-width: 40px;
    }
}

.toolbar__menu--box-icon {
    transition: 0.2s;
}

    .toolbar__menu--box-icon i,
    .toolbar__menu--box-icon svg {
        font-size: 30px;
        height: 30px;
        width: 30px;
    }

@media (max-width:1800px) {
    .toolbar__menu--box-icon i,
    .toolbar__menu--box-icon svg {
        font-size: 25px;
        height: 25px;
        width: 25px;
    }
}

@media (max-width:489px) {
    .toolbar__menu--box-icon i,
    .toolbar__menu--box-icon svg {
        font-size: 20px;
        height: 20px;
        width: 20px;
    }
}

.toolbar__menu--box-icon svg,
.toolbar__menu--box-icon img {
    width: 30px;
}

@media (max-width:1800px) {
    .toolbar__menu--box-icon svg,
    .toolbar__menu--box-icon img {
        width: 25px;
    }
}

@media (max-width:489px) {
    .toolbar__menu--box-icon svg,
    .toolbar__menu--box-icon img {
        width: 20px;
    }
}

.toolbar__menu--box-back {
    position: absolute;
    right: -57px;
    top: 0;
    opacity: 0;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    visibility: hidden;
    height: 100px;
}

@media (max-width:1800px) {
    .toolbar__menu--box-back {
        height: 45px;
        top: 20px;
        right: -54px;
    }
}

@media (max-width:768px) {
    .toolbar__menu--box-back {
        top: -45px;
        right: 50%;
        transform: translateX(50%) rotate(-90deg);
    }
}

@media (max-width:489px) {
    .toolbar__menu--box-back {
        top: -39px;
    }
}

.toolbar__menu--box-back .icon-active {
    font-size: 20px;
    background-color: var(--color5);
    height: 45px;
    width: 45px;
    border-radius: 50%;
    transform: translateX(-20px);
    box-shadow: var(--shadow-darkblue);
}

@media (max-width:1800px) {
    .toolbar__menu--box-back .icon-active {
        height: 40px;
        width: 40px;
    }
}

@media (max-width:768px) {
    .toolbar__menu--box-back .icon-active {
        height: 35px;
        width: 35px;
    }
}

@media (max-width:489px) {
    .toolbar__menu--box-back .icon-active {
        height: 30px;
        width: 30px;
    }
}

@media (max-width:768px) {
    .toolbar__menu--box-back .icon-active i {
        transform: rotate(90deg);
    }
}

@media (max-width:489px) {
    .toolbar__menu--box-back .icon-active i {
        font-size: 15px;
    }
}

.toolbar__menu--box-back svg {
    fill: var(--color10);
    transition: 0.7s;
    height: 100px;
}

@media (max-width:1800px) {
    .toolbar__menu--box-back svg {
        height: 80px;
    }
}

@media (max-width:768px) {
    .toolbar__menu--box-back svg {
        height: 72px;
    }
}

@media (max-width:489px) {
    .toolbar__menu--box-back svg {
        height: 64px;
    }
}

.toolbar__menu--box-back-title {
    background-color: var(--color5);
    padding: 5px 15px;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    height: 45px;
    width: -moz-max-content;
    width: max-content;
    box-shadow: var(--shadow-darkblue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
}

@media (max-width:1800px) {
    .toolbar__menu--box-back-title {
        left: calc(100% - 5px);
        height: 40px;
        padding: 3px 15px;
    }
}

.toolbar__menu--box-back-title span {
    font-weight: 100;
    font-size: var(--text14);
}

@media (max-width:1800px) {
    .toolbar__menu--box-back-title span {
        font-size: var(--text12);
    }
}

@media (max-width:768px) {
    .toolbar__menu--box-back-title span {
        width: 100%;
        height: 100%;
        font-size: 11px;
    }
}

@media (max-width:420px) {
    .toolbar__menu--box-back-title span {
        font-size: 9px;
    }
}

.toolbar__menu--box-back-title::after {
    content: "";
    width: 15px;
    height: 15px;
    background-color: var(--color5);
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

@media (max-width:1800px) {
    .toolbar__menu--box-back-title::after {
        width: 10px;
        height: 10px;
    }
}

.toolbar__menu--box-back:hover .toolbar__menu--box-back-title {
    opacity: 1 !important;
    display: flex !important;
}

@media (max-width:768px) {
    .toolbar__menu--box-back .toolbar__menu--box-back-title {
        background-color: transparent;
        left: -60px;
        height: 40px;
        width: 40px;
        z-index: 999;
        display: flex;
        right: auto;
        box-shadow: none;
        transform: rotate(90deg) translateY(-50%) translateX(0);
        top: 50%;
        padding: 0;
        justify-content: center;
        align-items: center;
        height: 0;
        padding: 0;
        left: -30px;
        text-align: center;
        width: 50px;
    }

        .toolbar__menu--box-back .toolbar__menu--box-back-title::after {
            display: none;
        }
}

@media (max-width:576px) {
    .toolbar__menu--box-back .toolbar__menu--box-back-title {
        left: -30px;
    }
}

@media (max-width:489px) {
    .toolbar__menu--box-back .toolbar__menu--box-back-title {
        left: -25px;
    }
}

@media (max-width:768px) {
    .toolbar__menu {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
}

/*=== [ content ] ===*/
@media (max-width:768px) {
    .content__parent {
        /*min-height: 100vh;*/
    }
}

.content__section {
    padding-top: 30px;
    width: calc(100% + 55px);
}

@media (max-width:1800px) {
    .content__section {
        padding-top: 20px;
        width: calc(100% + 35px);
    }
}

@media (max-width:768px) {
    .content__section {
        width: 100%;
    }
}

.content__section--heading {
    border-bottom: 1px solid var(--color1);
    margin-right: 88px;
    transform: translateX(55px);
    position: relative;
    z-index: 30;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-bottom: 10px;
    padding-right: 20px !important;
}

@media (max-width:1800px) {
    .content__section--heading {
        margin-right: 50px;
        transform: translateX(35px);
    }
}

@media (max-width:768px) {
    .content__section--heading {
        width: 100%;
        margin-right: 0;
        transform: none;
    }
}

.content__section--heading > h3 {
    font-weight: bold;
    font-size: var(--text25);
    color: var(--color5);
    padding-bottom: 15px;
    margin-left: 10px;
}

@media (max-width:1800px) {
    .content__section--heading > h3 {
        font-size: var(--text22);
    }
}

@media (max-width:768px) {
    .content__section--heading > h3 {
        font-size: var(--text18);
    }
}

.content__section--heading > h3 span {
    color: var(--color7);
    margin-right: 5px;
}

.content__section--heading-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 15px;
}

@media (max-width:1080px) {
    .content__section--heading-btns {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width:489px) {
    .content__section--heading-btns {
        margin-top: 10px;
    }
}

.content__section--heading-btns .btn__mobile {
    background-color: var(--color4);
    color: var(--color5);
    height: 40px;
    width: 40px;
    margin-right: 10px;
    display: none;
    box-shadow: none;
}

    .content__section--heading-btns .btn__mobile i,
    .content__section--heading-btns .btn__mobile img,
    .content__section--heading-btns .btn__mobile svg {
        color: var(--color5);
        fill: var(--color5);
    }

    .content__section--heading-btns .btn__mobile:hover {
        background-color: var(--color5);
    }

        .content__section--heading-btns .btn__mobile:hover i,
        .content__section--heading-btns .btn__mobile:hover svg {
            color: var(--color3);
            fill: var(--color3);
        }

@media (max-width:768px) {
    .content__section--heading-btns .btn__mobile {
        display: flex;
    }
}

@media (max-width:489px) {
    .content__section--heading-btns .btn__mobile {
        position: absolute;
        left: 0;
        top: -5px;
    }
}

.content__section--items {
    position: relative;
    width: 100%;
    padding-top: 15px;
    height: 80vh;
    position: relative;
    direction: ltr;
    padding-right: 55px;
    padding-left: 80px;
    padding-bottom: 10px;
    overflow-y: auto;
    transform: translateX(55px);
    overflow-x: visible;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
    /* Designing for scroll-bar */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

@media (max-width:1800px) {
    .content__section--items {
        padding-right: 35px;
        transform: translateX(35px);
        padding-left: 80px;
    }
}

@media (max-width:768px) {
    .content__section--items {
        height: auto;
        transform: none;
        width: 100%;
        overflow-y: hidden;
        padding-left: 0;
        padding-right: 0;
    }
}

.content__section--items::-webkit-scrollbar {
    width: 5px;
}

.content__section--items::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
}

.content__section--items::-webkit-scrollbar-thumb {
    background: var(--color11);
    border-radius: 5px;
}

    .content__section--items::-webkit-scrollbar-thumb:hover {
        background: var(--color9);
    }

/*=== [ logo ] ===*/
.logo {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    margin: auto;
    /*margin: 10px auto 40px auto;*/
}

    .logo img {
        width: 90%;
        height: 90%;
        position: relative;
        -o-object-fit: contain;
        object-fit: contain;
        z-index: 2;
        filter: brightness(0) invert(1);
        /*margin-right: 20px;*/
    }

@media (max-width:1800px) {
    .logo img {
        width: 100%;
    }
}

/*=== [ admin ] ===*/
.admin {
    width: 100%;
    padding: 15px;
    margin-top: 30px;
    color: white;
    background-color: #1967A7;
    border-radius: 15px;
    box-shadow: var(--shadow-darkblue);
}

.admin__data {
    width: 100%;
}

    .admin__data ul {
        width: 100%;
    }

        .admin__data ul li {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 15px;
            font-size: var(--text12);
            font-weight: normal;
        }

            .admin__data ul li:last-child {
                margin-bottom: 0;
            }

            .admin__data ul li span {
                display: flex;
                align-items: center;
            }

                .admin__data ul li span i {
                    margin-left: 10px;
                }

.admin__btn li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.admin__btn--title {
    display: flex;
    align-items: center;
    font-size: var(--text12);
}

.admin__btn--title-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    font-size: 15px;
    transition: 0.3s;
}

.admin__btn--title:hover .admin__btn--title-icon {
    background-color: var(--color3);
    color: var(--color5);
}

.admin > div {
    border-bottom: 1px solid var(--color4);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

    .admin > div:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

/*=== [ religious ] ===*/
.religious {
    background-color: var(--color10);
    padding: 5px;
    border-radius: 60px;
    display: flex;
    height: 45px;
    margin-right: 10px;
    margin-top: 8px;
    width:310px;
    position:relative;
}

@media (max-width:1800px) {
    .religious {
        height: 40px;
    }
}

@media (max-width:1200px) {
    .religious {
        display: none;
    }
}

.religious__title {
    background-color: var(--color1);
    color: white;
    padding: 8px 15px;
    border-radius: 60px;
    margin-left: 15px;
}

    .religious__title i {
        font-size: var(--text18);
        margin-left: 10px;
        animation: azan-animate 2s ease-in-out infinite;
    }

    .religious__title svg,
    .religious__title img {
        margin-left: 15px;
        width: 18px;
        height: 18px;
    }

    .religious__title span {
        font-weight: 300;
        font-size: var(--text12);
    }

.religious__value-subject {
    color: var(--color6);
    font-weight: 300;
    font-size: var(--text14);
}

@media (max-width:1800px) {
    .religious__value-subject {
        font-size: var(--text12);
    }
}

.religious__value-clock {
    color: var(--color1);
    font-weight: bold;
    font-size: var(--text14);
    margin: 0 10px;
    position:absolute;
    left:10px;
}

/*=== [ status ] ===*/
.status__busy {
    background-color: #D12929;
}

    .status__busy::after {
        content: "\e9b5";
        font-family: "mania";
    }

.status__online {
    background-color: #94C573;
}

.status__late {
    background-color: #FF8357;
    color: white;
}

    .status__late::after {
        content: "\e98a";
        font-family: "mania";
    }

.status__unavailable {
    background-color: #7D8E99;
}

/*=== [ copyright ] ===*/
.copyright__files {
    position: absolute;
    right: 0;
    bottom: 15px;
    font-size: var(--text12);
    color: var(--color9);
    width: 100%;
    padding: 0 50px 0 140px;
    display: flex;
    justify-content: space-between;
}

@media (max-width:1800px) {
    .copyright__files {
        padding: 0 30px 0 120px;
        bottom: 8px;
        font-size: 10px;
    }
}

@media (max-width:1080px) {
    .copyright__files {
        flex-direction: column;
    }
}

@media (max-width:768px) {
    .copyright__files {
        bottom: 90px;
        padding: 0 30px;
    }
}

@media (max-width:576px) {
    .copyright__files {
        bottom: 70px;
    }
}

@media (max-width:1200px) {
    .copyright {
        justify-content: flex-end !important;
    }
}

.copyright__text span {
    font-weight: 400;
}

    .copyright__text span a {
        font-weight: 500;
        font-size: var(--text12);
        color: var(--color1);
    }

        .copyright__text span a:hover {
            text-shadow: 0 0 0.5px var(--color1);
        }

@media (max-width:1800px) {
    .copyright__text span a {
        font-size: 10px;
    }
}

.copyright__switch {
    font-size: var(--text12);
    font-weight: 400;
}

    .copyright__switch ul {
        display: flex;
    }

        .copyright__switch ul li {
            border-left: 1px solid var(--color9);
        }

            .copyright__switch ul li:last-child {
                border-left: none;
            }

                .copyright__switch ul li:last-child a {
                    padding-left: 0;
                }

            .copyright__switch ul li:first-child a {
                padding-right: 0;
            }

        .copyright__switch ul a {
            font-size: var(--text12);
            font-weight: 400;
            padding: 0 10px;
        }

            .copyright__switch ul a:hover {
                color: var(--color1);
            }

@media (max-width:1800px) {
    .copyright__switch ul a {
        font-size: 10px;
    }
}

/*=== [ links ] ===*/
.links {
    width: 100%;
}

.links__icon {
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
}

    .links__icon i,
    .links__icon svg,
    .links__icon img {
        width: 20px;
        height: 20px;
        font-size: 20px;
        display: inline-block;
    }

@media (max-width:1800px) {
    .links__icon {
        margin-left: 10px;
    }

        .links__icon i,
        .links__icon svg,
        .links__icon img {
            width: 20px;
            height: 20px;
            font-size: 20px;
        }
}

.links__text {
    font-size: var(--text14);
    font-weight: 500;
}

@media (max-width:1800px) {
    .links__text {
        font-size: var(--text12);
    }
}

.links__arrow {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: none;
}

    .links__arrow button {
        color: white;
        font-size: 10px;
        font-weight: bold;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

        .links__arrow button i,
        .links__arrow button svg,
        .links__arrow button img {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

.links__list {
    width: 100%;
}

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

        .links__list li > a {
            width: 100%;
            padding: 5px 30px;
            color: white;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 45px;
            border-radius: 60px;
            position: relative;
            font-size: var(--text12);
            font-weight: 400;
        }

@media (max-width:1800px) {
    .links__list li > a {
        font-size: 10px;
        padding: 5px 20px;
    }
}

.links__list li > a:hover {
    background-color: var(--color-bg);
    color: var(--color1);
}

    .links__list li > a:hover .links__arrow button {
        color: var(--color3);
        background-color: var(--color1);
    }

.links__list li.links_active > a {
    background-color: var(--color-bg);
    color: var(--color1);
}

    .links__list li.links_active > a .links__arrow button {
        color: var(--color3);
        background-color: var(--color1);
    }

.links__haschild ul li {
    margin-bottom: 15px;
}

.links__haschild .links__arrow {
    display: block;
}

.links__haschild_open .links__arrow i {
    transform: rotate(180deg) !important;
}

.links__haschild_open .links__child {
    display: block;
}

.links__child {
    display: none;
    margin: 15px 0;
    padding-right: 60px;
}

    .links__child .links__text {
        font-weight: 300;
    }

@media (max-width:1800px) {
    .links__child {
        padding-right: 50px;
    }
}

.links__child li > a {
    font-size: var(--text12);
    font-weight: 300;
    height: auto;
    padding: 0;
}

    .links__child li > a:hover {
        background-color: transparent;
        text-shadow: 0 0 1px var(--color3);
        color: var(--color3);
    }

.links__child .links__icon {
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .links__child .links__icon i,
    .links__child .links__icon svg,
    .links__child .links__icon img {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

    .links__child .links__icon .links__text {
        font-size: var(--text12);
    }

.format__icon {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background-color: var(--color4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}

    .format__icon i,
    .format__icon img,
    .format__icon svg {
        font-size: 10px;
        width: 10px;
        height: 10px;
    }

.btn__activity {
    position: relative;
}

    .btn__activity .dropdown__parent {
        width: auto;
    }

    .btn__activity .dropdown__result {
        min-width: 250px;
    }

    .btn__activity .dropdown__all {
        padding: 0 0 0 5px;
    }
/*=== [ scrollbar ] ===*/
.scrollbar-y {
    overflow-y: auto;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
    /* Designing for scroll-bar */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

    .scrollbar-y::-webkit-scrollbar {
        width: 5px;
    }

    .scrollbar-y::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
    }

    .scrollbar-y::-webkit-scrollbar-thumb {
        background: var(--color11);
        border-radius: 5px;
    }

        .scrollbar-y::-webkit-scrollbar-thumb:hover {
            background: var(--color9);
        }

.scrollbar-x {
    overflow-x: auto;
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
    /* Designing for scroll-bar */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

    .scrollbar-x::-webkit-scrollbar {
        width: 5px;
    }

    .scrollbar-x::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
    }

    .scrollbar-x::-webkit-scrollbar-thumb {
        background: var(--color11);
        border-radius: 5px;
    }

        .scrollbar-x::-webkit-scrollbar-thumb:hover {
            background: var(--color9);
        }

* {
    scrollbar-color: var(--color11) var(--color11);
    scrollbar-width: thin;
}

    /* Designing for scroll-bar */
    *::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    *::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
    }

    /* Handle */
    *::-webkit-scrollbar-thumb {
        background: var(--color11);
        border-radius: 5px;
    }

        /* Handle on hover */
        *::-webkit-scrollbar-thumb:hover {
            background: var(--color9);
        }

/*=== [ sidebar ] ===*/
.sidebar {
    width: 560px;
    height: calc(100% - 10px);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 90;
    border-right: 1px solid var(--color4);
    background-color: var(--color3);
    box-shadow: 10px 0 10px rgba(0, 0, 0, 0.03);
    border-radius: 0 60px 0 0;
}

@media (max-width:768px) {
    .sidebar {
        width: calc(100% - 10px);
        height: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
    }
}

.sidebar__share {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 30px;
}

.sidebar .files__name {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    width: auto;
    border-bottom: 1px solid var(--color4);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.sidebar .files__name--text {
    width: 100%;
    padding-top: 5px;
}

    .sidebar .files__name--text h6 {
        font-size: var(--text16);
    }

.sidebar .files__details {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

    .sidebar .files__details span {
        border-left: 1px solid var(--color4);
        padding-left: 10px;
        margin-left: 10px;
        font-size: 11px;
        width: -moz-fit-content;
        width: fit-content;
        font-weight: 300;
    }

        .sidebar .files__details span:last-child {
            border-left: none;
            padding-left: none;
        }

.sidebar .files__buttons {
    padding: 0;
    align-items: flex-end;
}

.sidebar .files__buttons--favorited {
    display: flex;
    background-color: var(--color4);
    color: var(--color5);
}

    .sidebar .files__buttons--favorited i,
    .sidebar .files__buttons--favorited svg {
        color: var(--color5);
        fill: var(--color5);
    }

    .sidebar .files__buttons--favorited:hover i,
    .sidebar .files__buttons--favorited:hover svg {
        color: var(--color3);
        fill: var(--color3);
    }

.sidebar .files__buttons--item:hover {
    background-color: var(--color5);
    color: var(--color3);
}

.sidebar .btn__close {
    position: absolute;
    left: 15px;
    top: 15px;
    color: var(--color12);
    font-size: 15px;
}

.sidebar__heading h4 {
    font-size: var(--text14);
    color: var(--color6);
}

.sidebar label {
    margin: 15px 0;
}

    .sidebar label input {
        width: 100%;
        height: 45px;
        border-radius: 40px;
        border: 1px solid var(--color4);
        font-size: var(--text12);
        padding: 0 15px;
        color: var(--color5);
    }

        .sidebar label input:hover, .sidebar label input:focus {
            border: 1px solid var(--color1);
        }

.sidebar .icontext {
    flex: 1;
}

/*=== [ favorited_active ] ===*/
.favorited_active {
    background-color: var(--color8) !important;
    color: var(--color3) !important;
}

    .favorited_active i,
    .favorited_active img,
    .favorited_active svg {
        color: var(--color3) !important;
        fill: var(--color3) !important;
    }

/*=== [ tabs ] ===*/
.tabs__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--color4);
    padding-bottom: 15px;
}

    .tabs__buttons li {
        height: 45px;
        flex-basis: 25%;
        position: relative;
    }

@media (max-width:576px) {
    .tabs__buttons li {
        height: 65px;
    }
}

.tabs__buttons li button {
    height: 100%;
    background-color: var(--color-bg);
    padding: 5px 15px;
    border: 1px solid var(--color4);
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color9);
    width: 100%;
    font-weight: 500;
}

    .tabs__buttons li button i {
        margin-left: 10px;
    }

    .tabs__buttons li button span {
        font-size: var(--text12);
    }

@media (max-width:576px) {
    .tabs__buttons li button {
        flex-direction: column;
        padding: 5px;
    }

        .tabs__buttons li button i {
            margin-left: 0;
        }

        .tabs__buttons li button span {
            font-size: 8px;
            margin-top: 10px;
        }
}

.tabs__buttons li:first-child button {
    border-right: 1px solid var(--color4);
    border-radius: 0 30px 30px 0;
}

.tabs__buttons li:last-child button {
    border-radius: 30px 0 0 30px;
}

.tabs__buttons li::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 15px);
    transform: translateX(-50%);
    width: 100%;
    border-bottom: 1px solid var(--color2);
    opacity: 0;
    transition: 0.3s;
}

.tabs__buttons li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: var(--color2);
    border-radius: 3px;
    opacity: 0;
    transition: 0.3s;
}

.tabs__buttons li.tabs_active::before, .tabs__buttons li.tabs_active::after, .tabs__buttons li:hover::before, .tabs__buttons li:hover::after {
    display: block;
    opacity: 1;
}

.tabs__buttons li.tabs_active button, .tabs__buttons li:hover button {
    background-color: var(--color4);
    color: var(--color6);
}

    .tabs__buttons li.tabs_active button i, .tabs__buttons li:hover button i {
        color: var(--color2);
    }

.tabs__content label {
    margin-top: 15px;
}

    .tabs__content label input {
        width: 100%;
        height: 45px;
        border-radius: 40px;
        border: 1px solid var(--color4);
        font-size: var(--text12);
        padding: 0 15px;
        color: var(--color5);
    }

        .tabs__content label input:hover, .tabs__content label input:focus {
            border: 1px solid var(--color1);
        }

.tabs__box {
    display: block;
    padding: 30px 0;
    height: calc(100vh - 260px);
}

.tabs__link--left {
    display: flex;
}

.tabs__link--item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

    .tabs__link--item:last-child {
        margin-bottom: 0;
    }

.tabs__related {
    margin-top: 30px;
    margin-bottom: 30px;
}

    .tabs__related p {
        font-size: var(--text12);
        margin-top: 5px;
    }

.notif__box {
    background-color: var(--color-bg);
    padding: 5px 10px;
    border-radius: 8px;
    min-width: 268px;
    box-shadow: 0 1px 5px rgba(4, 112, 184, 0.15);
    margin-bottom: 15px;
    transition: 0.3s;
    position: relative;
}

@media (max-width:768px) {
    .notif__box {
        min-width: 200px;
        min-width: auto;
    }
}

.notif__box .btn__notif--close {
    position: absolute;
    left: 10px;
    top: 10px;
}

    .notif__box .btn__notif--close i,
    .notif__box .btn__notif--close img,
    .notif__box .btn__notif--close svg {
        width: 10px;
        height: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: var(--color12);
    }

.notif__box:hover {
    background-color: var(--color4);
}

.notif__top {
    display: flex;
    align-items: center;
}

.notif__top--icon {
    background-color: var(--color3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif__top--icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
    color: var(--color9);
}

@media (max-width:1800px) {
    .notif__top--icon {
        font-size: 12px;
        height: 25px;
        width: 25px;
    }
}

.notif__down {
    font-size: var(--text14);
    margin-top: 15px;
    display: flex;
    align-items: center;
}

    .notif__down span {
        flex: 1;
    }

@media (max-width:1800px) {
    .notif__down {
        font-size: var(--text12);
    }
}

.notif__pic {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}

    .notif__pic img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: var(--shadow-darkblue);
    }

.notif__date {
    background-color: var(--color3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 3px 8px;
    font-size: var(--text12);
    margin-left: 5px;
}

@media (max-width:1800px) {
    .notif__date {
        font-size: 10px;
        height: 25px;
    }
}

@media (max-width:576px) {
    .notif__date {
        font-size: 10px;
        text-align: center;
        height: auto;
    }
}

/*=== [ icontext ] ===*/
.icontext {
    display: flex;
    align-items: center;
}

.icontext__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color4);
    color: var(--color5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    margin-left: 10px;
}

    .icontext__icon i,
    .icontext__icon svg,
    .icontext__icon img {
        width: 15px;
        height: 15px;
        font-size: 15px;
        transition: 0.3s;
    }

.icontext__text {
    font-size: var(--text14);
    color: var(--color5);
    flex: 1;
}

    .icontext__text p {
        font-size: var(--text12);
        color: var(--color9);
    }

@media (max-width:576px) {
    .icontext__text p {
        font-size: 11px;
    }
}

@media (max-width:576px) {
    .icontext__text {
        font-size: var(--text12);
    }
}

.icontext a {
    font-size: var(--text14);
    margin: 0 5px;
}

    .icontext a:hover {
        color: var(--color6);
    }

@media (max-width:576px) {
    .icontext a {
        font-size: var(--text12);
    }
}

.icontext:hover .icontext__icon {
    background-color: var(--color5);
}

    .icontext:hover .icontext__icon i,
    .icontext:hover .icontext__icon svg,
    .icontext:hover .icontext__icon img {
        color: white;
        fill: white;
    }

.icontext:hover a {
    text-decoration: underline;
}

/*=== [ pictext ] ===*/
.pictext {
    display: flex;
    align-items: center;
    margin: 30px 0;
}

.pictext__pic {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: 10px;
}

    .pictext__pic img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .pictext__pic i {
        font-size: 25px;
    }

.pictext__text {
    font-size: var(--text14);
    flex: 1;
}

@media (max-width:576px) {
    .pictext__text {
        font-size: var(--text12);
    }
}

/*=== [ picname ] ===*/
.picname {
    display: flex;
    align-items: center;
}

.picname__pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 15px;
    position: relative;
}

    .picname__pic img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.picname__pic--status {
    width: 18px;
    height: 18px;
    background-color: var(--color3);
    position: absolute;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .picname__pic--status i,
    .picname__pic--status img,
    .picname__pic--status svg {
        width: 15px;
        height: 15px;
        font-size: 15px;
    }

.picname__name {
    font-size: var(--text14);
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex: 1;
    align-items: center;
}

@media (max-width:768px) {
    .picname__name {
        font-size: var(--text12);
    }
}

.icontextsquare {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.icontextsquare__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--color4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}

@media (max-width:768px) {
    .icontextsquare__icon {
        width: 35px;
        height: 35px;
    }
}

.icontextsquare__text h4 {
    font-weight: bold;
}

@media (max-width:768px) {
    .icontextsquare__text h4 {
        font-size: var(--text14);
    }
}

/*=== [ tooltip ] ===*/
.tooltip__parent {
    position: relative;
    z-index: 25;
}

    .tooltip__parent:hover .tooltip__item {
        display: inline-flex;
        opacity: 1;
        position: absolute;
    }

.tooltip__item {
    display: none;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    width: -moz-max-content;
    width: max-content;
    padding: 5px 10px;
    background-color: var(--color3);
    box-shadow: var(--shadow-tooltip);
    color: var(--color9);
    font-size: 11px;
    transform: translateX(-50%);
    border-radius: 8px;
    z-index: 25;
    transition: 0.3s;
    word-wrap: break-word;
    text-align: center;
    justify-content: center;
}

    .tooltip__item::after {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        background-color: var(--color3);
        z-index: 25;
    }

.tooltip__dropdown .tooltip__item {
    font-size: 11px;
    width: -moz-max-content;
    width: max-content;
    padding: 8px 10px;
    min-height: 35px;
    max-width: 180px;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

    .tooltip__dropdown .tooltip__item::after {
        left: -5px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

.tooltip__right .tooltip__item {
    width: -moz-max-content;
    width: max-content;
    padding: 8px 10px;
    min-height: 35px;
    max-width: 180px;
    left: auto;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

    .tooltip__right .tooltip__item::after {
        right: -5px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

.tooltip__left .tooltip__item {
    width: -moz-max-content;
    width: max-content;
    padding: 8px 10px;
    min-height: 35px;
    max-width: 180px;
    right: auto;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

    .tooltip__left .tooltip__item::after {
        left: -5px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

@media (max-width:1080px) {
    .tooltip__left .tooltip__item {
        left: auto;
        right: calc(100% + 10px);
    }

        .tooltip__left .tooltip__item::after {
            right: -5px;
            left: auto;
        }
}

/*=== [ related ] ===*/
.related__link--item {
    margin-top: 15px;
}

    .related__link--item a {
        display: flex;
        align-items: center;
        background-color: var(--color4);
        padding: 10px;
        border-radius: 40px;
    }

.related__link--item-icon {
    width: 35px;
    height: 35px;
    background-color: var(--color9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    transition: 0.3s;
}

    .related__link--item-icon img,
    .related__link--item-icon svg,
    .related__link--item-icon i {
        width: 15px;
        height: 15px;
        font-size: 15px;
        color: var(--color3);
        fill: var(--color3);
    }

.related__link--item-text {
    font-size: var(--text14);
    transition: 0.3s;
}

@media (max-width:576px) {
    .related__link--item-text {
        font-size: var(--text12);
    }
}

.related__link--item:hover .related__link--item-icon {
    background-color: var(--color5);
    color: var(--color3);
    fill: var(--color3);
}

.related__link--item:hover .related__link--item-text {
    text-shadow: 0 0 1px var(--color5);
}

/*=== [ notexist ] ===*/
.notexist {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color9);
    margin-top: 30px;
}

    .notexist i,
    .notexist svg,
    .notexist img {
        width: 40px;
        height: 40px;
        font-size: 40px;
        margin-bottom: 15px;
        color: var(--color9);
    }

    .notexist span {
        font-size: var(--text14);
    }

@media (max-width:576px) {
    .notexist span {
        font-size: var(--text12);
    }

    .notexist i,
    .notexist svg,
    .notexist img {
        width: 30px;
        height: 30px;
        font-size: 30px;
    }
}

/*=== [ notfound ] ===*/
.notfound__box {
    background-color: var(--color3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.02);
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 70%;
    margin: 60px auto 0 auto;
}

@media (max-width:1800px) {
    .notfound__box {
        margin: 30px auto 0 auto;
    }
}

@media (max-width:1200px) {
    .notfound__box {
        width: 100%;
        border-radius: 20px;
    }
}

.notfound__box--icon svg, .notfound__box--icon img, .notfound__box--icon i {
    width: 40px;
    height: 40px;
    fill: var(--color7);
    color: var(--color7);
    font-size: 40px;
}

.notfound__box > span {
    color: var(--color7);
    font-weight: 500;
    font-size: var(--text18);
    margin-top: 30px;
}

@media (max-width:1800px) {
    .notfound__box > span {
        font-size: var(--text16);
    }
}

.notfound__box > p {
    font-size: var(--text12);
    color: var(--color9);
    margin-top: 10px;
}

.notfound__shadowbtn a,
.notfound__shadowbtn button {
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-light);
    background: var(--color3);
    border-radius: 60px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 15px 40px;
    font-size: var(--text14);
    color: var(--color9);
}

    .notfound__shadowbtn a i,
    .notfound__shadowbtn a svg,
    .notfound__shadowbtn a img,
    .notfound__shadowbtn button i,
    .notfound__shadowbtn button svg,
    .notfound__shadowbtn button img {
        font-size: var(--text14);
        margin-left: 10px;
        color: var(--color9);
        fill: var(--color9);
        transition: 0.3s;
    }

    .notfound__shadowbtn a:hover,
    .notfound__shadowbtn button:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        background-color: var(--color4);
        color: var(--color1);
    }

        .notfound__shadowbtn a:hover i,
        .notfound__shadowbtn a:hover svg,
        .notfound__shadowbtn a:hover img,
        .notfound__shadowbtn button:hover i,
        .notfound__shadowbtn button:hover svg,
        .notfound__shadowbtn button:hover img {
            color: var(--color1);
            fill: var(--color1);
        }

.notfound__arrowbtn a,
.notfound__arrowbtn button {
    margin: 30px 0;
    color: var(--color9);
    display: flex;
    align-items: center;
    font-size: var(--text14);
    font-weight: 400;
}

    .notfound__arrowbtn a i,
    .notfound__arrowbtn button i {
        margin-right: 10px;
        transition: 0.3s;
    }

    .notfound__arrowbtn a:hover,
    .notfound__arrowbtn button:hover {
        color: var(--color1);
    }

        .notfound__arrowbtn a:hover i,
        .notfound__arrowbtn button:hover i {
            transform: translateX(-10px);
        }

/*=== [ comment ] ===*/
.comment__list {
    margin: 15px 0;
}

.comment__text {
    margin-top: 15px;
}

    .comment__text p {
        font-size: var(--text14);
    }

@media (max-width:1800px) {
    .comment__text p {
        font-size: var(--text12);
    }
}

/*=== [ tags ] ===*/
.tags {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tags__content {
    width: 60%;
    margin: 30px 0;
}

@media (max-width:1200px) {
    .tags__content {
        width: 100%;
    }
}

.tags__title {
    margin-bottom: 30px;
    text-align: center;
}

    .tags__title h4 {
        font-size: var(--text14);
        color: var(--color6);
    }

@media (max-width:576px) {
    .tags__title h4 {
        font-size: var(--text12);
    }
}

@media (max-width:576px) {
    .tags__title {
        margin-bottom: 15px;
    }
}

.tags__form {
    width: 100%;
}

.tags__notresult {
    text-align: center;
    margin: 30px 0;
    color: var(--color7);
    font-size: var(--text14);
}

@media (max-width:576px) {
    .tags__notresult {
        font-size: var(--text12);
    }
}

.tags__select .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--color4);
    border-radius: 60px;
    min-height: 45px;
    margin: 0;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
}

    .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: 5px;
        border-radius: 30px;
        background-color: var(--color3);
        padding: 5px 5px 5px 30px;
        font-size: var(--text12);
        border: 1px solid var(--color4);
        color: var(--color6);
        min-height: 45px;
        display: flex;
        align-items: center;
    }

    .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        height: 100%;
        width: 20px;
        border-right: 1px solid var(--color4);
    }

        .tags__select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            background-color: var(--color4);
            color: var(--color7);
        }

/*=== [ upload ] ===*/
.upload__parent {
    margin: 15px 0;
}

.upload__error {
    color: var(--color7);
    font-size: var(--text14);
    font-weight: 500;
}

    .upload__error p {
        display: flex;
    }

        .upload__error p::before {
            content: "!";
            margin-left: 10px;
            width: 20px;
            height: 20px;
            background-color: var(--color7);
            color: var(--color3);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: var(--text14);
        }
/*# sourceMappingURL=main.css.map */
/* CASPIAN*/
/*@font-face {
    font-family: "mania";
    src: url("assets/scss/fonts/mania.woff?ahg0bg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}*/

.mud-button {
    font-family: inherit;
}

.mud-typography-body1 {
    font-family: inherit;
    font-size: 9pt;
}

.mud-drawer .mud-drawer-content {
    width: 230px;
}

.mud-data-grid .mud-table-cell .column-header .sortable-column-header {
    text-align: center;
}

.mud-data-grid .mud-table-cell .column-header {
    min-width: 150px;
}

.mud-table-pagination-caption {
    font-family: 'Vazir FD';
}

.mud-select .mud-select-input .mud-input-slot {
    overflow: visible;
}

.mud-nav-link .mud-nav-link-text {
    font-size: 10pt;
}

.MyLTR {
    direction: ltr !important;
    /*float: left !important;*/
}

.MyRTL {
    direction: rtl !important;
}

.mud-table-cell {
    border-bottom: none;
}

.mud-typography-h6 {
    font-family: 'Vazir FD';
}

.content__section {
    padding-top: 5px !important;
}
/*.mud-input-control > .mud-input-control-input-container
{
    margin-top:8px;
}*/
.mud-input-control.mud-input-control-margin-dense {
    margin-top: 0px;
    margin-bottom: 0px;
}

.mud-typography {
    font-family: 'Vazir FD';
    font-size: 9pt !important;
}

.mud-input {
    font-family: 'Vazir FD';
    font-size: 9pt !important;
}

.mud-icon-button-edge-end {
    margin-inline-end: unset;
    margin-inline-start: -12px;
}

.mud-table-toolbar {
    margin-bottom: 15px;
}

.mud-table-pagination-caption {
    direction: ltr !important;
}

.mud-table-pagination-toolbar {
    direction: ltr !important;
}
/*.mud-select
{
    margin-left:30px;
}*/
.mud-table-row-expander {
    margin: unset !important;
}

.mud-table-dense * .mud-table-row .mud-table-cell .mud-table-row-expander {
    transform: rotate(180deg);
}

.mud-grid-spacing-xs-6 > .mud-grid-item {
    /*padding-left:10px;*/
}

.mud-data-grid .mud-table-cell .column-header {
    display: unset;
}
/*.mud-icon-root.mud-svg-icon {
    transform: rotate(180deg);
}*/
.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(:last-child) {
    font-size: 9pt !important;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 3px 3px 3px 3px;
}

/*.mud-table-root .mud-table-head .mud-table-cell {
    text-align: center;
    border: solid 1px;
}*/

.mud-select {
    flex-grow: unset;
}

.copyright__text {
    padding-top: 10px;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: var(--color1);
    color: white;
    border-radius: 0;
}

/*.mud-paper {
    border-radius: 10px !important;
}*/

.mud-nav-link .mud-nav-link-text {
    font-weight: 500 !important;
    padding-right: 10px;
}

.navgroupselected {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
    border-right: 10px;
    border-color: var(--color5);
    border-style: solid;
    padding-right: 6px !important;
}

.navselected {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
    border-right: 10px;
    border-color: var(--color5);
    border-style: solid;
    padding-right: 0px !important;
}

.navsubselected {
    background-color: var(--color14) !important;
    color: var(--color3) !important;
    border-right: 10px;
    border-color: var(--color5);
    border-style: solid;
    padding-right: 0px !important;
}

.navselected .mud-ripple {
    padding-right: 6px !important;
}

.navselected span {
    color: var(--color3) !important;
}

.navsubselected .mud-ripple {
    padding-right: 6px !important;
}

.navsubselected span {
    color: var(--color3) !important;
}

.navnotselected {
    color: var(--color1) !important;
}

.navsubselected:focus:not(.mud-nav-link-disabled) {
    background-color: var(--color14) !important;
    color: var(--color3) !important;
}

.navselected:focus:not(.mud-nav-link-disabled) {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
}

.mud-nav-link:focus:not(.mud-nav-link-disabled) {
    /*background-color: var(--color1);
    color: var(--color3) !important;*/
    background-color: unset;
    color: unset;
}

.mud-icon-size-medium {
    font-size: 1.15rem;
}

.mud-collapse-entered {
    background-color: #D1DDE2;
}

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: 0px;
    padding-inline-start: 15px;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    fill: var(--color3);
}

.mud-expanded {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: unset;
}

.button:focus:not(:focus-visible) {
    background-color: var(--color1);
    color: var(--color3);
    border-right: 10px;
    border-color: var(--color5);
    border-style: solid;
    padding-right: 6px !important;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-top: 0px;
}

.mud-drawer.mud-drawer-responsive.mud-drawer-pos-right, .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right {
    width: unset;
}

    .mud-drawer.mud-drawer-responsive.mud-drawer-pos-right.mud-drawer--open, .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--open {
        padding-left: 0px;
        right: 10px;
    }

.maniadivbox {
    width: 400px;
    height: 500px;
    background-color: rgba(4, 68, 100, 0.5);
}

.login {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;
}

.logintextbox {
    color: var(--color16);
}

.custom-textbox {
    background-color: transparent !important;
    color: #e0c76e !important; /* gold-like text color */
    border: none;
    border-bottom: 1px solid #e0c76e;
    padding: 10px;
    font-size: 16px;
    width: 100%;
}

    .custom-textbox::placeholder {
        color: #e0c76e;
        opacity: 1; /* Ensure full opacity for placeholder */
    }

    .custom-textbox:focus {
        outline: none;
        border-bottom: 1px solid #e0c76e;
    }

@media (min-width: 960px) {
    .mud-drawer-open-responsive-md-right .mud-main-content {
        margin-right: 250px !important;
    }
}
/*.mud-drawer-open-responsive-md-right .mud-main-content {
    margin-right: 250px !important;
}*/

.mud-expanded span {
    color: var(--color3) !important;
}

.content__section--heading > h3 {
    color: var(--color1) !important;
}

.mud-application-layout-rtl .mud-table-bordered .mud-table-container .mud-table-root .mud-table-head .mud-table-row th.mud-table-cell:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 0px;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 0px;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:last-child {
    border-top-right-radius: 0px;
    border-top-left-radius: 10px;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: var(--color17) !important;
    text-align: center;
}

.popmenuicon {
    color: var(--color1);
    font-size: 12pt;
    margin-left: 5px;
    margin-right: 0px;
}

.popmenu {
    color: var(--color1) !important;
}

.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: var(--color20) !important;
}

.mud-table-sticky-header .mud-table-container {
    padding-bottom: 10px;
}

.mud-table-root .mud-table-body .mud-table-cell {
    color: var(--color1) !important;
}

.myfolder {
    color: var(--color1) !important;
    justify-content:right;
}

.btnno {
    background-color: var(--color16) !important;
    color: var(--color3) !important;
    width: 80px;
}

.btnok {
    background-color: var(--color1) !important;
    color: var(--color3) !important;
    width: 80px;
}

.shareformbg {
    /*background-image: url('/assets/img/v1.svg');
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: left bottom;*/
    border-radius: 20px;
}

.renamefilebg {
    background-image: url('/assets/img/v1.svg');
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: left bottom;
    border-radius: 20px;
}
.aitoolsbg {
    background-image: url('/assets/img/v21.svg');
    background-repeat: no-repeat;
    background-size: 230px auto;
    background-position: left bottom;
    border-radius: 20px;
}
.groupbg {
    background-image: url('/assets/img/v10.svg');
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: left bottom;
    border-radius: 20px;
}
.domainbg {
    background-image: url('/assets/img/v10.svg');
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: left bottom;
    border-radius: 20px;
}
.createfolderbg {
    background-image: url('/assets/img/v1.svg');
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: left bottom;
    border-radius: 20px;
}
.aitagbg {
    background-image: url('/assets/img/v12.svg');
    background-repeat: no-repeat;
    background-size: 200px auto;
    background-position: left bottom;
    border-radius: 20px;
    min-height: 200px;
}
.aichangenamebg {
    background-image: url('/assets/img/v19.svg');
    background-repeat: no-repeat;
    background-size: 200px auto;
    background-position: left bottom;
    border-radius: 20px;
    min-height: 200px;
}
.aisearchbg {
    background-image: url('/assets/img/v20.svg');
    background-repeat: no-repeat;
    background-size: 200px auto;
    background-position: left bottom;
    border-radius: 20px;
    min-height: 200px;
}
.aivoicetotextbg {
    background-image: url('/assets/img/v18.svg');
    background-repeat: no-repeat;
    background-size: 120px auto;
    background-position: left bottom;
    border-radius: 20px;
    min-height: 200px;
}
.aitranslatebg {
    background-image: url('/assets/img/v17.svg');
    background-repeat: no-repeat;
    background-size: 200px auto;
    background-position: left bottom;
    border-radius: 20px;
    min-height: 200px;
}
.ai1bg {
    background-image: url('/assets/img/v11.svg');
    background-repeat: no-repeat;
    background-size: 200px auto;
    background-position: left bottom;
    border-radius: 20px;
    min-height:200px;
}
.movefolderbg {
    background-image: url('/assets/img/v7.svg');
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: left bottom;
    border-radius: 20px;
}

.downloadbg {
    background-image: url('/assets/img/v2.svg');
    background-repeat: no-repeat;
    background-size: 85px auto;
    background-position: left bottom;
    border-radius: 20px;
}

.activitybg {
    background-image: url('/assets/img/v3.svg');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left bottom;
    border-radius: 15px !important;
    max-height: 268px;
}

.usagecard {
    border-radius: 15px !important;
    max-height: 268px;    
}

.activityContent {
    overflow: auto;
}

.activityFooter {
    background-color: var(--color17);
    text-align: center;
    color: var(--color3);
    border-radius: 0 0 15px 15px;
}

.maniaul {
    color: var(--color1);
    list-style-type: circle;
    margin-right: 50px;
    font-size: 10pt;
}

.activityFooter span {
    font-size: 9pt !important;
}

.deletebg {
    background-image: url('/assets/img/v1.svg');
    background-repeat: no-repeat;
    background-size: 130px auto;
    background-position: right bottom;
    border-radius: 20px;
    background-color: red;
}

    .deletebg p {
        font-size: 10px;
        margin: 10px;
    }

.mud-dialog-title {
    color: var(--color1) !important;
}

.co1 {
    color: var(--color1) !important;
    border-style: solid;
    border-width: 1px;
}

.mud-dialog .mud-dialog-actions {
    padding-left: 45px !important;
}

.mud-input {
    color: var(--color1) !important;
}

    .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-color: var(--color16) !important;
    }

    .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
        color: var(--color1) !important;
    }
.searchyellow .mud-icon-root.mud-svg-icon {
    fill:var(--color1) !important;
}
.mud-list-item-text {
    color: var(--color1) !important;
}
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--color1) !important;
    font-size: 10pt;
}

.mud-input > input.mud-input-root.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    padding-bottom: 15px;
}

.mud-picker-container .mud-toolbar {
    background-color: var(--color1) !important;
}

.mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pin {
    background-color: var(--color1) !important;
}

.mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pointer {
    background-color: var(--color1) !important;
}

    .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pointer .mud-picker-time-clock-pointer-thumb.mud-onclock-text {
        background-color: var(--color1) !important;
    }

.mud-fab-extended.mud-fab-size-small {
    padding: 0px;
    border-radius: 5px;
    margin-left: 2px;
    margin-right: 2px;
    max-height: 25px;
    min-height: 25px;
    font-size: 9pt;
    margin-top: 2px;
    box-shadow:none;
    padding-left:5px;
    padding-right:5px;
}

.fab1 {
    background-color: var(--color18) !important;
}

.fab2 {
    background-color: var(--color19) !important;
}

.fab3 {
    background-color: var(--color16) !important;
}

.mud-fab-label {
    padding:0;
}

.maniah3 {
    font-size: 1.375rem;
    color: var(--color1) !important;
}

.searchBar .mud-input.mud-input-outlined.mud-input-adorned-end {
    background-color: var(--color1) !important;
    border-radius: 20px;
    color: white !important;
}

.searchBar .mud-input-adornment-end span {
    color: var(--color3) !important;
}

.searchBar {
    border-color: transparent;
}

    .searchBar .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-style: none !important;
    }

.maniafabbtn {
    background-color: white;
    box-shadow: unset;
    color: var(--color1);
    border-width: 1px;
    border-style: solid;
}

.searchBar .mud-input-clear-button {
    color: var(--color3) !important;
    background-color: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color16);
    /*transition: background-color 5000s ease-in-out 0s;*/
    /*box-shadow: inset 0 0 20px 20px #23232329;*/
    transition: unset;
    box-shadow: unset;
}

.btn1 {
    background-color: var(--color16);
    color: white;
}

.btn2 {
    background-color: var(--color1);
    color: white;
}

.btn1:hover {
    background-color: var(--color16);
    color: white;
}

.manialink1 {
    font-size: 12pt !important;
    color: white !important;
}

.mud-input.mud-input-underline:after {
    border-bottom: 2px solid var(--color16) !important;
}

.mud-input.mud-input-underline:before {
    border-bottom: 2px solid var(--color16) !important;
}

.mud-input.mud-input-underline:hover:not(.mud-disabled):before {
    border-bottom: 1px solid var(--color16) !important;
}

.mudmania-calendar .mud-picker-calendar-container {
    margin: unset;
    width: 100%;
}
/*.mud-picker-static {
    margin: auto;
    max-width: 370px;
}*/
.mud-picker-calendar-content {
    /*width:100%;*/
    border-radius: 20px;
}
.mud-picker-calendar-transition {
    background-color: var(--color1);
    padding-top: 12px;
    margin-top: unset;
    min-height:180px !important;
}
.mudmania-calendar .mud-picker-calendar-transition {
    background-color: var(--color1);
    padding-top: 12px;
    margin-top: unset;
    margin:auto;
    width:310px;
}
/*.mudmania-calendar .mud-picker-calendar .mud-day {
    margin: 0 7px;
}*/
.mud-picker-calendar .mud-day .mud-typography {
    color: var(--color3) !important;
}
.mudmania-calendar .mud-picker-calendar-header-day
{
    /*width:310px;*/
    margin:auto;
    /*border-radius:20px 20px 0px 0px;*/
}
.mud-picker-calendar-header-day {
    background-color: var(--color1);
}

    .mud-picker-calendar-header-day .mud-day-label {
        color: var(--color3) !important;
    }

.mud-picker-calendar .mud-day.mud-selected {
    background-color: var(--color16) !important;
}

.mud-paper.mud-elevation-0.mud-picker.mud-picker-paper {
    background-color: transparent !important;
}

.mud-picker-calendar-header {
    background-color: var(--color17) !important;
    /*border-radius: 15px 15px 0 0;*/
}

.mud-picker-calendar-header-switch .mud-picker-calendar-header-transition {
    color: var(--color3);
}

.mud-picker-calendar-header-switch > .mud-icon-button {
    background-color: var(--color17);
    color: var(--color3);
}

.mud-picker-month-container {
    background-color: var(--color1);
    margin:auto;
}

.mud-picker-month.mud-button-root {
    color: var(--color3) !important;
}

.mud-picker-month-selected {
    color: var(--color16) !important;
}

.mud-picker-year-container {
    background-color: var(--color1);
}

.mud-picker-year {
    color: var(--color3) !important;
}

.mud-picker-year-selected {
    color: var(--color16) !important;
}
/*.mud-drawer-open-responsive-md-right .mud-main-content
{
    margin-right:unset !important;
}*/
.mud-drawer.mud-drawer-responsive.mud-drawer-pos-right.mud-drawer--open, .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--open {
    right: unset !important;
    padding-left: 10px !important;
}

.storagediv {
    margin-top: 10px;
    background-color: var(--color21);
    color: var(--color1);
    border-radius: 15px;
    max-height: 100px;
    min-height: 100px;
    height:100px;    
    display:flex;
}

.storageUserSpan1 {
    font-size: 9pt;
    font-weight: 700;
    direction: ltr;
    height: 50%;
    flex: 0.5;
    padding-right:5px;
    padding-top:25px;
    /*float: inline-start;
    position: absolute;
    margin-top: 30px;
    margin-right: 5px;*/
}
.storageText {
    display: flex;
    width:170px;
    flex-direction: column;    
}
.storageUserSpan2 {
    /*position: absolute;*/
    font-size: 9pt;
    font-weight: 700;
    padding-right:2px;
    /*margin-top: 55px;
    margin-right: 5px;*/
    flex:1.5;
}
.storagebox {
    width: 100px;
    /*padding-top: 15px;*/
    display: grid;
    place-items: center;
    
    /*position: relative;
    left: 10px;
    top: 10px;
    width: 110px;
    right: 130px;*/
}

.imgstorage {
    max-width: 100%; /* تصویر بیش از حد بزرگ نشود */
    max-height: 100%;
    grid-area: 1/1;
    width:20px;
}
.storageChart {
    width: 100px !important;
    height: 70px !important;
    position: absolute;
    left: 10px;
    margin-top: 20px;
}

.uploaddiv {
    background-image: url('/assets/img/v2.svg');
    background-repeat: no-repeat;
    background-size: 85px auto;
    background-position: left bottom;
    margin-top: 10px;
    background-color: var(--color21);
    color: var(--color1);
    border-radius: 15px;
    border-style: dashed;
    max-height: 114px;
    min-height: 114px;
    border-width: 1px;
}

.uploadText {
    font-size: 9pt;
    font-weight: 700;
    text-align: center;
}

.uploadIcon {
    text-align: center;
    margin-top: 25px;
    color: var(--color1);
}

.txt1 {
    color: var(--color1);
}
.dashboardUpload {
    border-radius: 15px !important;
    max-height: 268px;
    min-height: 268px;
}
.nocInSideShare {
    background-image: url('/assets/img/v16.svg');
    background-repeat: no-repeat;
    background-size: 150px;
    background-position: right bottom;
    border-radius: 15px !important;
    max-height: 150px;
    min-height: 150px;
}
.nocExternalShare {
    background-image: url('/assets/img/v15.svg');
    background-repeat: no-repeat;
    background-size: 150px;
    background-position: right bottom;
    border-radius: 15px !important;
    max-height: 150px;
    min-height: 150px;
}
.nocInternalShare {
    background-image: url('/assets/img/v14.svg');
    background-repeat: no-repeat;
    background-size: 150px;
    background-position: right bottom;
    border-radius: 15px !important;
    max-height: 150px;
    min-height: 150px;
}
.nocShareBorder {
    background-color: var(--color17);
    border-radius:0 50px 0 40px;
    height:20px;
    width:150px;
    position:absolute;
    left:0;
    bottom:0;
}
.nocShareData {
    color: var(--color5);
    font-size: 60pt;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 50%;
    text-align: end;
    padding-left: 20px;
}
.nocShareContent {
    display: flex;
    align-items: center;
    height: 100vh;
    position: relative;
}
.nocUploadDownload_btnpanel {
    position: absolute;
    left: 10px;
    bottom: 5px;
    right: 50%;
    text-align: center;
}
.btnPrimary {
    color: --var(--color1);
    padding: 0;
    font-family: arial !important;
    border-width: 2px;
    font-weight: bold;
}
.btnPrimarySelected {
    background-color: var(--color15);
    color: white;
}
.nocDash {
    position: relative;
    border-radius: 15px !important;
    max-height: 268px;
    min-height: 268px;
}
.nocDashHeader {
    background-color: var(--color17);
}
.nocDashHeader h4 {
    color: var(--color3);
    text-align: center;
    width:100%;
}
.nocDashFooter h4 {
    background-color: var(--color17);
    color: var(--color3);
    text-align: center;
    width: 100%;
}
.dashboardShared {
    background-image: url('/assets/img/v5.svg');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left bottom;
    border-radius: 15px !important;
    max-height: 268px;
    min-height: 268px;
}

.dashboardSharedHeader {
    background-color: var(--color17);
    color: var(--color3);
}

.dashboardSharedAction {
    background-color: transparent;
    color: var(--color1);
}

    .dashboardSharedAction span {
        font-size: 9pt;
    }

    .dashboardSharedAction a {
        margin-right: auto;
    }
/*.mud-nav-link-text {
    border-bottom: 1px;
    border-style: solid;
    border-color: var(--color16);
    padding: 5px;
}*/
.mud-picker-content {
    min-height: unset;
}

.menuhr {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--color16);
}

.mud-dialog .mud-dialog-content {
    overflow: unset !important;
}

.apexcharts-legend-text {
    font-family: 'Vazir FD' !important;
}

.apexcharts-text tspan {
    font-family: 'Vazir FD' !important;
}

.mud-table {
    /*background-color:transparent !important;*/
    border-radius: 9px;
}

.mdai {
    padding: 0px !important;
}

.profimg {
    width: 30px;
    height: 30px;
}
.mud-icon-size-small {
    font-size: 1.1rem !important;
}
.maniabox {
    text-align: center;
    border: solid;
    border-color: var(--color16);
    min-height: 68vh;
    /* max-width: 400px; */
    margin: auto;
    display:flex;
    justify-content:center;
    align-items:center;
}
.maniabox h3,h1,h2,h4,h5,h6{
    color:var(--color1);
}
.icc
{
    font-size:80pt;
}
.maniabox .mud-grid
{
    display:unset !important;
}
.mud-picker-inline-paper
{
    background-color:transparent !important;
}
.mud-picker-calendar-container {
    background-color: var(--color1);
}
.mud-picker-content {
    background-color: transparent !important;
}
.profilepage__container {
    margin-top: 0px !important;
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
}
.profilepage__explain
{
    border:dashed;
}
@media (max-width:489px) {
    .uploadpanel {
        width: 100% !important;
        position: absolute;
        right: 0px !important;
        bottom: 0px !important;
        z-index: 50000;
        border-radius: 20px;
    }
}

    .uploadpanel {
        width: 425px;
        position: absolute;
        right: 50px;
        bottom: 50px;
        z-index: 50000;
        border-radius: 20px;
    }

    .uploadpanelheader {
        background-color: var(--color17);
        border-radius: 20px 20px 0px 0px;
    }

    .fileuploadbox {
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: var(--color1);
    }

    .uuc1 {
        width: 25px;
        justify-content: center;
        align-content: center;
    }

    .uuc2 {
        width: 25px;
        justify-content: center;
        align-content: center;
    }

    .uuc3 {
        width: 175px;
        font-size: 9pt;
        align-content: center;
    }

    .uuc4 {
        width: 150px;
        font-size: 6pt;
        font-weight: bolder;
        align-content: center;
        direction: ltr;
        text-align: start;
    }

    .uccpb {
        width: 100%;
        align-content: center;
        padding-left: 11px;
        padding-right: 25px;
    }

.maniapbupload .mud-progress-linear-bar {
    background-color: var(--color13) !important;
}
.maniapbuploadvirus .mud-progress-linear-bar {
    background-color: var(--color12) !important;
}

    .ucchrb {
        width: 100%;
        align-content: center;
        padding-left: 11px;
        padding-right: 25px;
    }

    .ucchr {
        margin-top: 6px;
        margin-bottom: 0;
        margin-right: 22px;
        margin-left: 11px;
        color: var(--color1);
        background-color: var(--color1);
        height: 2px;
    }

    .uploadcontent {
        overflow: auto;
        height: 320px;
    }

    .maniaai .mud-icon-size-medium {
        font-size: 100pt;
    }

    .maniaai .mud-input-control-input-container {
        margin: auto !important;
    }

    .ai1bg h3 {
        color: var(--color1);
    }

    .aitagbg h3 {
        color: var(--color1);
    }
.maniacheckbox .mud-checkbox-true .mud-icon-root.mud-svg-icon {
    fill: var(--color13);
}

.maniacheckbox .mud-checkbox-false .mud-icon-root.mud-svg-icon {
    fill: var(--color1);
}
.mud-card-actions
{
    padding:16px;
}
.mud-card-header
{
    padding:16px;
}
.dashboardSharedHeader h5 {
    color: var(--color3);
}
/*.mudmania-calendar .mud-picker-calendar {
    padding-top: 15px;
}*/
.mudmania-calendar .mud-picker-calendar-header-day {
    min-height: 31px;
}
.mudmania-calendar .mudmania-calendar .mud-picker-calendar-header-day {
    padding-top: 15px;
}
.mudmania-calendar .mud-picker-content {
    border-radius: 15px;
}
.mudmania-calendar .mud-picker-container {
    border-radius: 15px;
    max-height:268px;
}
.mudmania-calendar.mud-picker.mud-rounded {
    border-radius: 15px;
}
.uploadBox{
    width:100%;
    position:relative;
}
.uploadFileBTN{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    z-index:80;
}
.b-file-picker {
    display: none !important;
}
.uplfolderbtn
{
    color:white;
    background-color:var(--color1);
}
.uplfilebtn {
    color: white;
    background-color: var(--color16);
}
.apexcharts-tooltip-text {
    font-family: 'Vazir FD' !important;
}
.apexcharts-tooltip-title {
    font-family: 'Vazir FD' !important;
}
.apexcharts-xaxistooltip-text {
    font-family: 'Vazir FD' !important;
}
/*.mud-application-layout-rtl .mud-flip-x-rtl
{
    transform:scale(1) !important;
}*/
.mud-breadcrumb-separator > span
{
    color:var(--color1) !important;
    font-size:12pt;
    opacity:1 !important;
}
.mud-alert-filled-success
{
    background-color:var(--color16) !important;
    color:black !important;
}
.aitoggle .mud-icon-root {
    width: 1.9em;
    transform: scale(2);
}
.aitoggle
{
    margin-top:20px;
}