@charset "UTF-8";

:root {
	--general-font-family: 'Pretendard';
	
	--font-color-default: #5d5d5d;
	--font-color-light: #7d7d7d;
	--font-color-super-light: #bebebe;
	--font-color-disabled: #dadada;
	--font-color-theme: #5c8f86;
	--font-color-dark-theme: #47706a;
	--font-color-light-theme: #b2d1c9;
	--font-color-white: #fff;
	--font-color-noti: #ef6c63;
	--font-color-warn: #ff8000;
	--font-color-red: #ff0000;
	--font-color-blue: #0000ff;
	--font-color-link : #2080d0;
	
	--border-default: 1px solid #7d7d7d;
	--border-absolute-black: 1px solid #000000;
	--border-double-default: 3px double #7d7d7d;
	--border-light: 1px solid #adadad;
	--border-dashed-theme: 1px dashed #5c8f86;
	--border-dashed-light: 1px dashed #adadad;
	--border-dashed-light-theme: 1px dashed #b2d1c9;
	--border-dashed-super-light-theme: 1px dashed #c2d5d1;
	--border-dashed-dark-theme: 2px dashed #5c8f86;
	--border-super-light: 1px solid #d3d3d3;
	--border-super-light-blue: 1px solid #e9eef3;
	--border-bold-super-light: 2px solid #eaeaea;
	--border-ultra-light: 1px solid #eaeaea;
	--border-theme: 1px solid #b2d1c9;
	--border-dark-theme: 1px solid #5c8f86;
	--border-bold-dark-theme: 2px solid #5c8f86;
	--border-light-theme: 1px solid #b2d1c9;
	--border-bold-light-theme: 2px solid #b2d1c9;
	--border-super-light-theme: 1px solid #c2d5d1;
	--border-ultra-light-theme: 1px solid #e2eeeb;
	--border-white: 1px solid #fff;
	--border-point: 1px solid #ef6c63;
	--border-disabled: 1px solid #ddd;
	--border-light-blue: 1px solid #90c0e8;
	--border-double-light-blue: 2px solid #90c0e8;
	--border-blue: 1px solid #2080d0;
	--border-double-blue: 2px solid #2080d0;
	
	--bg-color-white: #fff;
	--bg-color-absolute-black: #000000;
	--bg-color-default-font: #5d5d5d;
	--bg-color-dark-green: #4aa452;
	--bg-color-theme: #b2d1c9;
	--bg-color-dark-theme: #5c8f86;
	--bg-color-light: #eaeaea;
	--bg-color-super-light: #f7f7f7;
	--bg-color-light-blue: #d6e8f7;
	--bg-color-light-theme: #e2eeeb;
	--bg-color-super-light-theme: #f0f6f5;
	--bg-color-ultra-light-theme: #f8fafa;
	--bg-color-pastel-mint: #f0fff4;
	--bg-color-dim: rgba( 0, 0, 0, 0.25 );
	--bg-color-trans: rgba( 125, 125, 125, 0.25 );
	--bg-color-gray-trans: rgba( 64, 64, 64, 0.25 );
	--bg-color-dark-gray-trans: rgba( 32, 32, 32, 0.65 );
	--bg-color-dark-trans: rgba( 0, 0, 0, 0.65 );
	--bg-color-disabled: #f7f7fb;
	--bg-color-wran: #ffdcdc;
	--bg-color-noti: #ef6c63;
	--bg-color-red: #ff0000;
	
	--btn-bg-color-theme: #5c8f86;
	--btn-bg-color-light-theme: #b2d1c9;
	--btn-bg-color-super-light-theme: #e2eeeb;
	--btn-bg-color-blue: #2080d0;
	--btn-bg-color-gray: #eaeaea;
	
	--make-wrap-width: 460px;
	--preview-wrap-width: 400px;
	--template-content-height: 60rem;
	
	--menu-wrap-width: 75%;
	--menu-header-gap: 5rem;
	--menu-footer-gap: 5rem;
	
	--makup-footer-gap: 5rem;
	
	--preview-footer-gap: 5rem;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://static.dearto.kr/fonts/Pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/Pretendard/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200; font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://static.dearto.kr/fonts/Pretendard/Pretendard-Regular.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/Pretendard/Pretendard-Regular.woff') format('woff');
  font-weight: 400; font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://static.dearto.kr/fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/Pretendard/Pretendard-Bold.woff') format('woff');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('https://static.dearto.kr/fonts/NaverNanumSquareNeo/NanumSquareNeo-Light.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/NaverNanumSquareNeo/NanumSquareNeo-Light.woff') format('woff');
  font-weight: 300; font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('https://static.dearto.kr/fonts/NaverNanumSquareNeo/NanumSquareNeo-Regular.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/NaverNanumSquareNeo/NanumSquareNeo-Regular.woff') format('woff');
  font-weight: 400; font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('https://static.dearto.kr/fonts/NaverNanumSquareNeo/NanumSquareNeo-Bold.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/NaverNanumSquareNeo/NanumSquareNeo-Bold.woff') format('woff');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'HallymGothic';
  src: url('https://static.dearto.kr/fonts/HallymGothic/HallymGothic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal;
}

@font-face {
  font-family: 'HallymGothic';
  src: url('https://static.dearto.kr/fonts/HallymGothic/HallymGothic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal;
}

@font-face {
  font-family: 'HallymGothic';
  src: url('https://static.dearto.kr/fonts/HallymGothic/HallymGothic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'SunBatang';
  src: url('https://static.dearto.kr/fonts/SunBatang/SunBatang-Light.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/SunBatang/SunBatang-Light.woff') format('woff');
  font-weight: 300; font-style: normal;
}

@font-face {
  font-family: 'SunBatang';
  src: url('https://static.dearto.kr/fonts/SunBatang/SunBatang-Medium.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/SunBatang/SunBatang-Medium.woff') format('woff');
  font-weight: 500; font-style: normal;
}

@font-face {
  font-family: 'SunBatang';
  src: url('https://static.dearto.kr/fonts/SunBatang/SunBatang-Bold.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/SunBatang/SunBatang-Bold.woff') format('woff');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'NanumMyeongjo';
  src: url('https://static.dearto.kr/fonts/NanumMyeongjo/NanumMyeongjo-Regular.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/NanumMyeongjo/NanumMyeongjo-Regular.woff') format('woff');
  font-weight: normal; font-style: normal;
}

@font-face {
  font-family: 'NanumMyeongjo';
  src: url('https://static.dearto.kr/fonts/NanumMyeongjo/NanumMyeongjo-Bold.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/NanumMyeongjo/NanumMyeongjo-Bold.woff') format('woff');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'NanumMyeongjo';
  src: url('https://static.dearto.kr/fonts/NanumMyeongjo/NanumMyeongjo-ExtraBold.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/NanumMyeongjo/NanumMyeongjo-ExtraBold.woff') format('woff');
  font-weight: 800; font-style: normal;
}

@font-face {
  font-family: 'Cafe24-GownBam';
  src: url('https://static.dearto.kr/fonts/Cafe24-GownBam/Cafe24-GownBam.woff2') format('woff2'),
  		url('https://static.dearto.kr/fonts/Cafe24-GownBam/Cafe24-GownBam.woff') format('woff');
  font-weight: normal; font-style: normal;
}



html { width: 100%; min-width: 360px; height: 100%; font-size: 11px; background: var( --bg-color-white ); color: var( --font-color-default ); scroll-behavior: smooth; }
body { position: relative; margin: 0; padding: 0; width: 100%; min-width: 360px; height: auto; min-height: 100%; font-size: 11px; font-family: 'Pretendard', sans-serif; background: var( --bg-color-super-light-theme ); }
body.modal { overflow: hidden; }
body * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
body.dragging { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; }
body.dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; }

html.page-hide, body.page-hide { visibility: hidden; }

a { cursor: pointer; outline: none; }
a:VISITED { text-decoration: none; color: inherit; }
a:ACTIVE { text-decoration: none; color: inherit; }
a:LINK { text-decoration: none; color: inherit; }
a:HOVER { text-decoration: none; color: inherit; }

/* buttons */
button { padding: 0.8rem 2.4rem; border: var( --border-default ); border-radius: 0.8rem; background: none; outline: none; cursor: pointer; }
button:disabled { cursor: not-allowed; }
button.theme-btn { border: var( --border-theme ); background-color: var( --btn-bg-color-theme ); color: var( --font-color-white ); }

img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* select */
select { padding: 0.2rem 2rem 0.2rem 0.6rem; font-size: 1.1rem; text-align: left; outline: none !important; user-select: none !important; border: var( --border-light ); border-radius: 0.4rem; cursor: pointer; color: var( --font-color-light ); background-color: var( --bg-color-white ); }
select:disabled { cursor: not-allowed; color: var( --font-color-disabled ); background-color: var( --bg-color-disabled ) !important; }

/* input */
input[type="text"], input[type="password"] { padding: 0.3rem 0.6rem; font-size: 1.1rem; text-align: left; outline: none !important; user-select: none !important; border: var( --border-light ); border-radius: 0.4rem; color: var( --font-color-light ); background-color: var( --bg-color-white ); }
input[type="text"]::placeholder, input[type="password"]::placeholder { color: var( --font-color-super-light ); }
input[type="text"]:disabled, input[type="password"]:disabled { border: var( --border-disabled ); background-color: var( --bg-color-disabled ) !important; }
input[type="file"] { display: none; }

/* textarea */
textarea { box-sizing: border-box; text-align: left; outline: none !important; letter-spacing: 0.6px !important; user-select: none !important; resize: none !important; color: var( --font-color-light ); background-color: var( --bg-color-white ); border: var( --border-light ); border-radius: 0.4rem; }
textarea::placeholder { color: var( --font-color-super-light ); }
textarea:disabled { border: var( --border-disabled ); background-color: var( --bg-color-disabled ) !important; }

/* checkbox */
label.check-label { position: relative; display: flex; align-items: center; padding-left: 2.4rem; word-break: break-all; cursor: pointer; }
label.check-label input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none !important; user-select: none !important; position: absolute; left: 0; width: 1.6rem; height: 1.6rem; border: var( --border-light ); border-radius: 0.4rem; background: var( --bg-color-white ); }
label.check-label input[type="checkbox"]:checked { background: var( --btn-bg-color-blue ); }
label.check-label input[type="checkbox"]:disabled { background: var( --btn-bg-color-theme ); }
label.check-label input[type="checkbox"]:disabled:not(:checked).disabled { background: var( --bg-color-disabled ); border: var( --border-disabled ); }
label.check-label input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: var( --border-white ); border-width: 0 2px 2px 0; transform: rotate(45deg); }

label.check-label input[type="checkbox"].section-activation:disabled { background: var( --bg-color-light ); border: var( --border-disabled ); }

/* radio */
label.radio-label { position: relative; display: flex; align-items: center; padding-left: 2rem; word-break: break-all; cursor: pointer; }
label.radio-label input[type="radio"] { outline: none !important; user-select: none !important; position: absolute; left: 0; width: 1.4rem; height: 1.4rem; }

/* login button in exception */
p._login_ { display: flex; padding: 0; margin: 6rem auto 0 auto; width: 20rem; }
p._login_.naver { border-radius: 0.4rem; background-color: #03a94d; }
p._login_.kakao { border-radius: 0.4rem; background-color: #ffeb00; }
p._login_ > img { margin: 0.8rem; width: 3rem; height: 2.4rem; }
p._login_.naver > svg { margin: 1rem 0.8rem; width: 3rem; height: 2rem; color: #fff; }
p._login_ > span { display: flex; align-items: center; justify-content: center; border-left: var( --border-white ); font-size: 1.3rem; font-weight: 700; letter-spacing: 1.4px; }
p._login_.naver > span { color: #fff; }
p._login_:not(:first-child) { margin-top: 1.2rem; }
p._login_ > button#mypage { color: var( --font-color-dark-theme ); background-color: var( --btn-bg-color-light-theme ); }


div.intro-content > .body-wrap > div.float-menu > ul li.user { display: flex; padding: 0; margin-top: 1.2rem; }
div.intro-content > .body-wrap > div.float-menu > ul li.user.naver { border-radius: 0.4rem; background-color: #03a94d; }
div.intro-content > .body-wrap > div.float-menu > ul li.user.kakao { border-radius: 0.4rem; background-color: #ffeb00; }
div.intro-content > .body-wrap > div.float-menu > ul li.user > img { margin: 0.8rem; width: 3rem; height: 2.4rem; }
div.intro-content > .body-wrap > div.float-menu > ul li.user.naver > svg { margin: 1rem 0.8rem; width: 3rem; height: 2rem; color: #fff; }
div.intro-content > .body-wrap > div.float-menu > ul li.user > span { display: flex; align-items: center; justify-content: center; border-left: var( --border-white ); font-size: 1.3rem; font-weight: 700; letter-spacing: 1.4px; }
div.intro-content > .body-wrap > div.float-menu > ul li.user.naver > span { color: #fff; }
div.intro-content > .body-wrap > div.float-menu > ul li:first-child { margin-top: 0; }

/* bgm */
label.bgm-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
label.bgm-label input[type="radio"] { outline: none !important; user-select: none !important; position: relative; width: 1.4rem; height: 1.4rem; }

/* required */
span.required { color: red; margin-right: 0.4rem; }

/* table layout ( exclude jquery datepicker table ) */
table:not(.ui-datepicker-calendar) { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
table:not(.ui-datepicker-calendar) tr th { padding: 0.4rem; text-align: center; border-top: var( --border-default ); border-left: var( --border-default ); border-bottom: var( --border-double-default ); }
table:not(.ui-datepicker-calendar) tr th:last-child { border-right: var( --border-default ); }
table:not(.ui-datepicker-calendar) tr td { padding: 0.4rem; text-align: center; border-top: var( --border-default ); border-right: var( --border-default ); word-wrap: break-word; word-break: break-word; white-space: normal; }
table:not(.ui-datepicker-calendar) tr td:first-child { border-left: var( --border-default ); }
table:not(.ui-datepicker-calendar) tr:last-child td { border-bottom: var( --border-default ); }

/* exception-content */
div.exception-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
div.exception-content div.exception { width: 90%; max-width: 600px; text-align: center; }
div.exception-content div.exception img { width: 3rem; height: 3rem; }
div.exception-content div.exception div.message-wrap { margin-top: 6rem; font-size: 13px; }
div.exception-content div.exception div.message-wrap p.message { margin-bottom: 4rem; line-height: 2rem; }

/* lock-content */
div.lock-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
div.lock-content div.locked { width: 80%; max-width: 600px; text-align: center; }
div.lock-content div.locked img { width: 3rem; height: 3rem; }
div.lock-content div.locked div.message-wrap { margin-top: 3rem; font-size: 13px; }
div.lock-content div.locked div.message-wrap p { padding: 1rem 0 2rem 0; }
div.lock-content div.locked div.message-wrap p.func { display: flex; align-items: center; justify-content: center; }
div.lock-content div.locked div.message-wrap p.message { line-height: 2rem; }
div.lock-content div.locked div.message-wrap p input { padding: 0.6rem; width: calc( 58% * 1.14285 ); transform: scale(0.875); transform-origin: left; font-size: 1.5rem; }
div.lock-content div.locked div.message-wrap p button { padding: 0.6rem 0; width: 40%; border: none; border-radius: 0.4rem; background-color: var( --bg-color-dark-theme ); color: var( --font-color-white ); }

/* other-sns */
div.other-sns-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
div.other-sns-content div.content-wrap { width: 90%; max-width: 600px; text-align: center; }
div.other-sns-content div.content-wrap img#dearto-logo { width: 6rem; cursor: pointer; }
div.other-sns-content div.content-wrap h1 { margin-top: 1.2rem; font-size: 1.8rem; font-weight: normal; text-align: center; }
div.other-sns-content div.content-wrap div.message-wrap { margin-top: 2rem; font-size: 1.2rem; }
div.other-sns-content div.content-wrap div.message-wrap h3 { font-family: NanumSquareNeo; font-size: 1.5rem; color: var( --font-color-theme ); text-align: center; }
div.other-sns-content div.content-wrap div.message-wrap p { margin-top: 2rem; line-height: 2rem; }
div.other-sns-content div.content-wrap div.message-wrap p span { font-weight: 700; }
div.other-sns-content div.content-wrap div.login { margin-top: 2rem; display: none; }

/* payment-result */
div.payment-result { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
div.payment-result div.content-wrap { width: 90%; max-width: 600px; text-align: center; }
div.payment-result div.content-wrap img#dearto-logo { width: 6rem; cursor: pointer; }
div.payment-result div.content-wrap h1 { margin-top: 1.2rem; font-size: 1.8rem; font-weight: normal; text-align: center; }
div.payment-result div.content-wrap div.message-wrap { margin: 2rem auto 4rem auto; font-size: 1.2rem; }
div.payment-result div.content-wrap div.message-wrap h3 { font-family: NanumSquareNeo; font-size: 1.5rem; color: var( --font-color-theme ); text-align: center; }
div.payment-result div.content-wrap div.message-wrap p { margin-top: 2rem; line-height: 2rem; }
div.payment-result div.content-wrap div.message-wrap p span { font-weight: 700; }
div.payment-result div.content-wrap > p {}
div.payment-result div.content-wrap > p > button { padding: 0.8rem 2.4rem; border: var( --border-light-theme ); border-radius: 0.4rem; color: var( --font-color-theme ); }

/* dialog-content */
div.dialog { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(72,72,72,0.35); z-index: 999; }
div.dialog > div.content { position: absolute; left: 50%; top: 50%; padding: 1.4rem; width: 40rem; max-width: 90%; height: auto; max-height: 80vh; transform: translate( -50%, -50% ); background-color: var( --bg-color-white ); border-radius: 1rem; }
div.dialog > div.content > div.head { position: relative; padding: 0.5rem 0; font-size: 1.6rem; text-align: center; }
div.dialog > div.content > div.head > button.pop_close { position: absolute; top: 0.6rem; right: 0; margin: 0; padding: 0; width: 1.6rem; height: 1.6rem; border: none; border-radius: 0; opacity: 0.7;
	background-image: url( 'https://static.dearto.kr/images/thin-close.png' ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content > div.body { padding: 3rem 1rem; max-height: 70vh; overflow-x: hidden; overflow-y: auto;  font-size: 1.3rem; }
div.dialog > div.content > div.body > p.pos { margin-top: 3rem; text-align: center; color: var( --font-color-theme ); }
div.dialog > div.content > div.body > p.pos > strong { margin-right: 1.4rem; color: var( --font-color-dark-theme ); }
div.dialog > div.content > div.footer { display: flex; justify-content: space-evenly; }
div.dialog > div.content > div.footer button { padding: 0.8rem 2.4rem; width: 45%; font-size: 1.4rem; border: none; border-radius: 0.4rem; color: var( --font-color-white ); color: var( --font-color-theme ); }
div.dialog > div.content > div.footer button:not(:first-child) { margin-left: 1.2rem; }
div.dialog > div.content > div.footer button.confirm { background-color: var( --btn-bg-color-super-light-theme ); }
div.dialog > div.content > div.footer button.cancel { background-color: var( --btn-bg-color-gray ); }

/* progress */
div.dialog > div.progress { position: absolute; display: flex; flex-direction: column; align-items: center; left: 50%; top: 50%; padding: 2rem; width: max-content; height: auto; transform: translate( -50%, -50% ); background: none; color: var( --font-color-white ); }
div.dialog > div.progress > div { background: none; }
div.dialog > div.progress > div.loading { width: 4.5rem; height: 4.5rem; background-image: url( 'https://static.dearto.kr/images/spinner.svg' ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.progress > div.message { margin-top: 2rem; font-size: 1.2rem; letter-spacing: 1px; line-height: 2.2rem; text-align: center; color: var( --font-color-white ); }


/* toast */
div.toast { position: fixed; display: flex; flex-wrap: wrap; align-items: center; left: 50%; top: -100%; padding: 0.6rem 1.4rem; width: max-content; max-width: 90%; transform: translateX( -50% );
	border-radius: 0.8rem; background-color: var( --bg-color-dark-trans ); color: var( --font-color-white ); transition: top 0.5s ease; z-index: 999; }
div.toast.show { top: calc( var( --menu-header-gap ) + 1rem ); transition: top 1s ease; }
div.toast.show.nohead { top: 2rem; transition: top 1s ease; }
div.toast > span.progress { margin-right: 0.8rem; width: 1.4rem; height: 1.4rem; background-image: url( 'https://static.dearto.kr/images/spinner.svg' ); background-repeat: no-repeat; background-size: contain; }
div.toast > p.msg { font-size: 1rem; line-height: 1.6rem; }
div.toast > p.ratio { margin-top: 0.6rem; width: calc( 100% - 4rem ); font-size: 0; line-height: 0; height: 0.6rem; border-radius: 0.6rem; border: var( --border-ultra-light ); text-align: left; }
div.toast > p.ratio > span { display: block; width: 0%; height: 100%; background-color: var( --bg-color-theme ); }
div.toast > span.ratio { margin-top: 0.6rem; width: 4rem; text-align: right; color: var( --font-color-white ); font-size: 1rem; }

.hide { display: none; }

/* force hide */
.force-hide { display: none !important; }

.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.bold { font-weight: 700 !important; }

/* jQuery datepicker override */
.datepicker-sun a { color: red !important; }
.datepicker-sun a.ui-state-active { color: #ffe0e0 !important; }
.datepicker-sat a { color: blue !important; }
.datepicker-sat a.ui-state-active { color: #e0e0ff !important; }

/* fake-bot */
input[type="text"][name="invt_fb"] { position: absolute !important; left: 9999px !important; top: 9999px !important; }

.flex { display: flex; }

.w10 { width: 10rem !important; }
.w12 { width: 12rem !important; }
.w15 { width: 15rem !important; }
.w20 { width: 20rem !important; }
.w25 { width: 25rem !important; }
.w30 { width: 30rem !important; }

.w20p { width: 20% !important; }
.w30p { width: 30% !important; }
.w40p { width: 40% !important; }
.w50p { width: 50% !important; }
.w60p { width: 60% !important; }
.w70p { width: 70% !important; }
.w80p { width: 80% !important; }
.w85p { width: 85% !important; }
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }

.mt0 { margin-top: 0 !important; }
.mt02 { margin-top: 0.2rem !important; }
.mt04 { margin-top: 0.4rem !important; }
.mt06 { margin-top: 0.6rem !important; }
.mt08 { margin-top: 0.8rem !important; }
.mt1 { margin-top: 1rem !important; }
.mt2 { margin-top: 2rem !important; }
.mt3 { margin-top: 3rem !important; }
.mt4 { margin-top: 4rem !important; }

.ml03 { margin-left: 0.3rem !important; }
.ml06 { margin-left: 0.6rem !important; }

.mb1 { margin-bottom: 1rem !important; }

.pt0 { padding-top: 0 !important; }
.pr1 { padding-right: 1rem !important; }
.pl1 { padding-left: 1rem !important; }
.pl2 { padding-left: 2rem !important; }

.ml05 { margin-left: 0.5rem !important; }
.ml1 { margin-left: 1rem !important; }

.fs1 { font-size: 1rem !important; }
.fs11 { font-size: 1.1rem !important; }
.fs12 { font-size: 1.2rem !important; }