:root {
    --margin-a-4: 4px;
    --margin-a-8: 8px;
    --margin-a-16: 16px;
    --margin-a-24: 24px;
    --margin-a-32: 32px;
    --margin-a-40: 40px;
    --margin-tb-4: 4px 0px;
    --margin-tb-8: 8px 0px;
    --margin-tb-16: 16px 0px;
    --margin-tb-24: 24px 0px;
    --margin-tb-32: 32px 0px;
    --margin-tb-40: 40px 0px;
    --margin-lr-4: 0px 4px;
    --margin-lr-8: 0px 8px;
    --margin-lr-16: 0px 16px;
    --margin-lr-24: 0px 24px;
    --margin-lr-32: 0px 32px;
    --margin-lr-40: 0px 40px;

    --padding-a-4: 4px;
    --padding-a-8: 8px;
    --padding-a-16: 16px;
    --padding-a-24: 24px;
    --padding-a-32: 32px;
    --padding-a-40: 40px;
    --padding-tb-4: 4px 0px;
    --padding-tb-8: 8px 0px;
    --padding-tb-16: 16px 0px;
    --padding-tb-24: 24px 0px;
    --padding-tb-32: 32px 0px;
    --padding-tb-40: 40px 0px;
    --padding-lr-4: 0px 4px;
    --padding-lr-8: 0px 8px;
    --padding-lr-16: 0px 16px;
    --padding-lr-24: 0px 24px;
    --padding-lr-32: 0px 32px;
    --padding-lr-40: 0px 40px;
}

/*width height*/
.full-width {
    width: 100%;
}

/*magin*/
.margin-a-4 {
    margin: 4px;
}

.margin-a-8 {
    margin: 8px;
}

.margin-a-16 {
    margin: 16px;
}

.margin-a-24 {
    margin: 24px;
}

.margin-a-32 {
    margin: 32px;
}

.margin-a-40 {
    margin: 40px;
}

.margin-tb-4 {
    margin: 4px 0px;
}

.margin-tb-8 {
    margin: 8px 0px;
}

.margin-tb-16 {
    margin: 16px 0px;
}

.margin-tb-24 {
    margin: 24px 0px;
}

.margin-tb-32 {
    margin: 32px 0px;
}

.margin-tb-40 {
    margin: 40px 0px;
}

.margin-lr-4 {
    margin: 0px 4px;
}

.margin-lr-8 {
    margin: 0px 8px;
}

.margin-lr-16 {
    margin: 0px 16px;
}

.margin-lr-24 {
    margin: 0px 24px;
}

.margin-lr-32 {
    margin: 0px 32px;
}

.margin-lr-40 {
    margin: 0px 40px;
}

.margin-t-4 {
    margin-top: 4px;
}

.margin-t-8 {
    margin-top: 8px;
}

.margin-t-16 {
    margin-top: 16px;
}

.margin-t-24 {
    margin-top: 24px;
}

.margin-t-32 {
    margin-top: 32px;
}

.margin-t-40 {
    margin-top: 40px;
}

.margin-l-4 {
    margin-left: 4px;
}

.margin-l-8 {
    margin-left: 8px;
}

.margin-l-16 {
    margin-left: 16px;
}

.margin-l-24 {
    margin-left: 24px;
}

.margin-l-32 {
    margin-left: 32px;
}

.margin-l-40 {
    margin-left: 40px;
}

.margin-l-48 {
    margin-left: 48px;
}

.margin-r-4 {
    margin-right: 4px;
}

.margin-r-8 {
    margin-right: 8px;
}

.margin-r-12 {
    margin-right: 12px;
}

.margin-r-16 {
    margin-right: 16px;
}

.margin-r-24 {
    margin-right: 24px;
}

.margin-r-32 {
    margin-right: 32px;
}

.margin-r-40 {
    margin-right: 40px;
}

.margin-r-48 {
    margin-right: 40px;
}

.margin-r-56 {
    margin-right: 40px;
}

.margin-b-4 {
    margin-bottom: 4px;
}

.margin-b-8 {
    margin-bottom: 8px;
}

.margin-b-16 {
    margin-bottom: 16px;
}

.margin-b-20 {
    margin-bottom: 20px;
}

.margin-b-24 {
    margin-bottom: 24px;
}

.margin-b-32 {
    margin-bottom: 32px;
}

.margin-b-40 {
    margin-bottom: 40px;
}


.padding-a-8 {
    padding: 8px;
}

.padding-a-16 {
    padding: 16px;
}

.padding-a-20 {
    padding: 20px;
}

.padding-a-24 {
    padding: 24px;
}

.padding-a-32 {
    padding: 32px;
}

.padding-a-40 {
    padding: 40px;
}

.padding-tb-8 {
    padding: 8px 0px;
}

.padding-tb-16 {
    padding: 16px 0px;
}

.padding-tb-24 {
    padding: 24px 0px;
}

.padding-tb-32 {
    padding: 32px 0px;
}

.padding-tb-40 {
    padding: 40px 0px;
}

.padding-lr-8 {
    padding: 0px 8px;
}

.padding-lr-16 {
    padding: 0px 16px;
}

.padding-lr-24 {
    padding: 0px 24px;
}

.padding-lr-32 {
    padding: 0px 32px;
}

.padding-lr-40 {
    padding: 0px 40px;
}

.padding-t-8 {
    padding-top: 8px;
}

.padding-t-16 {
    padding-top: 16px;
}

.padding-t-24 {
    padding-top: 24px;
}

.padding-t-32 {
    padding-top: 32px;
}

.padding-t-40 {
    padding-top: 40px;
}

.padding-l-8 {
    padding-left: 8px;
}

.padding-l-16 {
    padding-left: 16px;
}

.padding-l-24 {
    padding-left: 24px;
}

.padding-l-32 {
    padding-left: 32px;
}

.padding-l-40 {
    padding-left: 40px;
}

.padding-r-8 {
    padding-right: 8px;
}

.padding-r-16 {
    padding-right: 16px;
}

.padding-r-24 {
    padding-right: 24px;
}

.padding-r-32 {
    padding-right: 32px;
}

.padding-r-40 {
    padding-right: 40px;
}

.padding-b-8 {
    padding-bottom: 8px;
}

.padding-b-16 {
    padding-bottom: 16px;
}

.padding-b-24 {
    padding-bottom: 24px;
}

.padding-b-32 {
    padding-bottom: 32px;
}

.padding-b-40 {
    padding-bottom: 40px;
}

/*flex*/

/*display*/

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex-j-center{
    justify-content: center;
    justify-items: center;
}

.flex-a-center {
    align-items: center;
    align-content: center;
}

/*font color */
.white-color {
    color: var(--color-white);
}

.gray-color {
    color: var(--color-gray);
}

.light-gray-color {
    color: var(--color-light-gray);
}

.basic-font-color {
    color: var(--basic-font-color) !important;
}

.card_body_gray_color {
    color:var(--color-body-gray);
}

.up_red_color{
    color:var(--color-up-red);
}

.down_blue_color {
    color:var(--color-down-blue);
}

.body_background {
    background-color:var(--body-background);
}

.background-color{
    background-color: var(--background-font-color);
}
.background-font-color{
    color: var(--background-font-color);
}
/*text*/
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.bottom_line {
    margin-top:4px;
    /* border-bottom: 1px solid #EFEFEF; */
}

/*float*/
.float-left {
    float:left
}
.float-right {
    float:left;
}