body[data-theme='light']{
	background-color: #ffffff;
    --white : #ffffff;
    --borderGrey: #E4E7EC;
    --disabledText: #CBD2DA;
    --defaultText: #1F2933;
    --textDarkGrey: #52606d;
    --textGrey: #9BA5B1;
    --bgBlue : #f0f4ff;
    --bgGrey : #f6f7fb;
	--popbg: #ffffff;
	--popCard: #ffffff;
	--card: #ffffff;
	--mainBlue: #3F54D1;
    --lightBlue: #5280E2;
    --darkBlue: #291C8B;
    --red: #F3485B;
	--tableTh : #E2E5F7;
	--ldbu : #ffffff;
    --popWG: #ffffff;
    --noData: #ffffff;
    --mainPurple: #5200b4;
    --cardRegis_back: #f6f7fb ;
    --cardRegis_color: #9ba5b1;
}
body[data-theme='dark']{
	background-color: #000000;
    --white : #000000;
    --borderGrey: #53545E;
    --disabledText: #616161;
    --defaultText: #ffffff;
    --textDarkGrey: #CACAD1;
    --textGrey: #A5AAAF;
    --bgBlue : #191D24;
    --bgGrey : #2E2E31;
	--popbg: #1F2933;
	--popCard: #323A41;
	--card: #222222;
	--mainBlue: #5C8DEF;
    --lightBlue: #96B6FB;
    --darkBlue: #291C8B;
    --red: #F3485B;
	--tableTh : #353439;
	--ldbu : #f0f4ff;
    --popWG: #2e2e31;
    --noData: transparent;
    --mainPurple: #5C8DEF;
    --cardRegis_back: #acacaf;
    --cardRegis_color: #6c737c;
}
html, body{height: 100%;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	font-family: 'Spoqa Han Sans Neo', sans-serif;
	font-weight: 400;
	color: var(--defaultText);
	word-break: keep-all;
	font-size: 15px;
	letter-spacing: -0.75px;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul, li {
	list-style: none;
}
b{font-weight: 700; font-size: inherit; color: inherit;}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{width: 100%; vertical-align: middle;}
input, select{box-sizing: border-box; font-size: 15px;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
button{padding: 0; margin: 0;}
button, input[type="button"], input[type="submit"]{
	cursor: pointer; border: 0;
	background-color: transparent;
}
button, input[type="button"]:focus, input[type="submit"]:focus{outline: none;}
a{color: var(--defaultText); text-decoration: none;}

input:focus,
textarea:focus{
	outline: none;
	border: 2px solid var(--mainBlue) !important;
	background-color: transparent !important;
}
select:focus{outline: none; border: 0;}
sub,
sup {
  font-size: 70%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-weight: 700;
}
sup {
  top: -0.5em;
}

.w-100{width: 100%;}
.w-50{width: 50%;}
.h-100{height: 100%;}
/* font */
.f-10{font-size: 10px;}
.f-12{font-size: 12px;}
.f-13{font-size: 13px;}
.f-14{font-size: 14px;}
.f-15{font-size: 15px;}
.f-16{font-size: 16px;}
.f-18{font-size: 18px;}
.f-20{font-size: 20px;}
.f-24{font-size: 24px;}
.f-26{font-size: 26px;}
.f-32{font-size: 32px;}

.f-bold{font-weight: 700;}
.f-medium{font-weight: 500;}
.f-regular{font-weight: 400;}
.f-light{font-weight: 300;}

.f-red{color: var(--red);}
.f-blue{color: var(--mainBlue);}
.f-white{color: var(--white);}
.f-grey{color: var(--textGrey);}

.bg-blue{background-color: var(--mainBlue);}
.bg-red{background-color: var(--red);}
.bg-yellow{background-color: #ffc524;}
.bg-l-blue{background-color: var(--lightBlue);}
.bg-bg-blue{background-color: #f0f4ff;}
.bg-mint{background-color: #15cdcb;}
.bg-deepgrey{background-color: var(--textDarkGrey);}

.f-center{text-align: center;}
.f-left{text-align: left;}
.f-right{text-align: right;}

/* margin */
.mt-2{margin-top: 2px;}
.mt-5{margin-top: 5px;}
.mt-10{margin-top: 10px;}
.mt-15{margin-top: 15px;}
.mt-17{margin-top: 17px;}
.mt-20{margin-top: 20px;}
.mt-25{margin-top: 25px;}
.mt-30{margin-top: 30px;}
.mt-35{margin-top: 35px;}
.mt-40{margin-top: 40px;}
.mt-45{margin-top: 45px;}
.mt-50{margin-top: 50px;}
.mt-60{margin-top: 60px;}
.mt-70{margin-top: 70px;}
.mt-80{margin-top: 80px;}
.mt-100{margin-top: 100px;}

.mb-3{margin-bottom: 3px;}
.mb-5{margin-bottom: 5px;}
.mb-6{margin-bottom: 6px;}
.mb-7{margin-bottom: 7px;}
.mb-8{margin-bottom: 8px;}
.mb-9{margin-bottom: 9px;}
.mb-10{margin-bottom: 10px;}
.mb-11{margin-bottom: 11px;}
.mb-12{margin-bottom: 12px;}
.mb-15{margin-bottom: 15px;}
.mb-17{margin-bottom: 17px;}
.mb-20{margin-bottom: 20px;}
.mb-25{margin-bottom: 25px;}
.mb-26{margin-bottom: 26px;}
.mb-30{margin-bottom: 30px;}
.mb-35{margin-bottom: 35px;}
.mb-40{margin-bottom: 40px;}
.mb-45{margin-bottom: 45px;}
.mb-50{margin-bottom: 50px;}
.mb-60{margin-bottom: 60px;}
.mb-80{margin-bottom: 80px;}
.mb-100{margin-bottom: 100px;}

.ml-5{margin-left: 5px;}
.ml-7{margin-left: 7px;}
.ml-8{margin-left: 8px;}
.ml-10{margin-left: 10px;}
.ml-15{margin-left: 15px;}
.ml-20{margin-left: 20px;}
.ml-25{margin-left: 25px;}
.ml-30{margin-left: 30px;}
.ml-35{margin-left: 35px;}
.ml-40{margin-left: 40px;}
.ml-45{margin-left: 45px;}
.ml-50{margin-left: 50px;}

.mr-5{margin-right: 5px;}
.mr-6{margin-right: 6px;}
.mr-7{margin-right: 7px;}
.mr-8{margin-right: 8px;}
.mr-10{margin-right: 10px;}
.mr-15{margin-right: 15px;}
.mr-20{margin-right: 20px;}
.mr-25{margin-right: 25px;}
.mr-30{margin-right: 30px;}
.mr-35{margin-right: 35px;}
.mr-40{margin-right: 40px;}
.mr-45{margin-right: 45px;}
.mr-50{margin-right: 50px;}

h4{
	font-size: 15px;
	font-weight: 700;
}

*{
	cursor: default;
}

input,
textarea {
	cursor: text;
}

button,
button *,
a,
a *,
select {
	cursor: pointer;
}

.bg-bu{
	background-color: var(--bgBlue);
}
.bg-wh{
	background-color: var(--white);
}
.bor-10{
	border-radius: 10px;
}
.bor-15{
	border-radius: 15px;
}

.border_bu{
	border: 1px solid var(--mainBlue)!important;
	background-color: var(--ldbu)!important;
	color: var(--mainBlue)!important;
}
.backgr_bu{
	background-color: var(--mainBlue)!important;
	color: #fff!important;
}
.p-tb15lr15{
	padding: 15px;
}
.p-tb15lr16{
	padding: 15px 16px;
}
.p-tb20lr16{
	padding: 20px 16px;
}
.p-tb20lr15{
	padding: 20px 15px;
}
.p-tb15lr0{
	padding: 15px 0;
}
.p-tb10lr0{
	padding: 10px 0;
}
.m-tb0lr16{
	margin: 0 -16px;
}
.m-tb15lr16{
	margin: 15px -16px;
}
.m-tb20lr16{
	margin: 20px -16px;
}
.display_flex{
    display: flex;
}
.display_block{
    display: block;
}
.flex_wrap{
    flex-wrap: wrap;
}
.flex_nowrap{
    flex-wrap: nowrap;
}
.flex_start{
    justify-content: flex-start;
}
.flex_center{
    justify-content: center;
}
.flex_end{
    justify-content: flex-end;
}
.flex_between{
    justify-content: space-between;
}
.flex_around{
    justify-content: space-around;
}
.flex_align_s{
    align-items: flex-start;
}
.flex_align_c{
    align-items: center;
}
.flex_align_e{
    align-items: flex-end;
}
.flex_align_str{
    align-items: stretch;
}
.flex_dir_column{
    flex-direction: column;
}