:root {


    --colorText: #FFF;
    --colorPrimary: #E66482;
    --colorSecondary: #FFF;
    --colorBorder: #e45576;
    --colorHover: #ea849c;
    --colorActive: #dc4769;

    --colorIconText: #5A5A5A;
    --colorIconBorder: #e0758d;
    --colorIconHover: #f9e2e7;
    --colorIconActive: #f8d8df;


    /* top */
    --top-color-bg: var(--colorPrimary);
    --top-color-border: transparent;
    --top-size-border: 0px;
    --top-btn-color: var(--colorText);
    --top-btn-color-hover: var(--colorText);
    --top-btn-color-active: var(--colorText);
    --top-btn-color-bg: transparent;
    --top-btn-color-bg-hover: var(--colorHover);
    --top-btn-color-bg-active: var(--colorActive);
    /* left*/
    --left-width: 110px;
    --left-color-bg: var(--colorPrimary);
    --left-color-border: transparent;
    --left-size-border: 0px;
    --left-item-color: var(--colorText);
    --left-item-color-hover: var(--colorText);
    --left-item-color-active: var(--colorText);
    --left-item-color-bg: transparent;
    --left-item-color-bg-hover: var(--colorHover);
    --left-item-color-bg-active: var(--colorActive);
    /* right */
    /* --right-color-bg: var(--colorHover); */
    --right-item-color: var(--colorIconText);
    --right-item-color-hover: var(--colorIconText);
    --right-item-color-active: var(--colorIconText);
    --right-item-color-border: transparent;
    --right-item-color-border-hover: var(--colorIconBorder);
    --right-item-color-border-active: var(--colorIconBorder);
    --right-item-color-bg: transparent;
    --right-item-color-bg-hover: var(--colorIconHover);
    --right-item-color-bg-active: var(--colorIconActive);
    /* modal */
    --modal-color-bg: var(--colorSecondary);
    --modal-header-color: var(--colorText);
    --modal-header-color-bg: var(--colorPrimary);
    --modal-header-btn-color: var(--colorText);
    --modal-header-btn-color-hover: var(--colorText);
    --modal-header-btn-color-active: var(--colorText);
    --modal-header-btn-color-bg: transparent;
    --modal-header-btn-color-bg-hover: var(--colorHover);
    --modal-header-btn-color-bg-active: var(--colorActive);
    --modal-body-color-bg: var(--colorSecondary);
    --modal-body-primary-color: var(--colorText);
    --modal-body-primary-color-bg: var(--colorPrimary);

    
}

.container>.top>h1 {
    color: var(--top-btn-color);
}