.main-layout .container .row .card.card-theme-color {
    background-color: #f0f0f0 !important;
}

.main-layout .container .row .card.card-theme-color {
    padding: 0px;
}

.main-layout .container .row .card.card-theme-color .card-body {
    padding: 0px;
}


.theme-bg {
    width: 100%;
    height: 146px;
    border-radius: 0px;
}

.theme-navbar1 {
    width: 100%;
    height: 13%;
    border-top-right-radius: 0px !important;
    display: flex;
    align-items: center;
}

.theme-navbar1 .theme-badge1 {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 8px;
    background-color: white;
    right: 10px;
}

.theme-content {
    display: flex;
    width: 100%;
    height: 87%;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.theme-content .theme-left-menu {
    width: 25%;
    height: 100%;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.theme-content .theme-data-container {
    width: 75%;
    height: 100%;
    border-bottom-right-radius: 0px !important;
}

.theme-tile-color {
    position: absolute;
    width: 40px;
    height: 40px;
    top: calc(25% + 10px);
    left: calc(25% + 10px);
}

.theme-tile-normal {
    position: absolute;
    width: 40px;
    height: 40px;
    top: calc(25% + 10px);
    left: calc(25% + 58px);
}


/* -----------------------------------------------------------------------------
THEME - LIGHT 
--------------------------------------------------------------------------------*/
.theme-bg.light {
    background-color: var(--light_mainContainerBgColor);
}

.theme-left-menu.light {
    background-color: var(--light_sideBarBgColor);
}

.theme-content.light {
    background-color: var(--light_mainContainerBgColor);
}

.theme-navbar1.light {
    background-color: var(--light_navBarColor);
}

.theme-tile-color.light {
    background-color: var(--light_primaryBgColor);
    border-radius: calc(var(--light_tileBorderRadius) / 2);
}

.theme-tile-normal.light {
    background-color: var(--light_tileBoxColor);
    border-radius: calc(var(--light_tileBorderRadius) / 2);
}

.theme-badge2.light {
    background-color: var(--light_navBarSecondaryColorButton);
}

/* -----------------------------------------------------------------------------
THEME - DARK 
--------------------------------------------------------------------------------*/
.theme-bg.dark {
    background-color: var(--dark_mainContainerBgColor);
}

.theme-left-menu.dark {
    background-color: var(--dark_sideBarBgColor);
}

.theme-content.dark {
    background-color: var(--dark_mainContainerBgColor);
}

.theme-navbar1.dark {
    background-color: var(--dark_navBarColor);
}

.theme-tile-color.dark {
    background-color: var(--dark_primaryBgColor);
    border-radius: calc(var(--dark_tileBorderRadius) / 2);
}

.theme-tile-normal.dark {
    background-color: var(--dark_tileBoxColor);
    border-radius: calc(var(--dark_tileBorderRadius) / 2);
}

.theme-badge2.dark {
    background-color: var(--dark_navBarSecondaryColorButton);
}

/* -----------------------------------------------------------------------------
THEME - SOFT 
--------------------------------------------------------------------------------*/
.theme-bg.soft {
    background-color: var(--soft_mainContainerBgColor);
}

.theme-left-menu.soft {
    background-color: var(--soft_sideBarBgColor);
}

.theme-content.soft {
    background-color: var(--soft_mainContainerBgColor);
}

.theme-navbar1.soft {
    background-color: var(--soft_navBarColor);
}

.theme-tile-color.soft {
    background-color: var(--soft_primaryBgColor);
    border-radius: calc(var(--soft_tileBorderRadius) / 2);
}

.theme-tile-normal.soft {
    background-color: var(--soft_tileBoxColor);
    border-radius: calc(var(--soft_tileBorderRadius) / 2);
}

.theme-badge2.soft {
    background-color: var(--soft_navBarSecondaryColorButton);
}