@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*======================================================================================================================
 Root properties
======================================================================================================================*/

:root{
    /* Font family */
    --theme-font-family-primary: 'Poppins', sans-serif;

    /* Font weight */
    --theme-font-weight-heavy: 800;
    --theme-font-weight-bold: 700;
    --theme-font-weight-semibold: 600;
    --theme-font-weight-medium: 500;
    --theme-font-weight-regular: 400;
    --theme-font-weight-light: 300;

    /* Font size */
    --theme-font-size-h1: 64px;
    --theme-font-size-h2: 48px;
    --theme-font-size-h3: 36px;
    --theme-font-size-h4: 24px;
    --theme-font-size-body: 16px;
    --theme-font-size-small: 13px;
    --theme-font-size-note: 11px;

    /* Line height */
    --theme-line-height-h1: 70px;
    --theme-line-height-h2: 54px;
    --theme-line-height-h3: 42px;
    --theme-line-height-h4: 28px;
    --theme-line-height-body: 20px;
    --theme-line-height-small: 16px;
    --theme-line-height-note: 13px;


    /* Main colors */
    --theme-color-default-primary: #564792;
    --theme-color-default-secondary: #de4929;
    --theme-body-background: rgba(var(--theme-color-default-primary), 0.05);


    /* Color dark (primary) */
    --theme-color-dark-primary: #1e212c;
    --theme-color-dark-secondary: #28293a;
    --theme-color-dark-secondary-2: #20212f;
    --theme-color-dark-card: #1e212c;
    --theme-color-light-primary: #f1f3f7;
    --theme-color-light-secondary: #E0E1EB;
    --theme-color-light-secondary-2: #d5d6e3;
    --theme-color-light-card: #fff;


    /* Color neutral */
    --theme-color-surface-0: #000000;
    --theme-color-surface-50: #0A0B0F;
    --theme-color-surface-100: #14151F;
    --theme-color-surface-150: #1F202E;
    --theme-color-surface-200: #292B3D;
    --theme-color-surface-250: #33354D;
    --theme-color-surface-300: #3D405C;
    --theme-color-surface-350: #3D405C;
    --theme-color-surface-400: #52557A;
    --theme-color-surface-450: #5C5F89;
    --theme-color-surface-500: #666A99;
    --theme-color-surface-550: #7579A3;
    --theme-color-surface-600: #8588AD;
    --theme-color-surface-650: #9497B8;
    --theme-color-surface-700: #A3A6C2;
    --theme-color-surface-750: #B3B5CC;
    --theme-color-surface-800: #C2C4D6;
    --theme-color-surface-850: #D1D2E0;
    --theme-color-surface-900: #E0E1EB;
    --theme-color-surface-950: #F0F0F5;
    --theme-color-surface-1000: #FFFFFF;

    /* Size for margins */
    --theme-margin-size-md: 36px;
    --theme-margin-size-sm: 24px;
    --theme-margin-size-xs: 16px;

    /* Color border types, radius and colors */
    --theme-border-radius-avatar-circle: 50%;
    --theme-border-radius-avatar-square: 12px;
    --theme-border-radius-badge: 4px;
    --theme-border-radius-button: 8px;
    --theme-border-radius-card: 12px;
    --theme-border-radius-notification: 10px;
    --theme-border-color: #1F202E;
    --theme-border: 1px solid var(--theme-border-color);

    /* Box shadow */
    --theme-box-shadow-layout: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    --theme-box-shadow-card: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    --theme-box-shadow-card-hover: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;;
    --theme-box-shadow-notification: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

    /* Avatar */
    --theme-avatar-xxl: 104px;
    --theme-avatar-xl: 80px;
    --theme-avatar-lg: 64px;
    --theme-avatar-md: 48px;
    --theme-avatar-sm: 40px;
    --theme-avatar-xs: 32px;
    --theme-avatar-xxs: 24px;
}


/*======================================================================================================================
 Layouts
======================================================================================================================*/
body{
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    background: var(--theme-body-background);
}

body.theme-bg-auth{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.theme-bg-panel{
    margin: 0;
    padding: 0;
}

body.theme-bg-panel.theme-dark{
    background: var(--theme-color-dark-primary);
}

body.theme-bg-panel.theme-light{
    background: var(--theme-color-light-primary);
}

.theme-layout-panel-header{
    position: absolute;
    height: 60px;
    width: 100%;
    left: 0;
    top: 0;
    padding: 0 30px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.theme-layout-panel-header .theme-layout-panel-header-brand{
    display: flex;
    align-items: center;
}

.theme-layout-panel-header .theme-layout-panel-header-user{
    justify-content: end;
}

body.theme-dark .theme-layout-panel-header{
    background-color: var(--theme-color-dark-primary);
}

body.theme-dark .theme-layout-panel-header .theme-header-icon-light-layout{
    display: none;
}

body.theme-light .theme-layout-panel-header{
    background-color: var(--theme-color-light-primary);
}

body.theme-light .theme-layout-panel-header .theme-header-icon-dark-layout{
    display: none;
}

.theme-layout-panel-header .logo{
    height: 35px;
    margin-right: 12px;
}


.theme-layout-panel-topbar{
    position: absolute;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;
    top: 60px;
    padding: 0 30px;
    margin: 0;
    z-index: 999;
    box-shadow: var(--theme-box-shadow-card);
}


body.theme-dark .theme-layout-panel-topbar{
    background-color: var(--theme-color-dark-primary);
}

body.theme-dark .theme-layout-panel-topbar .theme-topbar-icon-light-layout{
    display: none;
}

body.theme-light .theme-layout-panel-topbar{
    background-color: var(--theme-color-light-primary);
}

body.theme-light .theme-layout-panel-topbar .theme-topbar-icon-dark-layout{
    display: none;
}


.theme-layout-panel-navbar{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.theme-layout-panel-navbar .theme-layout-panel-navbar-option{
    padding: 7px 10px;
    border-radius: 5px;
    margin: 0 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    width: auto;
    color: inherit;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.theme-layout-panel-navbar .theme-layout-panel-navbar-option span{
    font-weight: 500;
}

.theme-layout-panel-navbar .theme-layout-panel-navbar-option i{
    margin-right: 5px;
    font-size: 14px;
}


body.theme-dark .theme-layout-panel-navbar .theme-layout-panel-navbar-option i, body.theme-dark .theme-layout-panel-navbar .theme-layout-panel-navbar-option span{
    color: var(--theme-color-surface-900);
}

body.theme-light .theme-layout-panel-navbar .theme-layout-panel-navbar-option i, body.theme-light .theme-layout-panel-navbar .theme-layout-panel-navbar-option span{
    color: var(--theme-color-surface-100);
}

body.theme-dark .theme-layout-panel-navbar .theme-layout-panel-navbar-option.active{
    background-color: var(--theme-color-default-primary);
    color: var(--theme-color-light-secondary) !important;
}

body.theme-dark .theme-layout-panel-navbar .theme-layout-panel-navbar-option.active i, body.theme-dark .theme-layout-panel-navbar .theme-layout-panel-navbar-option.active span{
    color: var(--theme-color-light-secondary) !important;
}

body.theme-light .theme-layout-panel-navbar .theme-layout-panel-navbar-option.active{
    background-color: var(--theme-color-default-primary);
    color: var(--theme-color-light-secondary) !important;
}

body.theme-light .theme-layout-panel-navbar .theme-layout-panel-navbar-option.active i, body.theme-light .theme-layout-panel-navbar .theme-layout-panel-navbar-option.active span{
    color: var(--theme-color-light-secondary) !important;
}

body.theme-dark .theme-layout-panel-navbar .theme-layout-panel-navbar-option:not(.active):hover{
    background-color: var(--theme-color-dark-secondary);
}

body.theme-light .theme-layout-panel-navbar .theme-layout-panel-navbar-option:not(.active):hover{
    background-color: var(--theme-color-light-secondary);
}

@media (width < 768px) {
    .component-navbar-user-name{
        display: none;
    }

    .theme-layout-panel-topbar{
        display: none;
    }

    .theme-layout-panel-navbar .theme-layout-panel-navbar-option{
        display: none;
    }
}
@media (width > 768px) and (width < 1200px) {

    .theme-layout-panel-navbar .theme-layout-panel-navbar-option i{
        display: block;
        font-size: 16px;
        margin-right: 0 !important;
    }
    .theme-layout-panel-navbar .theme-layout-panel-navbar-option span{
        display: none;
    }
}


.theme-layout-panel-body{
    position: relative;
    display: flex;
}

body.theme-dark .theme-layout-panel-body{
    background: var(--theme-color-dark-primary);
}

body.theme-light .theme-layout-panel-body{
    background: var(--theme-color-light-primary);
}


.theme-layout-panel-content{
    position: relative;
    top: 50px;
    left: 0;
    min-height: calc(100vh - 100px);
    width: calc(100vw);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

body.theme-dark .theme-layout-panel-content{
    background-color: var(--theme-color-dark-secondary);
}

body.theme-light .theme-layout-panel-content{
    background-color: var(--theme-color-light-secondary);
}


body.theme-dark .theme-body-icon-light-layout{
    display: none;
}
body.theme-light .theme-body-icon-dark-layout{
    display: none;
}

.theme-layout-panel-breadcrumb{
    position: relative;
    width: 100%;
    margin-top: 90px;
}


.theme-layout-panel-footer{
    position: relative;
    height: 50px;
    width: 100%;
    left: 0;
    bottom: 0;
    margin: 0;
    margin-top: auto !important;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.theme-dark .theme-layout-panel-footer{
    background-color: var(--theme-color-dark-primary);
}

body.theme-light .theme-layout-panel-footer{
    background-color: var(--theme-color-light-primary);
}

/*======================================================================================================================
 Text colors (per theme [dark/light])
======================================================================================================================*/
body.theme-dark .theme-general-text-color{
    color: var(--theme-color-surface-900) !important;
}

body.theme-light .theme-general-text-color{
    color: var(--theme-color-surface-100) !important;
}


/*======================================================================================================================
 Colors
======================================================================================================================*/
.theme-color-default-primary{
    color: var(--theme-color-default-primary) !important;
}
.theme-color-default-secondary{
    color: var(--theme-color-default-secondary) !important;
}

body.theme-dark .theme-color-default-primary{
    filter: brightness(200%);
}

.theme-color-surface-0{
    color: var(--theme-color-surface-0) !important;
}

.theme-color-surface-50{
    color: var(--theme-color-surface-50) !important;
}

.theme-color-surface-100{
    color: var(--theme-color-surface-100) !important;
}

.theme-color-surface-150{
    color: var(--theme-color-surface-150) !important;
}

.theme-color-surface-200{
    color: var(--theme-color-surface-200) !important;
}

.theme-color-surface-250{
    color: var(--theme-color-surface-250) !important;
}

.theme-color-surface-300{
    color: var(--theme-color-surface-300) !important;
}

.theme-color-surface-350{
    color: var(--theme-color-surface-350) !important;
}

.theme-color-surface-400{
    color: var(--theme-color-surface-400) !important;
}

.theme-color-surface-450{
    color: var(--theme-color-surface-450) !important;
}

.theme-color-surface-500{
    color: var(--theme-color-surface-500) !important;
}

.theme-color-surface-550{
    color: var(--theme-color-surface-550) !important;
}

.theme-color-surface-600{
    color: var(--theme-color-surface-600) !important;
}

.theme-color-surface-650{
    color: var(--theme-color-surface-650) !important;
}

.theme-color-surface-700{
    color: var(--theme-color-surface-700) !important;
}

.theme-color-surface-750{
    color: var(--theme-color-surface-750) !important;
}

.theme-color-surface-800{
    color: var(--theme-color-surface-800) !important;
}

.theme-color-surface-850{
    color: var(--theme-color-surface-850) !important;
}

.theme-color-surface-900{
    color: var(--theme-color-surface-900) !important;
}

.theme-color-surface-950{
    color: var(--theme-color-surface-950) !important;
}

.theme-color-surface-1000{
    color: var(--theme-color-surface-1000) !important;
}

/*======================================================================================================================
 Background colors
======================================================================================================================*/
.theme-bg-default-primary{
    background-color: var(--theme-color-default-primary) !important;
}
.theme-bg-default-secondary{
    background-color: var(--theme-color-default-secondary) !important;
}

.theme-bg-surface-0{
    background-color: var(--theme-color-surface-0);
}

.theme-bg-surface-50{
    background-color: var(--theme-color-surface-50);
}

.theme-bg-surface-100{
    background-color: var(--theme-color-surface-100);
}

.theme-bg-surface-150{
    background-color: var(--theme-color-surface-150);
}

.theme-bg-surface-200{
    background-color: var(--theme-color-surface-200);
}

.theme-bg-surface-250{
    background-color: var(--theme-color-surface-250);
}

.theme-bg-surface-300{
    background-color: var(--theme-color-surface-300);
}

.theme-bg-surface-350{
    background-color: var(--theme-color-surface-350);
}

.theme-bg-surface-400{
    background-color: var(--theme-color-surface-400);
}

.theme-bg-surface-450{
    background-color: var(--theme-color-surface-450);
}

.theme-bg-surface-500{
    background-color: var(--theme-color-surface-500);
}

.theme-bg-surface-550{
    background-color: var(--theme-color-surface-550);
}

.theme-bg-surface-600{
    background-color: var(--theme-color-surface-600);
}

.theme-bg-surface-650{
    background-color: var(--theme-color-surface-650);
}

.theme-bg-surface-700{
    background-color: var(--theme-color-surface-700);
}

.theme-bg-surface-750{
    background-color: var(--theme-color-surface-750);
}

.theme-bg-surface-800{
    background-color: var(--theme-color-surface-800);
}

.theme-bg-surface-850{
    background-color: var(--theme-color-surface-850);
}

.theme-bg-surface-900{
    background-color: var(--theme-color-surface-900);
}

.theme-bg-surface-950{
    background-color: var(--theme-color-surface-950);
}

.theme-bg-surface-1000{
    background-color: var(--theme-color-surface-1000);
}

/*======================================================================================================================
 Font weights
======================================================================================================================*/
.theme-font-weight-heavy{
    font-weight: var(--theme-font-weight-heavy);
}

.theme-font-weight-bold{
    font-weight: var(--theme-font-weight-bold);
}

.theme-font-weight-semibold{
    font-weight: var(--theme-font-weight-semibold);
}

.theme-font-weight-medium{
    font-weight: var(--theme-font-weight-medium);
}

.theme-font-weight-regular{
    font-weight: var(--theme-font-weight-regular);
}

.theme-font-weight-light{
    font-weight: var(--theme-font-weight-light);
}

/*======================================================================================================================
 Font types (font-size, line-height)
======================================================================================================================*/
.theme-font-type-40{
    font-size: 40px;
    line-height: 48px;
}

.theme-font-type-24{
    font-size: 24px;
    line-height: 32px;
}

.theme-font-type-22{
    font-size: 22px;
    line-height: 24px;
}

.theme-font-type-20{
    font-size: 20px;
    line-height: 24px;
}

.theme-font-type-18{
    font-size: 18px;
    line-height: 24px;
}

.theme-font-type-16{
    font-size: 16px;
    line-height: 24px;
}

.theme-font-type-14{
    font-size: 14px;
    line-height: 24px;
}

.theme-font-type-13{
    font-size: 13px;
    line-height: 18px;
}

.theme-font-type-12{
    font-size: 12px;
    line-height: 16px;
}

.theme-font-type-10{
    font-size: 10px;
    line-height: 16px;
}

/*======================================================================================================================
 Line height
======================================================================================================================*/
.theme-line-height-h1{
    line-height: var(--theme-line-height-h1);
}
.theme-line-height-h2{
    line-height: var(--theme-line-height-h2);
}
.theme-line-height-h3{
    line-height: var(--theme-line-height-h3);
}
.theme-line-height-h4{
    line-height: var(--theme-line-height-h4);
}
.theme-line-height-body{
    line-height: var(--theme-line-height-body);
}
.theme-line-height-small{
    line-height: var(--theme-line-height-small);
}
.theme-line-height-note{
    line-height: var(--theme-line-height-note);
}


/*======================================================================================================================
 Avatar
======================================================================================================================*/
.theme-avatar-xxl{
    width: var(--theme-avatar-xxl);
    height: var(--theme-avatar-xxl);
}

.theme-avatar-xl{
    width: var(--theme-avatar-xl);
    height: var(--theme-avatar-xl);
}

.theme-avatar-lg{
    width: var(--theme-avatar-lg);
    height: var(--theme-avatar-lg);
}

.theme-avatar-md{
    width: var(--theme-avatar-md);
    height: var(--theme-avatar-md);
}

.theme-avatar-sm{
    width: var(--theme-avatar-sm);
    height: var(--theme-avatar-sm);
}

.theme-avatar-xs{
    width: var(--theme-avatar-xs);
    height: var(--theme-avatar-xs);
}

.theme-avatar-xxs{
    width: var(--theme-avatar-xxs);
    height: var(--theme-avatar-xxs);
}

.theme-avatar-circle{
    border-radius: var(--theme-border-radius-avatar-circle);
}

.theme-avatar-square{
    border-radius: var(--theme-border-radius-avatar-square);
}

/*======================================================================================================================
 Badges
======================================================================================================================*/
.theme-badge{
    display: inline-flex;
    padding: 4px 8px;
    border-radius: var(--theme-border-radius-badge);
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}
.theme-badge.theme-badge-lg{
    padding: 8px 12px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}
.theme-badge i, .theme-badge img{
    width: 16px;
    font-size: 16px;
}
.theme-badge.theme-badge-lg i, .theme-badge.theme-badge-lg img{
    width: 24px;
    font-size: 24px;
}

.theme-badge.theme-active-1{
    background-color: rgba(52, 195, 143, 0.18);
    color: #34c38f;
}

.theme-badge.theme-active-0{
    background-color: rgba(244, 106, 106, 0.18);
    color: #f46a6a;
}


/*======================================================================================================================
 Anchor - CTA
======================================================================================================================*/
.theme-anchor-cta{
    display: inline-flex;
    align-items: flex-start;
    width: auto;
    gap: 10px;
}

.theme-anchor-cta-dark{
    display: inline-flex;
    align-items: flex-start;
    width: auto;
    gap: 10px;
    color: var(--theme-color-surface-100);
    border-bottom: 2px solid var(--theme-color-surface-100);
}

.theme-anchor-cta-light{
    display: inline-flex;
    align-items: flex-start;
    width: auto;
    gap: 10px;
    color: var(--theme-color-surface-900);
    border-bottom: 2px solid var(--theme-color-surface-900);
}



/*======================================================================================================================
 Buttons
======================================================================================================================*/
.theme-button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    transition: 0.3s;
}

.theme-button:not(:disabled):hover{
    opacity: 0.5;
}

.theme-button:disabled{
    opacity: 0.4;
}

.theme-button-lg{
    padding: 12px 24px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    gap: 8px;
}

.theme-button-lg i{
    width: 16px;
    font-size: 16px;
}

.theme-button-lg.theme-button-only-icon{
    padding: 16px;
}

.theme-button-md{
    padding: 12px 16px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    gap: 8px;
}

.theme-button-md i{
    font-size: 16px;
}

.theme-button-md.theme-button-only-icon{
    padding: 12px;
}

.theme-button-sm{
    padding: 8px 12px;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    gap: 4px;
}

.theme-button-sm i{
    font-size: 16px;
}

.theme-button-sm.theme-button-only-icon{
    padding: 8px;
}

.theme-button-single-sign-on{
    color: var(--theme-color-surface-900);
    background: var(--theme-color-surface-100);
    text-decoration: none;
    transition: 0.3s;
}

.theme-button-single-sign-on:hover:not(:disabled){
    color: var(--theme-color-surface-900);
    background: var(--theme-color-surface-150);
}

.theme-button-single-sign-on img{
    width: 16px;
}


/*======================================================================================================================
 Margins
======================================================================================================================*/
.theme-margin-md{
    margin-top: var(--theme-margin-size-md);
    margin-bottom: var(--theme-margin-size-md);
    margin-left: var(--theme-margin-size-md);
    margin-right: var(--theme-margin-size-md);
}

.theme-margin-md-x{
    margin-left: var(--theme-margin-size-md);
    margin-right: var(--theme-margin-size-md);
}

.theme-margin-md-y{
    margin-top: var(--theme-margin-size-md);
    margin-bottom: var(--theme-margin-size-md);
}

.theme-margin-md-t{
    margin-top: var(--theme-margin-size-md);
}

.theme-margin-md-b{
    margin-bottom: var(--theme-margin-size-md);
}

.theme-margin-sm{
    margin-top: var(--theme-margin-size-sm);
    margin-bottom: var(--theme-margin-size-sm);
    margin-left: var(--theme-margin-size-sm);
    margin-right: var(--theme-margin-size-sm);
}

.theme-margin-sm-x{
    margin-left: var(--theme-margin-size-sm);
    margin-right: var(--theme-margin-size-sm);
}

.theme-margin-sm-y{
    margin-top: var(--theme-margin-size-sm);
    margin-bottom: var(--theme-margin-size-sm);
}

.theme-margin-sm-t{
    margin-top: var(--theme-margin-size-sm);
}

.theme-margin-sm-b{
    margin-bottom: var(--theme-margin-size-sm);
}

.theme-margin-xs{
    margin-top: var(--theme-margin-size-xs);
    margin-bottom: var(--theme-margin-size-xs);
    margin-left: var(--theme-margin-size-xs);
    margin-right: var(--theme-margin-size-xs);
}

.theme-margin-xs-x{
    margin-left: var(--theme-margin-size-xs);
    margin-right: var(--theme-margin-size-xs);
}

.theme-margin-xs-y{
    margin-top: var(--theme-margin-size-xs);
    margin-bottom: var(--theme-margin-size-xs);
}

.theme-margin-xs-t{
    margin-top: var(--theme-margin-size-xs);
}

.theme-margin-xs-b{
    margin-bottom: var(--theme-margin-size-xs);
}


/*======================================================================================================================
 Notifications
======================================================================================================================*/
.theme-notification-container{
    position: fixed;
    top: 100px;
    left: calc(50% - 175px);
    z-index: 99999;
}


.theme-notification-container .theme-notification-item{
    position: relative;
    background: var(--theme-color-surface-300);
    display: flex;
    align-items: center;
    width: 350px;
    padding: 10px;
    border-radius: var(--theme-border-radius-notification);
    box-shadow: var(--theme-box-shadow-notification);
    margin-bottom: 15px;
}

.theme-notification-container .theme-notification-item .theme-notification-item-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
}

.theme-notification-container .theme-notification-item .theme-notification-item-text{
    display: flex;
    padding: 0;
    width: calc(100% - 60px);
}

.theme-notification-container .theme-notification-item .theme-notification-item-text .theme-notification-item-title{
    display: block;
    font-weight: var(--theme-font-weight-bold);
    font-size: var(--theme-font-size-note);
    color: var(--theme-color-surface-1000);
}

.theme-notification-container .theme-notification-item .theme-notification-item-text .theme-notification-item-message{
    display: block;
    font-weight: var(--theme-font-weight-medium);
    font-size: var(--theme-font-size-note);
    color: var(--theme-color-surface-1000);
}

.theme-notification-container .theme-notification-item .theme-notification-item-close{
    display: flex;
    align-items: center;
    justify-content: end;
    width: 30px;
    height: 100%;
    cursor: pointer !important;
}

.theme-notification-container .theme-notification-item .theme-notification-item-close img{
    cursor: pointer !important;
}


@media (width < 768px) {

    .theme-notification-container{
        top: 20px !important;
    }

}

/*======================================================================================================================
 Padding
======================================================================================================================*/
.theme-content-padding{
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 30px;
    padding-right: 30px;
}

.theme-content-padding-x{
    padding-left: 30px;
    padding-right: 30px;
}

.theme-content-padding-y{
    padding-top: 24px;
    padding-bottom: 24px;
}

.theme-content-padding-sm{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
}

.theme-content-padding-sm-x{
    padding-left: 10px;
    padding-right: 10px;
}

.theme-content-padding-sm-y{
    padding-top: 6px;
    padding-bottom: 6px;
}

.theme-content-padding-sm-b{
    padding-bottom: 6px;
}

.theme-content-padding-xs-y{
    padding-top: 3px;
    padding-bottom: 3px;
}