.title-gradient {
    color: #fff;
    text-align: center;
    background: linear-gradient(34deg, hsla(0, 0%, 100%, .42) 2.99%, #fff 65.33%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}

.subtitle {
    color: rgb(187, 186, 188);
    font-size: 22px;
    line-height: 30px;
}

.pointer {
    cursor: pointer;
}

.bg-gray {
    background-color: #efefef;
}

.bg-white {
    background-color: #FFFFFF;
}

.h100 {
    height: 100%;
}

.w100 {
    width: 100%;
}

.w80 {
    width: 80%;
}

.w60 {
    width: 60%;
}

.w40 {
    width: 40%;
}

.w66 {
    width: 66%;
}

.w33 {
    width: 34%;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

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

.m0-auto{
    margin: 0 auto;
}

/* common */
.flex-1 {
    flex: 1;
}

.text-main {
    color: #FFFFFF;
}

.text-secondary {
    color: #bbbabc;
}

.text-disabled {
    color: var(--color-disabled) !important;
}

.text-emphasis {
    color: var(--color-emphasis) !important;
}

.hover-emphasis-light:hover {
    cursor: pointer;
    color: var(--color-emphasis-light) !important;
}

.hover-emphasis:hover {
    cursor: pointer;
    color: var(--color-emphasis) !important;
}

.bg-emphasis {
    background-color: var(--color-emphasis) !important;
}

.text-error {
    color: var(--color-error) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

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

.mt-50 {
    margin-top: 50px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-100 {
    margin-top: 100px;
}

.mb-10 {
    margin-bottom: 10px;
}

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

.mb-30 {
    margin-bottom: 30px;
}

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

.mb-50 {
    margin-bottom: 50px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-100 {
    margin-bottom: 100px;
}

.pdt-10 {
    padding-top: 10px;
}

.pdt-20 {
    padding-top: 20px;
}

.pdt-30 {
    padding-top: 30px;
}

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

.pdt-50 {
    padding-top: 50px;
}

.pdt-80 {
    padding-top: 80px;
}

.pdt-100 {
    padding-top: 100px;
}

.pdb-10 {
    padding-bottom: 10px;
}

.pdb-20 {
    padding-bottom: 20px;
}

.pdb-30 {
    padding-bottom: 30px;
}

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

.pdb-50 {
    padding-bottom: 50px;
}

.pdb-80 {
    padding-bottom: 80px;
}

.pdb-100 {
    padding-bottom: 100px;
}

.pdl-10 {
    padding-left: 10px;
}

.pdl-20 {
    padding-left: 20px;
}

.pdl-30 {
    padding-left: 30px;
}

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

.pdl-50 {
    padding-left: 50px;
}

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

a {
    color: var(--color-secondary);
}

a:hover,
a:focus {
    color: var(--color-emphasis);
}