body {
    font-family: 'Kanit', sans-serif !important;
}

.swal2-html-container {
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    font-style : normal;
    font-weight: normal;
    color      : #4F4F4F;
}
.f-noti{
    font-size: 10px;
}

.rg8-g1 {
    font-style : normal;
    font-weight: 500 !important;
    font-size  : calc(9px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #333333;
}

.rg8-g2 {
    font-style : normal;
    font-weight: 400 !important;
    font-size  : calc(9px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #6e6e6e;
}

.rg10-g1 {
    font-style : normal;
    font-weight: normal !important;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #333333;
}

.rg10-g3 {
    font-style : normal;
    font-weight: normal !important;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #828282;
}

.lg10-g3 {
    font-style : normal;
    font-weight:  300;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #828282;
}

.lg12-g2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg12-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg12-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg12-g3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}

.lg14-g1 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.lg14-g2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.lg14-g3 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}
.md12-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(12px + (12 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md14-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.md14-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg14-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #333333;
}

.rg14-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #4F4F4F;
}

.rg14-g3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}
.lg16-g1 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.lg16-g3 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(12px + (16 - 12) * ((50vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg16-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;

}

.rg16-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #4F4F4F;

}

.md16-g1 {
    font-style : normal;
    font-weight: 500 !important;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md16-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg18-g1 {
    font-style    : normal;
    font-weight   : normal;
    /* font-size  : 18px; */
    font-size     : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color         : #333333;
}

.rg18-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg18-g3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #828282;
}

.md18-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))) !important;
    color      : #333333;
}

.md18-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.md18-g4 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color      : #BDBDBD;
}

.rg20-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(18px + (20 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md20-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(18px + (20 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg24-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg24-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.md24-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md24-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg36-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.rg36-g2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}

.rg48-g1 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(48px + (48 - 36) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg48-g1 {
    font-style : normal;
    font-weight: 100;
    font-size  : calc(48px + (48 - 36) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.md36-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.md36-g2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(24px + (36 - 24) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}
.md48-g1 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(48px + (48 - 36) * ((100vw - 300px) / (1600 - 300)));
    color      : #4F4F4F;
}
.rg20-g1-2 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.rg20-g1-3 {
    font-style : normal;
    font-weight: normal;
    font-size  : calc(10px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg14-g1-2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg14-g1-3 {
    font-style : normal;
    font-weight: 0;
    font-size  : calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.lg16-g1-2 {
    font-style : normal;
    font-weight: 300;
    font-size  : calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}
.md36-g1-2 {
    font-style : normal;
    font-weight: 500;
    font-size  : calc(14px + (29 - 14) * ((100vw - 300px) / (1600 - 300)));
    color      : #333333;
}

.f-weight-normal {
    font-weight: normal !important;
}
.f-100{
    font-size: 100px !important;
}

.cl-CI {
    color: #1667B2 !important;
}

.cl-C8 {
    color: #C8C8C8 !important;
}

.cl-2F {
    color: #2F80ED !important;
}

.cl-F2 {
    color: #F2C94C !important;
}

.cl-FFC {
    color: #ffc926 !important;
}

.cl-F29 {
    color: #F2994A !important;
}

.cl-21 {
    color: #219653 !important;
}

.cl-FF {
    color: #FFFFFF !important;
}

.cl-F0 {
    color: #F05522 !important;
}

.cl-G1 {
    color: #333333 !important;
}

.cl-G2 {
    color: #4F4F4F !important;
}

.cl-G3 {
    color: #828282 !important;
}

.cl-G4 {
    color: #BDBDBD !important;
}

.cl-G5 {
    color: #f1f1f1 !important;
}

.cl-G6 {
    color: #878787 !important;
}

.cl-GY {
    color: #4F4F4F !important;
}

.cl-BD {
    color: #BDBDBD !important;
}

.cl-B8 {
    color: #b8b8b8 !important;
}

.cl-red {
    color: #EB5757 !important;
}

.text-comment {
    color: #4F4F4F !important;
    font-size: 12px;
}

.text-incorrect {
    color: #F05522;
    font-weight: 400;
    font-size: 16px;
}

.new_feature {
    background-color: rgb(235, 255, 240) !important;
    color: #08902E !important;
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 100% !important;
    align-items: center;
}

.next-pk-text {
    background: linear-gradient(269.79deg, #0474E8 0.37%, #1090F2 48.75%, #1CACFB 98.36%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    font-style: normal;
    font-weight: normal;
}