.bg-orange {
    background-color: #ff5757;
}
.bg-green{background-color: #00b98d;}
.bg-red{background-color: #ff5a72;}
.f-14{
    font-size: 14px !important;
}
.f-12{
    font-size: 12px !important;
}
.f-16{font-size: 16px !important;}
.f-18{font-size: 18px !important;}
.f-20{font-size: 20px !important;}
.f-bold{font-weight: bold;}

.pointer{
    cursor: pointer;
}

.color-2{color: #222;}
.color-3{color: #333;}
.color-4{color: #444;}
.color-5{color: #555;}
.color-6{color: #666;}
.color-7{color: #777;}
.color-8{color: #888;}
.color-9{color: #999;}
.color-e{color: #eee;}
.color-a{color: #aaa;}
.color-f{color: #fff;}
.color-green{color: #00b98d;}
.color-red{color: #ff5a72;}

.text-c{
    text-align: center;
}
.text-l{
    text-align: left;
}
.text-right{
    text-align: right;
}
.mg-t-10{
    margin-top: 10px;
}
.mg-t-20{
    margin-top: 20px;
}
.mg-b-10{
    margin-bottom: 10px;
}
.mg-b-20{
    margin-bottom: 20px;
}
.mg-l-10{margin-left: 10px;}
.mg-l-20{margin-left: 20px;}
.flex-r{
    display: flex;
    flex-flow: row;
}
.flex-c{
    display: flex;
    flex-flow: column;
}
.flex-full{flex: 1;}

.flex-c{
    display: flex;
    flex-flow: column;
}

.flex-y-center{align-items: center;align-content: center;}
.flex-x-center{justify-content: center;justify-items: center;}