.fl { float: left; }
.fr { float: right; }
.clearfix {
    zoom: 1;
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
}

.w30{ width: 30%;}
.w50 { width: 50%}
.w80 { width: 80%}
.w85 { width: 85%}
.w90 { width: 90%}
.w100 { width: 100%; }
.w100i { width: 100% !important; }
.h100 { height: 100%; }
.wh100 { width: 100%; height: 100%;}

.w_fc { width: fit-content; }
.w_0 { width: 0; }
.w_1 { width: 1px; }
.w_8 { width: 8px; }
.w_10 { width: 10px; }
.w_16 { width: 16px; }
.w_20 { width: 20px; }
.w_24 { width: 24px; }
.w_30 { width: 30px; }
.w_40 { width: 40px; }
.w_50 { width: 50px; }
.w_60 { width: 60px; }
.w_70 { width: 70px; }
.w_75 { width: 75px; }
.w_80 { width: 80px; }
.w_90 { width: 90px; }
.w_100 { width: 100px; }
.w_110 { width: 110px; }
.w_120 { width: 120px; }
.w_130 { width: 130px; }
.w_140 { width: 140px; }
.w_150 { width: 150px; }
.w_160 { width: 160px; }
.w_170 { width: 170px; }
.w_180 { width: 180px; }
.w_200 { width: 200px; }
.w_220 { width: 220px; }
.w_240 { width: 240px; }
.w_250 { width: 250px; }
.w_260 { width: 260px; }
.w_280 { width: 280px; }
.w_300 { width: 300px; }
.w_320 { width: 320px; }
.w_330 { width: 330px; }
.w_350 { width: 350px; }
.w_375 { width: 375px; }
.w_380 { width: 380px; }
.w_400 { width: 400px; }
.w_440 { width: 440px; }
.w_450 { width: 450px; }
.w_475 { width: 475px; }
.w_480 { width: 480px; }
.w_500 { width: 500px; }
.w_550 { width: 550px; }
.w_600 { width: 600px; }
.w_650 { width: 650px; }
.w_700 { width: 700px; }
.w_800 { width: 800px; }
.w_1000 { width: 1000px; }
.w_1200 { width: 1200px; }
.mw_100 { min-width: 100px; }
.mw_200 { min-width: 200px; }
.mw_250 { min-width: 250px; }
.mw_300 { min-width: 300px; }
.mw_400 { min-width: 400px; }
.mw_500 { min-width: 500px; }
.mw_600 { min-width: 600px; }

.h_5 { height: 5px; }
.h_8 { height: 8px; }
.h_10 { height: 10px; }
.h_16 { height: 16px; }
.h_18 { height: 18px; }
.h_20 { height: 20px; }
.h_24 { height: 24px; }
.h_30 { height: 30px; }
.h_32 { height: 32px; }
.h_36 { height: 36px; }
.h_40 { height: 40px; }
.h_45 { height: 45px; }
.h_50 { height: 50px; }
.h_60 { height: 60px; }
.h_70 { height: 70px; }
.h_80 { height: 80px; }
.h_85 { height: 85px; }
.h_90 { height: 90px; }
.h_94 { height: 94px; }
.h_100 { height: 100px; }
.h_110 { height: 110px; }
.h_120 { height: 120px; }
.h_150 { height: 150px; }
.h_180 { height: 180px; }
.h_200 { height: 200px; }
.h_250 { height: 250px; }
.h_300 { height: 300px; }
.h_350 { height: 350px; }
.h_400 { height: 400px; }
.h_500 { height: 500px; }
.h_600 { height: 600px; }

.pd0 { padding: 0;}
.mg0 { margin: 0;}
.pd2 { padding: 2px; }
.pd5 { padding: 5px; }
.pd8 { padding: 8px; }
.pd10 { padding: 10px; }
.pd12 { padding: 12px; }
.pd16 { padding: 16px; }
.pd20 { padding: 20px; }
.pd30 { padding: 30px; }
.pd32 { padding: 32px; }
.pl2 { padding-left: 2px; }
.pl5 { padding-left: 5px; }
.pl8 { padding-left: 8px; }
.pl10 { padding-left: 10px; }
.pl16 { padding-left: 16px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl88 { padding-left: 88px; }
.pl100 { padding-left: 100px; }

.pr2 { padding-right: 2px; }
.pr5 { padding-right: 5px; }
.pr8 { padding-right: 8px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr16 { padding-right: 16px; }
.pr20 { padding-right: 20px; }
.pr24 { padding-right: 24px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }

.pt2 { padding-top: 2px; }
.pt5 { padding-top: 5px; }
.pt8 { padding-top: 8px; }
.pt10 { padding-top: 10px; }
.pt16 { padding-top: 16px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }

.pb2 { padding-bottom: 2px; }
.pb5 { padding-bottom: 5px; }
.pb8 { padding-bottom: 8px; }
.pb10 { padding-bottom: 10px; }
.pb16 { padding-bottom: 16px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }

.mg5 { margin: 5px; }
.mg10 { margin: 10px; }
.mg15 { margin: 15px; }
.mg20 { margin: 20px }
.ml0 { margin-left: 0 !important; }
.ml3{ margin-left: 3px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml16 { margin-left: 16px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }
.ml70 { margin-left: 70px; }
.ml100 { margin-left: 100px; }
.ml120 { margin-left: 120px; }
.ml130 { margin-left: 130px; }
.ml135 { margin-left: 135px; }
.ml200 { margin-left: 200px; }

.mr2 { margin-right: 2px; }
.mr3 { margin-right: 3px; }
.mr5 { margin-right: 5px; }
.mr8 { margin-right: 8px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr16 { margin-right: 16px; }
.mr-16{ margin-right: -16px; }
.mr20 { margin-right: 20px; }
.mr-20{ margin-right: -20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr80 { margin-right: 80px; }
.mr100 { margin-right: 100px; }

.mt2 { margin-top: 2px; }
.mt5 { margin-top: 5px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mt20i { margin-top: 20px !important; }
.mt24 { margin-top: 24px; }
.mt28 { margin-top: 28px; }
.mt30 { margin-top: 30px; }
.mt-30{ margin-top: -30px;}
.mt32 { margin-top: 32px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt80 { margin-top: 80px; }
.mt60 { margin-top: 60px; }
.mt100 { margin-top: 100px; }

.mb0 { margin-bottom: 0 !important; }
.mb2 { margin-bottom: 2px; }
.mb5 { margin-bottom: 5px; }
.mb8 { margin-bottom: 8px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb16 { margin-bottom: 16px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb100 { margin-bottom: 100px; }

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

.tp0{ top: 0;}
.tp5{ top: 5px;}
.tp20{ top: 20px;}
.tp50{ top: 50px;}
.tp70{ top: 70px;}
.rt0{ right: 0;}
.rt5{ right: 5px;}
.bt0{ bottom: 0; }

.zi2{ z-index: 2;}

.bd_2{ border: 2px solid;}
.bd_1{ border: 1px solid;}
.bd_d1{ border: 1px dashed;}
.bd_r2{ border-right: 2px solid;}
.bd_r4{ border-right: 4px solid;}

.fs0{ font-size: 0; }
.fs8{ font-size: 8px;}
.fs12{ font-size: 12px; }
.fs13{ font-size: 13px; }
.fs14{ font-size: 14px; }
.fs15{ font-size: 15px; }
.fs16{ font-size: 16px; }
.fs18{ font-size: 18px; }
.fs20{ font-size: 20px; }
.fs22{ font-size: 22px; }
.fs24{ font-size: 24px; }
.fs26{ font-size: 26px; }
.fs28{ font-size: 28px; }
.fs32{ font-size: 32px; }
.fs36{ font-size: 36px; }
.fs40{ font-size: 40px; }
.fs48{ font-size: 48px; }
.fs56{ font-size: 56px; }
.fs60{ font-size: 60px; }
.fs200{ font-size: 200px; }
.fs280{ font-size: 280px; }
.fs300{ font-size: 300px; }

.fwn { font-weight: normal;}
.fwb { font-weight: bold;}
.fwi { font-weight: inherit;}
.fwl { font-weight: lighter;}
.fw600 { font-weight: 600; }
.fw500 { font-weight: 500; }
.fw400 { font-weight: 400; }

.cf{ color: #fff; }
.c0{ color: #000; }
.c3{ color: #333; }
.c4{ color: #444; }
.c6{ color: #666; }
.c8{ color: #888; }
.c9{ color: #999; }
.ca{ color: #aaa; }
.cb{ color: #bbb; }
.cc{ color: #ccc; }
.cd{ color: #ddd; }
.white{ color: white; }
.black{ color: black; }
.yellow{ color: #FCB941; }
.orange{ color: #FC9001; }
.dark_orange{ color: #ff6933 }
.cdanger{ color: #f76260;}
.green{ color:#56D176; }
.light_green { color: #01C1B2; }
.darkgreen{ color:#45AF60 !important; }
.red{ color:#F76260; }
.blue{ color:#3578E5; }
.light_blue{ color: #1383e6; }
.c_using { color: #04c1b2; }

.bdcd{ border-color: #ddd;}
.bdcw{ border-color: white;}
.bdcp{ border-color: #3578E5}
.bdef{ border-color: #efd1d1;}
.bdfc{ border-color: #FC9001;}

.bgcw { background-color: white; }
.bgc0 { background-color: #000; }
.bgc3 { background-color: #333 !important; }
.bgc6 { background-color: #666 !important; }
.bgc9 { background-color: #999 !important; }
.bgcc { background-color: #ccc !important; }
.bgce{ background-color: #eee;}
.hover-bgcef:hover,.bgcef{ background-color: #eff4fd;}
.bgceb { background-color: #EBEEF5; }
.bgcf2 { background-color: #f2f2f2; }
.bgcf3 { background-color: #f3f3f3; }
.bgcf5 { background-color: #f5f5f5; }
.bgcf7 { background-color: #f7f7f7; }
.bgcfa { background-color: #fafafa; }
.bgcfb { background-color: #fbfbfb; }
.bgcf57a { background-color: #f5f7fa; }
.bgcbody { background-color: #f5f7fa; }
.bgcy { background-color: #FCB941; }
.bgco { background-color: #FC9001; }
.bgcg { background-color: #56D176; }
.bgclg { background-color: #01C1B2; }
.bgcyan{ background-color: #04C1B2;}
.bgcdg { background-color: #45AF60; }
.bgcb { background-color: #3578E5; }
.bgcbh { background-color: #3578E5; }
.bgcr { background-color: #F76260; }
.bg_using { background-color: #04c1b2; }
.bg_danger{ background-color: #feefef;}
.bg_purple{ background-color: #9630ff;}
.bg_unset{ background-color: unset !important;}

.dsp_n {display: none; }
.dsp_i {display: inline; }
.dsp_b {display: block !important; }
.dsp_ib {display: inline-block; }

input::-webkit-input-placeholder{
    color: #c9c9c9;
}

.img_cover { width: 100%; height: 100%; object-fit: cover; }
.img_contain { width: 100%; height: 100%; object-fit: contain; }
.img_fill { width: 100%; height: 100%; object-fit: fill; }
.img_none { width: 100%; height: 100%; object-fit: none; }

.flex1 { flex: 1; }
.flex1_5 { flex: 1.5; }
.flex2 { flex: 2; }
.flex3 { flex: 3; }
.flex4 { flex: 4; }
.shrink0{ flex-shrink:0 }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-around { display: flex; align-items: center; justify-content: space-around; }
.flex-between-start { display: flex; align-items: flex-start; justify-content: space-between; }
.flex-between-end { display: flex; align-items: flex-end; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-start { display: flex; align-items: center; }
.flex-start-top { display: flex; align-items: flex-start; }
.flex-start-end { display: flex; align-items: flex-end; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
.flex-end-end { display: flex; align-items: flex-end; justify-content: flex-end; }
.flex-column { display: flex; flex-direction: column; }
.flex-column-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flex-column-start-center { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.flex-column-start { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.flex-column-between { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.flex-column-start-end { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-wrap-end { display: flex; flex-wrap: wrap; align-items: flex-end;}
.flex-column-start-between { display: flex; flex-direction: column; justify-content: space-between; }
.flex-column-reverse{ display: flex; flex-direction: column-reverse;}
.vam{ vertical-align: middle;}
.txc{ text-align: center;}
.txl{ text-align: left;}
.txr{ text-align: right;}
.mg0a { margin: 0 auto;}
.mga0 { margin: auto 0; }

.word_wrap {
    word-break: break-all;
}
.text_nowrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text_2line { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; }
.text_3line { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; }

.bd_c { border-radius: 50%; overflow: hidden; }
.bdr_0{ border-radius: 0;}
.bdr_2{ border-radius: 2px;}
.bdr_4 { border-radius: 4px; }
.bdr_8 { border-radius: 8px; }
.bdr_10 { border-radius: 10px; }
.bdr_16 { border-radius: 16px; }
.bdr_20 { border-radius: 20px; }
.bdr_30 { border-radius: 30px; }
.bdr_40 { border-radius: 40px; }
.bdblr_8{ border-bottom-left-radius: 8px;}

.bxs_c { box-sizing: content-box; }
.bxs_b { box-sizing: border-box; }

.ps_r { position: relative;}
.ps_a { position: absolute;}
.ps_f { position: fixed;}
.ps_s { position: sticky;}

.zindex2{ z-index: 2; }

.cursor_d { cursor: default; }
.cursor_a { cursor: auto; }
.cursor_p { cursor: pointer; }
.cursor_c { cursor: crosshair; }
.cursor_m { cursor: move; }
.cursor_t { cursor: text; }
.cursor_n { cursor: not-allowed !important; }

                                                                                                                                                                                                                                                         .opacity_05 { opacity: 0.5; }

.txd_underline { text-decoration: underline; }
.txd_through { text-decoration: line-through; }
.txd_none { text-decoration: none; }

.lh_1 { line-height: 1;}
.lh_12 { line-height: 1.2;}
.lh_15 { line-height: 1.5;}
.lh18 { line-height: 18px; }
.lh20 { line-height: 20px; }
.lh24 { line-height: 24px; }
.lh30 { line-height: 30px; }
.lh32 { line-height: 32px; }
.lh36 { line-height: 36px; }
.lh40 { line-height: 40px; }
.lh50 { line-height: 50px; }
.lh60 { line-height: 60px; }
.lh70 { line-height: 70px; }
.lh100 { line-height: 100px; }
.ofa { overflow: auto; }
.ofya { overflow-y: auto; }
.over_h { overflow: hidden; }
.over_s { overflow: scroll; }

.bd_t {border-top: 1px solid #ddd;}
.bd_tf5{ border-top: 1px solid #f5f5f5;}
.bd_b {border-bottom: 1px solid #ddd;}
.bd_dotb{ border-bottom: 1px dotted #ddd;}
.bd_9 {border-bottom: 1px solid #999;}
.bd_dot9{ border-bottom: 1px dotted #999;}
.bd_e7_all{ border: 1px solid #e7e7e7;}
.bd_te7{ border-top: 1px solid #e7e7e7;}
.bd_e7{ border-bottom: 1px solid #e7e7e7;}
.bd_le7{ border-left: 1px solid #e7e7e7;}
.bd_re7{ border-right: 1px solid #e7e7e7;}
.bd_bf {border-bottom: 1px solid white;}
.bd_l {border-left: 1px solid #ddd;}
.bod {border: 1px solid #ddd;}
.boe5 {border: 1px solid #e5e5e5;}
.bod_l{ border-left: 1px solid #ddd;}
.bd_f0{ border: 1px solid #f0f0f0}
.bd_ffd49c{ border: 1px solid #ffd49c}


.bs4{ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              .bgdc{ background-color: #DCDCDC;}
.bg454{ background-color: #454B54;}

.line-left{
   position: relative;
   &:before{
       content: '';
       display: block;
       width: 1px;
       height: 60%;
       background: #ffffff9a;
       position: absolute;
       top: 20%; bottom: 20%; left: 0;
   }
}

.rotation {
    transform: rotate(360deg);
    animation: rotation-keyframes 1s linear infinite;
}

@keyframes rotation-keyframes {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.lable-box-title {
    height: 18px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 18px;
}
.lable-box-title::before {
    content: "";
    width: 3px;
    height: 100%;
    background: #2a75ed;
    margin-right: 10px;
}