/**
  * Class names are based on BEM methodology
  *
  * http://getbem.com/introduction/
  * https://en.bem.info/methodology/quick-start/
  *
  * An element will get a unique class name (e.g. btn, switch, one-month, form-input, select, etc.) under
    any one of the following circumstances:
	1. If a user directly interacts with the element by clicking, hovering, etc.
	2. If the element is unique and has it's own identity (e.g. `form` element, `select` element, 
	   `input` element, etc.).
	3. If the element has one or more child elements that closely relate to the element and are
	   of no use when used outside the element (e.g. switch, one-month, etc.).
*/

@font-face {
    font-family: regular;
    src: url('../font/Inter.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
    font-family: medium;
    src: url('../font/Inter.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
    font-family: medium-2;
    src: url('../font/Poppins-Medium.woff2') format('woff2');
	font-display: swap;
}
@font-face {
    font-family: semibold;
    src: url('../font/Inter.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
    font-family: semibold-2;
    src: url('../font/Poppins-SemiBold.woff2') format('woff2');
	font-display: swap;
}
@font-face {
    font-family: bold;
    src: url('../font/Inter.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
    font-family: bold-2;
    src: url('../font/Poppins-Bold.woff2') format('woff2');
	font-display: swap;
}


/*===========
 * normalize
=============*/
:root {
    /* Teal */
	--color-pri-vh: hsl(180, 55%, 2%);
    --color-pri-h: hsl(180, 55%, 4%);
    --color-pri-m: hsl(180, 55%, 6%);
    --color-pri-l: hsl(180, 55%, 8%);
    --color-pri-vl: hsl(180, 55%, 10%);
	--color-pri-2vl: hsl(180, 55%, 12%);
	--color-pri-3vl: hsl(180, 55%, 14%);
	--color-pri-4vl: hsl(180, 55%, 16%);	
	--color-pri-5vl: hsl(180, 55%, 18%);
	--color-pri-6vl: hsl(180, 55%, 20%);
	--color-pri-7vl: hsl(180, 55%, 22%);
	--color-pri-8vl: hsl(180, 55%, 24%);
	--color-pri-9vl: hsl(180, 55%, 26%);
	--color-pri-10vl: hsl(180, 55%, 28%);
	--color-pri-11vl: hsl(180, 55%, 30%);
	--color-pri-12vl: hsl(180, 55%, 32%);
	--color-pri-13vl: hsl(180, 55%, 34%);
	--color-pri-14vl: hsl(180, 55%, 36%);
	--color-pri-15vl: hsl(180, 55%, 38%);
	--color-pri-16vl: hsl(180, 55%, 40%);
	--color-pri-17vl: hsl(180, 55%, 42%);
	--color-pri-18vl: hsl(180, 55%, 44%);
	--color-pri-19vl: hsl(180, 55%, 46%);
	--color-pri-20vl: hsl(180, 55%, 48%);
	--color-pri-21vl: hsl(180, 55%, 50%);
	--color-pri-22vl: hsl(180, 55%, 52%);
	--color-pri-23vl: hsl(180, 55%, 54%);
	--color-pri-24vl: hsl(180, 55%, 56%);
	--color-pri-25vl: hsl(180, 55%, 58%);
	--color-pri-26vl: hsl(180, 55%, 60%);
	--color-pri-27vl: hsl(180, 55%, 62%);
	--color-pri-28vl: hsl(180, 55%, 64%);
	--color-pri-29vl: hsl(180, 55%, 66%);
	--color-pri-30vl: hsl(180, 55%, 68%);
	--color-pri-31vl: hsl(180, 55%, 70%);
	--color-pri-32vl: hsl(180, 55%, 72%);
	--color-pri-33vl: hsl(180, 55%, 74%);
	--color-pri-34vl: hsl(180, 55%, 76%);
	--color-pri-35vl: hsl(180, 55%, 78%);
	--color-pri-36vl: hsl(180, 55%, 80%);
	--color-pri-37vl: hsl(180, 55%, 82%);
	--color-pri-38vl: hsl(180, 55%, 84%);
	--color-pri-39vl: hsl(180, 55%, 86%);
	--color-pri-40vl: hsl(180, 55%, 88%);
	--color-pri-41vl: hsl(180, 55%, 90%);
	--color-pri-42vl: hsl(180, 55%, 92%);
	--color-pri-43vl: hsl(180, 55%, 94%);
	--color-pri-44vl: hsl(180, 55%, 96%);
	--color-pri-100-25: hsl(180, 100%, 25%);
	--color-pri-80-35: hsl(180, 55%, 35%);

	/* Coral */
	--color-sec-5vh: hsl(16, 95%, 54%);
	--color-sec-4vh: hsl(16, 95%, 55%);
	--color-sec-3vh: hsl(16, 95%, 56%);
	--color-sec-2vh: hsl(16, 95%, 57%);
    --color-sec-vh: hsl(16, 95%, 58%);
	--color-sec-h: hsl(16, 95%, 59%);
    --color-sec-m: hsl(16, 95%, 60%); 
	--color-sec-l: hsl(16, 90%, 59%);
    --color-sec-vl: hsl(16, 81%, 58%);
	--color-sec-2vl: hsl(16, 73%, 56%);
	--color-sec-3vl: hsl(16, 66%, 55%);
	--color-sec-4vl: hsl(16, 59%, 53%);
	--color-sec-5vl: hsl(16, 52%, 51%);
	--color-sec-6vl: hsl(16, 48%, 49%);
	--color-sec-7vl: hsl(16, 46%, 47%);
	--color-sec-8vl: hsl(16, 43%, 45%);
	--color-sec-9vl: hsl(16, 42%, 43%);
	--color-sec-10vl: hsl(16, 39%, 41%);
	--color-sec-11vl: hsl(16, 38%, 38%);
	--color-sec-12vl: hsl(16, 36%, 36%);
	--color-sec-13vl: hsl(16, 35%, 34%);
	--color-sec-14vl: hsl(16, 33%, 32%);
	--color-sec-txt: hsl(16, 100%, 55%);
	

    --black: hsl(180, 3%, 0%);
    --gray-35vh: hsl(180, 3%, 2%);
    --gray-34vh: hsl(180, 3%, 4%);
    --gray-33vh: hsl(180, 3%, 6%);
    --gray-32vh: hsl(180, 3%, 8%);
    --gray-31vh: hsl(180, 3%, 10%);
    --gray-30vh: hsl(180, 3%, 12%);
    --gray-29vh: hsl(180, 3%, 14%);
    --gray-28vh: hsl(180, 3%, 16%);
    --gray-27vh: hsl(180, 3%, 18%);
    --gray-26vh: hsl(180, 3%, 20%);
    --gray-25vh: hsl(180, 3%, 22%);
    --gray-24vh: hsl(180, 3%, 24%);
    --gray-23vh: hsl(180, 3%, 26%);
	--gray-22vh: hsl(180, 3%, 28%);
	--gray-21vh: hsl(180, 3%, 30%);
	--gray-20vh: hsl(180, 3%, 32%);
	--gray-19vh: hsl(180, 3%, 34%);
	--gray-18vh: hsl(180, 3%, 36%);
	--gray-17vh: hsl(180, 3%, 38%);
	--gray-16vh: hsl(180, 3%, 40%);
	--gray-15vh: hsl(180, 3%, 42%);
	--gray-14vh: hsl(180, 3%, 44%);
	--gray-13vh: hsl(180, 3%, 46%);
	--gray-12vh: hsl(180, 3%, 48%);
	--gray-11vh: hsl(180, 3%, 50%);
	--gray-10vh: hsl(180, 3%, 52%);
	--gray-9vh: hsl(180, 3%, 54%);
	--gray-8vh: hsl(180, 3%, 56%);
	--gray-7vh: hsl(180, 3%, 58%);
	--gray-6vh: hsl(180, 3%, 60%);
	--gray-5vh: hsl(180, 3%, 62%);
    --gray-4vh: hsl(180, 3%, 64%);
    --gray-3vh: hsl(180, 3%, 66%);
    --gray-2vh: hsl(180, 3%, 68%);
    --gray-vh: hsl(180, 3%, 70%); 
    --gray-h: hsl(180, 3%, 72%);
    --gray-m: hsl(180, 3%, 74%);
    --gray-l: hsl(180, 3%, 76%);
    --gray-vl: hsl(180, 3%, 78%);
    --gray-2vl: hsl(180, 3%, 80%);
    --gray-3vl: hsl(180, 3%, 82%);
    --gray-4vl: hsl(180, 3%, 84%);
    --gray-5vl: hsl(180, 3%, 86%);
    --gray-6vl: hsl(180, 3%, 88%);
    --gray-7vl: hsl(180, 3%, 90%);
	--gray-8vl: hsl(180, 3%, 92%);
	--gray-9vl: hsl(180, 3%, 94%);
	--gray-10vl: hsl(180, 3%, 96%);
	--gray-11vl: hsl(180, 3%, 98%);
	--gray-12vl: hsl(180, 3%, 99%);

    --white: hsl(0, 5%, 100%);

    --red-dark: hsl(0, 100%, 60%); /* red color for dark theme. */
	--red-light: hsl(0, 80%, 56%); /* red color for light theme. */
    
	line-height: 1;
    font-size: 16px;

	--header-container-height: 63px;
}

/* 
 * bkg = background color 
 * bdr = border color
 * txt = text color
 * shd = box shadow
 * hvr = :hover
 * */
.dark-theme {
	--default-txt: var(--gray-9vl);
	--page-container-bkg: var(--gray-31vh);
	--body-bkg: var(--gray-31vh);
	--header-bkg: var(--color-pri-8vl);
	--header-auth-bkg: var(--gray-27vh);
	--header-auth-bdr: rgba(0, 0, 0, 0.65);
	--header-auth-shd: rgba(0, 0, 0, 0.7);
	--hero-bkg: var(--color-pri-8vl);
	--autosuggest-bdr: var(--gray-15vh);
	--autosuggest-dropdown-bdr: var(--gray-15vh);
	--autosuggest-dropdown-bkg: var(--gray-27vh);
	--autosuggest-ddm-item-hvr: var(--gray-24vh);
	--autosuggest-ddm-item-selected-txt: var(--gray-10vh);
	--form-select-img: url("../icons/arrow_down_light.svg");
	--form-select-bdr: var(--gray-15vh);
	--form-select-hvr-shd: var(--color-pri-14vl);
	--form-select-item-hvr: var(--gray-24vh);
	--form-select-item-selected-txt: var(--gray-10vh);
	--form-text-input-bdr: var(--gray-15vh);
	--form-checkbox-mask-focus: rgba(255, 255, 255, 0.2);
	--form-checkbox-mask-bdr: var(--gray-2vh);
	--form-checkbox-mask-img: url("../icons/check_mark_light.svg");
	--form-radio-mask-bdr: var(--gray-15vh);
	--form-radio-mask-active-bkg: var(--gray-18vh);
	--form-radio-mask-active-txt: var(--gray-8vl);
	--form-radio-mask-hvr-shd: var(--color-pri-14vl);
	--btn-overlay-bkg: rgba(255, 255, 255, 0.1);
	--hplk-1-txt: var(--gray-4vl);
	--hplk-1-txt-hvr: var(--color-sec-vl);
	--hplk-2-txt: var(--color-sec-m);
	--hplk-2-txt-hvr: var(--color-sec-m);
	--hplk-3-txt: var(--default-txt);
	--hplk-3-txt-hvr: var(--color-sec-m);
	--hplk-4-txt: var(--gray-10vl);
	--hplk-4-txt-hvr: var(--gray-10vl);
	--txt-btn-bkg: hsl(180, 100%, 30%);
	--txt-btn-txt: var(--white);
	--txt-btn-bkg-1: var(--color-sec-vl);
	--txt-btn-txt-1: var(--gray-35vh);
	--txt-btn-bkg-2: rgba(0, 163, 136, 0.3);
	--txt-btn-txt-2: hsl(180, 55%, 68%);
	--txt-btn-bkg-3: var(--gray-18vh);
	--txt-btn-txt-3: var(--default-txt);
	--txt-btn-icon-3: var(--default-txt);
	--txt-btn-bdr-6: var(--gray-12vh);
	--txt-btn-bkg-7: var(--gray-26vh);
	--txt-btn-bdr-7: var(--gray-8vh);
	--txt-btn-dormant-bkg: var(--gray-24vh);
	--txt-btn-dormant-txt: var(--gray-8vh);	
	--icon-btn-bkg: var(--gray-21vh);
	--icon-btn-bkg-1: hsl(180, 100%, 32%);
	--icon-btn-bdr-1: var(--gray-25vh);
	--icon-btn-bkg-2: var(--gray-16vh);	
	--camera-icon: var(--gray-10vl);
	--search-icon: var(--gray-10vl);
	--ham-icon: var(--gray-10vl);
	--verified-icon: hsl(138, 100%, 38%);
	--warning-icon: var(--color-sec-vl);
	--eye-icon: var(--gray-3vl);
	--pen-icon: var(--white);
	--check-icon: #58da58;
	--error-icon: var(--red-dark);
	--placeholder-txt: var(--gray-4vh);
	--disabled-item-txt: var(--default-txt);
	--form-field-text-error-txt: var(--red-dark);
	--form-field-radiate-error-shd: rgba(225, 55, 55, 0.7);
	--form-error-bkg: var(--gray-22vh);
	--form-error-txt: var(--red-dark);
	--focus-effect-shd: 0 0 0 1px var(--color-pri-14vl);
	--tag-bkg: var(--gray-18vh);
	--tag-txt: var(--default-txt);
	--tag-hvr-bkg: var(--gray-14vh);
	--delete-button: var(--gray-4vl);
	--delete-button-hvr-bkg: var(--gray-24vh);
	--drop-down-menu-bkg: var(--gray-27vh);
	--drop-down-menu-bdr: var(--gray-15vh);
	--drop-down-menu-item-hvr-bkg: var(--gray-22vh);
	--drop-down-menu-item-thm-1-bdr: var(--gray-20vh);
	--drop-down-menu-arrow-icon-bkg: url("../icons/arrow_down_light.svg");
	--drop-down-menu-arrow-icon-face-up-bkg: url("../icons/arrow_up_light.svg");
	--h-nav-drop-down-menu-bdr: var(--gray-20vh);
	--h-nav-drop-down-menu-bkg: var(--gray-25vh);
	--sub-menu-body-bdr: var(--drop-down-menu-item-thm-1-bdr);
	--sub-menu-body-bkg: transparent;
	--sub-menu-foot-bdr: var(--sub-menu-body-bdr);
	--slide-card-bkg: var(--gray-25vh);
	--slide-card-bdr: var(--gray-23vh);
	--slide-card-hvr-bkg: var(--gray-24vh);
	--slide-card-last-active-bkg: var(--gray-16vh);
	--slide-card-last-active-bdr: var(--slide-card-bkg);
	--slide-card-last-active-txt: var(--white);
	--dot-notification-bkg: hsl(180, 100%, 35%);
	--dot-notification-red-bkg: var(--red-dark);
	--logo-bkg: url('../logo/vn_logo_wht.svg');
	--elm-thm-1-bkg: var(--gray-26vh);
	--elm-thm-2-bdr: var(--gray-18vh);
	--elm-thm-3-bkg: var(--gray-29vh);
	--elm-thm-4-bdr: var(--color-pri-8vl);
	--elm-thm-4-bkg: var(--color-pri-8vl);
	--elm-thm-4-img-1: url('/static/icons/1_ylw.svg');
	--elm-thm-4-img-2: url('/static/icons/2_ylw.svg');
	--elm-thm-4-img-3: url('/static/icons/3_ylw.svg');
	--elm-thm-4-img-4: url('/static/icons/4_ylw.svg');
	--elm-thm-5-bkg: var(--gray-25vh);
	--elm-thm-6-bdr: var(--color-sec-4vl);
	--elm-thm-6-bkg: var(--color-sec-4vl);
	--elm-thm-6-img-1: url('/static/icons/verified_fill_light.svg');
	--elm-thm-6-img-2: url('/static/icons/instant_notify_fill_light.svg');
	--elm-thm-6-img-3: url('/static/icons/match_recommend_fill_light.svg');
	--elm-thm-6-img-4: url('/static/icons/privacy_fill_light.svg');
	--elm-thm-7-bkg: var(--gray-29vh);
	--elm-thm-8-txt: var(--gray-4vl);	
	--elm-thm-10-txt: var(--gray-4vl);
	--elm-thm-13-txt: var(--red-dark);
	--elm-thm-15-txt: var(--gray-h);
	--elm-thm-16-txt: var(--gray-h);
	--elm-thm-17-img-1: url('/static/icons/match_recommend_light.svg');
	--elm-thm-17-img-2: url('/static/icons/verified_light.svg');
	--elm-thm-17-img-3: url('/static/icons/instant_notify_light.svg');
	--elm-thm-17-img-4: url('/static/icons/privacy_light.svg');
	--elm-thm-18-txt: var(--gray-2vh);
	--elm-thm-20-bkg: var(--gray-22vh);
	--elm-thm-21-txt: hsl(138, 100%, 38%);
	--elm-thm-22-txt: var(--gray-h);
	--elm-thm-23-txt: var(--gray-vl);
	--elm-thm-25-bdr: var(--gray-5vh);
	--elm-thm-24-bdr: var(--gray-20vh);
	--elm-thm-24-hvr-bkg: var(--gray-22vh);
	--elm-thm-26-txt: var(--gray-3vl);
	--elm-thm-27-bkg: var(--gray-29vh); /* bkg-dark */
	--elm-thm-27-bdr: var(--gray-29vh); /* bkg-dark */
	--elm-thm-28-bkg: var(--gray-27vh); /* bkg-light */
	--elm-thm-28-bdr: var(--gray-25vh); /* bkg-light */
	--elm-thm-29-bkg: transparent;
	--elm-thm-29-bdr: var(--gray-20vh);
	--elm-thm-30-bkg: var(--color-sec-vh);
	--elm-thm-32-txt: #58da58;
	--elm-thm-33-bkg: rgba(255, 255, 255, 0.12);
	--elm-thm-34-txt: hsl(180, 100%, 40%);
	--skeleton-bkg: var(--gray-23vh);
	--skeleton-anim-bkg: rgba(0, 0, 0, 0.11);
	--profile-photo-bkg: var(--skeleton-bkg);
	--profile-tab-nav-bdr: var(--gray-15vh);
	--profile-tab-active-txt: var(--color-sec-m);
	--profile-tab-active-und: var(--color-sec-m);
	--profile-tab-hvr-bkg: var(--gray-23vh);
}

.light-theme {
	--default-txt: var(--gray-35vh);
	--page-container-bkg: var(--gray-9vl);
	--body-bkg: white;
	--header-bkg: var(--color-pri-14vl);
	--header-auth-bkg: var(--white);
	--header-auth-bdr: rgba(0, 0, 0, 0.15);
	--header-auth-shd: rgba(0, 0, 0, 0.1);
	--hero-bkg: var(--color-pri-14vl);
	--autosuggest-bdr: var(--gray-m);
	--autosuggest-dropdown-bdr: var(--gray-m);
	--autosuggest-dropdown-bkg: var(--gray-10vl);
	--autosuggest-ddm-item-hvr: var(--gray-8vl);
	--autosuggest-ddm-item-selected-txt: var(--gray-14vh);
	--form-select-img: url("../icons/arrow_down_dark.svg");
	--form-select-bdr: var(--gray-m);
	--form-select-hvr-shd: var(--color-pri-20vl);
	--form-select-item-hvr: var(--gray-8vl);
	--form-select-item-selected-txt: var(--gray-14vh);
	--hero-form-select-img: url("../icons/arrow_down_light.svg");
	--form-text-input-bdr: var(--gray-m);
	--form-checkbox-mask-focus: rgba(0, 0, 0, 0.2);
	--form-checkbox-mask-bdr: var(--gray-12vh);
	--form-checkbox-mask-img: url("../icons/check_mark_dark.svg");
	--form-radio-mask-bdr: var(--gray-m);
	--form-radio-mask-active-bkg: var(--color-pri-41vl);
	--form-radio-mask-active-txt: var(--default-txt);
	--form-radio-mask-hvr-shd: var(--color-pri-20vl);
	--btn-overlay-bkg: rgba(0, 0, 0, 0.07);
	--hplk-1-txt: var(--gray-10vl);
	--hplk-1-txt-hvr: var(--color-sec-vh);
	--hplk-2-txt: var(--color-sec-txt);
	--hplk-2-txt-hvr: var(--color-sec-txt);
	--hplk-3-txt: var(--default-txt);
	--hplk-3-txt-hvr: var(--color-sec-txt);
	--hplk-4-txt: var(--gray-12vl);
	--hplk-4-txt-hvr: var(--gray-12vl);
	--txt-btn-bkg: hsl(180, 100%, 30%);
	--txt-btn-txt: var(--white);
	--txt-btn-bkg-1: var(--color-pri-5vl);
	--txt-btn-txt-1: var(--gray-12vl);
	--txt-btn-bkg-2: rgba(0, 163, 136, 0.3);
	--txt-btn-txt-2: hsl(180, 100%, 8%);
	--txt-btn-bkg-3: var(--gray-4vl);
	--txt-btn-txt-3: var(--default-txt);
	--txt-btn-icon-3: var(--gray-33vh);
	--txt-btn-bkg-4: var(--gray-10vl);
	--txt-btn-txt-4: var(--gray-33vh);
	--txt-btn-bkg-5: var(--color-sec-m);
	--txt-btn-txt-5: var(--white);
	--txt-btn-bdr-6: var(--gray-l);
	--txt-btn-bkg-7: var(--gray-12vl);
	--txt-btn-bdr-7: var(--gray-10vh);
	--txt-btn-bkg-9: var(--color-pri-25vl);
	--txt-btn-txt-9: var(--color-pri-vh);
	--txt-btn-dormant-bkg: var(--gray-3vl);
	--txt-btn-dormant-txt: var(--gray-5vh);	
	--camera-icon: var(--gray-33vh);
	--search-icon: var(--gray-33vh);
	--ham-icon: var(--gray-33vh);
	--verified-icon: hsl(138, 100%, 30%);
	--warning-icon: var(--color-sec-m);
	--eye-icon: var(--gray-22vh);
	--pen-icon: var(--white);
	--check-icon: #00b400;
	--error-icon: var(--red-light);
	--placeholder-txt: var(--gray-16vh);
	--disabled-item-txt: var(--default-txt);
	--form-field-text-error-txt: var(--red-light);
	--form-field-radiate-error-shd: rgba(225, 55, 55, 0.8);
	--form-error-bkg: var(--gray-10vl);
	--form-error-txt: var(--red-light);
	--focus-effect-shd: 0 0 0 1px var(--color-pri-20vl);
	--tag-bkg: var(--gray-7vl);
	--tag-txt: var(--default-txt);
	--tag-hvr-bkg: var(--gray-4vl);
	--delete-button: var(--gray-33vh);
	--delete-button-hvr-bkg: var(--gray-10vl);
	--drop-down-menu-bkg: var(--gray-10vl);
	--drop-down-menu-bdr: var(--gray-m);
	--drop-down-menu-item-hvr-bkg: var(--gray-11vl);
	--drop-down-menu-item-thm-1-bdr: var(--gray-8vl);
	--drop-down-menu-arrow-icon-bkg: url("../icons/arrow_down_dark.svg");
	--drop-down-menu-arrow-icon-face-up-bkg: url("../icons/arrow_up_dark.svg");
	--h-nav-drop-down-menu-bdr: var(--gray-5vl);
	--h-nav-drop-down-menu-bkg: var(--white);
	--sub-menu-body-bdr: var(--drop-down-menu-item-thm-1-bdr);
	--sub-menu-body-bkg: transparent;
	--sub-menu-foot-bdr: var(--sub-menu-body-bdr);
	--admin-menu-item-hvr-bkg: var(--gray-3vl);
	--slide-card-bkg: var(--white);
	--slide-card-bdr: var(--gray-5vl);
	--slide-card-hvr-bkg: var(--gray-12vl);
	--slide-card-last-active-bkg: var(--gray-l);
	--slide-card-last-active-bdr: var(--slide-card-bkg);
	--slide-card-last-active-txt: var(--gray-33vh);
	--dot-notification-bkg: hsl(180, 100%, 30%);
	--dot-notification-red-bkg: var(--red-light);
	--logo-bkg: url('../logo/vn_logo_blk.svg');
	--logo-wht-bkg: url('../logo/vn_logo_wht.svg');
	--elm-thm-1-bkg: rgba(0, 0, 0, 0.2);
	--elm-thm-2-bdr: var(--gray-vl);
	--elm-thm-3-bkg: var(--gray-9vl);
	--elm-thm-4-bdr: var(--color-pri-12vl); /* or --color-sec-2vl ? */
	--elm-thm-4-bkg: var(--color-pri-12vl); /* or --color-pri-16vl ? */
	--elm-thm-4-img-1: url('/static/icons/1_wht.svg');
	--elm-thm-4-img-2: url('/static/icons/2_wht.svg');
	--elm-thm-4-img-3: url('/static/icons/3_wht.svg');
	--elm-thm-4-img-4: url('/static/icons/4_wht.svg');
	--elm-thm-5-bkg: var(--gray-12vl);
	--elm-thm-6-bdr: var(--gray-6vl);
	--elm-thm-6-bkg: var(--gray-6vl);
	--elm-thm-6-img-3: url('/static/icons/match_recommend_fill_dark.svg');
	--elm-thm-6-img-1: url('/static/icons/verified_fill_dark.svg');
	--elm-thm-6-img-2: url('/static/icons/instant_notify_fill_dark.svg');	
	--elm-thm-6-img-4: url('/static/icons/privacy_fill_dark.svg');
	--elm-thm-7-bkg: var(--gray-10vl);
	--elm-thm-8-txt: var(--white);
	--elm-thm-10-txt: var(--color-pri-4vl);
	--elm-thm-13-txt: var(--red-light);
	--elm-thm-15-txt: var(--gray-20vh);
	--elm-thm-16-txt: var(--gray-20vh);
	--elm-thm-17-img-1: url('/static/icons/match_recommend_dark.svg');
	--elm-thm-17-img-2: url('/static/icons/verified_dark.svg');
	--elm-thm-17-img-3: url('/static/icons/instant_notify_dark.svg');
	--elm-thm-17-img-4: url('/static/icons/privacy_dark.svg');
	--elm-thm-18-txt: var(--gray-16vh);
	--elm-thm-20-bkg: var(--gray-3vl);
	--elm-thm-21-txt: hsl(138, 100%, 30%);
	--elm-thm-22-txt: var(--gray-20vh);
	--elm-thm-23-txt: var(--gray-24vh);
	--elm-thm-24-bdr: var(--gray-9vl);
	--elm-thm-24-hvr-bkg: var(--gray-10vl);
	--elm-thm-25-bdr: var(--gray-14vh);
	--elm-thm-26-txt: var(--gray-14vh);
	--elm-thm-27-bkg: hsl(180, 15%, 97%);
	--elm-thm-27-bdr: var(--gray-10vl);
	--elm-thm-28-bkg: var(--white);
	--elm-thm-28-bdr: var(--gray-5vl);
	--elm-thm-29-bkg: transparent;
	--elm-thm-29-bdr: var(--gray-vh);
	--elm-thm-30-bkg: var(--color-sec-txt);
	--elm-thm-32-txt: #00b400;
	--elm-thm-33-bkg: rgba(255, 255, 255, 0.7);
	--elm-thm-34-txt: hsl(180, 100%, 35%);	
	--elm-thm-35-bkg: var(--white);
	--elm-thm-35-bdr: var(--color-pri-38vl);
	--elm-thm-36-bkg: var(--white);
	--elm-thm-37-bkg: var(--color-pri-25vl);
	--elm-thm-38-txt: var(--default-txt);
	--icon-btn-bkg: var(--gray-9vl);
	--icon-btn-bkg-1: hsl(180, 55%, 35%);
	--icon-btn-bdr-1: var(--elm-thm-28-bkg);
	--icon-btn-bkg-2: var(--gray-3vl);
	--skeleton-bkg: var(--gray-10vl);
	--skeleton-anim-bkg: rgba(0, 0, 0, 0.023);
	--profile-photo-bkg: var(--skeleton-bkg);
	--profile-tab-nav-bdr: var(--gray-5vl);
	--profile-tab-active-txt: var(--color-sec-txt);
	--profile-tab-active-und: var(--color-sec-txt);
	--profile-tab-hvr-bkg: var(--gray-10vl);
}

body {
	width: 100%;
	background: var(--body-bkg);
}
.landing-page-body {
	background: white;
}

.page-container {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: var(--page-container-bkg);
}
.main-content {
	display: block;
	position: relative;
	max-width: 1400px;
	min-height: calc(100dvh - 58px);
	margin: 0 auto;
	background: transparent;
}
.main-content--full-width {
	width: 100%;
	max-width: none;
}

* {
    position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
    line-height: 1.5;
	border-radius: 0;
    border: none;
    transition: box-shadow 0.13s ease-in-out, border-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
	font-size: 14px;
    font-weight: 400;
    font-family: 'regular', sans-serif; 
	text-decoration: none;
    color: var(--default-txt); /* For white background: var(--color-pri-h)   */
    outline: 0;
	font-optical-sizing: auto;
	/* Remove blue highlight when an element is clicked. */
	-webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;

	/* Disable text select.
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	*/
}
/* Remove blue highlight when an element is clicked. */
:focus {
	outline: none !important;
}

div[item-separator] {
	padding: 6px 8px;
    font-family: "medium", sans-serif;
	font-size: 14px;
	background: #EDEDED;
}

form {
	z-index: 100;
}

/**
 * To make a placeholder text black just add `.plh--thm-h` class to the element.
**/
input::placeholder {
    font-family: 'regular', sans-serif;
    color: var(--placeholder-txt);
    opacity: 1;
}
/* Black placeholder */
.plh--thm-h::placeholder {
    color: var(--color-pri-h);
}

::-webkit-input-placeholder {
    font-family: 'regular', sans-serif;
    color: var(--placeholder-txt);
    opacity: 1;
}
.plh--thm-h::-webkit-input-placeholder {
    color: var(--color-pri-h);
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-family: 'regular', sans-serif;
	color: var(--placeholder-txt);
}
.plh--thm-h:-ms-input-placeholder {
    color: var(--color-pri-h);
}

::-ms-input-placeholder { /* Microsoft Edge */
	font-family: 'regular', sans-serif;
    color: var(--placeholder-txt);
}
.plh--thm-h::-ms-input-placeholder {
    color: var(--color-pri-h);
}

ol, ul {
  list-style: none;
}

h3 {
	font-size: 28px;
}
h4 {
	font-size: 18px;
}

a span {
	pointer-events: none;
}

a div {
	pointer-events: none;
}

.back-btn {
	cursor: pointer;
}
.popup__back-btn:hover {
	background: var(--gray-8vl);
}

.close-btn {
	cursor: pointer;
}
.popup__close-btn:hover {
	background: var(--gray-8vl);
}
.vnchat-panel__close-btn:hover {
	background: var(--gray-8vl);
}

/*======== 
 * border
 =========*/
.bdr--0 {
    border: none;
}
.bdr--1 {
    border: solid var(--gray-l) 1px;
}
.bdr--dsh--1 {
	border: dashed var(--gray-l) 1px;
}
.bdr--dsh--2 {
	border: dashed var(--gray-l) 2px;
}
.bdr--2 {
    border: solid var(--gray-l) 2px;
}
.bdr--3 {
    border: solid var(--gray-l) 3px;
}
.bdr--4 {
    border: solid var(--gray-l) 4px;
}
.bdr--5 {
    border: solid var(--gray-l) 5px;
}
.bdr--6 {
    border: solid var(--gray-l) 6px;
}

.bdr-top--1 {
    border-top: solid var(--gray-l) 1px;
}
.bdr-top--2 {
    border-top: solid var(--gray-l) 2px;
}
.bdr-top--3 {
    border-top: solid var(--gray-l) 3px;
}
.bdr-top--4 {
    border-top: solid var(--gray-l) 4px;
}
.bdr-top--5 {
    border-top: solid var(--gray-l) 5px;
}
.bdr-top--10 {
    border-top: solid var(--gray-l) 10px;
}
.bdr-top--12 {
    border-top: solid var(--gray-l) 12px;
}
.bdr-top--dot-4 {
    border-top: dotted var(--gray-l) 4px;
}
.bdr-top--dot-5 {
    border-top: dotted var(--gray-l) 5px;
}

.bdr-btm--1 {
    border-bottom: solid var(--gray-l) 1px;
}
.bdr-btm--2 {
    border-bottom: solid var(--gray-l) 2px;
}
.bdr-btm--3 {
    border-bottom: solid var(--gray-l) 3px;
}
.bdr-btm--4 {
    border-bottom: solid var(--gray-l) 4px;
}
.bdr-btm--8 {
    border-bottom: solid var(--gray-l) 8px;
}
.bdr-btm--10 {
    border-bottom: solid var(--gray-l) 10px;
}
.bdr-lft--1 {
    border-left: solid var(--gray-l) 1px;
}
.bdr-rgt--1 {
    border-right: solid var(--gray-l) 1px;
}

/*=========
 * THEMES
===========*/
/* hyperlink */
.hplk-1 {
	color: var(--hplk-1-txt);
}
.hplk-1:hover {
	text-decoration: underline;
	color: var(--hplk-1-txt-hvr);
}
.hplk-2 {
	color: var(--hplk-2-txt);
	cursor: pointer;
}
.hplk-2:hover {
	text-decoration: underline;
	color: var(--hplk-2-txt-hvr);
}
.hplk-3 {
	color: var(--hplk-3-txt);
}
.hplk-3:hover {
	text-decoration: underline;
	color: var(--hplk-3-txt-hvr);
}
.hplk-4 {
	color: var(--hplk-4-txt);
}
.hplk-4:hover {
	text-decoration: underline;
	color: var(--hplk-4-txt-hvr);
}

.elm-thm-1 {
	background-color: var(--elm-thm-1-bkg);
}
.elm-thm-2 {
	border-bottom-color: var(--elm-thm-2-bdr);
}
.elm-thm-3 {
	background-color: var(--elm-thm-3-bkg);
}
.elm-thm-4 {
	border-color: var(--elm-thm-4-bdr);
	background-color: var(--elm-thm-4-bkg);	
}
.elm-thm-4--img-1 {
	background-image: var(--elm-thm-4-img-1);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.elm-thm-4--img-2 {
	background-image: var(--elm-thm-4-img-2);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.elm-thm-4--img-3 {
	background-image: var(--elm-thm-4-img-3);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.elm-thm-4--img-4 {
	background-image: var(--elm-thm-4-img-4);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.elm-thm-5 {
	background-color: var(--elm-thm-5-bkg);
}
.elm-thm-6 {
	border-color: var(--elm-thm-6-bdr);
	background-color: var(--elm-thm-6-bkg);
}
.elm-thm-6--img-1 {
	background-image: var(--elm-thm-6-img-1);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70px;
}
.elm-thm-6--img-2 {
	background-image: var(--elm-thm-6-img-2);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70px;
}
.elm-thm-6--img-3 {
	background-image: var(--elm-thm-6-img-3);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70px;
}
.elm-thm-6--img-4 {
	background-image: var(--elm-thm-6-img-4);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70px;
}
.elm-thm-7 {
	background-color: var(--elm-thm-7-bkg);
}
.elm-thm-8 {
	color: var(--elm-thm-8-txt);
}
.elm-thm-10 {
	color: var(--elm-thm-10-txt);
}
.elm-thm-11 {
	border-color: var(--gray-20vh);
}
.elm-thm-12 {
	color: var(--color-sec-h);
}
.elm-thm-12:hover {
	text-decoration: underline;
}
/* error text */
.elm-thm-13 {
	color: var(--elm-thm-13-txt);
}
.elm-thm-14 {
	/* vaccant */
}
.elm-thm-15 {
	color: var(--elm-thm-15-txt);
}
.elm-thm-16 {
	color: var(--elm-thm-16-txt);
}
.elm-thm-17--img-1 {
	background-image: var(--elm-thm-17-img-1);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.5rem 2.5rem;
	background-color: transparent;
}
.elm-thm-17--img-2 {
	background-image: var(--elm-thm-17-img-2);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.5rem 2.5rem;
	background-color: transparent;
}
.elm-thm-17--img-3 {
	background-image: var(--elm-thm-17-img-3);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.5rem 2.5rem;
	background-color: transparent;
}
.elm-thm-17--img-4 {
	background-image: var(--elm-thm-17-img-4);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.5rem 2.5rem;
	background-color: transparent;
}
.elm-thm-18 {
	color: var(--elm-thm-18-txt);
}
.elm-thm-19 {
	background-color: var(--form-error-bkg);
}
.elm-thm-20 {
	background-color: var(--elm-thm-20-bkg);
}
.elm-thm-21 {
	color: var(--elm-thm-21-txt);
}
.elm-thm-22 {
	color: var(--elm-thm-22-txt);
}
.elm-thm-23 {
	color: var(--elm-thm-23-txt);
}
.elm-thm-24 {
	border-color: var(--elm-thm-24-bdr);
}
.elm-thm-24--hvr:hover {
	background: var(--elm-thm-24-hvr-bkg);
	cursor: pointer;
}
.elm-thm-25 {
	border-color: var(--elm-thm-25-bdr);
}
.elm-thm-26 {
	color: var(--elm-thm-26-txt);
}
.elm-thm-27 {
	background-color: var(--elm-thm-27-bkg);
	border-color: var(--elm-thm-27-bdr);
}
.elm-thm-28 {
	background-color: var(--elm-thm-28-bkg);
	border-color: var(--elm-thm-28-bdr);
}
.elm-thm-29 {
	background-color: var(--elm-thm-29-bkg);
	border-color: var(--elm-thm-29-bdr);
}
.elm-thm-30 {
	background-color: var(--elm-thm-30-bkg);
}
.elm-thm-31 {
	border-color: var(--form-text-input-bdr);
}
/* success text */
.elm-thm-32 {
	color: var(--elm-thm-32-txt);
}
.elm-thm-33 {
	background-color: var(--elm-thm-33-bkg);
}
.elm-thm-34 {
	color: var(--elm-thm-34-txt);
}
.elm-thm-35 {	
	box-shadow: 0 0 8px 0 var( --gray-4vl );
	background-color: var(--elm-thm-35-bkg);
}
.elm-thm-36 {
	box-shadow: 0 0 8px 0 var( --gray-4vl );
	background-color: var(--elm-thm-36-bkg);
}
.elm-thm-37 {
	background-color: var(--elm-thm-37-bkg);
}
.elm-thm-38 {
	color: var(--elm-thm-38-txt);
}

.admin-menu__item {

}
.admin-menu__item:hover {
	background-color: var(--admin-menu-item-hvr-bkg);
}

/*=======
 * button
=========*/
.btn-overlay {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: center center;
	top: 0;	
}

.txt-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute; /* OLD position: absolute */
	font-family: 'bold', sans-serif;
	background: var(--txt-btn-bkg);	
	color: var(--txt-btn-txt);
	cursor: pointer;	
}
.txt-btn--thm-1 {
	background-color: var(--txt-btn-bkg-1);
	color: var(--txt-btn-txt-1);
}
.txt-btn--thm-2 {
	background: var(--txt-btn-bkg-2);
	color: var(--txt-btn-txt-2);
}
.txt-btn--thm-3 {
	background: var(--txt-btn-bkg-3);
	color: var(--txt-btn-txt-3);
}
.txt-btn--thm-4 {
	background: var(--txt-btn-bkg-4);
	color: var(--txt-btn-txt-4);
}
.txt-btn--thm-5 {
	background: var(--txt-btn-bkg-5);
	color: var(--txt-btn-txt-5);
}
.txt-btn--thm-6 {
	border-color: var(--txt-btn-bdr-6);
	background: transparent;
	color: var(--default-txt);
}
.txt-btn--thm-7 {
	border-color: var(--txt-btn-bdr-7);
	background: var(--txt-btn-bkg-7);
	color: var(--default-txt);
}
.txt-btn--thm-8 {
	border: solid var(--gray-6vl) 1px;
	background: transparent;
	color: var(--white);
}
.txt-btn--thm-9 {
	background: var(--txt-btn-bkg-9);
	color: var(--txt-btn-txt-9);
}
/* Always at bottom of `txt-btn--thm- */
.txt-btn--disabled {
	background: var(--txt-btn-dormant-bkg);
	color: var(--txt-btn-dormant-txt);
}
.txt-btn__txt {	
	font-family: 'bold', sans-serif;
	font-size: 13px;	
	color: inherit;
	background: transparent;
}

.txt-btn:hover .btn-overlay {	
	background-color: var(--btn-overlay-bkg);
	transform: scaleX(1);
}
.icon-btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
    box-sizing: border-box;
	border-radius: 50%;
	background-color: var(--icon-btn-bkg);
	cursor:pointer;
}
.icon-btn--thm-1 {
	border-color: var(--icon-btn-bdr-1);
	background-color: var(--icon-btn-bkg-1);
}
.icon-btn--thm-2 {
	border-color: var(--icon-btn-bdr-1);
	background-color: var(--icon-btn-bkg-2);
}
.icon-btn--thm-trns {
	border-color: transparent;
	background-color: transparent;
}
.icon-btn--size--24 {
	width: 24px;
	height: 24px;
}
.icon-btn--size--40 {
	width: 40px;
	height: 40px;
}
.icon-btn--theme--transparent {
	border: none;
	background: transparent;	
}
.icon-btn--shape--round {
	border-radius: 50%;
}
.icon-btn__img {
    display: inline;
	position: relative;
	vertical-align: bottom;
}
.icon-btn__img--size--22 {
    width: 22px;
}
.icon-btn__img--size--40 {
    width: 40px;
    height: 40px;
}
.icon-btn__img--shape--round {
    border-radius: 50%;
}

.icon-btn:hover .btn-overlay {	
	background-color: var(--btn-overlay-bkg);
	transform: scaleX(1);
}

.dot-notification {
	content: '';
	display: block;
	position: absolute;
	width: 13px;
	height: 13px;
	top: 0;
	right: -1px;
	border: solid transparent 2px;	
	border-radius: 50%;
	background: var(--dot-notification-bkg);	
}
.avatar-btn__dot-notification {
	border-color: var(--header-auth-bkg);
	background: var(--dot-notification-red-bkg);
}
.match-requests-btn__dot-notification {
	border-color: var(--header-auth-bkg);
}
.vnchat-btn__dot-notification {
	border-color: var(--header-auth-bkg);
}

.circle-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	background-color: var(--gray-13vh);
}

.profile-photo {
	background-color: var(--profile-photo-bkg);
}

/*==========
 * VnSlider
============*/
.vnslider {
    display: block;
    position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	-ms-overflow-style: none; /* Hide scrollbar in Internet Explorer */
	scrollbar-width: none;    /* Hide scrollbar in Firefox */
    margin: 0 auto;
}
/* Hide scrollbar in webkit-based browsers like Chrome/Safari. */
.vnslider::-webkit-scrollbar {
   width: 0px;
   display: none;
}

.vnslider__display {
    display: flex;
    position: absolute;
}
.vnslider__card {
    display: block;
    position: relative;
    float: left;
}
.vnslider__arrow-wrapper {
    display: flex;
	align-items: center;
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0;
}

.vnslider__arrow {
    display: flex;
	align-items: center;
	justify-content: center;
    position: absolute;
    height: 80px;
    width: 40px;	
    border: none; 
	box-shadow: 0 0 3px 0 var(--gray-20vh); /* --vnslider-arrow-shd */
    cursor: pointer;
    background: var(--gray-12vl); /* --vnslider-arrow-bkg */
	z-index: 100;
}
.vnslider__arrow:hover .btn-overlay {	
	background-color: var(--btn-overlay-bkg);
	transform: scaleX(1);
}

.vnslider__left-arrow {
	border-radius: 0 4px 4px 0;
    left: -1px;
	opacity: 0.3;
}
.vnslider__right-arrow {
	border-radius: 4px 0 0 4px;
    right: -1px; 
}
.vnslider__gap {
	display: block;
	position: relative;
	width: 16px;
	height: inherit;
	float: left;
	background: transparent;
}

.card-container {
	display: inline-grid;
    position: relative;
    margin: 0 auto;
	width: calc(100% - 36px);
    gap: 10px;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 440px) {
	.scr-440--card-container {
		width: auto;
		gap: 20px;
		grid-template-columns: repeat(2, 1fr); 
	}
}
@media (min-width: 661px) {
	.card-container {
		width: auto;
		gap: 20px;
		grid-template-columns: repeat(3, 1fr); 
	}
}
@media (min-width: 870px) {
	.card-container { 
		grid-template-columns: repeat(4, 1fr); 
	}
}
@media (min-width: 1100px) {
	.card-container { 
		grid-template-columns: repeat(5, 1fr); 
	}
}
@media (min-width: 1320px) {
	.card-container { 
		grid-template-columns: repeat(6, 1fr); 
	}
}

/*=======
 * Card
=========*/
.card {
    display: block;
	box-sizing: content-box;
    overflow: hidden;
    position: relative;	
    width: 194px; /* 180px */
    border-radius: 6px;
    border: solid var(--slide-card-bdr) 1px;
    margin: 0 auto;
	background: var(--slide-card-bkg); /* --color-pri-8vl */
	transition: background 0.2s ease-in-out;
	cursor: pointer;
}
.card__img {
    display: block;
    width: 100%;
	height: 194px;
    vertical-align: bottom;
    border-radius: 2px 2px 0 0;
    transition: transform 0.2s ease-in-out;
	background: var(--gray-10vh);
}
.card:hover .card__img {
    transform: scale(1.02);
}
.card:hover {
	background: var(--slide-card-hvr-bkg);
}

.card__last-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position:  absolute;
    height: 22px;
    right: 4px;
    bottom: -10px;
    padding: 0 6px;
    border-radius: 20px;
	border: solid var(--slide-card-last-active-bdr) 2px;
	font-family: 'medium', sans-serif;
    font-size: 11px;
	background: var(--slide-card-last-active-bkg);
	color: var(--slide-card-last-active-txt);
}

.card__text {
    display: block;
    position: relative;
    margin: 0 auto;
    border-radius: 0;
    padding: 8px 8px;
    font-family: "regular", sans-serif;
    background: transparent;
}

.card__username {
    display: block;
    position: relative;
    width: 100%;
	height: 16px;
	line-height: 16px;
	margin-top: 8px;
	margin-bottom: 8px;
	border-radius: 4px;
    font-family: "semibold", sans-serif;
}

.card__text p {
    display: block;
    position: relative;
	height: 14px;
	line-height: 14px;
	margin: 7px 0;
	border-radius: 4px;
    font-family: "regular", sans-serif;
    font-size: 14px;
}
.slide__text p:nth-child(3) {
	//color: var(--gray-3vh);
}

/*===========
 * stack-card
=============*/
.stack-card {
    display: flex;
	align-items: flex-start;
    overflow: hidden;
    position: relative;	
    width: 100%;
	padding: 15px 0;
    border-bottom: solid var(--slide-card-bdr) 1px;
    transition: background 0.2s ease-in-out;
	background: var(--slide-card-bkg); /* --color-pri-8vl */
	cursor: pointer;
}
.stack-card__img {
    display: block;
    width: 120px;
	height: 120px;
    border-radius: 6px;
	transition: transform 0.2s ease-in-out;
	background: var(--gray-10vh);
}
.stack-card:hover .stack-card__img {
    transform: scale(1.02);
}
.stack-card:hover {
	background: var(--slide-card-hvr-bkg);
}
.stack-card__text {
    display: block;
    position: relative;
	width: calc(100% - 130px);
    margin-left: 10px;
    border-radius: 0;
    padding: 8px 8px;
    font-family: "regular", sans-serif;
    background: transparent;
}
.stack-card__username {
    display: block;
    position: relative;
    width: 100%;
    font-family: "semibold", sans-serif;
}
.stack-card__last-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position:  absolute;
    height: 22px;
    right: 4px;
    bottom: -10px;
    padding: 0 6px;
    border-radius: 20px;
	border: solid var(--slide-card-last-active-bdr) 2px;
	font-family: 'medium', sans-serif;
    font-size: 11px;
	background: var(--slide-card-last-active-bkg);
	color: var(--slide-card-last-active-txt);
}

/*==========
 * tool tip
============*/
.tool-tip {
	display: none;
	position: absolute;
	padding: 0;
	font-size: 13px;
	line-height: 18px;
	border-radius: 3px;
	font-family: "roboto-regular", sans-serif;
	z-index: 100000 !important;
}
.tool-tip--color-pri--dark {
	background: #737373;
	color: white;
}
.tool-tip--color-pri--light {
	border: solid #d2d2d2 1px;
	box-shadow: 0 1px 3px 0 rgba(38, 38, 38,0.2);
	background: white;
	color: #242424;
}
.tool-tip--color-pri--multiline {
	padding: 7px 5px;
	font-size: 13px;
}
.tool-tip__content {
	display: block;
	padding: 4px 8px;
}
.tool-tip--speech-balloon::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 20px;
	border: solid;
	border-width: 6px;
	border-color: transparent transparent #737373 transparent;
	z-index: 10000 !important;
}



/* DELETE */
.box {
	display: inline-block;
	cursor: default;
}
.flx-box {
	display: inline-flex;
	cursor: default;
}

/* DELETE */
.row {
    display: block;
    overflow: visible;
    background: transparent;
}

/* DELETE */
.col {
    display: block;
    overflow: visible;
    float: left;
    background: transparent;
}

/*===========
 * title.css
 * DELETE
=============*/
.title {
    display: block;
    font-family: "regular", sans-serif;
	font-size: 22px;
}

.title--txt--mid {
    text-align: center;
}
.title--txt--lft {
    text-align: left;
}
.title--txt--rgt {
    text-align: right;
}

.title--fnt-sz--xs {
    font-size: 16px;
}
.title--fnt-sz--sm {
    font-size: 18px;
}
.title--fnt-sz--md {
    font-size: 20px;
}
.title--fnt-sz--lg {
    font-size: 24px;
}

.search-icon {
	stroke: var(--search-icon);
}
.ham-icon {
	stroke: var(--ham-icon);
}

/*==============
 * sub-title.css
 * DELETE
================*/
.sub-title {
    display: block;
	font-family: "regular", sans-serif;
}

.shield {
	left: 0;
	top: 0;
	background: transparent;
}

/*================
 * form-label.css
==================*/
.form-label {
    display: block;
}
.form-label--dormant {
	color: var(--gray-10vh);
}

/* For <input> and <textarea> */
.form-text-input {
    display: block;
	position: relative;
	font-family: "regular", sans-serif;
	border-radius: 4px;
	background-color: transparent;
	border: solid var(--form-text-input-bdr) 1px;
	outline: none;
}

[contenteditable][placeholder]:empty:before {
	content: attr(placeholder);
	font-family: 'regular', sans-serif;
	color: var(--placeholder-txt);;
}

.form-select {
    display: block;
    overflow: visible;
    float: left;
    border-radius: 4px;	
	font-family: "regular", sans-serif;
	cursor: pointer;
	transition: box-shadow 0.15s ease-in-out;
	-webkit-tap-highlight-color: transparent;
	background: var(--form-select-img);
	background-repeat: no-repeat;
	background-position: calc(100% - 8px);
	background-size: 12px;
    background-color: transparent;
	border: solid var(--form-select-bdr) 1px;
}
.form-select:hover {
	box-shadow: inset 0 0 0 1px var(--form-select-hvr-shd);
}
.form-select--dormant {
	background: url("../icons/arrow_down_dormant.svg");
	background-repeat: no-repeat;
	background-position: calc(100% - 8px);
	background-size: 12px;
}
.form-select--dormant:hover {
	box-shadow: inset 0 0 0 0 transparent;
}
.form-select--selected {
    /*background-color: var(--gray-17vh);*/
}
.form-select--selected > .form-select__label {
	/*color: var(--gray-8vl);*/
}

.form-select__hidden-input {
    
}

.form-select__label {
	display: block;
    position: relative; /* OLD: position: absolute */
	overflow: hidden;
	width: calc(100% - 14px);
    cursor: pointer;
}
.form-select__label--dormant {
	color: var(--gray-9vh);
}
.form-select__label--nowrap {
	white-space: nowrap;
}
.form-select__label--selected {
    /* color: var(--color-pri-vh); */
}
.form-select__item {
    display: block;
    width: 100%;
    padding: 6px 8px;
	border-radius: 0;
	cursor: pointer;
}
.form-select__item:hover {
	background: var(--form-select-item-hvr);
}
.form-select__item--selected {
	color: var(--form-select-item-selected-txt);
}
div[disabled-item] {
	padding: 6px 8px;
	border-radius: 0;
	font-family: 'medium';
	color: var(--disabled-item-txt);
	cursor: pointer;
}

.hero__form-select {
	background: var(--hero-form-select-img);
	background-repeat: no-repeat;
	background-position: calc(100% - 8px);
	background-size: 12px;
	border-color: rgba(255, 255, 255, 0.5);
}
.hero__form-select:hover {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.hero__label {
	color: var(--gray-12vl);
}

/*==============
 * radio button
================*/
.form-radio {
    display: block;
    overflow: visible;
}
.form-radio--hidden {
    display: none;
}

/*===========
 * checkbox
=============*/
.form-checkbox { /* checkbox */
    display: block;
    position: absolute;
}
.form-checkbox--hidden {
    display: none;
}

/*===============================
 * Mask that appears like button
=================================*/
.form-radio-mask {
    display: block;
    float: left;
    margin-right: 8px;
    border-radius: 4px;
    text-align: center;
    font-family: "regular", sans-serif;
    border: solid var(--form-radio-mask-bdr) 1px;
    transition: background 0.13s ease-in-out, color 0.13s ease-in-out, box-shadow 0.13s ease-in-out;
	cursor: pointer;
}
.form-radio-mask:last-child {
    /* border: none; */
    /* border-radius: 0 4px 4px 0; */
}
.form-radio-mask:first-child {
    /* border-radius: 4px 0 0 4px; */
}
.form-radio-mask:hover {
	box-shadow: inset 0 0 0 1px var(--form-radio-mask-hvr-shd); 
}

.form-radio-mask--active {
    background: var(--form-radio-mask-active-bkg);
    color: var(--form-radio-mask-active-txt);
}

/*==================================
 * Mask that appears like check box
====================================*/
.form-checkbox-mask {
    display: block;
    float: left;
    width: 20px;
	height: 20px;
    border-radius: 4px;	
	border: solid var(--form-checkbox-mask-bdr) 2px; /* --form-checkbox-mask-bdr */
	background: transparent;
	cursor: pointer;
}

.form-checkbox-mask:before {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: box-shadow 0.15s ease-in-out;
}

.form-checkbox-mask:focus:before {
    box-shadow: 0 0 0 0.65rem var(--form-checkbox-mask-focus);
}
.form-checkbox-mask--checked {
	background-image: var(--form-checkbox-mask-img);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 65%;
	background-color: transparent;
}

/*================
 * drop-down-menu
==================*/
.drop-down-menu {
	display: block;
	position: absolute;
	overflow: auto;
	max-height: 260px;
	border-radius: 4px;
	border: solid var(--drop-down-menu-bdr) 1px;
	font-family: "regular", sans-serif;
	font-size: 14px;
	background: var(--drop-down-menu-bkg);
	z-index: 100;
}

.drop-down-menu--hidden {
	display: none;	
}

.drop-down-menu__quick-search {
	left: 50%;
	transform: translateX(-50%);
}

/*Use this for drop-down-menu*/
.drop-down-menu__member-search::after {
	right: 215px;
}

.drop-down-menu__item {
	display: flex;
	align-items: center;
	position: relative;
	padding: 12px 15px;
	width: 320px;
	border-radius: 0;
	cursor: pointer;
}
.drop-down-menu__item:hover {
	background: var(--drop-down-menu-item-hvr-bkg);
}
.drop-down-menu__my-profile-pending {
	display: inline-block;
}
.drop-down-menu__partner-profile-pending {
	display: inline-block;
}
.drop-down-menu__item--thm-1 {
 border-top-color: var(--drop-down-menu-item-thm-1-bdr);
}

.drop-down-menu__sub-menu {
	display: block;
	cursor: auto;
}

.drop-down-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: 7px;
	border-radius: 50%;
}
.drop-down-menu__arrow-icon {
	position: absolute;
	width: 12px;
	height: 12px;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--drop-down-menu-arrow-icon-bkg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	border-radius: 0;
}

.drop-down-menu__arrow-icon--face-up {
	background: var(--drop-down-menu-arrow-icon-face-up-bkg); 
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.drop-down-menu__text {
	display: inline-block;
	color: var(--color-pri-h);
}

@media screen and (max-width: 610px) {
	.drop-down-menu__member-search {
		right: 0;
	}
	.drop-down-menu__non-sliding::after {
		right: 23px;
	}
	.drop-down-menu__member-search::after {
		right: 142px;
	}
}
/*----------------------------------------
              Mobile portrait.
------------------------------------------*/
@media screen and (max-width: 420px) {
	.drop-down-menu__quick-search {
		top: 0;
	}
}

.sub-menu {
	display: block;
	cursor: auto;
}
.sub-menu--hidden {
	display: none;
}
.sub-menu__body {
	display: block;
	overflow: auto;
	border-radius: 0;
	border-top: solid 1px var(--sub-menu-body-bdr);
	background-color: var(--sub-menu-body-bkg);
}
.sub-menu__item {
	display: block;
	position: relative;
	border-radius: 0;
}
.sub-menu__item:hover {
	background: var(--drop-down-menu-item-hvr-bkg);
}
.sub-menu__item--first-child {
	border: none;
}
.sub-menu__foot {
	border-top: solid 1px var(--sub-menu-foot-bdr);
}

/*================ 
 * horizontal nav 
==================*/

.h-nav {
	display: flex;
	align-items: center;
}
.h-nav__icon-btn {
	position: relative;
	float: left;
	margin-right: 15px;
}

.h-nav__drop-down-menu {
	position: absolute;
	overflow: hidden;
	top: 62px;
	right: 0;
	max-height: none;
	border-color: var(--h-nav-drop-down-menu-bdr);
	border-radius: 6px;
	background: var(--h-nav-drop-down-menu-bkg);
}

@media screen and (max-width: 724px) {
	.h-nav__btn--hamburger {
		display: flex;
	}
}

.btn-press {
	transition: transform 70ms ease-in-out;
}

.hero__btn {
    display: none;
    margin-top: 40px;
    padding: 0.625rem 2rem;
}

.header-container {
	display: block;
	position: absolute;
	width: 100%;
	height: var(--header-container-height);
	background: var(--header-bkg); /*var(--theme-5vl)*/
	z-index: 200;
}
.header-container--auth {
	background: var(--header-auth-bkg);
	border-bottom: solid var(--header-auth-bdr) 1px;
	box-shadow: 0 0 5px 0 var(--header-auth-shd);
}
.header {
	display: flex;
    align-items: center;
    position: relative;
	max-width: 1400px;
    height: 58px;
	margin: 0 auto;
	border-radius: 0;
	background: transparent; /*var(--theme-5vl)*/
}
.header--auth {	
    position: relative;
	height: 62px;
	background-color: inherit;
}
.header__logo {
	position: relative;
    margin-left: 18px;
}
.header__h-nav {
    display: inline-flex;
	position: absolute;
	height: inherit;
    right: 18px;
}

.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 60px;
	border-radius: 0;
	margin-top: 3.5rem;
	color: var(--white);
	background: var(--gray-25vh);
}

/*=============
 * autosuggest
===============*/
.autosuggest {
	display: block;
	float: left;
	overflow: visible;
	border-color: var(--autosuggest-bdr);
	cursor: text;
	box-shadow: none;
}
.autosuggest__form-text-input {
	display: block;
	border: none;
}
.autosuggest__dropdown {
	/*display: none;*/
    position: absolute;
	overflow: auto;
    border-radius: 4px;
	border: solid var(--autosuggest-dropdown-bdr) 1px;
	box-shadow: none;
    background: var(--autosuggest-dropdown-bkg);
	z-index: 100;
}

.autosuggest__ddm-item {
	padding: 6px 8px; /* 6px 8px */
	border-radius: 0;
	cursor: pointer;
}
.autosuggest__ddm-item--hover {
	background: var(--autosuggest-ddm-item-hvr);
}
.autosuggest__ddm-item--selected {
	color: var(--autosuggest-ddm-item-selected-txt);
}
.autosuggest__icon {
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
    right: 1px;
	top: 50%;
	transform: translateY(-50%);
	background: url('../icons/arrow_down_light.svg');
	background-repeat: no-repeat;
	background-position: calc(100% - 8px);
	background-size: 12px;
	cursor: pointer;
}
.autosuggest__loading-icon {
	display: block; 
	margin: 0 auto;
    width: 40px;
	margin-top: 6px; 
	margin-bottom: 6px;
}

/* A chip is an HTML element containing some word(s) and a delete button. 
 * Rename to `tag`.
 * */
.tag {
	display: inline-flex;
	align-items: center;
	margin: 8px 8px 8px 0;
	padding: 5px 6px 5px 10px;
	border-radius: 4px;
	/*border: solid var(--gray-vh) 1px;*/
	font-family: sans-serif;
	line-height: 16px;
	background: var(--tag-bkg);
	cursor: default;
	color: var(--tag-txt);
	pointer-events: none;
}
.delete-button {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	vertical-align: bottom;
	background-color: transparent;
	cursor: pointer;
}

.tag__delete-button {
	margin-left: 8px;
	pointer-events: auto;
}
.tag:hover {
	background-color: var(--tag-hvr-bkg);
}
.tag .delete-button:hover {
	background-color: var(--delete-button-hvr-bkg);
}

/*======
 * logo
========*/
.logo {
	display: block;
	position: relative;
	width: 134px;
	height: 60px;
	background: var(--logo-bkg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;	
}
.logo--wht {
	background: var(--logo-wht-bkg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

/*======
 * hero
========*/
.hero {
	display: inline-block;
	position: relative;
    overflow: visible;
	width: 100%;
	border-radius: 0;	
}
.hero-thm {
	background: var(--hero-bkg);
	/*
	background-image: linear-gradient(rgba(21, 27, 15, 0.6), rgba(21, 27, 15, 0.6)), url('/static/img/hero.png');
	background-position: 0 40%;
	background-repeat: no-repeat;
	background-size: cover;
	*/
}

/*===========
 * Honey Pot
=============*/
.hny-pt {
    display: none;
}

/*=============
 * Form errors
===============*/
.form-error {
    display: flex;
	align-items: center;
    position: relative;
    padding: 12px 14px;
    border-radius: 4px;
	font-family: 'medium';	
    background: var(--form-error-bkg);
}
.form-error--no-bkg {
	padding: 0;
	background: none;
}
.form-error__msg {
	color: var(--form-error-txt);
}

.form-field-text-error {
	display: block;
	float: left;
	width: 100%;
	border-radius: 4px;
	font-size: 13px;
	font-family: 'medium';
	color: var(--form-field-text-error-txt);
}

.form-field-radiate-error { /* OLD: .form-field-text-error--radiate */
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	box-shadow: 0 0 0 0.65rem var(--form-field-radiate-error-shd);
    transition: box-shadow 0.15s ease-in-out;
	z-index: -10;
}

.backdrop {
	/*visibility: hidden;*/
	/*opacity: 0;*/
	position: fixed;
	width: 100%;
	min-height: 100dvh;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 10px;
	background: rgba(0, 0, 0, 0.5);	
	transition: opacity 500ms;
	z-index: 210;
}
.backdrop--transparent {
	background: none;
}

@media screen and (max-width: 465px), (max-height: 465px) {
	body {
		/*overflow-y: hidden;*/ /* Hide vertical scroll bar. */
	}	
}

.backdrop__mask {
	position: fixed;
	width: 100%;
	min-height: 100dvh;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;;
	padding: 0;
	background: rgba(255, 255, 255, 0);
	z-index: 210;
}

.popup {
	position: relative;
	margin: 10dvh auto;
	max-width: 600px; /* 600px */
	min-width: 200px;
	height: 80dvh;
	padding: 0;
	border-radius: 8px;
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
}
.popup__head {
	display: flex;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	/*box-shadow: 0 4px 4px -4px #b3b3b3;*/
}

.popup__body {
	display: block; 
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	background: transparent;
}
.popup__foot {
	display: flex;
	position: relative;
	box-sizing: border-box;
}
.popup__img-wrapper {	
	min-width: 130px;
	max-width: 36dvh;
	min-height: 130px;
	max-height: 36dvh;
}
.popup__one-third-width {
	display: block;
	box-sizing: border-box;
	position: relative;
	width: 33.33333333333333%;
	height: 50px;
	float: left;
}
.popup__tab {
	position: absolute;
	height: 26px;
	width: 95%;
	padding: 0 6px;
	line-height: 10px;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: solid #bfbfbf 2px;
	border-radius: 0;
	text-align: center;
	font-size: 13px;
	font-family: "roboto-medium", sans-serif;
	color: #404040;
	background: none;
	cursor: pointer;
}
.popup__tab--active {
	color: #262626;
	border-bottom: solid #262626 3px;
	cursor: default;
}
.popup__quick-search {
	width: 100%;
	margin-top: 40px;
}
.popup__refine-search {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 40px;
}
.popup__button-container {
	width: calc(100% - 16px);
	margin: 4px 8px;
}
.popup__text-button {
	position: relative;
	padding: 5px 20px;
	float: right;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
	font-size: 13px;
}

.camera-container {
	display: flex;
	align-items: center;
	justify-content: center;
    position: relative;
}
        
.camera-container__feed-display, .camera-container__preview-canvas {
    position: absolute; 
    object-fit: cover; /* Ensure video fills container while maintaining aspect ratio */
}
.camera-container__preview-canvas {
	display: none;
}
.camera-container__server-canvas {
	display: none;
}

.captured-photo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: inherit;
}
.captured-photo {
	display: block;
	max-width: 100%;
}

.tab-nav {
	border-bottom-color: var(--profile-tab-nav-bdr);	
}
.tab {
	display: flex;
	justify-content: center;
	border-radius: 4px;
}
.tab__txt {
	font-size: 14px;
	font-family: 'semibold', sans-serif;
}
.tab:hover {
	background: var(--profile-tab-hvr-bkg);
}
.tab--active .tab__txt {
	font-family: 'semibold', sans-serif;
	color: var(--profile-tab-active-txt);
}
.tab--active .tab__underline {
	display: block; 
	position: absolute; 
	width: 100%; 
	height: 2px; 
	bottom: 0; 
	background: var(--profile-tab-active-und);
}
.tab--active:hover {
	background: none;
}
.tab-content {	
	min-height: 100dvh;
	margin: 0 auto;
}

#cancel {
	display: block;
	float: right;
	margin-right: 8px;
	margin-top: 8px;
	padding: 4px;
	width: 16px;
	cursor: pointer;
	border-radius: 50%;
	background: white;
	color: black;
}

/*
@media screen and (max-height: 465px) {
	.popup__img-wrapper {
		width: max(100dvh - 240px, 100px);
		height: max(100dvh - 240px, 100px);
	}
}
@media screen and (max-width: 465px) {
	.popup__img-wrapper {
		width: max(100vw - 240px, 100px);
		height: max(100dvh - 240px, 100px);
	}
}
*/

.ic-canvas-240 {
	display: none;
    position: absolute;
}
.ic-canvas-60 {
	display: none;
	position: absolute;
}
.ic-canvas-240-blur {
	display: none;
	position: absolute;
}
.ic-container {
	display: block;
    overflow: visible;
    position: relative;
    width: 220px;
    height: 220px;
	left: 50%;
	transform: translateX(-50%);
	touch-action: none;
}
.ic-viewport {
	display: block;
    position: absolute;
    width: 220px;
    height: 220px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.7);
    border: solid #bebebe 1px;
    border-radius: 50%;
}
.ic-image {
	display: block;
    position: absolute;
    transform: translateX(0px) scale(1);
    transform-origin: center;
}
.ic-overlay {
	display:  block;
    position: absolute;
    transform: translateX(0px) scale(1);
    transform-origin: center;
    cursor: move;
    background: transparent;
}
.ic-slider {
	display: inline-block;
    position: absolute;
	width: calc(100% - 60px);
	left: 50%;
	transform: translateX(-50%);
}
/* Animated skeleton */
.skeleton-anim {
	overflow: hidden;	
}
.skeleton-anim:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 90%;
	background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0), var(--skeleton-anim-bkg), rgba(0, 0, 0, 0));
	animation: skeleton-animate 1.5s infinite ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes skeleton-animate {
	from {
		left: -95%;
	}
	to {
		left: 100%;
	}
}

/* Static skeletons */
.skeleton-hgt-2500 {
	height: 2500px;
}
.skeleton-hgt-2450 {
	height: 2450px;
}
.skeleton-hgt-2400 {
	height: 2400px;
}
.skeleton-hgt-2350 {
	height: 2350px;
}
.skeleton-hgt-2300 {
	height: 2300px;
}
.skeleton-hgt-2250 {
	height: 2250px;
}
.skeleton-hgt-2200 {
	height: 2200px;
}
.skeleton-hgt-2150 {
	height: 2150px;
}
.skeleton-hgt-2100 {
	height: 2100px;
}
.skeleton-hgt-2050 {
	height: 2050px;
}
.skeleton-hgt-2000 {
	height: 2000px;
}
.skeleton-hgt-1950 {
	height: 1950px;
}
.skeleton-hgt-1900 {
	height: 1900px;
}
.skeleton-hgt-1850 {
	height: 1850px;
}
.skeleton-hgt-1800 {
	height: 1800px;
}
.skeleton-hgt-1750 {
	height: 1750px;
}
.skeleton-hgt-1700 {
	height: 1700px;
}
.skeleton-hgt-1650 {
	height: 1650px;
}
.skeleton-hgt-1600 {
	height: 1600px;
}
.skeleton-hgt-1550 {
	height: 1550px;
}
.skeleton-hgt-1500 {
	height: 1500px;
}
.skeleton-hgt-1450 {
	height: 1450px;
}
.skeleton-hgt-1400 {
	height: 1400px;
}
.skeleton-hgt-1350 {
	height: 1350px;
}
.skeleton-hgt-1300 {
	height: 1300px;
}
.skeleton-hgt-1250 {
	height: 1250px;
}
.skeleton-hgt-1200 {
	height: 1200px;
}
.skeleton-hgt-1150 {
	height: 1150px;
}
.skeleton-hgt-1100 {
	height: 1100px;
}
.skeleton-hgt-1050 {
	height: 1050px;
}
.skeleton-hgt-1000 {
	height: 1000px;
}
.skeleton-hgt-950 {
	height: 950px;
}
.skeleton-hgt-900 {
	height: 900px;
}
.skeleton-hgt-850 {
	height: 850px;
}
.skeleton-hgt-800 {
	height: 800px;
}
.skeleton-hgt-750 {
	height: 750px;
}
.skeleton-hgt-700 {
	height: 700px;
}
.skeleton-hgt-650 {
	height: 650px;
}
.skeleton-hgt-600 {
	height: 600px;
}
.skeleton-hgt-550 {
	height: 550px;
}
.skeleton-hgt-500 {
	height: 500px;
}
.skeleton-hgt-450 {
	height: 450px;
}
.skeleton-hgt-400 {
	height: 400px;
}
.skeleton-hgt-350 {
	height: 350px;
}
.skeleton-hgt-310 {
	height: 310px;
}
.skeleton-hgt-300 {
	height: 300px;
}
.skeleton-hgt-250 {
	height: 250px;
}
.skeleton-hgt-200 {
	height: 200px;
}
.skeleton-hgt-150 {
	height: 150px;
}
.skeleton-hgt-100 {
	height: 100px;
}
.skeleton-hgt-70 {
	height: 70px;
}
.skeleton-hgt-65 {
	height: 65px;
}
.skeleton-hgt-60 {
	height: 60px;
}
.skeleton-hgt-63 {
	height: 63px;
}
.skeleton-hgt-55 {
	height: 55px;
}
.skeleton-hgt-50 {
	height: 50px;
}
.skeleton-hgt-45 {
	height: 45px;
}
.skeleton-hgt-40 {
	height: 40px;
}
.skeleton-hgt-35 {
	height: 35px;
}
.skeleton-hgt-30 {
	height: 30px;
}
.skeleton-hgt-25 {
	height: 25px;
}
.skeleton-hgt-20 {
	height: 20px;
}


.skeleton-wdh-100 {	
    width: 100%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-95 {	
    width: 95%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-90 {	
    width: 90%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-85 {	
    width: 85%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-80 {	
    width: 80%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-75 {	
    width: 75%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-70 {	
    width: 70%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-65 {	
    width: 65%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-60 {	
    width: 60%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-55 {	
    width: 55%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-50 {	
    width: 50%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-45 {	
    width: 45%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-40 {	
    width: 40%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-35 {	
    width: 35%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-30 {	
    width: 30%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-25 {	
    width: 25%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-20 {
	width: 20%;
	background: var(--skeleton-bkg);
}
.skeleton-wdh-15 {	
    width: 15%; 
	background: var(--skeleton-bkg);
}
.skeleton-wdh-10 {	
    width: 10%; 
	background: var(--skeleton-bkg);
}

.vnchat-panel {
	position: fixed;
	right: 15px;
	bottom: 0;
	width: 360px;
	height: 70dvh;	
	border: solid var(--gray-vl) 1px;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
	background: var(--white);
	z-index: 190;
}
.vnchat-panel-head {
	display: flex;
	align-items: center;
	position: relative;
	height: 50px;
	border-radius: 8px 8px 0 0;
	border-bottom: solid var(--gray-7vl) 1px;
	box-shadow: 0 4px 4px -4px var(--gray-8vl);
	z-index: 1000;
}
.vnchat-panel-body {
	display: block;
	overflow-y: auto;
	position: relative;
	padding-bottom: 10px;
}
.vnchat-panel-foot {
	display: flex;
	align-items: center;
	position: relative;
	bottom: 0;
	border-top: solid var(--gray-8vl) 1px;
	background: none;
}

.chat-container:hover {
	background: var(--drop-down-menu-item-hvr-bkg);
}

.chat-menu {
	position: absolute; 
	width: 180px;
	border: solid var(--h-nav-drop-down-menu-bdr) 1px;
	border-radius: 4px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	background: var(--h-nav-drop-down-menu-bkg);
	z-index: 200;
}

.chat-menu__item {
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 4px;
	background: transparent;
}
.chat-menu__item:hover {
	background: var(--drop-down-menu-item-hvr-bkg);
}

.message-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 10px;
}
.message-container__section {
	display: flex;
	align-items: center;
	padding: 3px;
}
.message-container__section--from {
	justify-content: flex-start;
}
.message-container__section--to {
	justify-content: flex-end;
}
.message-bubble {
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--color-pri-38vl);
}
.message-container__section--from .message-bubble {
	background: var(--gray-8vl);
}
.message-bubble__status {
	font-family: 'semibold', sans-serif;
	font-size: 12px;
	font-style: italic;
}
.message-bubble__status--seen {
	color: var(--color-pri-100-25);
}
.message-bubble__status--not-seen {
	color: var(--gray-15vh);
}
.message-bubble__status--not-sent {

}

.message-input {	
	position: absolute; 
	overflow-y: auto;
	padding: 9px 0 9px 14px;
	white-space: pre-wrap; 
	word-break: break-word; 
	min-width: 310px; 
	max-width: 310px; 
	max-height: 120px;
	height: 40px;
	resize: none; 
	color: black; 
	background: transparent;
}

.matches-menu {
	position: absolute;	
	width: 180px;
	top: 46px;
	border: solid var(--h-nav-drop-down-menu-bdr) 1px;
	border-radius: 4px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	background: var(--h-nav-drop-down-menu-bkg);
}

.matches-menu__item {
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 4px;
	background: transparent;
}
.matches-menu__item:hover {
	background: var(--drop-down-menu-item-hvr-bkg);
}

/*=========
 * display
===========*/
.dsp--non {
    display: none;
}
.dsp--flx {
    display: flex;
}
.dsp--i-flx {
    display: inline-flex;
}
.dsp--blk {
    display: block;
}
.dsp--inl {
	display: inline;
}
.dsp--i-blk {
    display: inline-block;
}

/*============
 * text align
==============*/
.txt--mid {
    text-align: center;
}
.txt--lft {
    text-align: left;
}
.txt--rgt {
    text-align: right;
}

/*============
 * text color
==============*/
.txt--wht {
    color: var(--white);
}
.txt--blk {
    color: var(--black);
}
.txt--thm-vh {
    color: var(--color-pri-vh);
}
.txt--thm-h {
    color: var(--color-pri-h);
}
.txt--thm-m {
    color: var(--color-pri-m);
}
.txt--thm-l {
    color: var(--color-pri-l);
}
.txt--thm-vl {
    color: var(--color-pri-vl);
}
.txt--thm-2vl {
    color: var(--color-pri-2vl);
}
.txt--thm-3vl {
    color: var(--color-pri-3vl);
}
.txt--thm-4vl {
    color: var(--color-pri-4vl);
}

.txt--gry-20vh {
    color: var(--gray-20vh);
}
.txt--gry-10vh {
	color: var(--gray-10vh);
}
.txt--gry-7vh {
	color: var(--gray-7vh);
}
.txt--gry-6vh {
    color: var(--gray-6vh);
}
.txt--gry-5vh {
    color: var(--gray-5vh);
}
.txt--gry-4vh {
    color: var(--gray-4vh);
}
.txt--gry-3vh {
    color: var(--gray-3vh);
}
.txt--gry-2vh {
    color: var(--gray-2vh);
}
.txt--gry-vh {
    color: var(--gray-vh);
}
.txt--gry-h {
    color: var(--gray-h);
}
.txt--gry-m {
    color: var(--gray-m);
}
.txt--gry-l {
    color: var(--gray-l);
}
.txt--gry-vl {
    color: var(--gray-vl);
}
.txt--gry-2vl {
    color: var(--gray-2vl);
}
.txt--gry-3vl {
    color: var(--gray-3vl);
}
.txt--gry-4vl {
    color: var(--gray-4vl);
}
.txt--gry-5vl {
    color: var(--gray-5vl);
}
.txt--gry-6vl {
    color: var(--gray-6vl);
}
.txt--gry-7vl {
    color: var(--gray-7vl);
}
.txt--gry-8vl {
    color: var(--gray-8vl);
}
.txt--gry-9vl {
    color: var(--gray-9vl);
}
.txt--gry-10vl {
    color: var(--gray-10vl);
}
.txt--gry-11vl {
    color: var(--gray-11vl);
}
.txt--ylw-4vh {
	color: var(--color-sec-4vh);
}
.txt--ylw-3vh {
	color: var(--color-sec-3vh);
}
.txt--ylw-2vh {
	color: var(--color-sec-2vh);
}
.txt--ylw-vh {
	color: var(--color-sec-vh);
}
.txt--ylw-h {
	color: var(--color-sec-h);
}
.txt--ylw-m {
	color: var(--color-sec-m);
}
.txt--ylw-l {
	color: var(--color-sec-l);
}
.txt--ylw-vl {
	color: var(--color-sec-vl);
}
.txt--ylw-2vl {
	color: var(--color-sec-2vl);
}
.txt--ylw-3vl {
	color: var(--color-sec-3vl);
}
.txt--ylw-4vl {
	color: var(--color-sec-4vl);
}
.txt--ylw-5vl {
	color: var(--color-sec-5vl);
}
.txt--ylw-6vl {
	color: var(--color-sec-6vl);
}
.txt--red {
    color: var(--red);
}
.txt--wht {
	color: #fff;
}

/*============
 * top margin
==============*/
.mgn-top--0 {
    margin-top: 0;
}
.mgn-top--001 {
    margin-top: 0.0125rem;
}
.mgn-top--002 {
    margin-top: 0.025rem;
}
.mgn-top--003 {
    margin-top: 0.0375rem;
}
.mgn-top--005 {
    margin-top: 0.05rem;
}
.mgn-top--006 {
    margin-top: 0.0625rem;
}
.mgn-top--007 {
    margin-top: 0.075rem;
}
.mgn-top--008 {
    margin-top: 0.0875rem;
}
.mgn-top--01 {
    margin-top: 0.125rem;
}
.mgn-top--02 {
    margin-top: 0.25rem;
}
.mgn-top--03 {
    margin-top: 0.375rem;
}
.mgn-top--05 {
    margin-top: 0.5rem;
}
.mgn-top--06 {
    margin-top: 0.625rem;
}
.mgn-top--07 {
    margin-top: 0.75rem;
}
.mgn-top--08 {
    margin-top: 0.875rem;
}
.mgn-top--1 {
    margin-top: 1rem;
}
.mgn-top--11 {
    margin-top: 1.125rem;
}
.mgn-top--12 {
    margin-top: 1.25rem;
}
.mgn-top--13 {
    margin-top: 1.375rem;
}
.mgn-top--15 {
    margin-top: 1.5rem;
}
.mgn-top--16 {
    margin-top: 1.625rem;
}
.mgn-top--17 {
    margin-top: 1.75rem;
}
.mgn-top--18 {
    margin-top: 1.875rem;
}
.mgn-top--2 {
    margin-top: 2rem;
}
.mgn-top--21 {
    margin-top: 2.125rem;
}
.mgn-top--22 {
    margin-top: 2.25rem;
}
.mgn-top--23 {
    margin-top: 2.375rem;
}
.mgn-top--25 {
    margin-top: 2.5rem;
}
.mgn-top--26 {
    margin-top: 2.625rem;
}
.mgn-top--27 {
    margin-top: 2.75rem;
}
.mgn-top--28 {
    margin-top: 2.875rem;
}
.mgn-top--3 {
    margin-top: 3rem;
}
.mgn-top--31 {
    margin-top: 3.125rem;
}
.mgn-top--32 {
    margin-top: 3.25rem;
}
.mgn-top--33 {
    margin-top: 3.375rem;
}
.mgn-top--35 {
    margin-top: 3.5rem;
}
.mgn-top--36 {
    margin-top: 3.625rem;
}
.mgn-top--37 {
    margin-top: 3.75rem;
}
.mgn-top--38 {
    margin-top: 3.875rem;
}
.mgn-top--4 {
    margin-top: 4rem;
}
.mgn-top--41 {
    margin-top: 4.125rem;
}
.mgn-top--42 {
    margin-top: 4.25rem;
}
.mgn-top--43 {
    margin-top: 4.375rem;
}
.mgn-top--45 {
    margin-top: 4.5rem;
}
.mgn-top--46 {
    margin-top: 4.625rem;
}
.mgn-top--47 {
    margin-top: 4.75rem;
}
.mgn-top--48 {
    margin-top: 4.875rem;
}
.mgn-top--5 {
    margin-top: 5rem;
}
.mgn-top--51 {
    margin-top: 5.125rem;
}
.mgn-top--52 {
    margin-top: 5.25rem;
}
.mgn-top--53 {
    margin-top: 5.375rem;
}
.mgn-top--55 {
    margin-top: 5.5rem;
}
.mgn-top--56 {
    margin-top: 5.625rem;
}
.mgn-top--57 {
    margin-top: 5.75rem;
}
.mgn-top--58 {
    margin-top: 5.875rem;
}
.mgn-top--6 {
    margin-top: 6rem;
}
.mgn-top--61 {
    margin-top: 6.125rem;
}
.mgn-top--62 {
    margin-top: 6.25rem;
}
.mgn-top--63 {
    margin-top: 6.375rem;
}
.mgn-top--65 {
    margin-top: 6.5rem;
}
.mgn-top--66 {
    margin-top: 6.625rem;
}
.mgn-top--67 {
    margin-top: 6.75rem;
}
.mgn-top--68 {
    margin-top: 6.875rem;
}
.mgn-top--7 {
    margin-top: 7rem;
}
.mgn-top--71 {
    margin-top: 7.125rem;
}
.mgn-top--72 {
    margin-top: 7.25rem;
}
.mgn-top--73 {
    margin-top: 7.375rem;
}
.mgn-top--75 {
    margin-top: 7.5rem;
}
.mgn-top--76 {
    margin-top: 7.625rem;
}
.mgn-top--77 {
    margin-top: 7.75rem;
}
.mgn-top--78 {
    margin-top: 7.875rem;
}

/*====================
 * negative top margin
======================*/
.-mgn-top--001 {
    margin-top: -0.0125rem;
}
.-mgn-top--002 {
    margin-top: -0.025rem;
}
.-mgn-top--003 {
    margin-top: -0.0375rem;
}
.-mgn-top--005 {
    margin-top: -0.05rem;
}
.-mgn-top--006 {
    margin-top: -0.0625rem;
}
.-mgn-top--007 {
    margin-top: -0.075rem;
}
.-mgn-top--008 {
    margin-top: -0.0875rem;
}
.-mgn-top--01 {
    margin-top: -0.125rem;
}
.-mgn-top--02 {
    margin-top: -0.25rem;
}
.-mgn-top--03 {
    margin-top: -0.375rem;
}
.-mgn-top--05 {
    margin-top: -0.5rem;
}
.-mgn-top--06 {
    margin-top: -0.625rem;
}
.-mgn-top--07 {
    margin-top: -0.75rem;
}
.-mgn-top--08 {
    margin-top: -0.875rem;
}
.-mgn-top--1 {
    margin-top: -1rem;
}
.-mgn-top--11 {
    margin-top: -1.125rem;
}
.-mgn-top--12 {
    margin-top: -1.25rem;
}
.-mgn-top--13 {
    margin-top: -1.375rem;
}
.-mgn-top--15 {
    margin-top: -1.5rem;
}
.-mgn-top--16 {
    margin-top: -1.625rem;
}
.-mgn-top--17 {
    margin-top: -1.75rem;
}
.-mgn-top--18 {
    margin-top: -1.875rem;
}
.-mgn-top--2 {
    margin-top: -2rem;
}
.-mgn-top--21 {
    margin-top: -2.125rem;
}
.-mgn-top--22 {
    margin-top: -2.25rem;
}
.-mgn-top--23 {
    margin-top: -2.375rem;
}
.-mgn-top--25 {
    margin-top: -2.5rem;
}
.-mgn-top--26 {
    margin-top: -2.625rem;
}
.-mgn-top--27 {
    margin-top: -2.75rem;
}
.-mgn-top--28 {
    margin-top: -2.875rem;
}
.-mgn-top--3 {
    margin-top: -3rem;
}
.-mgn-top--31 {
    margin-top: -3.125rem;
}
.-mgn-top--32 {
    margin-top: -3.25rem;
}
.-mgn-top--33 {
    margin-top: -3.375rem;
}
.-mgn-top--35 {
    margin-top: -3.5rem;
}
.-mgn-top--36 {
    margin-top: -3.625rem;
}
.-mgn-top--37 {
    margin-top: -3.75rem;
}
.-mgn-top--38 {
    margin-top: -3.875rem;
}
.-mgn-top--4 {
    margin-top: -4rem;
}
.-mgn-top--41 {
    margin-top: -4.125rem;
}
.-mgn-top--42 {
    margin-top: -4.25rem;
}
.-mgn-top--43 {
    margin-top: -4.375rem;
}
.-mgn-top--45 {
    margin-top: -4.5rem;
}
.-mgn-top--46 {
    margin-top: -4.625rem;
}
.-mgn-top--47 {
    margin-top: -4.75rem;
}
.-mgn-top--48 {
    margin-top: -4.875rem;
}
.-mgn-top--5 {
    margin-top: -5rem;
}
.-mgn-top--51 {
    margin-top: -5.125rem;
}
.-mgn-top--52 {
    margin-top: -5.25rem;
}
.-mgn-top--53 {
    margin-top: -5.375rem;
}
.-mgn-top--55 {
    margin-top: -5.5rem;
}
.-mgn-top--56 {
    margin-top: -5.625rem;
}
.-mgn-top--57 {
    margin-top: -5.75rem;
}
.-mgn-top--58 {
    margin-top: -5.875rem;
}
.-mgn-top--6 {
    margin-top: -6rem;
}
.-mgn-top--61 {
    margin-top: -6.125rem;
}
.-mgn-top--62 {
    margin-top: -6.25rem;
}
.-mgn-top--63 {
    margin-top: -6.375rem;
}

/*===============
 * bottom margin
=================*/
.mgn-btm--0 {
    margin-bottom: 0;
}
.mgn-btm--001 {
    margin-bottom: 0.0125rem;
}
.mgn-btm--002 {
    margin-bottom: 0.025rem;
}
.mgn-btm--003 {
    margin-bottom: 0.0375rem;
}
.mgn-btm--005 {
    margin-bottom: 0.05rem;
}
.mgn-btm--006 {
    margin-bottom: 0.0625rem;
}
.mgn-btm--007 {
    margin-bottom: 0.075rem;
}
.mgn-btm--008 {
    margin-bottom: 0.0875rem;
}
.mgn-btm--01 {
    margin-bottom: 0.125rem;
}
.mgn-btm--02 {
    margin-bottom: 0.25rem;
}
.mgn-btm--03 {
    margin-bottom: 0.375rem;
}
.mgn-btm--05 {
    margin-bottom: 0.5rem;
}
.mgn-btm--06 {
    margin-bottom: 0.625rem;
}
.mgn-btm--07 {
    margin-bottom: 0.75rem;
}
.mgn-btm--08 {
    margin-bottom: 0.875rem;
}
.mgn-btm--1 {
    margin-bottom: 1rem;
}
.mgn-btm--11 {
    margin-bottom: 1.125rem;
}
.mgn-btm--12 {
    margin-bottom: 1.25rem;
}
.mgn-btm--13 {
    margin-bottom: 1.375rem;
}
.mgn-btm--15 {
    margin-bottom: 1.5rem;
}
.mgn-btm--16 {
    margin-bottom: 1.625rem;
}
.mgn-btm--17 {
    margin-bottom: 1.75rem;
}
.mgn-btm--18 {
    margin-bottom: 1.875rem;
}
.mgn-btm--2 {
    margin-bottom: 2rem;
}
.mgn-btm--21 {
    margin-bottom: 2.125rem;
}
.mgn-btm--22 {
    margin-bottom: 2.25rem;
}
.mgn-btm--23 {
    margin-bottom: 2.375rem;
}
.mgn-btm--25 {
    margin-bottom: 2.5rem;
}
.mgn-btm--26 {
    margin-bottom: 2.625rem;
}
.mgn-btm--27 {
    margin-bottom: 2.75rem;
}
.mgn-btm--28 {
    margin-bottom: 2.875rem;
}
.mgn-btm--3 {
    margin-bottom: 3rem;
}
.mgn-btm--31 {
    margin-bottom: 3.125rem;
}
.mgn-btm--32 {
    margin-bottom: 3.25rem;
}
.mgn-btm--33 {
    margin-bottom: 3.375rem;
}
.mgn-btm--35 {
    margin-bottom: 3.5rem;
}
.mgn-btm--36 {
    margin-bottom: 3.625rem;
}
.mgn-btm--37 {
    margin-bottom: 3.75rem;
}
.mgn-btm--38 {
    margin-bottom: 3.875rem;
}
.mgn-btm--4 {
    margin-bottom: 4rem;
}
.mgn-btm--41 {
    margin-bottom: 4.125rem;
}
.mgn-btm--42 {
    margin-bottom: 4.25rem;
}
.mgn-btm--43 {
    margin-bottom: 4.375rem;
}
.mgn-btm--45 {
    margin-bottom: 4.5rem;
}
.mgn-btm--46 {
    margin-bottom: 4.625rem;
}
.mgn-btm--47 {
    margin-bottom: 4.75rem;
}
.mgn-btm--48 {
    margin-bottom: 4.875rem;
}
.mgn-btm--5 {
    margin-bottom: 5rem;
}
.mgn-btm--51 {
    margin-bottom: 5.125rem;
}
.mgn-btm--52 {
    margin-bottom: 5.25rem;
}
.mgn-btm--53 {
    margin-bottom: 5.375rem;
}
.mgn-btm--55 {
    margin-bottom: 5.5rem;
}
.mgn-btm--56 {
    margin-bottom: 5.625rem;
}
.mgn-btm--57 {
    margin-bottom: 5.75rem;
}
.mgn-btm--58 {
    margin-bottom: 5.875rem;
}
.mgn-btm--6 {
    margin-bottom: 6rem;
}
.mgn-btm--61 {
    margin-bottom: 6.125rem;
}
.mgn-btm--62 {
    margin-bottom: 6.25rem;
}
.mgn-btm--63 {
    margin-bottom: 6.375rem;
}

/*=============
 * left margin
===============*/
.mgn-lft--0 {
    margin-left: 0;
}
.mgn-lft--001 {
    margin-left: 0.0125rem;
}
.mgn-lft--002 {
    margin-left: 0.025rem;
}
.mgn-lft--003 {
    margin-left: 0.0375rem;
}
.mgn-lft--005 {
    margin-left: 0.05rem;
}
.mgn-lft--006 {
    margin-left: 0.0625rem;
}
.mgn-lft--007 {
    margin-left: 0.075rem;
}
.mgn-lft--008 {
    margin-left: 0.0875rem;
}
.mgn-lft--01 {
    margin-left: 0.125rem;
}
.mgn-lft--02 {
    margin-left: 0.25rem;
}
.mgn-lft--03 {
    margin-left: 0.375rem;
}
.mgn-lft--05 {
    margin-left: 0.5rem;
}
.mgn-lft--06 {
    margin-left: 0.625rem;
}
.mgn-lft--07 {
    margin-left: 0.75rem;
}
.mgn-lft--08 {
    margin-left: 0.875rem;
}
.mgn-lft--1 {
    margin-left: 1rem;
}
.mgn-lft--11 {
    margin-left: 1.125rem;
}
.mgn-lft--12 {
    margin-left: 1.25rem;
}
.mgn-lft--13 {
    margin-left: 1.375rem;
}
.mgn-lft--15 {
    margin-left: 1.5rem;
}
.mgn-lft--16 {
    margin-left: 1.625rem;
}
.mgn-lft--17 {
    margin-left: 1.75rem;
}
.mgn-lft--18 {
    margin-left: 1.875rem;
}
.mgn-lft--2 {
    margin-left: 2rem;
}
.mgn-lft--21 {
    margin-left: 2.125rem;
}
.mgn-lft--22 {
    margin-left: 2.25rem;
}
.mgn-lft--23 {
    margin-left: 2.375rem;
}
.mgn-lft--25 {
    margin-left: 2.5rem;
}
.mgn-lft--26 {
    margin-left: 2.625rem;
}
.mgn-lft--27 {
    margin-left: 2.75rem;
}
.mgn-lft--28 {
    margin-left: 2.875rem;
}
.mgn-lft--3 {
    margin-left: 3rem;
}
.mgn-lft--31 {
    margin-left: 3.125rem;
}
.mgn-lft--32 {
    margin-left: 3.25rem;
}
.mgn-lft--33 {
    margin-left: 3.375rem;
}
.mgn-lft--35 {
    margin-left: 3.5rem;
}
.mgn-lft--36 {
    margin-left: 3.625rem;
}
.mgn-lft--37 {
    margin-left: 3.75rem;
}
.mgn-lft--38 {
    margin-left: 3.875rem;
}
.mgn-lft--4 {
    margin-left: 4rem;
}
.mgn-lft--41 {
    margin-left: 4.125rem;
}
.mgn-lft--42 {
    margin-left: 4.25rem;
}
.mgn-lft--43 {
    margin-left: 4.375rem;
}
.mgn-lft--45 {
    margin-left: 4.5rem;
}
.mgn-lft--46 {
    margin-left: 4.625rem;
}
.mgn-lft--47 {
    margin-left: 4.75rem;
}
.mgn-lft--48 {
    margin-left: 4.875rem;
}
.mgn-lft--5 {
    margin-left: 5rem;
}
.mgn-lft--51 {
    margin-left: 5.125rem;
}
.mgn-lft--52 {
    margin-left: 5.25rem;
}
.mgn-lft--53 {
    margin-left: 5.375rem;
}
.mgn-lft--55 {
    margin-left: 5.5rem;
}
.mgn-lft--56 {
    margin-left: 5.625rem;
}
.mgn-lft--57 {
    margin-left: 5.75rem;
}
.mgn-lft--58 {
    margin-left: 5.875rem;
}
.mgn-lft--6 {
    margin-left: 6rem;
}
.mgn-lft--61 {
    margin-left: 6.125rem;
}
.mgn-lft--62 {
    margin-left: 6.25rem;
}
.mgn-lft--63 {
    margin-left: 6.375rem;
}

/*==============
 * right margin
================*/
.mgn-rgt--0 {
    margin-right: 0;
}
.mgn-rgt--001 {
    margin-right: 0.0125rem;
}
.mgn-rgt--002 {
    margin-right: 0.025rem;
}
.mgn-rgt--003 {
    margin-right: 0.0375rem;
}
.mgn-rgt--005 {
    margin-right: 0.05rem;
}
.mgn-rgt--006 {
    margin-right: 0.0625rem;
}
.mgn-rgt--007 {
    margin-right: 0.075rem;
}
.mgn-rgt--008 {
    margin-right: 0.0875rem;
}
.mgn-rgt--01 {
    margin-right: 0.125rem;
}
.mgn-rgt--02 {
    margin-right: 0.25rem;
}
.mgn-rgt--03 {
    margin-right: 0.375rem;
}
.mgn-rgt--05 {
    margin-right: 0.5rem;
}
.mgn-rgt--06 {
    margin-right: 0.625rem;
}
.mgn-rgt--07 {
    margin-right: 0.75rem;
}
.mgn-rgt--08 {
    margin-right: 0.875rem;
}
.mgn-rgt--1 {
    margin-right: 1rem;
}
.mgn-rgt--11 {
    margin-right: 1.125rem;
}
.mgn-rgt--12 {
    margin-right: 1.25rem;
}
.mgn-rgt--13 {
    margin-right: 1.375rem;
}
.mgn-rgt--15 {
    margin-right: 1.5rem;
}
.mgn-rgt--16 {
    margin-right: 1.625rem;
}
.mgn-rgt--17 {
    margin-right: 1.75rem;
}
.mgn-rgt--18 {
    margin-right: 1.875rem;
}
.mgn-rgt--2 {
    margin-right: 2rem;
}
.mgn-rgt--21 {
    margin-right: 2.125rem;
}
.mgn-rgt--22 {
    margin-right: 2.25rem;
}
.mgn-rgt--23 {
    margin-right: 2.375rem;
}
.mgn-rgt--25 {
    margin-right: 2.5rem;
}
.mgn-rgt--26 {
    margin-right: 2.625rem;
}
.mgn-rgt--27 {
    margin-right: 2.75rem;
}
.mgn-rgt--28 {
    margin-right: 2.875rem;
}
.mgn-rgt--3 {
    margin-right: 3rem;
}
.mgn-rgt--31 {
    margin-right: 3.125rem;
}
.mgn-rgt--32 {
    margin-right: 3.25rem;
}
.mgn-rgt--33 {
    margin-right: 3.375rem;
}
.mgn-rgt--35 {
    margin-right: 3.5rem;
}
.mgn-rgt--36 {
    margin-right: 3.625rem;
}
.mgn-rgt--37 {
    margin-right: 3.75rem;
}
.mgn-rgt--38 {
    margin-right: 3.875rem;
}
.mgn-rgt--4 {
    margin-right: 4rem;
}
.mgn-rgt--41 {
    margin-right: 4.125rem;
}
.mgn-rgt--42 {
    margin-right: 4.25rem;
}
.mgn-rgt--43 {
    margin-right: 4.375rem;
}
.mgn-rgt--45 {
    margin-right: 4.5rem;
}
.mgn-rgt--46 {
    margin-right: 4.625rem;
}
.mgn-rgt--47 {
    margin-right: 4.75rem;
}
.mgn-rgt--48 {
    margin-right: 4.875rem;
}
.mgn-rgt--5 {
    margin-right: 5rem;
}
.mgn-rgt--51 {
    margin-right: 5.125rem;
}
.mgn-rgt--52 {
    margin-right: 5.25rem;
}
.mgn-rgt--53 {
    margin-right: 5.375rem;
}
.mgn-rgt--55 {
    margin-right: 5.5rem;
}
.mgn-rgt--56 {
    margin-right: 5.625rem;
}
.mgn-rgt--57 {
    margin-right: 5.75rem;
}
.mgn-rgt--58 {
    margin-right: 5.875rem;
}
.mgn-rgt--6 {
    margin-right: 6rem;
}
.mgn-rgt--61 {
    margin-right: 6.125rem;
}
.mgn-rgt--62 {
    margin-right: 6.25rem;
}
.mgn-rgt--63 {
    margin-right: 6.375rem;
}


/*=====================
 * left & right margin
=======================*/
.mgn-x--auto {
    margin-left: auto;
    margin-right: auto;
}
.mgn-x--0 {
    margin-left: 0;
    margin-right: 0;
}
.mgn-x--001 {
    margin-left: 0.0125rem;
    margin-right: 0.0125rem;
}
.mgn-x--002 {
    margin-left: 0.025rem;
    margin-right: 0.025rem;
}
.mgn-x--003 {
    margin-left: 0.0375rem;
    margin-right: 0.0375rem;
}
.mgn-x--005 {
    margin-left: 0.05rem;
    margin-right: 0.05rem;
}
.mgn-x--006 {
    margin-left: 0.0625rem;
    margin-right: 0.0625rem;
}
.mgn-x--007 {
    margin-left: 0.075rem;
    margin-right: 0.075rem;
}
.mgn-x--008 {
    margin-left: 0.0875rem;
    margin-right: 0.0875rem;
}
.mgn-x--01 {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}
.mgn-x--02 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.mgn-x--03 {
    margin-left: 0.375rem;
    margin-right: 0.375rem;
}
.mgn-x--05 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mgn-x--06 {
    margin-left: 0.625rem;
    margin-right: 0.625rem;
}
.mgn-x--07 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
.mgn-x--08 {
    margin-left: 0.875rem;
    margin-right: 0.875rem;
}
.mgn-x--1 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mgn-x--11 {
    margin-left: 1.125rem;
    margin-right: 1.125rem;
}
.mgn-x--12 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
.mgn-x--13 {
    margin-left: 1.375rem;
    margin-right: 1.375rem;
}
.mgn-x--15 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.mgn-x--16 {
    margin-left: 1.625rem;
    margin-right: 1.625rem;
}
.mgn-x--17 {
    margin-left: 1.75rem;
    margin-right: 1.75rem;
}
.mgn-x--18 {
    margin-left: 1.875rem;
    margin-right: 1.875rem;
}
.mgn-x--2 {
    margin-left: 2rem;
    margin-right: 2rem;
}
.mgn-x--21 {
   margin-left: 2.125rem;
    margin-right: 2.125rem;
}
.mgn-x--22 {
    margin-left: 2.25rem;
    margin-right: 2.25rem;
}
.mgn-x--23 {
    margin-left: 2.375rem;
    margin-right: 2.375rem;
}
.mgn-x--25 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}
.mgn-x--26 {
    margin-left: 2.625rem;
    margin-right: 2.625rem;
}
.mgn-x--27 {
    margin-left: 2.75rem;
    margin-right: 2.75rem;
}
.mgn-x--28 {
    margin-left: 2.875rem;
    margin-right: 2.875rem;
}
.mgn-x--3 {
    margin-left: 3rem;
    margin-right: 3rem;
}
.mgn-x--31 {
    margin-left: 3.125rem;
    margin-right: 3.125rem;
}
.mgn-x--32 {
    margin-left: 3.25rem;
    margin-right: 3.25rem;
}
.mgn-x--33 {
    margin-left: 3.375rem;
    margin-right: 3.375rem;
}
.mgn-x--35 {
    margin-left: 3.5rem;
    margin-right: 3.5rem;
}
.mgn-x--36 {
    margin-left: 3.625rem;
    margin-right: 3.625rem;
}
.mgn-x--37 {
    margin-left: 3.75rem;
    margin-right: 3.75rem;
}
.mgn-x--38 {
    margin-left: 3.875rem;
    margin-right: 3.875rem;
}
.mgn-x--4 {
    margin-left: 4rem;
    margin-right: 4rem;
}
.mgn-x--41 {
    margin-left: 4.125rem;
    margin-right: 4.125rem;
}
.mgn-x--42 {
    margin-left: 4.25rem;
    margin-right: 4.25rem;
}
.mgn-x--43 {
    margin-left: 4.375rem;
    margin-right: 4.375rem;
}
.mgn-x--45 {
    margin-left: 4.5rem;
    margin-right: 4.5rem;
}
.mgn-x--46 {
    margin-left: 4.625rem;
    margin-right: 4.625rem;
}
.mgn-x--47 {
    margin-left: 4.75rem;
    margin-right: 4.75rem;
}
.mgn-x--48 {
    margin-left: 4.875rem;
    margin-right: 4.875rem;
}
.mgn-x--5 {
    margin-left: 5rem;
    margin-right: 5rem;
}
.mgn-x--51 {
    margin-left: 5.125rem;
    margin-right: 5.125rem;
}
.mgn-x--52 {
    margin-left: 5.25rem;
    margin-right: 5.25rem;
}
.mgn-x--53 {
    margin-left: 5.375rem;
    margin-right: 5.375rem;
}
.mgn-x--55 {
    margin-left: 5.5rem;
    margin-right: 5.5rem;
}
.mgn-x--56 {
    margin-left: 5.625rem;
    margin-right: 5.625rem;
}
.mgn-x--57 {
    margin-left: 5.75rem;
    margin-right: 5.75rem;
}
.mgn-x--58 {
    margin-left: 5.875rem;
    margin-right: 5.875rem;
}
.mgn-x--6 {
    margin-left: 6rem;
    margin-right: 6rem;
}
.mgn-x--61 {
    margin-left: 6.125rem;
    margin-right: 6.125rem;
}
.mgn-x--62 {
    margin-left: 6.25rem;
    margin-right: 6.25rem;
}
.mgn-x--63 {
    margin-left: 6.375rem;
    margin-right: 6.375rem;
}

/*=====================
 * top & bottom margin
=======================*/
.mgn-y--auto {
    margin-top: auto;
    margin-bottom: auto;
}
.mgn-y--0 {
    margin-top: 0;
    margin-bottom: 0;
}
.mgn-y--001 {
    margin-top: 0.0125rem;
    margin-bottom: 0.0125rem;
}
.mgn-y--002 {
    margin-top: 0.025rem;
    margin-bottom: 0.025rem;
}
.mgn-y--003 {
    margin-top: 0.0375rem;
    margin-bottom: 0.0375rem;
}
.mgn-y--005 {
    margin-top: 0.05rem;
    margin-bottom: 0.05rem;
}
.mgn-y--006 {
    margin-top: 0.0625rem;
    margin-bottom: 0.0625rem;
}
.mgn-y--007 {
    margin-top: 0.075rem;
    margin-bottom: 0.075rem;
}
.mgn-y--008 {
    margin-top: 0.0875rem;
    margin-bottom: 0.0875rem;
}
.mgn-y--01 {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
}
.mgn-y--02 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.mgn-y--03 {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
}
.mgn-y--05 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.mgn-y--06 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}
.mgn-y--07 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.mgn-y--08 {
    margin-top: 0.875rem;
    margin-bottom: 0.875rem;
}
.mgn-y--1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.mgn-y--11 {
    margin-top: 1.125rem;
    margin-bottom: 1.125rem;
}
.mgn-y--12 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.mgn-y--13 {
    margin-top: 1.375rem;
    margin-bottom: 1.375rem;
}
.mgn-y--15 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.mgn-y--16 {
    margin-top: 1.625rem;
    margin-bottom: 1.625rem;
}
.mgn-y--17 {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}
.mgn-y--18 {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
}
.mgn-y--2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.mgn-y--21 {
   margin-top: 2.125rem;
    margin-bottom: 2.125rem;
}
.mgn-y--22 {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
}
.mgn-y--23 {
    margin-top: 2.375rem;
    margin-bottom: 2.375rem;
}
.mgn-y--25 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.mgn-y--26 {
    margin-top: 2.625rem;
    margin-bottom: 2.625rem;
}
.mgn-y--27 {
    margin-top: 2.75rem;
    margin-bottom: 2.75rem;
}
.mgn-y--28 {
    margin-top: 2.875rem;
    margin-bottom: 2.875rem;
}
.mgn-y--3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.mgn-y--31 {
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
}
.mgn-y--32 {
    margin-top: 3.25rem;
    margin-bottom: 3.25rem;
}
.mgn-y--33 {
    margin-top: 3.375rem;
    margin-bottom: 3.375rem;
}
.mgn-y--35 {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}
.mgn-y--36 {
    margin-top: 3.625rem;
    margin-bottom: 3.625rem;
}
.mgn-y--37 {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
}
.mgn-y--38 {
    margin-top: 3.875rem;
    margin-bottom: 3.875rem;
}
.mgn-y--4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.mgn-y--41 {
    margin-top: 4.125rem;
    margin-bottom: 4.125rem;
}
.mgn-y--42 {
    margin-top: 4.25rem;
    margin-bottom: 4.25rem;
}
.mgn-y--43 {
    margin-top: 4.375rem;
    margin-bottom: 4.375rem;
}
.mgn-y--45 {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
}
.mgn-y--46 {
    margin-top: 4.625rem;
    margin-bottom: 4.625rem;
}
.mgn-y--47 {
    margin-top: 4.75rem;
    margin-bottom: 4.75rem;
}
.mgn-y--48 {
    margin-top: 4.875rem;
    margin-bottom: 4.875rem;
}
.mgn-y--5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.mgn-y--51 {
    margin-top: 5.125rem;
    margin-bottom: 5.125rem;
}
.mgn-y--52 {
    margin-top: 5.25rem;
    margin-bottom: 5.25rem;
}
.mgn-y--53 {
    margin-top: 5.375rem;
    margin-bottom: 5.375rem;
}
.mgn-y--55 {
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
}
.mgn-y--56 {
    margin-top: 5.625rem;
    margin-bottom: 5.625rem;
}
.mgn-y--57 {
    margin-top: 5.75rem;
    margin-bottom: 5.75rem;
}
.mgn-y--58 {
    margin-top: 5.875rem;
    margin-bottom: 5.875rem;
}
.mgn-y--6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}
.mgn-y--61 {
    margin-top: 6.125rem;
    margin-bottom: 6.125rem;
}
.mgn-y--62 {
    margin-top: 6.25rem;
    margin-bottom: 6.25rem;
}
.mgn-y--63 {
    margin-top: 6.375rem;
    margin-bottom: 6.375rem;
}

/*=============
 * top padding
===============*/
.pad-top--0 {
    padding-top: 0;
}
.pad-top--001 {
    padding-top: 0.0125rem;
}
.pad-top--002 {
    padding-top: 0.025rem;
}
.pad-top--003 {
    padding-top: 0.0375rem;
}
.pad-top--005 {
    padding-top: 0.05rem;
}
.pad-top--006 {
    padding-top: 0.0625rem;
}
.pad-top--007 {
    padding-top: 0.075rem;
}
.pad-top--008 {
    padding-top: 0.0875rem;
}
.pad-top--01 {
    padding-top: 0.125rem;
}
.pad-top--02 {
    padding-top: 0.25rem;
}
.pad-top--03 {
    padding-top: 0.375rem;
}
.pad-top--05 {
    padding-top: 0.5rem;
}
.pad-top--06 {
    padding-top: 0.625rem;
}
.pad-top--07 {
    padding-top: 0.75rem;
}
.pad-top--08 {
    padding-top: 0.875rem;
}
.pad-top--1 {
    padding-top: 1rem;
}
.pad-top--11 {
    padding-top: 1.125rem;
}
.pad-top--12 {
    padding-top: 1.25rem;
}
.pad-top--13 {
    padding-top: 1.375rem;
}
.pad-top--15 {
    padding-top: 1.5rem;
}
.pad-top--16 {
    padding-top: 1.625rem;
}
.pad-top--17 {
    padding-top: 1.75rem;
}
.pad-top--18 {
    padding-top: 1.875rem;
}
.pad-top--2 {
    padding-top: 2rem;
}
.pad-top--21 {
    padding-top: 2.125rem;
}
.pad-top--22 {
    padding-top: 2.25rem;
}
.pad-top--23 {
    padding-top: 2.375rem;
}
.pad-top--25 {
    padding-top: 2.5rem;
}
.pad-top--26 {
    padding-top: 2.625rem;
}
.pad-top--27 {
    padding-top: 2.75rem;
}
.pad-top--28 {
    padding-top: 2.875rem;
}
.pad-top--3 {
    padding-top: 3rem;
}
.pad-top--31 {
    padding-top: 3.125rem;
}
.pad-top--32 {
    padding-top: 3.25rem;
}
.pad-top--33 {
    padding-top: 3.375rem;
}
.pad-top--35 {
    padding-top: 3.5rem;
}
.pad-top--36 {
    padding-top: 3.625rem;
}
.pad-top--37 {
    padding-top: 3.75rem;
}
.pad-top--38 {
    padding-top: 3.875rem;
}
.pad-top--4 {
    padding-top: 4rem;
}
.pad-top--41 {
    padding-top: 4.125rem;
}
.pad-top--42 {
    padding-top: 4.25rem;
}
.pad-top--43 {
    padding-top: 4.375rem;
}
.pad-top--45 {
    padding-top: 4.5rem;
}
.pad-top--46 {
    padding-top: 4.625rem;
}
.pad-top--47 {
    padding-top: 4.75rem;
}
.pad-top--48 {
    padding-top: 4.875rem;
}
.pad-top--5 {
    padding-top: 5rem;
}
.pad-top--51 {
    padding-top: 5.125rem;
}
.pad-top--52 {
    padding-top: 5.25rem;
}
.pad-top--53 {
    padding-top: 5.375rem;
}
.pad-top--55 {
    padding-top: 5.5rem;
}
.pad-top--56 {
    padding-top: 5.625rem;
}
.pad-top--57 {
    padding-top: 5.75rem;
}
.pad-top--58 {
    padding-top: 5.875rem;
}
.pad-top--6 {
    padding-top: 6rem;
}
.pad-top--61 {
    padding-top: 6.125rem;
}
.pad-top--62 {
    padding-top: 6.25rem;
}
.pad-top--63 {
    padding-top: 6.375rem;
}

/*================
 * bottom padding
==================*/
.pad-btm--0 {
    padding-bottom: 0;
}
.pad-btm--001 {
    padding-bottom: 0.0125rem;
}
.pad-btm--002 {
    padding-bottom: 0.025rem;
}
.pad-btm--003 {
    padding-bottom: 0.0375rem;
}
.pad-btm--005 {
    padding-bottom: 0.05rem;
}
.pad-btm--006 {
    padding-bottom: 0.0625rem;
}
.pad-btm--007 {
    padding-bottom: 0.075rem;
}
.pad-btm--008 {
    padding-bottom: 0.0875rem;
}
.pad-btm--01 {
    padding-bottom: 0.125rem;
}
.pad-btm--02 {
    padding-bottom: 0.25rem;
}
.pad-btm--03 {
    padding-bottom: 0.375rem;
}
.pad-btm--05 {
    padding-bottom: 0.5rem;
}
.pad-btm--06 {
    padding-bottom: 0.625rem;
}
.pad-btm--07 {
    padding-bottom: 0.75rem;
}
.pad-btm--08 {
    padding-bottom: 0.875rem;
}
.pad-btm--1 {
    padding-bottom: 1rem;
}
.pad-btm--11 {
    padding-bottom: 1.125rem;
}
.pad-btm--12 {
    padding-bottom: 1.25rem;
}
.pad-btm--13 {
    padding-bottom: 1.375rem;
}
.pad-btm--15 {
    padding-bottom: 1.5rem;
}
.pad-btm--16 {
    padding-bottom: 1.625rem;
}
.pad-btm--17 {
    padding-bottom: 1.75rem;
}
.pad-btm--18 {
    padding-bottom: 1.875rem;
}
.pad-btm--2 {
    padding-bottom: 2rem;
}
.pad-btm--21 {
    padding-bottom: 2.125rem;
}
.pad-btm--22 {
    padding-bottom: 2.25rem;
}
.pad-btm--23 {
    padding-bottom: 2.375rem;
}
.pad-btm--25 {
    padding-bottom: 2.5rem;
}
.pad-btm--26 {
    padding-bottom: 2.625rem;
}
.pad-btm--27 {
    padding-bottom: 2.75rem;
}
.pad-btm--28 {
    padding-bottom: 2.875rem;
}
.pad-btm--3 {
    padding-bottom: 3rem;
}
.pad-btm--31 {
    padding-bottom: 3.125rem;
}
.pad-btm--32 {
    padding-bottom: 3.25rem;
}
.pad-btm--33 {
    padding-bottom: 3.375rem;
}
.pad-btm--35 {
    padding-bottom: 3.5rem;
}
.pad-btm--36 {
    padding-bottom: 3.625rem;
}
.pad-btm--37 {
    padding-bottom: 3.75rem;
}
.pad-btm--38 {
    padding-bottom: 3.875rem;
}
.pad-btm--4 {
    padding-bottom: 4rem;
}
.pad-btm--41 {
    padding-bottom: 4.125rem;
}
.pad-btm--42 {
    padding-bottom: 4.25rem;
}
.pad-btm--43 {
    padding-bottom: 4.375rem;
}
.pad-btm--45 {
    padding-bottom: 4.5rem;
}
.pad-btm--46 {
    padding-bottom: 4.625rem;
}
.pad-btm--47 {
    padding-bottom: 4.75rem;
}
.pad-btm--48 {
    padding-bottom: 4.875rem;
}
.pad-btm--5 {
    padding-bottom: 5rem;
}
.pad-btm--51 {
    padding-bottom: 5.125rem;
}
.pad-btm--52 {
    padding-bottom: 5.25rem;
}
.pad-btm--53 {
    padding-bottom: 5.375rem;
}
.pad-btm--55 {
    padding-bottom: 5.5rem;
}
.pad-btm--56 {
    padding-bottom: 5.625rem;
}
.pad-btm--57 {
    padding-bottom: 5.75rem;
}
.pad-btm--58 {
    padding-bottom: 5.875rem;
}
.pad-btm--6 {
    padding-bottom: 6rem;
}
.pad-btm--61 {
    padding-bottom: 6.125rem;
}
.pad-btm--62 {
    padding-bottom: 6.25rem;
}
.pad-btm--63 {
    padding-bottom: 6.375rem;
}
.pad-btm--65 {
    padding-bottom: 6.5rem;
}
.pad-btm--66 {
    padding-bottom: 6.625rem;
}

/*==============
 * left padding
================*/
.pad-lft--0 {
    padding-left: 0;
}
.pad-lft--001 {
    padding-left: 0.0125rem;
}
.pad-lft--002 {
    padding-left: 0.025rem;
}
.pad-lft--003 {
    padding-left: 0.0375rem;
}
.pad-lft--005 {
    padding-left: 0.05rem;
}
.pad-lft--006 {
    padding-left: 0.0625rem;
}
.pad-lft--007 {
    padding-left: 0.075rem;
}
.pad-lft--008 {
    padding-left: 0.0875rem;
}
.pad-lft--01 {
    padding-left: 0.125rem;
}
.pad-lft--02 {
    padding-left: 0.25rem;
}
.pad-lft--03 {
    padding-left: 0.375rem;
}
.pad-lft--05 {
    padding-left: 0.5rem;
}
.pad-lft--06 {
    padding-left: 0.625rem;
}
.pad-lft--07 {
    padding-left: 0.75rem;
}
.pad-lft--08 {
    padding-left: 0.875rem;
}
.pad-lft--1 {
    padding-left: 1rem;
}
.pad-lft--11 {
    padding-left: 1.125rem;
}
.pad-lft--12 {
    padding-left: 1.25rem;
}
.pad-lft--13 {
    padding-left: 1.375rem;
}
.pad-lft--15 {
    padding-left: 1.5rem;
}
.pad-lft--16 {
    padding-left: 1.625rem;
}
.pad-lft--17 {
    padding-left: 1.75rem;
}
.pad-lft--18 {
    padding-left: 1.875rem;
}
.pad-lft--2 {
    padding-left: 2rem;
}
.pad-lft--21 {
    padding-left: 2.125rem;
}
.pad-lft--22 {
    padding-left: 2.25rem;
}
.pad-lft--23 {
    padding-left: 2.375rem;
}
.pad-lft--25 {
    padding-left: 2.5rem;
}
.pad-lft--26 {
    padding-left: 2.625rem;
}
.pad-lft--27 {
    padding-left: 2.75rem;
}
.pad-lft--28 {
    padding-left: 2.875rem;
}
.pad-lft--3 {
    padding-left: 3rem;
}
.pad-lft--31 {
    padding-left: 3.125rem;
}
.pad-lft--32 {
    padding-left: 3.25rem;
}
.pad-lft--33 {
    padding-left: 3.375rem;
}
.pad-lft--35 {
    padding-left: 3.5rem;
}
.pad-lft--36 {
    padding-left: 3.625rem;
}
.pad-lft--37 {
    padding-left: 3.75rem;
}
.pad-lft--38 {
    padding-left: 3.875rem;
}
.pad-lft--4 {
    padding-left: 4rem;
}
.pad-lft--41 {
    padding-left: 4.125rem;
}
.pad-lft--42 {
    padding-left: 4.25rem;
}
.pad-lft--43 {
    padding-left: 4.375rem;
}
.pad-lft--45 {
    padding-left: 4.5rem;
}
.pad-lft--46 {
    padding-left: 4.625rem;
}
.pad-lft--47 {
    padding-left: 4.75rem;
}
.pad-lft--48 {
    padding-left: 4.875rem;
}
.pad-lft--5 {
    padding-left: 5rem;
}
.pad-lft--51 {
    padding-left: 5.125rem;
}
.pad-lft--52 {
    padding-left: 5.25rem;
}
.pad-lft--53 {
    padding-left: 5.375rem;
}
.pad-lft--55 {
    padding-left: 5.5rem;
}
.pad-lft--56 {
    padding-left: 5.625rem;
}
.pad-lft--57 {
    padding-left: 5.75rem;
}
.pad-lft--58 {
    padding-left: 5.875rem;
}
.pad-lft--6 {
    padding-left: 6rem;
}
.pad-lft--61 {
    padding-left: 6.125rem;
}
.pad-lft--62 {
    padding-left: 6.25rem;
}
.pad-lft--63 {
    padding-left: 6.375rem;
}

/*===============
 * padding right
=================*/
.pad-rgt--0 {
    padding-right: 0;
}
.pad-rgt--001 {
    padding-right: 0.0125rem;
}
.pad-rgt--002 {
    padding-right: 0.025rem;
}
.pad-rgt--003 {
    padding-right: 0.0375rem;
}
.pad-rgt--005 {
    padding-right: 0.05rem;
}
.pad-rgt--006 {
    padding-right: 0.0625rem;
}
.pad-rgt--007 {
    padding-right: 0.075rem;
}
.pad-rgt--008 {
    padding-right: 0.0875rem;
}
.pad-rgt--01 {
    padding-right: 0.125rem;
}
.pad-rgt--02 {
    padding-right: 0.25rem;
}
.pad-rgt--03 {
    padding-right: 0.375rem;
}
.pad-rgt--05 {
    padding-right: 0.5rem;
}
.pad-rgt--06 {
    padding-right: 0.625rem;
}
.pad-rgt--07 {
    padding-right: 0.75rem;
}
.pad-rgt--08 {
    padding-right: 0.875rem;
}
.pad-rgt--1 {
    padding-right: 1rem;
}
.pad-rgt--11 {
    padding-right: 1.125rem;
}
.pad-rgt--12 {
    padding-right: 1.25rem;
}
.pad-rgt--13 {
    padding-right: 1.375rem;
}
.pad-rgt--15 {
    padding-right: 1.5rem;
}
.pad-rgt--16 {
    padding-right: 1.625rem;
}
.pad-rgt--17 {
    padding-right: 1.75rem;
}
.pad-rgt--18 {
    padding-right: 1.875rem;
}
.pad-rgt--2 {
    padding-right: 2rem;
}
.pad-rgt--21 {
    padding-right: 2.125rem;
}
.pad-rgt--22 {
    padding-right: 2.25rem;
}
.pad-rgt--23 {
    padding-right: 2.375rem;
}
.pad-rgt--25 {
    padding-right: 2.5rem;
}
.pad-rgt--26 {
    padding-right: 2.625rem;
}
.pad-rgt--27 {
    padding-right: 2.75rem;
}
.pad-rgt--28 {
    padding-right: 2.875rem;
}
.pad-rgt--3 {
    padding-right: 3rem;
}
.pad-rgt--31 {
    padding-right: 3.125rem;
}
.pad-rgt--32 {
    padding-right: 3.25rem;
}
.pad-rgt--33 {
    padding-right: 3.375rem;
}
.pad-rgt--35 {
    padding-right: 3.5rem;
}
.pad-rgt--36 {
    padding-right: 3.625rem;
}
.pad-rgt--37 {
    padding-right: 3.75rem;
}
.pad-rgt--38 {
    padding-right: 3.875rem;
}
.pad-rgt--4 {
    padding-right: 4rem;
}
.pad-rgt--41 {
    padding-right: 4.125rem;
}
.pad-rgt--42 {
    padding-right: 4.25rem;
}
.pad-rgt--43 {
    padding-right: 4.375rem;
}
.pad-rgt--45 {
    padding-right: 4.5rem;
}
.pad-rgt--46 {
    padding-right: 4.625rem;
}
.pad-rgt--47 {
    padding-right: 4.75rem;
}
.pad-rgt--48 {
    padding-right: 4.875rem;
}
.pad-rgt--5 {
    padding-right: 5rem;
}
.pad-rgt--51 {
    padding-right: 5.125rem;
}
.pad-rgt--52 {
    padding-right: 5.25rem;
}
.pad-rgt--53 {
    padding-right: 5.375rem;
}
.pad-rgt--55 {
    padding-right: 5.5rem;
}
.pad-rgt--56 {
    padding-right: 5.625rem;
}
.pad-rgt--57 {
    padding-right: 5.75rem;
}
.pad-rgt--58 {
    padding-right: 5.875rem;
}
.pad-rgt--6 {
    padding-right: 6rem;
}
.pad-rgt--61 {
    padding-right: 6.125rem;
}
.pad-rgt--62 {
    padding-right: 6.25rem;
}
.pad-rgt--63 {
    padding-right: 6.375rem;
}

/*====================
 * left right padding
======================*/
.pad-x--auto {
    padding-left: auto;
    padding-right: auto;
}
.pad-x--0 {
    padding-left: 0;
    padding-right: 0;
}
.pad-x--001 {
    padding-left: 0.0125rem;
    padding-right: 0.0125rem;
}
.pad-x--002 {
    padding-left: 0.025rem;
    padding-right: 0.025rem;
}
.pad-x--003 {
    padding-left: 0.0375rem;
    padding-right: 0.0375rem;
}
.pad-x--005 {
    padding-left: 0.05rem;
    padding-right: 0.05rem;
}
.pad-x--006 {
    padding-left: 0.0625rem;
    padding-right: 0.0625rem;
}
.pad-x--007 {
    padding-left: 0.075rem;
    padding-right: 0.075rem;
}
.pad-x--008 {
    padding-left: 0.0875rem;
    padding-right: 0.0875rem;
}
.pad-x--01 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}
.pad-x--02 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.pad-x--03 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.pad-x--05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.pad-x--06 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.pad-x--07 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.pad-x--08 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}
.pad-x--1 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.pad-x--11 {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
}
.pad-x--12 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.pad-x--13 {
    padding-left: 1.375rem;
    padding-right: 1.375rem;
}
.pad-x--15 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.pad-x--16 {
    padding-left: 1.625rem;
    padding-right: 1.625rem;
}
.pad-x--17 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
.pad-x--18 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
}
.pad-x--2 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.pad-x--21 {
   padding-left: 2.125rem;
    padding-right: 2.125rem;
}
.pad-x--22 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}
.pad-x--23 {
    padding-left: 2.375rem;
    padding-right: 2.375rem;
}
.pad-x--25 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.pad-x--26 {
    padding-left: 2.625rem;
    padding-right: 2.625rem;
}
.pad-x--27 {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
}
.pad-x--28 {
    padding-left: 2.875rem;
    padding-right: 2.875rem;
}
.pad-x--3 {
    padding-left: 3rem;
    padding-right: 3rem;
}
.pad-x--31 {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
}
.pad-x--32 {
    padding-left: 3.25rem;
    padding-right: 3.25rem;
}
.pad-x--33 {
    padding-left: 3.375rem;
    padding-right: 3.375rem;
}
.pad-x--35 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}
.pad-x--36 {
    padding-left: 3.625rem;
    padding-right: 3.625rem;
}
.pad-x--37 {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
}
.pad-x--38 {
    padding-left: 3.875rem;
    padding-right: 3.875rem;
}
.pad-x--4 {
    padding-left: 4rem;
    padding-right: 4rem;
}
.pad-x--41 {
    padding-left: 4.125rem;
    padding-right: 4.125rem;
}
.pad-x--42 {
    padding-left: 4.25rem;
    padding-right: 4.25rem;
}
.pad-x--43 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
}
.pad-x--45 {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
}
.pad-x--46 {
    padding-left: 4.625rem;
    padding-right: 4.625rem;
}
.pad-x--47 {
    padding-left: 4.75rem;
    padding-right: 4.75rem;
}
.pad-x--48 {
    padding-left: 4.875rem;
    padding-right: 4.875rem;
}
.pad-x--5 {
    padding-left: 5rem;
    padding-right: 5rem;
}
.pad-x--51 {
    padding-left: 5.125rem;
    padding-right: 5.125rem;
}
.pad-x--52 {
    padding-left: 5.25rem;
    padding-right: 5.25rem;
}
.pad-x--53 {
    padding-left: 5.375rem;
    padding-right: 5.375rem;
}
.pad-x--55 {
    padding-left: 5.5rem;
    padding-right: 5.5rem;
}
.pad-x--56 {
    padding-left: 5.625rem;
    padding-right: 5.625rem;
}
.pad-x--57 {
    padding-left: 5.75rem;
    padding-right: 5.75rem;
}
.pad-x--58 {
    padding-left: 5.875rem;
    padding-right: 5.875rem;
}
.pad-x--6 {
    padding-left: 6rem;
    padding-right: 6rem;
}
.pad-x--61 {
    padding-left: 6.125rem;
    padding-right: 6.125rem;
}
.pad-x--62 {
    padding-left: 6.25rem;
    padding-right: 6.25rem;
}
.pad-x--63 {
    padding-left: 6.375rem;
    padding-right: 6.375rem;
}

/*====================
 * top bottom padding
======================*/
.pad-y--auto {
    padding-top: auto;
    padding-bottom: auto;
}
.pad-y--0 {
    padding-top: 0;
    padding-bottom: 0;
}
.pad-y--001 {
    padding-top: 0.0125rem;
    padding-bottom: 0.0125rem;
}
.pad-y--002 {
    padding-top: 0.025rem;
    padding-bottom: 0.025rem;
}
.pad-y--003 {
    padding-top: 0.0375rem;
    padding-bottom: 0.0375rem;
}
.pad-y--005 {
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
}
.pad-y--006 {
    padding-top: 0.0625rem;
    padding-bottom: 0.0625rem;
}
.pad-y--007 {
    padding-top: 0.075rem;
    padding-bottom: 0.075rem;
}
.pad-y--008 {
    padding-top: 0.0875rem;
    padding-bottom: 0.0875rem;
}
.pad-y--01 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.pad-y--02 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.pad-y--03 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.pad-y--05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.pad-y--06 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.pad-y--07 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.pad-y--08 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.pad-y--1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.pad-y--11 {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}
.pad-y--12 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.pad-y--13 {
    padding-top: 1.375rem;
    padding-bottom: 1.375rem;
}
.pad-y--15 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.pad-y--16 {
    padding-top: 1.625rem;
    padding-bottom: 1.625rem;
}
.pad-y--17 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}
.pad-y--18 {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
}
.pad-y--2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pad-y--21 {
   padding-top: 2.125rem;
    padding-bottom: 2.125rem;
}
.pad-y--22 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}
.pad-y--23 {
    padding-top: 2.375rem;
    padding-bottom: 2.375rem;
}
.pad-y--25 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.pad-y--26 {
    padding-top: 2.625rem;
    padding-bottom: 2.625rem;
}
.pad-y--27 {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
}
.pad-y--28 {
    padding-top: 2.875rem;
    padding-bottom: 2.875rem;
}
.pad-y--3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.pad-y--31 {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
}
.pad-y--32 {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
}
.pad-y--33 {
    padding-top: 3.375rem;
    padding-bottom: 3.375rem;
}
.pad-y--35 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
.pad-y--36 {
    padding-top: 3.625rem;
    padding-bottom: 3.625rem;
}
.pad-y--37 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}
.pad-y--38 {
    padding-top: 3.875rem;
    padding-bottom: 3.875rem;
}
.pad-y--4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.pad-y--41 {
    padding-top: 4.125rem;
    padding-bottom: 4.125rem;
}
.pad-y--42 {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
}
.pad-y--43 {
    padding-top: 4.375rem;
    padding-bottom: 4.375rem;
}
.pad-y--45 {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
.pad-y--46 {
    padding-top: 4.625rem;
    padding-bottom: 4.625rem;
}
.pad-y--47 {
    padding-top: 4.75rem;
    padding-bottom: 4.75rem;
}
.pad-y--48 {
    padding-top: 4.875rem;
    padding-bottom: 4.875rem;
}
.pad-y--5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.pad-y--51 {
    padding-top: 5.125rem;
    padding-bottom: 5.125rem;
}
.pad-y--52 {
    padding-top: 5.25rem;
    padding-bottom: 5.25rem;
}
.pad-y--53 {
    padding-top: 5.375rem;
    padding-bottom: 5.375rem;
}
.pad-y--55 {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}
.pad-y--56 {
    padding-top: 5.625rem;
    padding-bottom: 5.625rem;
}
.pad-y--57 {
    padding-top: 5.75rem;
    padding-bottom: 5.75rem;
}
.pad-y--58 {
    padding-top: 5.875rem;
    padding-bottom: 5.875rem;
}
.pad-y--6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.pad-y--61 {
    padding-top: 6.125rem;
    padding-bottom: 6.125rem;
}
.pad-y--62 {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}
.pad-y--63 {
    padding-top: 6.375rem;
    padding-bottom: 6.375rem;
}

/*==========
 * position
============*/
.pos--abs {
    position: absolute;
}
.pos--rel {
    position: relative;
}
.pos--fxd {
    position: fixed;
}

/*===========
 * translate
=============*/
/* x axis middle */
.move-x--mid {
    left: 50%;
    transform: translateX(-50%);
}
/* x axis right */
.move-x--rgt { /* TODO: Rename TO: move--rgt */
    left: 100%;
    transform: translateX(-100%);
}
.move-x--lft {
	left: 0;
}
/* y axis middle */
.move-y--mid {
    top: 50%;
    transform: translateY(-50%);
}
/* x and y axes middle */
.move-xy--mid {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*==============
 * inner border
================*/
.in-bdr--1 {
    box-shadow: 0 0 0 1px var(--gray-l) inset;
}
.in-bdr--2 {
    box-shadow: 0 0 0 2px var(--gray-l) inset;
}
.in-bdr--3 {
    box-shadow: 0 0 0 3px var(--gray-l) inset;
}

.in-bdr--gry-vl--2 {
    box-shadow: 0 0 0 2px var(--gray-vl) inset;
}

/*===============
 * border radius
=================*/
.bdr-rds--0 {
    border-radius: 0;
}
.bdr-rds--2 {
    border-radius: 2px;
}
.bdr-rds--4 {
    border-radius: 4px;
}
.bdr-rds--6 {
    border-radius: 6px;
}
.bdr-rds--8 {
    border-radius: 8px;
}
.bdr-rds--10 {
    border-radius: 10px;
}
.bdr-rds--20 {
    border-radius: 20px;
}
.bdr-rds--50 {
    border-radius: 50%;
}

.bdr-rds-lft--4 {
    border-radius: 4px 0 0 4px;
}

/*============
 * box shadow
==============*/
.shd-blur--gry-l-1 {
    box-shadow: 0 0 0.125rem 0 var(--gray-l);
}
.shd-blur--gry-m-1 {
    box-shadow: 0 0 0.125rem 0 var(--gray-m);
}
.shd-blur--gry-3vl-15 {
    box-shadow: 0 0 0 0.15rem var(--gray-3vl);
}
.shd-blur--gry-l-2 { /* shd--gry-l-4 */
    box-shadow: 0 0 0.25rem 0 var(--gray-l);
}
.shd-blur--gry-m-2 { /* shd--gry-l-4 */
    box-shadow: 0 0 0.25rem 0 var(--gray-m);
}
.shd-blur--gry-l-3 { /* shd--gry-l-6 */
    box-shadow: 0 0 0.375rem 0 var(--gray-l);
}
.shd-blur--gry-h-10 {
	box-shadow: 0 0 10px 1px var(--gray-m);
}
.shd-spread--red-05-07 {
    box-shadow: 0 0 0 0.5rem rgba(225, 55, 55, 0.7);
}




/*========
 * Width
==========*/
.wdh--iht {
    width: inherit;
}
.wdh--0 {
	width: 0;
}

/*===========================================
 * Percent width relative to parent element.
 * Parent element is divided into 12 equal
   sections, where:
   pct-wdh--1 = smallest width
   pct-wdh--6 = half width
   pct-wdh--12 = full/largest width
=============================================*/
.pct-wdh--1 {
    width: 8.33333333333%;
}
.pct-wdh--1-01 { /* pct-wdh--1-0 */
    width: calc(8.33333333333% - 0.125rem);
}
.pct-wdh--1-02 { /* pct-wdh--1-1 */
    width: calc(8.33333333333% - 0.25rem);
}
.pct-wdh--1-03 {
	width: calc(8.33333333333% - 0.375rem);
}
.pct-wdh--1-05 { /* pct-wdh--1-2 */
    width: calc(8.33333333333% - 0.5rem);
}
.pct-wdh--1-06 {
    width: calc(8.33333333333% - 0.625rem);
}
.pct-wdh--1-07 { /* pct-wdh--1-3 */
    width: calc(8.33333333333% - 0.75rem);
}
.pct-wdh--1-08 {
    width: calc(8.33333333333% - 0.875rem);
}
.pct-wdh--1-1 { /* pct-wdh--1-4 */
    width: calc(8.33333333333% - 1rem);
}
.pct-wdh--1-11 { /* pct-wdh--1-4-0 */
    width: calc(8.33333333333% - 1.125rem);
}
.pct-wdh--1-12 { /* pct-wdh--1-4-1 */
    width: calc(8.33333333333% - 1.25rem);
}
.pct-wdh--1-13 {
    width: calc(8.33333333333% - 1.375rem);
}
.pct-wdh--1-15 { /* pct-wdh--1-4-2 */
    width: calc(8.33333333333% - 1.5rem);
}
.pct-wdh--1-16 {
    width: calc(8.33333333333% - 1.625rem);
}
.pct-wdh--1-17 { /* pct-wdh--1-4-3 */
    width: calc(8.33333333333% - 1.75rem);
}
.pct-wdh--1-18 {
    width: calc(8.33333333333% - 1.875rem);
}
.pct-wdh--1-2 { /* pct-wdh--1-5 */
    width: calc(8.33333333333% - 2rem);
}
.pct-wdh--1-21 { /* pct-wdh--1-5-0 */
    width: calc(8.33333333333% - 2.125rem);
}
.pct-wdh--1-22 { /* pct-wdh--1-5-1 */
    width: calc(8.33333333333% - 2.25rem);
}
.pct-wdh--1-23 { 
    width: calc(8.33333333333% - 2.375rem);
}
.pct-wdh--1-25 { /* pct-wdh--1-5-2 */
    width: calc(8.33333333333% - 2.5rem);
}
.pct-wdh--1-26 { 
    width: calc(8.33333333333% - 2.625rem);
}
.pct-wdh--1-27 { /* pct-wdh--1-5-3 */
    width: calc(8.33333333333% - 2.75rem);
}
.pct-wdh--1-28 { 
    width: calc(8.33333333333% - 2.875rem);
}
.pct-wdh--1-3 { /* pct-wdh--1-6 */
    width: calc(8.33333333333% - 3rem);
}
.pct-wdh--1-31 { /* pct-wdh--1-6-0 */
    width: calc(8.33333333333% - 3.125rem);
}
.pct-wdh--1-32 { /* pct-wdh--1-6-1 */
    width: calc(8.33333333333% - 3.25rem);
}
.pct-wdh--1-33 { 
    width: calc(8.33333333333% - 3.375rem);
}
.pct-wdh--1-35 { /* pct-wdh--1-6-2 */
    width: calc(8.33333333333% - 3.5rem);
}
.pct-wdh--1-36 { 
    width: calc(8.33333333333% - 3.625rem);
}
.pct-wdh--1-37 { /* pct-wdh--1-6-3 */
    width: calc(8.33333333333% - 3.75rem);
}
.pct-wdh--1-38 { 
    width: calc(8.33333333333% - 3.875rem);
}
.pct-wdh--1-4 { /* pct-wdh--1-7 */
    width: calc(8.33333333333% - 4rem);
}
.pct-wdh--1-41 { /* pct-wdh--1-7 */
    width: calc(8.33333333333% - 4.125rem);
}
.pct-wdh--1-42 { /* pct-wdh--1-7-1 */
    width: calc(8.33333333333% - 4.25rem);
}
.pct-wdh--1-43 { 
    width: calc(8.33333333333% - 4.375rem);
}
.pct-wdh--1-45 { /* pct-wdh--1-7-2 */
    width: calc(8.33333333333% - 4.5rem);
}
.pct-wdh--1-46 { 
    width: calc(8.33333333333% - 4.625rem);
}
.pct-wdh--1-47 { /* pct-wdh--1-7-3 */
    width: calc(8.33333333333% - 4.75rem);
}
.pct-wdh--1-48 { 
    width: calc(8.33333333333% - 4.875rem);
}
.pct-wdh--1-5 { /* pct-wdh--1-8 */
    width: calc(8.33333333333% - 5rem);
}
.pct-wdh--1-51 {
    width: calc(8.33333333333% - 5.125rem);
}
.pct-wdh--1-52 { /* pct-wdh--1-8-1 */
    width: calc(8.33333333333% - 5.25rem);
}
.pct-wdh--1-53 {
    width: calc(8.33333333333% - 5.375rem);
}
.pct-wdh--1-55 { /* pct-wdh--1-8-2 */
    width: calc(8.33333333333% - 5.5rem);
}
.pct-wdh--1-56 {
    width: calc(8.33333333333% - 5.625rem);
}
.pct-wdh--1-57 { /* pct-wdh--1-8-3 */
    width: calc(8.33333333333% - 5.75rem);
}
.pct-wdh--1-58 {
    width: calc(8.33333333333% - 5.875rem);
}
.pct-wdh--1-6 { /* pct-wdh--1-9 */
    width: calc(8.33333333333% - 6rem);
}
.pct-wdh--1-61 {
    width: calc(8.33333333333% - 6.125rem);
}
.pct-wdh--1-62 { /* pct-wdh--1-9-1 */
    width: calc(8.33333333333% - 6.25rem);
}
.pct-wdh--1-63 {
    width: calc(8.33333333333% - 6.375rem);
}
.pct-wdh--1-65 { /* pct-wdh--1-9-2 */
    width: calc(8.33333333333% - 6.5rem);
}
.pct-wdh--1-66 { 
    width: calc(8.33333333333% - 6.625rem);
}
.pct-wdh--1-67 { /* pct-wdh--1-9-3 */
    width: calc(8.33333333333% - 6.75rem);
}
.pct-wdh--1-68 { 
    width: calc(8.33333333333% - 6.875rem);
}

.pct-wdh--2 {
    width: calc(8.33333333333% * 2);
}
.pct-wdh--2-01 {
    width: calc((8.33333333333% * 2) - 0.125rem);
}
.pct-wdh--2-02 { /* pct-wdh--2-1 */
    width: calc((8.33333333333% * 2) - 0.25rem);
}
.pct-wdh--2-03 {
    width: calc((8.33333333333% * 2) - 0.375rem);
}
.pct-wdh--2-05 { /* pct-wdh--2-2 */
    width: calc((8.33333333333% * 2) - 0.5rem);
}
.pct-wdh--2-06 {
    width: calc((8.33333333333% * 2) - 0.625rem);
}
.pct-wdh--2-07 { /* pct-wdh--2-3 */
    width: calc((8.33333333333% * 2) - 0.75rem);
}
.pct-wdh--2-08 {
    width: calc((8.33333333333% * 2) - 0.875rem);
}
.pct-wdh--2-1 { /* pct-wdh--2-4 */
    width: calc((8.33333333333% * 2) - 1rem);
}
.pct-wdh--2-11 {
    width: calc((8.33333333333% * 2) - 1.125rem);
}
.pct-wdh--2-12 { /* pct-wdh--2-4-1 */
    width: calc((8.33333333333% * 2) - 1.25rem);
}
.pct-wdh--2-13 {
    width: calc((8.33333333333% * 2) - 1.375rem);
}
.pct-wdh--2-15 { /* pct-wdh--2-4-2 */
    width: calc((8.33333333333% * 2) - 1.5rem);
}
.pct-wdh--2-16 {
    width: calc((8.33333333333% * 2) - 1.625rem);
}
.pct-wdh--2-17 { /* pct-wdh--2-4-3 */
    width: calc((8.33333333333% * 2) - 1.75rem);
}
.pct-wdh--2-18 {
    width: calc((8.33333333333% * 2) - 1.875rem);
}
.pct-wdh--2-2 { /* pct-wdh--2-5 */
    width: calc((8.33333333333% * 2) - 2rem);
}
.pct-wdh--2-21 {
    width: calc((8.33333333333% * 2) - 2.125rem);
}
.pct-wdh--2-22 { /* pct-wdh--2-5-1 */
    width: calc((8.33333333333% * 2) - 2.25rem);
}
.pct-wdh--2-23 {
    width: calc((8.33333333333% * 2) - 2.375rem);
}
.pct-wdh--2-25 { /* pct-wdh--2-5-2 */
    width: calc((8.33333333333% * 2) - 2.5rem);
}
.pct-wdh--2-26 {
    width: calc((8.33333333333% * 2) - 2.625rem);
}
.pct-wdh--2-27 { /* pct-wdh--2-5-3 */
    width: calc((8.33333333333% * 2) - 2.75rem);
}
.pct-wdh--2-28 {
    width: calc((8.33333333333% * 2) - 2.875rem);
}
.pct-wdh--2-3 { /* pct-wdh--2-6 */
    width: calc((8.33333333333% * 2) - 3rem);
}
.pct-wdh--2-31 { 
    width: calc((8.33333333333% * 2) - 3.125rem);
}
.pct-wdh--2-32 { /* pct-wdh--2-6-1 */
    width: calc((8.33333333333% * 2) - 3.25rem);
}
.pct-wdh--2-33 { 
    width: calc((8.33333333333% * 2) - 3.375rem);
}
.pct-wdh--2-35 { /* pct-wdh--2-6-2 */
    width: calc((8.33333333333% * 2) - 3.5rem);
}
.pct-wdh--2-36 {
    width: calc((8.33333333333% * 2) - 3.625rem);
}
.pct-wdh--2-37 { /* pct-wdh--2-6-3 */
    width: calc((8.33333333333% * 2) - 3.75rem);
}
.pct-wdh--2-38 {
    width: calc((8.33333333333% * 2) - 3.875rem);
}
.pct-wdh--2-4 { /* pct-wdh--2-7 */
    width: calc((8.33333333333% * 2) - 4rem);
}
.pct-wdh--2-41 {
    width: calc((8.33333333333% * 2) - 4.125rem);
}
.pct-wdh--2-42 { /* pct-wdh--2-7-1 */
    width: calc((8.33333333333% * 2) - 4.25rem);
}
.pct-wdh--2-43 {
    width: calc((8.33333333333% * 2) - 4.375rem);
}
.pct-wdh--2-45 { /* pct-wdh--2-7-2 */
    width: calc((8.33333333333% * 2) - 4.5rem);
}
.pct-wdh--2-46 {
    width: calc((8.33333333333% * 2) - 4.625rem);
}
.pct-wdh--2-47 { /* pct-wdh--2-7-3 */
    width: calc((8.33333333333% * 2) - 4.75rem);
}
.pct-wdh--2-48 {
    width: calc((8.33333333333% * 2) - 4.875rem);
}
.pct-wdh--2-5 { /* pct-wdh--2-8 */
    width: calc((8.33333333333% * 2) - 5rem);
}
.pct-wdh--2-51 {
    width: calc((8.33333333333% * 2) - 5.125rem);
}
.pct-wdh--2-52 { /* pct-wdh--2-8-1 */
    width: calc((8.33333333333% * 2) - 5.25rem);
}
.pct-wdh--2-53 {
    width: calc((8.33333333333% * 2) - 5.375rem);
}
.pct-wdh--2-55 { /* pct-wdh--2-8-2 */
    width: calc((8.33333333333% * 2) - 5.5rem);
}
.pct-wdh--2-56 {
    width: calc((8.33333333333% * 2) - 5.625rem);
}
.pct-wdh--2-57 { /* pct-wdh--2-8-3 */
    width: calc((8.33333333333% * 2) - 5.75rem);
}
.pct-wdh--2-58 {
    width: calc((8.33333333333% * 2) - 5.875rem);
}
.pct-wdh--2-6 { /* pct-wdh--2-9 */
    width: calc((8.33333333333% * 2) - 6rem);
}
.pct-wdh--2-61 {
    width: calc((8.33333333333% * 2) - 6.125rem);
}
.pct-wdh--2-62 { /* pct-wdh--2-9-1 */
    width: calc((8.33333333333% * 2) - 6.25rem);
}
.pct-wdh--2-63 {
    width: calc((8.33333333333% * 2) - 6.375rem);
}
.pct-wdh--2-65 { /* pct-wdh--2-9-2 */
    width: calc((8.33333333333% * 2) - 6.5rem);
}
.pct-wdh--2-66 {
    width: calc((8.33333333333% * 2) - 6.625rem);
}
.pct-wdh--2-67 { /* pct-wdh--2-9-3 */
    width: calc((8.33333333333% * 2) - 6.75rem);
}
.pct-wdh--2-68 {
    width: calc((8.33333333333% * 2) - 6.875rem);
}
.pct-wdh--3 {
    width: calc(8.33333333333% * 3);
}
.pct-wdh--3-01 {
    width: calc((8.33333333333% * 3) - 0.125rem);
}
.pct-wdh--3-02 { /* pct-wdh--3-1 */
    width: calc((8.33333333333% * 3) - 0.25rem);
}
.pct-wdh--3-03 {
    width: calc((8.33333333333% * 3) - 0.375rem);
}
.pct-wdh--3-05 { /* pct-wdh--3-2 */
    width: calc((8.33333333333% * 3) - 0.5rem);
}
.pct-wdh--3-06 {
    width: calc((8.33333333333% * 3) - 0.625rem);
}
.pct-wdh--3-07 { /* pct-wdh--3-3 */
    width: calc((8.33333333333% * 3) - 0.75rem);
}
.pct-wdh--3-08 {
    width: calc((8.33333333333% * 3) - 0.875rem);
}
.pct-wdh--3-1 { /* pct-wdh--3-4 */
    width: calc((8.33333333333% * 3) - 1rem);
}
.pct-wdh--3-11 {
    width: calc((8.33333333333% * 3) - 1.125rem);
}
.pct-wdh--3-12 { /* .pct-wdh--3-5 */
    width: calc((8.33333333333% * 3) - 1.25rem);
}
.pct-wdh--3-13 {
    width: calc((8.33333333333% * 3) - 1.375rem);
}
.pct-wdh--3-15 { /* pct-wdh--3-4-2 */
    width: calc((8.33333333333% * 3) - 1.5rem);
}
.pct-wdh--3-16 {
    width: calc((8.33333333333% * 3) - 1.625rem);
}
.pct-wdh--3-17 { /* pct-wdh--3-4-3 */
    width: calc((8.33333333333% * 3) - 1.75rem);
}
.pct-wdh--3-18 {
    width: calc((8.33333333333% * 3) - 1.875rem);
}
.pct-wdh--3-2 { /* pct-wdh--3-5 */
    width: calc((8.33333333333% * 3) - 2rem);
}
.pct-wdh--3-21 {
    width: calc((8.33333333333% * 3) - 2.125rem);
}
.pct-wdh--3-22 { /* pct-wdh--3-5-1 */
    width: calc((8.33333333333% * 3) - 2.25rem);
}
.pct-wdh--3-23 {
    width: calc((8.33333333333% * 3) - 2.375rem);
}
.pct-wdh--3-25 { /* pct-wdh--3-5-2 */
    width: calc((8.33333333333% * 3) - 2.5rem);
}
.pct-wdh--3-26 {
    width: calc((8.33333333333% * 3) - 2.625rem);
}
.pct-wdh--3-27 { /* pct-wdh--3-5-3 */
    width: calc((8.33333333333% * 3) - 2.75rem);
}
.pct-wdh--3-28 {
    width: calc((8.33333333333% * 3) - 2.875rem);
}
.pct-wdh--3-3 { /* pct-wdh--3-6 */
    width: calc((8.33333333333% * 3) - 3rem);
}
.pct-wdh--3-31 {
    width: calc((8.33333333333% * 3) - 3.125rem);
}
.pct-wdh--3-32 { /* pct-wdh--3-6-1 */
    width: calc((8.33333333333% * 3) - 3.25rem);
}
.pct-wdh--3-33 {
    width: calc((8.33333333333% * 3) - 3.375rem);
}
.pct-wdh--3-35 { /* pct-wdh--3-6-2 */
    width: calc((8.33333333333% * 3) - 3.5rem);
}
.pct-wdh--3-36 {
    width: calc((8.33333333333% * 3) - 3.625rem);
}
.pct-wdh--3-37 { /* pct-wdh--3-6-3 */
    width: calc((8.33333333333% * 3) - 3.75rem);
}
.pct-wdh--3-38 {
    width: calc((8.33333333333% * 3) - 3.875rem);
}
.pct-wdh--3-4 { /* pct-wdh--3-7 */
    width: calc((8.33333333333% * 3) - 4rem);
}
.pct-wdh--3-41 {
    width: calc((8.33333333333% * 3) - 4.125rem);
}
.pct-wdh--3-42 { /* pct-wdh--3-7-1 */
    width: calc((8.33333333333% * 3) - 4.25rem);
}
.pct-wdh--3-43 {
    width: calc((8.33333333333% * 3) - 4.375rem);
}
.pct-wdh--3-45 { /* pct-wdh--3-7-2 */
    width: calc((8.33333333333% * 3) - 4.5rem);
}
.pct-wdh--3-46 {
    width: calc((8.33333333333% * 3) - 4.625rem);
}
.pct-wdh--3-47 { /* pct-wdh--3-7-3 */
    width: calc((8.33333333333% * 3) - 4.75rem);
}
.pct-wdh--3-48 {
    width: calc((8.33333333333% * 3) - 4.875rem);
}
.pct-wdh--3-5 { /* pct-wdh--3-8 */
    width: calc((8.33333333333% * 3) - 5rem);
}
.pct-wdh--3-51 {
    width: calc((8.33333333333% * 3) - 5.125rem);
}
.pct-wdh--3-52 { /* pct-wdh--3-8-1 */
    width: calc((8.33333333333% * 3) - 5.25rem);
}
.pct-wdh--3-53 {
    width: calc((8.33333333333% * 3) - 5.375rem);
}
.pct-wdh--3-55 { /* pct-wdh--3-8-2 */
    width: calc((8.33333333333% * 3) - 5.5rem);
}
.pct-wdh--3-56 {
    width: calc((8.33333333333% * 3) - 5.625rem);
}
.pct-wdh--3-57 { /* pct-wdh--3-8-3 */
    width: calc((8.33333333333% * 3) - 5.75rem);
}
.pct-wdh--3-58 {
    width: calc((8.33333333333% * 3) - 5.875rem);
}
.pct-wdh--3-6 { /* pct-wdh--3-9 */
    width: calc((8.33333333333% * 3) - 6rem);
}
.pct-wdh--3-61 {
    width: calc((8.33333333333% * 3) - 6.125rem);
}
.pct-wdh--3-62 { /* pct-wdh--3-9-1 */
    width: calc((8.33333333333% * 3) - 6.25rem);
}
.pct-wdh--3-63 {
    width: calc((8.33333333333% * 3) - 6.375rem);
}
.pct-wdh--3-65 { /* pct-wdh--3-9-2 */
    width: calc((8.33333333333% * 3) - 6.5rem);
}
.pct-wdh--3-66 {
    width: calc((8.33333333333% * 3) - 6.625rem);
}
.pct-wdh--3-67 { /* pct-wdh--3-9-3 */
    width: calc((8.33333333333% * 3) - 6.75rem);
}
.pct-wdh--3-68 {
    width: calc((8.33333333333% * 3) - 6.875rem);
}
.pct-wdh--4 {
    width: calc(8.33333333333% * 4);
}
.pct-wdh--4-01 {
    width: calc((8.33333333333% * 4) - 0.125rem);
}
.pct-wdh--4-02 { /* pct-wdh--4-1 */
    width: calc((8.33333333333% * 4) - 0.25rem);
}
.pct-wdh--4-03 {
    width: calc((8.33333333333% * 4) - 0.375rem);
}
.pct-wdh--4-05 { /* pct-wdh--4-2 */
    width: calc((8.33333333333% * 4) - 0.5rem);
}
.pct-wdh--4-06 {
    width: calc((8.33333333333% * 4) - 0.625rem);
}
.pct-wdh--4-07 { /* pct-wdh--4-3 */
    width: calc((8.33333333333% * 4) - 0.75rem);
}
.pct-wdh--4-08 {
    width: calc((8.33333333333% * 4) - 0.875rem);
}
.pct-wdh--4-1 { /* pct-wdh--4-4 */
    width: calc((8.33333333333% * 4) - 1rem);
}
.pct-wdh--4-11 {
    width: calc((8.33333333333% * 4) - 1.125rem);
}
.pct-wdh--4-12 { /* pct-wdh--4-4-1 */
    width: calc((8.33333333333% * 4) - 1.25rem);
}
.pct-wdh--4-13 {
    width: calc((8.33333333333% * 4) - 1.375rem);
}
.pct-wdh--4-15 { /* pct-wdh--4-4-2 */
    width: calc((8.33333333333% * 4) - 1.5rem);
}
.pct-wdh--4-16 {
    width: calc((8.33333333333% * 4) - 1.625rem);
}
.pct-wdh--4-17 { /* pct-wdh--4-4-3 */
    width: calc((8.33333333333% * 4) - 1.75rem);
}
.pct-wdh--4-18 {
    width: calc((8.33333333333% * 4) - 1.875rem);
}
.pct-wdh--4-2 { /* pct-wdh--4-5 */
    width: calc((8.33333333333% * 4) - 2rem);
}
.pct-wdh--4-21 {
    width: calc((8.33333333333% * 4) - 2.125rem);
}
.pct-wdh--4-22 { /* pct-wdh--4-5-1 */
    width: calc((8.33333333333% * 4) - 2.25rem);
}
.pct-wdh--4-23 {
    width: calc((8.33333333333% * 4) - 2.375rem);
}
.pct-wdh--4-25 { /* pct-wdh--4-5-2 */
    width: calc((8.33333333333% * 4) - 2.5rem);
}
.pct-wdh--4-26 {
    width: calc((8.33333333333% * 4) - 2.625rem);
}
.pct-wdh--4-27 { /* pct-wdh--4-5-3 */
    width: calc((8.33333333333% * 4) - 2.75rem);
}
.pct-wdh--4-28 {
    width: calc((8.33333333333% * 4) - 2.875rem);
}
.pct-wdh--4-3 { /* pct-wdh--4-6 */
    width: calc((8.33333333333% * 4) - 3rem);
}
.pct-wdh--4-31 {
    width: calc((8.33333333333% * 4) - 3.125rem);
}
.pct-wdh--4-32 { /* pct-wdh--4-6-1 */
    width: calc((8.33333333333% * 4) - 3.25rem);
}
.pct-wdh--4-33 {
    width: calc((8.33333333333% * 4) - 3.375rem);
}
.pct-wdh--4-35 { /* pct-wdh--4-6-2 */
    width: calc((8.33333333333% * 4) - 3.5rem);
}
.pct-wdh--4-36 {
    width: calc((8.33333333333% * 4) - 3.625rem);
}
.pct-wdh--4-37 { /* pct-wdh--4-6-3 */
    width: calc((8.33333333333% * 4) - 3.75rem);
}
.pct-wdh--4-38 {
    width: calc((8.33333333333% * 4) - 3.875rem);
}
.pct-wdh--4-4 { /* pct-wdh--4-7 */
    width: calc((8.33333333333% * 4) - 4rem);
}
.pct-wdh--4-41 {
    width: calc((8.33333333333% * 4) - 4.125rem);
}
.pct-wdh--4-42 { /* pct-wdh--4-7-1 */
    width: calc((8.33333333333% * 4) - 4.25rem);
}
.pct-wdh--4-43 {
    width: calc((8.33333333333% * 4) - 4.375rem);
}
.pct-wdh--4-45 { /* pct-wdh--4-7-2 */
    width: calc((8.33333333333% * 4) - 4.5rem);
}
.pct-wdh--4-46 {
    width: calc((8.33333333333% * 4) - 4.625rem);
}
.pct-wdh--4-47 { /* pct-wdh--4-7-3 */
    width: calc((8.33333333333% * 4) - 4.75rem);
}
.pct-wdh--4-48 {
    width: calc((8.33333333333% * 4) - 4.875rem);
}
.pct-wdh--4-5 { /* pct-wdh--4-8 */
    width: calc((8.33333333333% * 4) - 5rem);
}
.pct-wdh--4-51 {
    width: calc((8.33333333333% * 4) - 5.125rem);
}
.pct-wdh--4-52 { /* pct-wdh--4-8-1 */
    width: calc((8.33333333333% * 4) - 5.25rem);
}
.pct-wdh--4-53 {
    width: calc((8.33333333333% * 4) - 5.375rem);
}
.pct-wdh--4-55 { /* pct-wdh--4-8-2 */
    width: calc((8.33333333333% * 4) - 5.5rem);
}
.pct-wdh--4-56 {
    width: calc((8.33333333333% * 4) - 5.625rem);
}
.pct-wdh--4-57 { /* pct-wdh--4-8-3 */
    width: calc((8.33333333333% * 4) - 5.75rem);
}
.pct-wdh--4-58 {
    width: calc((8.33333333333% * 4) - 5.875rem);
}
.pct-wdh--4-6 { /* pct-wdh--4-9 */
    width: calc((8.33333333333% * 4) - 6rem);
}
.pct-wdh--4-61 {
    width: calc((8.33333333333% * 4) - 6.125rem);
}
.pct-wdh--4-62 { /* pct-wdh--4-9-1 */
    width: calc((8.33333333333% * 4) - 6.25rem);
}
.pct-wdh--4-63 {
    width: calc((8.33333333333% * 4) - 6.375rem);
}
.pct-wdh--4-65 { /* pct-wdh--4-9-2 */
    width: calc((8.33333333333% * 4) - 6.5rem);
}
.pct-wdh--4-66 {
    width: calc((8.33333333333% * 4) - 6.625rem);
}
.pct-wdh--4-67 { /* pct-wdh--4-9-3 */
    width: calc((8.33333333333% * 4) - 6.75rem);
}
.pct-wdh--4-68 {
    width: calc((8.33333333333% * 4) - 6.875rem);
}
.pct-wdh--5 {
    width: calc(8.33333333333% * 5);
}
.pct-wdh--5-01 {
    width: calc((8.33333333333% * 5) - 0.125rem);
}
.pct-wdh--5-02 { /* pct-wdh--5-1 */
    width: calc((8.33333333333% * 5) - 0.25rem);
}
.pct-wdh--5-03 {
    width: calc((8.33333333333% * 5) - 0.375rem);
}
.pct-wdh--5-05 { /* pct-wdh--5-2 */
    width: calc((8.33333333333% * 5) - 0.5rem);
}
.pct-wdh--5-06 {
    width: calc((8.33333333333% * 5) - 0.625rem);
}
.pct-wdh--5-07 { /* pct-wdh--5-3 */
    width: calc((8.33333333333% * 5) - 0.75rem);
}
.pct-wdh--5-08 {
    width: calc((8.33333333333% * 5) - 0.875rem);
}
.pct-wdh--5-1 { /* pct-wdh--5-4 */
    width: calc((8.33333333333% * 5) - 1rem);
}
.pct-wdh--5-11 {
    width: calc((8.33333333333% * 5) - 1.125rem);
}
.pct-wdh--5-12 { /* pct-wdh--5-4-1 */
    width: calc((8.33333333333% * 5) - 1.25rem);
}
.pct-wdh--5-13 {
    width: calc((8.33333333333% * 5) - 1.375rem);
}
.pct-wdh--5-15 { /* pct-wdh--5-4-2 */
    width: calc((8.33333333333% * 5) - 1.5rem);
}
.pct-wdh--5-16 {
    width: calc((8.33333333333% * 5) - 1.625rem);
}
.pct-wdh--5-17 { /* pct-wdh--5-4-3 */
    width: calc((8.33333333333% * 5) - 1.75rem);
}
.pct-wdh--5-18 {
    width: calc((8.33333333333% * 5) - 1.875rem);
}
.pct-wdh--5-2 { /* pct-wdh--5-5 */
    width: calc((8.33333333333% * 5) - 2rem);
}
.pct-wdh--5-21 {
    width: calc((8.33333333333% * 5) - 2.125rem);
}
.pct-wdh--5-22 { /* pct-wdh--5-5-1 */
    width: calc((8.33333333333% * 5) - 2.25rem);
}
.pct-wdh--5-23 {
    width: calc((8.33333333333% * 5) - 2.375rem);
}
.pct-wdh--5-25 { /* pct-wdh--5-5-2 */
    width: calc((8.33333333333% * 5) - 2.5rem);
}
.pct-wdh--5-26 {
    width: calc((8.33333333333% * 5) - 2.625rem);
}
.pct-wdh--5-27 { /* pct-wdh--5-5-3 */
    width: calc((8.33333333333% * 5) - 2.75rem);
}
.pct-wdh--5-28 {
    width: calc((8.33333333333% * 5) - 2.875rem);
}
.pct-wdh--5-3 { /* pct-wdh--5-6 */
    width: calc((8.33333333333% * 5) - 3rem);
}
.pct-wdh--5-31 {
    width: calc((8.33333333333% * 5) - 3.125rem);
}
.pct-wdh--5-32 { /* pct-wdh--5-6-1 */
    width: calc((8.33333333333% * 5) - 3.25rem);
}
.pct-wdh--5-33 {
    width: calc((8.33333333333% * 5) - 3.375rem);
}
.pct-wdh--5-35 { /* pct-wdh--5-6-2 */
    width: calc((8.33333333333% * 5) - 3.5rem);
}
.pct-wdh--5-36 {
    width: calc((8.33333333333% * 5) - 3.625rem);
}
.pct-wdh--5-37 { /* pct-wdh--5-6-3 */
    width: calc((8.33333333333% * 5) - 3.75rem);
}
.pct-wdh--5-38 {
    width: calc((8.33333333333% * 5) - 3.875rem);
}
.pct-wdh--5-4 { /* pct-wdh--5-7 */
    width: calc((8.33333333333% * 5) - 4rem);
}
.pct-wdh--5-41 {
    width: calc((8.33333333333% * 5) - 4.125rem);
}
.pct-wdh--5-42 { /* pct-wdh--5-7-1 */
    width: calc((8.33333333333% * 5) - 4.25rem);
}
.pct-wdh--5-43 {
    width: calc((8.33333333333% * 5) - 4.375rem);
}
.pct-wdh--5-45 { /* pct-wdh--5-7-2 */
    width: calc((8.33333333333% * 5) - 4.5rem);
}
.pct-wdh--5-46 {
    width: calc((8.33333333333% * 5) - 4.625rem);
}
.pct-wdh--5-47 { /* pct-wdh--5-7-3 */
    width: calc((8.33333333333% * 5) - 4.75rem);
}
.pct-wdh--5-48 {
    width: calc((8.33333333333% * 5) - 4.875rem);
}
.pct-wdh--5-5 { /* pct-wdh--5-8 */
    width: calc((8.33333333333% * 5) - 5rem);
}
.pct-wdh--5-51 {
    width: calc((8.33333333333% * 5) - 5.125rem);
}
.pct-wdh--5-52 { /* pct-wdh--5-8-1 */
    width: calc((8.33333333333% * 5) - 5.25rem);
}
.pct-wdh--5-53 {
    width: calc((8.33333333333% * 5) - 5.375rem);
}
.pct-wdh--5-55 { /* pct-wdh--5-8-2 */
    width: calc((8.33333333333% * 5) - 5.5rem);
}
.pct-wdh--5-56 {
    width: calc((8.33333333333% * 5) - 5.625rem);
}
.pct-wdh--5-57 { /* pct-wdh--5-8-3 */
    width: calc((8.33333333333% * 5) - 5.75rem);
}
.pct-wdh--5-58 {
    width: calc((8.33333333333% * 5) - 5.875rem);
}
.pct-wdh--5-6 { /* pct-wdh--5-9 */
    width: calc((8.33333333333% * 5) - 6rem);
}
.pct-wdh--5-61 {
    width: calc((8.33333333333% * 5) - 6.125rem);
}
.pct-wdh--5-62 { /* pct-wdh--5-9-1 */
    width: calc((8.33333333333% * 5) - 6.25rem);
}
.pct-wdh--5-63 {
    width: calc((8.33333333333% * 5) - 6.375rem);
}
.pct-wdh--5-65 { /* pct-wdh--5-9-2 */
    width: calc((8.33333333333% * 5) - 6.5rem);
}
.pct-wdh--5-66 {
    width: calc((8.33333333333% * 5) - 6.625rem);
}
.pct-wdh--5-67 { /* pct-wdh--5-9-3 */
    width: calc((8.33333333333% * 5) - 6.75rem);
}
.pct-wdh--5-68 {
    width: calc((8.33333333333% * 5) - 6.875rem);
}
.pct-wdh--6 {
    width: calc(8.33333333333% * 6);
}
.pct-wdh--6-01 {
    width: calc((8.33333333333% * 6) - 0.125rem);
}
.pct-wdh--6-02 { /* pct-wdh--6-1 */
    width: calc((8.33333333333% * 6) - 0.25rem);
}
.pct-wdh--6-03 {
    width: calc((8.33333333333% * 6) - 0.375rem);
}
.pct-wdh--6-05 { /* pct-wdh--6-2 */
    width: calc((8.33333333333% * 6) - 0.5rem);
}
.pct-wdh--6-06 {
    width: calc((8.33333333333% * 6) - 0.625rem);
}
.pct-wdh--6-07 { /* pct-wdh--6-3 */
    width: calc((8.33333333333% * 6) - 0.75rem);
}
.pct-wdh--6-08 {
    width: calc((8.33333333333% * 6) - 0.875rem);
}
.pct-wdh--6-1 { /* pct-wdh--6-4 */
    width: calc((8.33333333333% * 6) - 1rem);
}
.pct-wdh--6-11 {
    width: calc((8.33333333333% * 6) - 1.125rem);
}
.pct-wdh--6-12 { /* pct-wdh--6-4-1 */
    width: calc((8.33333333333% * 6) - 1.25rem);
}
.pct-wdh--6-13 {
    width: calc((8.33333333333% * 6) - 1.375rem);
}
.pct-wdh--6-15 { /* pct-wdh--6-4-2 */
    width: calc((8.33333333333% * 6) - 1.5rem);
}
.pct-wdh--6-16 {
    width: calc((8.33333333333% * 6) - 1.625rem);
}
.pct-wdh--6-17 { /* pct-wdh--6-4-3 */
    width: calc((8.33333333333% * 6) - 1.75rem);
}
.pct-wdh--6-18 {
    width: calc((8.33333333333% * 6) - 1.875rem);
}
.pct-wdh--6-2 { /* pct-wdh--6-5 */
    width: calc((8.33333333333% * 6) - 2rem);
}
.pct-wdh--6-21 {
    width: calc((8.33333333333% * 6) - 2.125em);
}
.pct-wdh--6-22 { /* pct-wdh--6-5-1 */
    width: calc((8.33333333333% * 6) - 2.25rem);
}
.pct-wdh--6-23 {
    width: calc((8.33333333333% * 6) - 2.375rem);
}
.pct-wdh--6-25 { /* pct-wdh--6-5-2 */
    width: calc((8.33333333333% * 6) - 2.5rem);
}
.pct-wdh--6-26 {
    width: calc((8.33333333333% * 6) - 2.625rem);
}
.pct-wdh--6-27 { /* pct-wdh--6-5-3 */
    width: calc((8.33333333333% * 6) - 2.75rem);
}
.pct-wdh--6-28 {
    width: calc((8.33333333333% * 6) - 2.875rem);
}
.pct-wdh--6-3 { /* pct-wdh--6-6 */
    width: calc((8.33333333333% * 6) - 3rem);
}
.pct-wdh--6-31 {
    width: calc((8.33333333333% * 6) - 3.125rem);
}
.pct-wdh--6-32 { /* pct-wdh--6-6-1 */
    width: calc((8.33333333333% * 6) - 3.25rem);
}
.pct-wdh--6-33 {
    width: calc((8.33333333333% * 6) - 3.375rem);
}
.pct-wdh--6-35 { /* pct-wdh--6-6-2 */
    width: calc((8.33333333333% * 6) - 3.5rem);
}
.pct-wdh--6-36 {
    width: calc((8.33333333333% * 6) - 3.625rem);
}
.pct-wdh--6-37 { /* pct-wdh--6-6-3 */
    width: calc((8.33333333333% * 6) - 3.75rem);
}
.pct-wdh--6-38 {
    width: calc((8.33333333333% * 6) - 3.875rem);
}
.pct-wdh--6-4 { /* pct-wdh--6-7 */
    width: calc((8.33333333333% * 6) - 4rem);
}
.pct-wdh--6-41 {
    width: calc((8.33333333333% * 6) - 4.125rem);
}
.pct-wdh--6-42 { /* pct-wdh--6-7-1 */
    width: calc((8.33333333333% * 6) - 4.25rem);
}
.pct-wdh--6-43 {
    width: calc((8.33333333333% * 6) - 4.375rem);
}
.pct-wdh--6-45 { /* pct-wdh--6-7-2 */
    width: calc((8.33333333333% * 6) - 4.5rem);
}
.pct-wdh--6-46 {
    width: calc((8.33333333333% * 6) - 4.625rem);
}
.pct-wdh--6-47 { /* pct-wdh--6-7-3 */
    width: calc((8.33333333333% * 6) - 4.75rem);
}
.pct-wdh--6-48 {
    width: calc((8.33333333333% * 6) - 4.875rem);
}
.pct-wdh--6-5 { /* pct-wdh--6-8 */
    width: calc((8.33333333333% * 6) - 5rem);
}
.pct-wdh--6-51 {
    width: calc((8.33333333333% * 6) - 5.125rem);
}
.pct-wdh--6-52 { /* pct-wdh--6-8-1 */
    width: calc((8.33333333333% * 6) - 5.25rem);
}
.pct-wdh--6-53 {
    width: calc((8.33333333333% * 6) - 5.375rem);
}
.pct-wdh--6-55 { /* pct-wdh--6-8-2 */
    width: calc((8.33333333333% * 6) - 5.5rem);
}
.pct-wdh--6-56 {
    width: calc((8.33333333333% * 6) - 5.675rem);
}
.pct-wdh--6-57 { /* pct-wdh--6-8-3 */
    width: calc((8.33333333333% * 6) - 5.75rem);
}
.pct-wdh--6-58 {
    width: calc((8.33333333333% * 6) - 5.875rem);
}
.pct-wdh--6-6 { /* pct-wdh--6-9 */
    width: calc((8.33333333333% * 6) - 6rem);
}
.pct-wdh--6-61 {
    width: calc((8.33333333333% * 6) - 6.125rem);
}
.pct-wdh--6-62 { /* pct-wdh--6-9-1 */
    width: calc((8.33333333333% * 6) - 6.25rem);
}
.pct-wdh--6-63 {
    width: calc((8.33333333333% * 6) - 6.375rem);
}
.pct-wdh--6-65 { /* pct-wdh--6-9-2 */
    width: calc((8.33333333333% * 6) - 6.5rem);
}
.pct-wdh--6-66 {
    width: calc((8.33333333333% * 6) - 6.625rem);
}
.pct-wdh--6-67 { /* pct-wdh--6-9-3 */
    width: calc((8.33333333333% * 6) - 6.75rem);
}
.pct-wdh--6-68 {
    width: calc((8.33333333333% * 6) - 6.875rem);
}
.pct-wdh--7 {
    width: calc(8.33333333333% * 7);
}
.pct-wdh--7-01 {
    width: calc((8.33333333333% * 7) - 0.125rem);
}
.pct-wdh--7-02 { /* pct-wdh--7-1 */
    width: calc((8.33333333333% * 7) - 0.25rem);
}
.pct-wdh--7-03 {
    width: calc((8.33333333333% * 7) - 0.375rem);
}
.pct-wdh--7-05 { /* pct-wdh--7-2 */
    width: calc((8.33333333333% * 7) - 0.5rem);
}
.pct-wdh--7-06 {
    width: calc((8.33333333333% * 7) - 0.625rem);
}
.pct-wdh--7-07 { /* pct-wdh--7-3 */
    width: calc((8.33333333333% * 7) - 0.75rem);
}
.pct-wdh--7-08 {
    width: calc((8.33333333333% * 7) - 0.875rem);
}
.pct-wdh--7-1 { /* pct-wdh--7-4 */
    width: calc((8.33333333333% * 7) - 1rem);
}
.pct-wdh--7-11 {
    width: calc((8.33333333333% * 7) - 1.125rem);
}
.pct-wdh--7-12 { /* pct-wdh--7-4-1 */
    width: calc((8.33333333333% * 7) - 1.25rem);
}
.pct-wdh--7-13 {
    width: calc((8.33333333333% * 7) - 1.375rem);
}
.pct-wdh--7-15 { /* pct-wdh--7-4-2 */
    width: calc((8.33333333333% * 7) - 1.5rem);
}
.pct-wdh--7-16 {
    width: calc((8.33333333333% * 7) - 1.625rem);
}
.pct-wdh--7-17 { /* pct-wdh--7-4-3 */
    width: calc((8.33333333333% * 7) - 1.75rem);
}
.pct-wdh--7-18 {
    width: calc((8.33333333333% * 7) - 1.875rem);
}
.pct-wdh--7-2 { /* pct-wdh--7-5 */
    width: calc((8.33333333333% * 7) - 2rem);
}
.pct-wdh--7-21 {
    width: calc((8.33333333333% * 7) - 2.125rem);
}
.pct-wdh--7-22 { /* pct-wdh--7-5-1 */
    width: calc((8.33333333333% * 7) - 2.25rem);
}
.pct-wdh--7-23 {
    width: calc((8.33333333333% * 7) - 2.375rem);
}
.pct-wdh--7-25 { /* pct-wdh--7-5-2 */
    width: calc((8.33333333333% * 7) - 2.5rem);
}
.pct-wdh--7-26 {
    width: calc((8.33333333333% * 7) - 2.625rem);
}
.pct-wdh--7-27 { /* pct-wdh--7-5-3 */
    width: calc((8.33333333333% * 7) - 2.75rem);
}
.pct-wdh--7-28 {
    width: calc((8.33333333333% * 7) - 2.875rem);
}
.pct-wdh--7-3 { /* pct-wdh--7-6 */
    width: calc((8.33333333333% * 7) - 3rem);
}
.pct-wdh--7-31 {
    width: calc((8.33333333333% * 7) - 3.125rem);
}
.pct-wdh--7-32 { /* pct-wdh--7-6-1 */
    width: calc((8.33333333333% * 7) - 3.25rem);
}
.pct-wdh--7-33 {
    width: calc((8.33333333333% * 7) - 3.375rem);
}
.pct-wdh--7-35 { /* pct-wdh--7-6-2 */
    width: calc((8.33333333333% * 7) - 3.5rem);
}
.pct-wdh--7-36 {
    width: calc((8.33333333333% * 7) - 3.625rem);
}
.pct-wdh--7-37 { /* pct-wdh--7-6-3 */
    width: calc((8.33333333333% * 7) - 3.75rem);
}
.pct-wdh--7-38 {
    width: calc((8.33333333333% * 7) - 3.875rem);
}
.pct-wdh--7-4 { /* pct-wdh--7-7 */
    width: calc((8.33333333333% * 7) - 4rem);
}
.pct-wdh--7-41 {
    width: calc((8.33333333333% * 7) - 4.125rem);
}
.pct-wdh--7-42 { /* pct-wdh--7-7-1 */
    width: calc((8.33333333333% * 7) - 4.25rem);
}
.pct-wdh--7-43 {
    width: calc((8.33333333333% * 7) - 4.375rem);
}
.pct-wdh--7-45 { /* pct-wdh--7-7-2 */
    width: calc((8.33333333333% * 7) - 4.5rem);
}
.pct-wdh--7-46 {
    width: calc((8.33333333333% * 7) - 4.625rem);
}
.pct-wdh--7-47 { /* pct-wdh--7-7-3 */
    width: calc((8.33333333333% * 7) - 4.75rem);
}
.pct-wdh--7-48 {
    width: calc((8.33333333333% * 7) - 4.875rem);
}
.pct-wdh--7-5 { /* pct-wdh--7-8 */
    width: calc((8.33333333333% * 7) - 5rem);
}
.pct-wdh--7-51 {
    width: calc((8.33333333333% * 7) - 5.125rem);
}
.pct-wdh--7-52 { /* pct-wdh--7-8-1 */
    width: calc((8.33333333333% * 7) - 5.25rem);
}
.pct-wdh--7-53 {
    width: calc((8.33333333333% * 7) - 5.375rem);
}
.pct-wdh--7-55 { /* pct-wdh--7-8-2 */
    width: calc((8.33333333333% * 7) - 5.5rem);
}
.pct-wdh--7-56 {
    width: calc((8.33333333333% * 7) - 5.625rem);
}
.pct-wdh--7-57 { /* pct-wdh--7-8-3 */
    width: calc((8.33333333333% * 7) - 5.75rem);
}
.pct-wdh--7-58 {
    width: calc((8.33333333333% * 7) - 5.875rem);
}
.pct-wdh--7-6 { /* pct-wdh--7-9 */
    width: calc((8.33333333333% * 7) - 6rem);
}
.pct-wdh--7-61 {
    width: calc((8.33333333333% * 7) - 6.125rem);
}
.pct-wdh--7-62 { /* pct-wdh--7-9-1 */
    width: calc((8.33333333333% * 7) - 6.25rem);
}
.pct-wdh--7-63 {
    width: calc((8.33333333333% * 7) - 6.375rem);
}
.pct-wdh--7-65 { /* pct-wdh--7-9-2 */
    width: calc((8.33333333333% * 7) - 6.5rem);
}
.pct-wdh--7-66 {
    width: calc((8.33333333333% * 7) - 6.625rem);
}
.pct-wdh--7-67 { /* pct-wdh--7-9-3 */
    width: calc((8.33333333333% * 7) - 6.75rem);
}
.pct-wdh--7-68 {
    width: calc((8.33333333333% * 7) - 6.875rem);
}
.pct-wdh--8 {
    width: calc(8.33333333333% * 8);
}
.pct-wdh--8-01 {
    width: calc((8.33333333333% * 8) - 0.125rem);
}
.pct-wdh--8-02 { /* pct-wdh--8-1 */
    width: calc((8.33333333333% * 8) - 0.25rem);
}
.pct-wdh--8-03 {
    width: calc((8.33333333333% * 8) - 0.375rem);
}
.pct-wdh--8-05 { /* pct-wdh--8-2 */
    width: calc((8.33333333333% * 8) - 0.5rem);
}
.pct-wdh--8-06 {
    width: calc((8.33333333333% * 8) - 0.625rem);
}
.pct-wdh--8-07 { /* pct-wdh--8-3 */
    width: calc((8.33333333333% * 8) - 0.75rem);
}
.pct-wdh--8-08 {
    width: calc((8.33333333333% * 8) - 0.875rem);
}
.pct-wdh--8-1 { /* pct-wdh--8-4 */
    width: calc((8.33333333333% * 8) - 1rem);
}
.pct-wdh--8-11 {
    width: calc((8.33333333333% * 8) - 1.125rem);
}
.pct-wdh--8-12 { /* pct-wdh--8-4-1 */
    width: calc((8.33333333333% * 8) - 1.25rem);
}
.pct-wdh--8-13 {
    width: calc((8.33333333333% * 8) - 1.375rem);
}
.pct-wdh--8-15 { /* pct-wdh--8-4-2 */
    width: calc((8.33333333333% * 8) - 1.5rem);
}
.pct-wdh--8-16 {
    width: calc((8.33333333333% * 8) - 1.625rem);
}
.pct-wdh--8-17 { /* pct-wdh--8-4-3 */
    width: calc((8.33333333333% * 8) - 1.75rem);
}
.pct-wdh--8-18 {
    width: calc((8.33333333333% * 8) - 1.875rem);
}
.pct-wdh--8-2 { /* pct-wdh--8-5 */
    width: calc((8.33333333333% * 8) - 2rem);
}
.pct-wdh--8-21 {
    width: calc((8.33333333333% * 8) - 2.125rem);
}
.pct-wdh--8-22 { /* pct-wdh--8-5-1 */
    width: calc((8.33333333333% * 8) - 2.25rem);
}
.pct-wdh--8-23 {
    width: calc((8.33333333333% * 8) - 2.375rem);
}
.pct-wdh--8-25 { /* pct-wdh--8-5-2 */
    width: calc((8.33333333333% * 8) - 2.5rem);
}
.pct-wdh--8-26 {
    width: calc((8.33333333333% * 8) - 2.625rem);
}
.pct-wdh--8-27 { /* pct-wdh--8-5-3 */
    width: calc((8.33333333333% * 8) - 2.75rem);
}
.pct-wdh--8-28 {
    width: calc((8.33333333333% * 8) - 2.875rem);
}
.pct-wdh--8-3 { /* pct-wdh--8-6 */
    width: calc((8.33333333333% * 8) - 3rem);
}
.pct-wdh--8-31 {
    width: calc((8.33333333333% * 8) - 3.125rem);
}
.pct-wdh--8-32 {
    width: calc((8.33333333333% * 8) - 3.25rem);
}
.pct-wdh--8-33 {
    width: calc((8.33333333333% * 8) - 3.375rem);
}
.pct-wdh--8-35 {
    width: calc((8.33333333333% * 8) - 3.5rem);
}
.pct-wdh--8-36 {
    width: calc((8.33333333333% * 8) - 3.625rem);
}
.pct-wdh--8-37 {
    width: calc((8.33333333333% * 8) - 3.75rem);
}
.pct-wdh--8-38 {
    width: calc((8.33333333333% * 8) - 3.875rem);
}
.pct-wdh--8-4 { /* pct-wdh--8-7 */
    width: calc((8.33333333333% * 8) - 4rem);
}
.pct-wdh--8-41 {
    width: calc((8.33333333333% * 8) - 4.125rem);
}
.pct-wdh--8-42 {
    width: calc((8.33333333333% * 8) - 4.25rem);
}
.pct-wdh--8-43 {
    width: calc((8.33333333333% * 8) - 4.375rem);
}
.pct-wdh--8-45 {
    width: calc((8.33333333333% * 8) - 4.5rem);
}
.pct-wdh--8-46 {
    width: calc((8.33333333333% * 8) - 4.625rem);
}
.pct-wdh--8-47 {
    width: calc((8.33333333333% * 8) - 4.75rem);
}
.pct-wdh--8-48 {
    width: calc((8.33333333333% * 8) - 4.875rem);
}
.pct-wdh--8-5 { /* pct-wdh--8-8 */
    width: calc((8.33333333333% * 8) - 5rem);
}
.pct-wdh--8-52 {
    width: calc((8.33333333333% * 8) - 5.25rem);
}
.pct-wdh--8-55 {
    width: calc((8.33333333333% * 8) - 5.5rem);
}
.pct-wdh--8-57 {
    width: calc((8.33333333333% * 8) - 5.75rem);
}
.pct-wdh--8-6 { /* pct-wdh--8-9 */
    width: calc((8.33333333333% * 8) - 6rem);
}
.pct-wdh--8-62 {
    width: calc((8.33333333333% * 8) - 6.25rem);
}
.pct-wdh--8-65 {
    width: calc((8.33333333333% * 8) - 6.5rem);
}
.pct-wdh--8-67 {
    width: calc((8.33333333333% * 8) - 6.75rem);
}
.pct-wdh--9 {
    width: calc(8.33333333333% * 9);
}
.pct-wdh--9-02 {
    width: calc((8.33333333333% * 9) - 0.25rem);
}
.pct-wdh--9-05 {
    width: calc((8.33333333333% * 9) - 0.5rem);
}
.pct-wdh--9-07 {
    width: calc((8.33333333333% * 9) - 0.75rem);
}
.pct-wdh--9-1 { /* pct-wdh--9-4 */
    width: calc((8.33333333333% * 9) - 1rem);
}
.pct-wdh--9-12 { /* .pct-wdh--9-5 */
    width: calc((8.33333333333% * 9) - 1.25rem);
}
.pct-wdh--9-15 { /* .pct-wdh--9-6 */
    width: calc((8.33333333333% * 9) - 1.5rem);
}
.pct-wdh--9-17 { /* .pct-wdh--9-7 */
    width: calc((8.33333333333% * 9) - 1.75rem);
}
.pct-wdh--9-2 { /* pct-wdh--9-5 */
    width: calc((8.33333333333% * 9) - 2rem);
}
.pct-wdh--9-22 {
    width: calc((8.33333333333% * 9) - 2.25rem);
}
.pct-wdh--9-25 {
    width: calc((8.33333333333% * 9) - 2.5rem);
}
.pct-wdh--9-27 {
    width: calc((8.33333333333% * 9) - 2.75rem);
}
.pct-wdh--9-3 { /* pct-wdh--9-6 */
    width: calc((8.33333333333% * 9) - 3rem);
}
.pct-wdh--9-32 {
    width: calc((8.33333333333% * 9) - 3.25rem);
}
.pct-wdh--9-35 {
    width: calc((8.33333333333% * 9) - 3.5rem);
}
.pct-wdh--9-37 {
    width: calc((8.33333333333% * 9) - 3.75rem);
}
.pct-wdh--9-4 { /* pct-wdh--9-7 */
    width: calc((8.33333333333% * 9) - 4rem);
}
.pct-wdh--9-42 {
    width: calc((8.33333333333% * 9) - 4.25rem);
}
.pct-wdh--9-45 {
    width: calc((8.33333333333% * 9) - 4.5rem);
}
.pct-wdh--9-47 {
    width: calc((8.33333333333% * 9) - 4.75rem);
}
.pct-wdh--9-5 { /* pct-wdh--9-8 */
    width: calc((8.33333333333% * 9) - 5rem);
}
.pct-wdh--9-52 {
    width: calc((8.33333333333% * 9) - 5.25rem);
}
.pct-wdh--9-55 {
    width: calc((8.33333333333% * 9) - 5.5rem);
}
.pct-wdh--9-57 {
    width: calc((8.33333333333% * 9) - 5.75rem);
}
.pct-wdh--9-6 { /* pct-wdh--9-9 */
    width: calc((8.33333333333% * 9) - 6rem);
}
.pct-wdh--9-62 {
    width: calc((8.33333333333% * 9) - 6.25rem);
}
.pct-wdh--9-65 {
    width: calc((8.33333333333% * 9) - 6.5rem);
}
.pct-wdh--9-67 {
    width: calc((8.33333333333% * 9) - 6.75rem);
}
.pct-wdh--10 {
    width: calc(8.33333333333% * 10);
}
.pct-wdh--10-02 {
    width: calc((8.33333333333% * 10) - 0.25rem);
}
.pct-wdh--10-05 {
    width: calc((8.33333333333% * 10) - 0.5rem);
}
.pct-wdh--10-07 {
    width: calc((8.33333333333% * 10) - 0.75rem);
}
.pct-wdh--10-1 { /* pct-wdh--10-4 */
    width: calc((8.33333333333% * 10) - 1rem);
}
.pct-wdh--10-12 {
    width: calc((8.33333333333% * 10) - 1.25rem);
}
.pct-wdh--10-15 {
    width: calc((8.33333333333% * 10) - 1.5rem);
}
.pct-wdh--10-17 {
    width: calc((8.33333333333% * 10) - 1.75rem);
}
.pct-wdh--10-2 { /* pct-wdh--10-5 */
    width: calc((8.33333333333% * 10) - 2rem);
}
.pct-wdh--10-22 {
    width: calc((8.33333333333% * 10) - 2.25rem);
}
.pct-wdh--10-25 {
    width: calc((8.33333333333% * 10) - 2.5rem);
}
.pct-wdh--10-27 {
    width: calc((8.33333333333% * 10) - 2.75rem);
}
.pct-wdh--10-3 { /* pct-wdh--10-6 */
    width: calc((8.33333333333% * 10) - 3rem);
}
.pct-wdh--10-32 {
    width: calc((8.33333333333% * 10) - 3.25rem);
}
.pct-wdh--10-35 {
    width: calc((8.33333333333% * 10) - 3.5rem);
}
.pct-wdh--10-37 {
    width: calc((8.33333333333% * 10) - 3.75rem);
}
.pct-wdh--10-4 { /* pct-wdh--10-7 */
    width: calc((8.33333333333% * 10) - 4rem);
}
.pct-wdh--10-42 {
    width: calc((8.33333333333% * 10) - 4.25rem);
}
.pct-wdh--10-45 {
    width: calc((8.33333333333% * 10) - 4.5rem);
}
.pct-wdh--10-47 {
    width: calc((8.33333333333% * 10) - 4.75rem);
}
.pct-wdh--10-5 { /* pct-wdh--10-8 */
    width: calc((8.33333333333% * 10) - 5rem);
}
.pct-wdh--10-52 {
    width: calc((8.33333333333% * 10) - 5.25rem);
}
.pct-wdh--10-55 {
    width: calc((8.33333333333% * 10) - 5.5rem);
}
.pct-wdh--10-57 {
    width: calc((8.33333333333% * 10) - 5.75rem);
}
.pct-wdh--10-6 { /* pct-wdh--10-9 */
    width: calc((8.33333333333% * 10) - 6rem);
}
.pct-wdh--10-62 {
    width: calc((8.33333333333% * 10) - 6.25rem);
}
.pct-wdh--10-65 {
    width: calc((8.33333333333% * 10) - 6.5rem);
}
.pct-wdh--10-67 {
    width: calc((8.33333333333% * 10) - 6.75rem);
}
.pct-wdh--11 {
    width: calc(8.33333333333% * 11);
}
.pct-wdh--11-02 {
    width: calc((8.33333333333% * 11) - 0.25rem);
}
.pct-wdh--11-03 {
    width: calc((8.33333333333% * 11) - 0.375rem);
}
.pct-wdh--11-05 {
    width: calc((8.33333333333% * 11) - 0.5rem);
}
.pct-wdh--11-07 {
    width: calc((8.33333333333% * 11) - 0.75rem);
}
.pct-wdh--11-1 { /* pct-wdh--11-4 */
    width: calc((8.33333333333% * 11) - 1rem);
}
.pct-wdh--11-12 {
    width: calc((8.33333333333% * 11) - 1.25rem);
}
.pct-wdh--11-15 {
    width: calc((8.33333333333% * 11) - 1.5rem);
}
.pct-wdh--11-17 {
    width: calc((8.33333333333% * 11) - 1.75rem);
}
.pct-wdh--11-2 { /* pct-wdh--11-5 */
    width: calc((8.33333333333% * 11) - 2rem);
}
.pct-wdh--11-22 {
    width: calc((8.33333333333% * 11) - 2.25rem);
}
.pct-wdh--11-25 {
    width: calc((8.33333333333% * 11) - 2.5rem);
}
.pct-wdh--11-27 {
    width: calc((8.33333333333% * 11) - 2.75rem);
}
.pct-wdh--11-3 { /* pct-wdh--11-6 */
    width: calc((8.33333333333% * 11) - 3rem);
}
.pct-wdh--11-32 {
    width: calc((8.33333333333% * 11) - 3.25rem);
}
.pct-wdh--11-35 {
    width: calc((8.33333333333% * 11) - 3.5rem);
}
.pct-wdh--11-37 {
    width: calc((8.33333333333% * 11) - 3.75rem);
}
.pct-wdh--11-4 { /* pct-wdh--11-7 */
    width: calc((8.33333333333% * 11) - 4rem);
}
.pct-wdh--11-42 {
    width: calc((8.33333333333% * 11) - 4.25rem);
}
.pct-wdh--11-45 {
    width: calc((8.33333333333% * 11) - 4.5rem);
}
.pct-wdh--11-47 {
    width: calc((8.33333333333% * 11) - 4.75rem);
}
.pct-wdh--11-8 { /* pct-wdh--11-8 */
    width: calc((8.33333333333% * 11) - 5rem);
}
.pct-wdh--11-52 {
    width: calc((8.33333333333% * 11) - 5.25rem);
}
.pct-wdh--11-55 {
    width: calc((8.33333333333% * 11) - 5.5rem);
}
.pct-wdh--11-57 {
    width: calc((8.33333333333% * 11) - 5.75rem);
}
.pct-wdh--11-6 { /* pct-wdh--11-9 */
    width: calc((8.33333333333% * 11) - 6rem);
}
.pct-wdh--11-62 {
    width: calc((8.33333333333% * 11) - 6.25rem);
}
.pct-wdh--11-65 {
    width: calc((8.33333333333% * 11) - 6.5rem);
}
.pct-wdh--11-67 {
    width: calc((8.33333333333% * 11) - 6.75rem);
}
.pct-wdh--12 {
    width: calc(8.33333333333% * 12);
}
.pct-wdh--12-01 {
    width: calc((8.33333333333% * 12) - 0.125rem);
}
.pct-wdh--12-02 {
    width: calc((8.33333333333% * 12) - 0.25rem);
}
.pct-wdh--12-05 {
    width: calc((8.33333333333% * 12) - 0.5rem);
}
.pct-wdh--12-07 {
    width: calc((8.33333333333% * 12) - 0.75rem);
}
.pct-wdh--12-1 { /* pct-wdh--12-4 */
    width: calc((8.33333333333% * 12) - 1rem);
}
.pct-wdh--12-12 {
    width: calc((8.33333333333% * 12) - 1.25rem);
}
.pct-wdh--12-15 {
    width: calc((8.33333333333% * 12) - 1.5rem);
}
.pct-wdh--12-17 {
    width: calc((8.33333333333% * 12) - 1.75rem);
}
.pct-wdh--12-2 {
    width: calc((8.33333333333% * 12) - 2rem);
}
.pct-wdh--12-22 {
    width: calc((8.33333333333% * 12) - 2.25rem);
}
.pct-wdh--12-25 {
    width: calc((8.33333333333% * 12) - 2.5rem);
}
.pct-wdh--12-27 {
    width: calc((8.33333333333% * 12) - 2.75rem);
}
.pct-wdh--12-3 { /* pct-wdh--12-6 */
    width: calc((8.33333333333% * 12) - 3rem);
}
.pct-wdh--12-32 {
    width: calc((8.33333333333% * 12) - 3.25rem);
}
.pct-wdh--12-35 {
    width: calc((8.33333333333% * 12) - 3.5rem);
}
.pct-wdh--12-37 {
    width: calc((8.33333333333% * 12) - 3.75rem);
}
.pct-wdh--12-4 { /* pct-wdh--12-7 */
    width: calc((8.33333333333% * 12) - 4rem);
}
.pct-wdh--12-42 {
    width: calc((8.33333333333% * 12) - 4.25rem);
}
.pct-wdh--12-45 {
    width: calc((8.33333333333% * 12) - 4.5rem);
}
.pct-wdh--12-47 {
    width: calc((8.33333333333% * 12) - 4.75rem);
}
.pct-wdh--12-5 { /* pct-wdh--12-8 */
    width: calc((8.33333333333% * 12) - 5rem);
}
.pct-wdh--12-52 {
    width: calc((8.33333333333% * 12) - 5.25rem);
}
.pct-wdh--12-55 {
    width: calc((8.33333333333% * 12) - 5.5rem);
}
.pct-wdh--12-57 {
    width: calc((8.33333333333% * 12) - 5.75rem);
}
.pct-wdh--12-6 { /* pct-wdh--12-9 */
    width: calc((8.33333333333% * 12) - 6rem);
}
.pct-wdh--12-62 {
    width: calc((8.33333333333% * 12) - 6.25rem);
}
.pct-wdh--12-65 {
    width: calc((8.33333333333% * 12) - 6.5rem);
}
.pct-wdh--12-67 {
    width: calc((8.33333333333% * 12) - 6.75rem);
}

.pct-wdh--12-a-01 {
	width: calc((8.33333333333% * 12) + 0.125rem);
}
.pct-wdh--12-a-02 {
	width: calc((8.33333333333% * 12) + 0.25rem);
}
.pct-wdh--12-a-03 {
	width: calc((8.33333333333% * 12) + 0.375rem);
}
.pct-wdh--12-a-05 {
	width: calc((8.33333333333% * 12) + 0.5rem);
}

/*=================
 * rem width
 * For small width
===================*/
.rem-wdh--01 { /* rem-wdh--0 */
	width: 0.125rem;
}
.rem-wdh--02 { /* rem-wdh--1 */
    width: 0.25rem;
}
.rem-wdh--03 {
    width: 0.375rem;
}
.rem-wdh--05 { /* rem-wdh--2 */
    width: 0.5rem;
}
.rem-wdh--06 { /* rem-wdh--2-3 */
    width: 0.625rem;
}
.rem-wdh--07 { /* rem-wdh--3 */
    width: 0.75rem;
}
.rem-wdh--08 {
    width: 0.875rem;
}
.rem-wdh--1 { /* rem-wdh--4 */
    width: 1rem;
}
.rem-wdh--11 { /* rem-wdh--4-0 */
    width: 1.125rem;
}
.rem-wdh--12 { /* rem-wdh--4-1 */
    width: 1.25rem;
}
.rem-wdh--13 {
    width: 1.375rem;
}
.rem-wdh--15 { /* rem-wdh--4-2 */
    width: 1.5rem;
}
.rem-wdh--16 {
    width: 1.625rem;
}
.rem-wdh--17 { /* rem-wdh--4-3 */
    width: 1.75rem;
}
.rem-wdh--18 {
    width: 1.875rem;
}
.rem-wdh--2 { /* rem-wdh--5 */
    width: 2rem;
}
.rem-wdh--21 { /* rem-wdh--5-0 */
	width: 2.125rem;
}
.rem-wdh--22 { /* rem-wdh--5-1 */
    width: 2.25rem;
}
.rem-wdh--23 {
    width: 2.375rem;
}
.rem-wdh--25 { /* rem-wdh--5-2 */
    width: 2.5rem;
}
.rem-wdh--26 {
    width: 2.625rem;
}
.rem-wdh--27 { /* rem-wdh--5-3 */
    width: 2.75rem;
}
.rem-wdh--28 {
    width: 2.875rem;
}
.rem-wdh--3 { /* rem-wdh--6 */
    width: 3rem;
}
.rem-wdh--31 {
    width: 3.125rem;
}
.rem-wdh--32 { /* rem-wdh--6-1 */
    width: 3.25rem;
}
.rem-wdh--33 {
    width: 3.375rem;
}
.rem-wdh--35 { /* rem-wdh--6-2 */
    width: 3.5rem;
}
.rem-wdh--36 {
    width: 3.625rem;
}
.rem-wdh--37 { /* rem-wdh--6-3 */
    width: 3.75rem;
}
.rem-wdh--38 {
    width: 3.875rem;
}
.rem-wdh--4 { /* rem-wdh--7 */
    width: 4rem;
}
.rem-wdh--41 {
    width: 4.125rem;
}
.rem-wdh--42 { /* rem-wdh--7-1 */
    width: 4.25rem;
}
.rem-wdh--43 {
    width: 4.375rem;
}
.rem-wdh--45 { /* rem-wdh--7-2 */
    width: 4.5rem;
}
.rem-wdh--46 {
    width: 4.625rem;
}
.rem-wdh--47 { /* rem-wdh--7-3 */
    width: 4.75rem;
}
.rem-wdh--48 {
    width: 4.875rem;
}
.rem-wdh--5 {  /* rem-wdh--8 */
    width: 5rem;
}
.rem-wdh--51 {
    width: 5.125rem;
}
.rem-wdh--52 { /* rem-wdh--8-1 */
    width: 5.25rem;
}
.rem-wdh--53 {
    width: 5.375rem;
}
.rem-wdh--55 { /* rem-wdh--8-2 */
    width: 5.5rem;
}
.rem-wdh--56 {
    width: 5.625rem;
}
.rem-wdh--57 { /* rem-wdh--8-3 */
    width: 5.75rem;
}
.rem-wdh--58 {
    width: 5.875rem;
}
.rem-wdh--6 { /* rem-wdh--9 */
    width: 6rem;
}
.rem-wdh--61 {
    width: 6.125rem;
}
.rem-wdh--62 { /* rem-wdh--9-1 */
    width: 6.25rem;
}
.rem-wdh--63 {
    width: 6.375rem;
}
.rem-wdh--65 { /* rem-wdh--9-2 */
    width: 6.5rem;
}
.rem-wdh--66 {
    width: 6.625rem;
}
.rem-wdh--67 { /* rem-wdh--9-3 */
    width: 6.75rem;
}
.rem-wdh--68 {
    width: 6.875rem;
}
.rem-wdh--7 { /* rem-wdh--10 */
    width: 7rem;
}

/*==================
 * pixel width
 * For large width
====================*/
.pxl-wdh--100 {
    width: 100px;
}
.pxl-wdh--110 {
    width: 110px;
}
.pxl-wdh--115 {
    width: 115px;
}
.pxl-wdh--120 {
    width: 120px;
}
.pxl-wdh--125 {
    width: 125px;
}
.pxl-wdh--130 {
    width: 130px;
}
.pxl-wdh--135 {
    width: 135px;
}
.pxl-wdh--140 {
    width: 140px;
}
.pxl-wdh--145 {
    width: 145px;
}
.pxl-wdh--150 {
    width: 150px;
}
.pxl-wdh--155 {
    width: 155px;
}
.pxl-wdh--158 {
    width: 158px;
}
.pxl-wdh--160 {
    width: 160px;
}
.pxl-wdh--165 {
    width: 165px;
}
.pxl-wdh--170 {
    width: 170px;
}
.pxl-wdh--175 {
    width: 175px;
}
.pxl-wdh--180 {
    width: 180px;
}
.pxl-wdh--185 {
    width: 185px;
}
.pxl-wdh--190 {
    width: 190px;
}
.pxl-wdh--195 {
    width: 195px;
}
.pxl-wdh--200 {
    width: 200px;
}
.pxl-wdh--210 {
    width: 210px;
}
.pxl-wdh--220 {
	width: 220px;
}
.pxl-wdh--230 {
	width: 230px;
}
.pxl-wdh--240 {
	width: 240px;
}
.pxl-wdh--300 {
    width: 300px;
}
.pxl-wdh--320 {
    width: 320px;
}
.pxl-wdh--340 {
    width: 340px;
}
.pxl-wdh--360 {
    width: 360px;
}
.pxl-wdh--380 {
    width: 380px;
}
.pxl-wdh--400 {
    width: 400px;
}
.pxl-wdh--410 {
    width: 410px;
}
.pxl-wdh--420 {
    width: 420px;
}
.pxl-wdh--430 {
    width: 430px;
}
.pxl-wdh--440 {
    width: 440px;
}
.pxl-wdh--450 {
    width: 450px;
}
.pxl-wdh--500 {
    width: 500px;
}
.pxl-wdh--530 {
    width: 530px;
}
.pxl-wdh--550 {
    width: 550px;
}
.pxl-wdh--600 {
    width: 600px;
}
.pxl-wdh--650 {
    width: 650px;
}
.pxl-wdh--700 {
    width: 700px;
}
.pxl-wdh--800 {
    width: 800px;
}
.pxl-wdh--850 {
    width: 850px;
}
.pxl-wdh--900 {
    width: 900px;
}
.pxl-wdh--920 {
    width: 920px;
}
.pxl-wdh--1000 {
    width: 1000px;
}

.pxl-max-wdh--1400 {
	max-width: 1400px;
}

/*==============
 * height
 ===============*/
.hgt--inh {
    height: inherit;
}

/*=================
 * rem height
 * For small height
===================*/
.rem-hgt--01 { /* rem-hgt--0 */
	height: 0.125rem;
}
.rem-hgt--02 { /* rem-hgt--1 */
    height: 0.25rem;
}
.rem-hgt--03 {
    height: 0.375rem;
}
.rem-hgt--05 { /* rem-hgt--2 */
    height: 0.5rem;
}
.rem-hgt--06 { /* rem-hgt--2-3 */
    height: 0.625rem;
}
.rem-hgt--07 { /* rem-hgt--3 */
    height: 0.75rem;
}
.rem-hgt--08 {
    height: 0.875rem;
}
.rem-hgt--1 { /* rem-hgt--4 */
    height: 1rem;
}
.rem-hgt--11 { /* rem-hgt--4-0 */
    height: 1.125rem;
}
.rem-hgt--12 { /* rem-hgt--4-1 */
    height: 1.25rem;
}
.rem-hgt--13 {
    height: 1.375rem;
}
.rem-hgt--15 { /* rem-hgt--4-2 */
    height: 1.5rem;
}
.rem-hgt--16 {
    height: 1.625rem;
}
.rem-hgt--17 { /* rem-hgt--4-3 */
    height: 1.75rem;
}
.rem-hgt--18 {
    height: 1.875rem;
}
.rem-hgt--2 { /* rem-hgt--5 */
    height: 2rem;
}
.rem-hgt--21 { /* rem-hgt--5-0 */
	height: 2.125rem;
}
.rem-hgt--22 { /* rem-hgt--5-1 */
    height: 2.25rem;
}
.rem-hgt--23 {
    height: 2.375rem;
}
.rem-hgt--25 { /* rem-hgt--5-2 */
    height: 2.5rem;
}
.rem-hgt--26 {
    height: 2.625rem;
}
.rem-hgt--27 { /* rem-hgt--5-3 */
    height: 2.75rem;
}
.rem-hgt--28 {
    height: 2.875rem;
}
.rem-hgt--3 { /* rem-hgt--6 */
    height: 3rem;
}
.rem-hgt--31 {
    height: 3.125rem;
}
.rem-hgt--32 { /* rem-hgt--6-1 */
    height: 3.25rem;
}
.rem-hgt--33 {
    height: 3.375rem;
}
.rem-hgt--35 { /* rem-hgt--6-2 */
    height: 3.5rem;
}
.rem-hgt--36 {
    height: 3.625rem;
}
.rem-hgt--37 { /* rem-hgt--6-3 */
    height: 3.75rem;
}
.rem-hgt--38 {
    height: 3.875rem;
}
.rem-hgt--4 { /* rem-hgt--7 */
    height: 4rem;
}
.rem-hgt--41 {
    height: 4.125rem;
}
.rem-hgt--42 { /* rem-hgt--7-1 */
    height: 4.25rem;
}
.rem-hgt--43 {
    height: 4.375rem;
}
.rem-hgt--45 { /* rem-hgt--7-2 */
    height: 4.5rem;
}
.rem-hgt--46 {
    height: 4.625rem;
}
.rem-hgt--47 { /* rem-hgt--7-3 */
    height: 4.75rem;
}
.rem-hgt--48 {
    height: 4.875rem;
}
.rem-hgt--5 {  /* rem-hgt--8 */
    height: 5rem;
}
.rem-hgt--51 {
    height: 5.125rem;
}
.rem-hgt--52 { /* rem-hgt--8-1 */
    height: 5.25rem;
}
.rem-hgt--53 {
    height: 5.375rem;
}
.rem-hgt--55 { /* rem-hgt--8-2 */
    height: 5.5rem;
}
.rem-hgt--56 {
    height: 5.625rem;
}
.rem-hgt--57 { /* rem-hgt--8-3 */
    height: 5.75rem;
}
.rem-hgt--58 {
    height: 5.875rem;
}
.rem-hgt--6 { /* rem-hgt--9 */
    height: 6rem;
}
.rem-hgt--61 {
    height: 6.125rem;
}
.rem-hgt--62 { /* rem-hgt--9-1 */
    height: 6.25rem;
}
.rem-hgt--63 {
    height: 6.375rem;
}
.rem-hgt--65 { /* rem-hgt--9-2 */
    height: 6.5rem;
}
.rem-hgt--66 {
    height: 6.625rem;
}
.rem-hgt--67 { /* rem-hgt--9-3 */
    height: 6.75rem;
}
.rem-hgt--68 {
    height: 6.875rem;
}
.rem-hgt--7 { /* rem-hgt--10 */
    height: 7rem;
}


/*=================
 * pixel height
 * For large height
===================*/
.pxl-hgt--110 {
    height: 110px;
}
.pxl-hgt--115 {
    height: 115px;
}
.pxl-hgt--120 {
    height: 120px;
}
.pxl-hgt--125 {
    height: 125px;
}
.pxl-hgt--130 {
    height: 130px;
}
.pxl-hgt--155 {
	height: 155px;
}
.pxl-hgt--160 {
	height: 160px;
}
.pxl-hgt--165 {
	height: 165px;
}
.pxl-hgt--170 {
	height: 170px;
}
.pxl-hgt--185 {
	height: 185px;
}
.pxl-hgt--200 {
	height: 200px;
}
.pxl-hgt--300 {
	height: 500px;
}

/*==========
 * vh height
============*/
.vh-hgt--35 {
	height: 35dvh;
}
.vh-hgt--100 {
	height: 100dvh;
}

/*==================
 * Percentage height
====================*/
.pct-hgt--12 {
    height: calc(8.33333333333% * 12);
}

/*=======
 * float
=========*/
.flt--lft {
    float: left;
}
.flt--rgt {
    float: right;
}

/*============
 * clear float
==============*/
.clr-flt {
	clear: both;
}

/*=============
 * font family
===============*/
/* regular font */
.fnt--rg {
    font-family: 'regular', sans-serif;
}
/* medium font */
.fnt--md {
    font-family: 'medium', sans-serif;
}
.fnt--md-2 {
    font-family: 'medium-2', sans-serif;
}
/* semibold font */
.fnt--sb {
    font-family: 'semibold', sans-serif;
}
.fnt--sb-2 {
    font-family: 'semibold-2', sans-serif;
}
/* bold font */
.fnt--bd {
    font-family: 'bold', sans-serif;
}
.fnt--bd-2 {
    font-family: 'bold-2', sans-serif;
}

/*===========
 * font size
 * TODO: May be rename `fnt-sz--` to `fnt--
=============*/
.fnt-sz--10 {
    font-size: 10px;
}
.fnt-sz--11 {
    font-size: 11px;
}
.fnt-sz--12 {
    font-size: 12px;
}
.fnt-sz--13 {
    font-size: 13px;
}
.fnt-sz--14 {
    font-size: 14px;
}
.fnt-sz--15 {
    font-size: 15px;
}
.fnt-sz--16 {
    font-size: 16px; 
}
.fnt-sz--17 {
    font-size: 17px;
}
.fnt-sz--18 {
    font-size: 18px;
}
.fnt-sz--19 {
    font-size: 19px;
}
.fnt-sz--20 {
    font-size: 20px;
}
.fnt-sz--22 {
    font-size: 22px;
}
.fnt-sz--24 {
    font-size: 24px;
}
.fnt-sz--26 {
    font-size: 26px;
}
.fnt-sz--38 {
	font-size: 38px;
}
.fnt-sz--40 {
    font-size: 40px;
}

/*==========
 * overflow
============*/
.ofl--auto {
    overflow: auto;
}
.ofl--vsb {
    overflow: visible;
}
.ofl--hdn {
	overflow: hidden;
}
.ofl--y-auto {
	overflow-y: auto;
}

/*======================
 * cursor - DON'T DELETE
========================*/
.csr--dft {
	cursor: default;
}
.csr--ptr {
	cursor: pointer;
}
.csr--txt {
	cursor: text;
}
.csr--na {
	cursor: not-allowed;
}

/*=====================
 * flex box properties
=======================*/
.flx--row { /* Old name `flx-box--row`, `flx-dir--row` */
	flex-direction: row;
}
.flx--col { /* Old name `flx-box--col`, `flx-dir--col` */
	flex-direction: column;
}
.flx--col-rev { /* Old name `flx-box--col`, `flx-dir--col` */
	flex-direction: column-reverse;
}
.flx--y-mid { /* Old name `flx-box--y-mid`, flx-align--y-mid */
	align-items: center;
}
.flx--y-strch { /* Old name `flx-box--y-strch`, flx-align--y-strch */
	align-items: stretch;
}
.flx--x-mid { /* Old name `flx-box--x-mid`, flx-align--x-mid */
	justify-content: center;
}
.flx--x-spc-btw { /* Old name `flx-box--x-sp-btw`, flx-align--x-spc-btw */
	justify-content: space-between;
}
.flx--x-spc-arnd { /* Old name `flx-box--x-sp-arnd`, flx-align--x-spc-arnd */
	justify-content: space-around;
}
.flx--x-start { /* Old name `flx-box--x-start`, flx-align--x-start */
	justify-content: flex-start;
}
.flx--x-end { /* Old name `flx-box--x-end`, flx-align--x-end */
	justify-content: flex-end;
}

/*======================
 * flex item properties
========================*/
.flx-grw--1 {
	flex-grow: 1;
}

/*=====
 * top -- TODO: Work from here - Change
=======*/
.top--0 {
    top: 0;
}
.top--1 {
    top: 0.125rem;
}
.top--2 {
    top: 0.25rem;
}
.top--3 {
    top: 0.375rem;
}
.top--4 {
    top: 0.5rem;
}
.top--4-1 { /* .top--5 */
    top: 0.625rem;
}
.top--4-2 { /* .top--6 */
    top: 0.75rem;
}
.top--4-3 { /* .top--7 */
    top: 0.875rem;
}

.top--5 { /* .top--8 */
    top: 1rem;
}
.top--5-1 {
    top: 1.125rem;
}
.top--5-2 {
    top: 1.25rem;
}
.top--5-3 {
    top: 1.375rem;
}

.top--6 { /* .top--9 */
    top: 1.5rem;
}
.top--6-1 {
    top: 1.625rem;
}
.top--6-2 {
    top: 1.75rem;
}
.top--6-3 {
    top: 1.875rem;
}

.top--7 { /* .top--10 */
    top: 2rem;
}
.top--7-1 {
    top: 2.125rem;
}
.top--7-2 {
    top: 2.25rem;
}
.top--7-3 {
    top: 2.375rem;
}

.top--8 { /* .top--11 */
    top: 2.5rem;
}
.top--8-1 {
    top: 2.625rem;
}
.top--8-2 {
    top: 2.75rem;
}
.top--8-3 {
    top: 2.875rem;
}

.top--9 { /* .top--12 */
    top: 3rem;
}
.top--9-1 {
    top: 3.125rem;
}
.top--9-2 {
    top: 3.25rem;
}
.top--9-3 {
    top: 3.375rem;
}

.top--10 { /* .top--13 */
    top: 3.5rem;
}
.top--10-1 {
    top: 3.625rem;
}
.top--10-2 {
    top: 3.75rem;
}
.top--10-3 {
    top: 3.875rem;
}

.top--11 { /* .top--14 */
    top: 4rem;
}
.top--11-1 {
    top: 4.125rem;
}
.top--11-2 {
    top: 4.25rem;
}
.top--11-3 {
    top: 4.375rem;
}

.top--12 { /* .top--15 */
    top: 4.5rem;
}
.top--12-1 {
    top: 4.625rem;
}
.top--12-2 {
    top: 4.75rem;
}
.top--12-3 {
    top: 4.875rem;
}

.top--13 { /* .top--16 */
    top: 5rem;
}
.top--13-1 {
    top: 5.125rem;
}
.top--13-2 {
    top: 5.25rem;
}
.top--13-3 {
    top: 5.375rem;
}

.top--14 { /* .top--17 */
    top: 5.5rem;
}
.top--14-1 {
    top: 5.625rem;
}
.top--14-2 {
    top: 5.75rem;
}
.top--14-3 {
    top: 5.875rem;
}

.top--15 { /* .top--18 */
    top: 6rem;
}
.top--15-1 {
    top: 6.125rem;
}
.top--15-2 {
    top: 6.25rem;
}
.top--15-3 {
    top: 6.375rem;
}

.-top--0 {
    top: -0;
}
.-top--1 {
    top: -0.125rem;
}
.-top--2 {
    top: -0.25rem;
}
.-top--3 {
    top: -0.375rem;
}
.-top--4 {
    top: -0.5rem;
}
.-top--4-1 { /* .-top--5 */
    top: -0.625rem;
}
.-top--4-2 { /* .-top--6 */
    top: -0.75rem;
}
.-top--4-3 { /* .-top--7 */
    top: -0.875rem;
}

.-top--5 { /* .-top--8 */
    top: -1rem;
}
.-top--5-1 {
    top: -1.125rem;
}
.-top--5-2 {
    top: -1.25rem;
}
.-top--5-3 {
    top: -1.375rem;
}

.-top--6 { /* .-top--9 */
    top: -1.5rem;
}
.-top--6-1 {
    top: -1.625rem;
}
.-top--6-2 {
    top: -1.75rem;
}
.-top--6-3 {
    top: -1.875rem;
}

.-top--7 { /* .-top--10 */
    top: -2rem;
}
.-top--7-1 {
    top: -2.125rem;
}
.-top--7-2 {
    top: -2.25rem;
}
.-top--7-3 {
    top: -2.375rem;
}

.-top--8 { /* .-top--11 */
    top: -2.5rem;
}
.-top--8-1 {
    top: -2.625rem;
}
.-top--8-2 {
    top: -2.75rem;
}
.-top--8-3 {
    top: -2.875rem;
}

.-top--9 { /* .-top--12 */
    top: -3rem;
}
.-top--9-1 {
    top: -3.125rem;
}
.-top--9-2 {
    top: -3.25rem;
}
.-top--9-3 {
    top: -3.375rem;
}

.-top--10 { /* .-top--13 */
    top: -3.5rem;
}
.-top--10-1 {
    top: -3.625rem;
}
.-top--10-2 {
    top: -3.75rem;
}
.-top--10-3 {
    top: -3.875rem;
}

.-top--11 { /* .-top--14 */
    top: -4rem;
}
.-top--11-1 {
    top: -4.125rem;
}
.-top--11-2 {
    top: -4.25rem;
}
.-top--11-3 {
    top: -4.375rem;
}

.-top--12 { /* .-top--15 */
    top: -4.5rem;
}
.-top--12-1 {
    top: -4.625rem;
}
.-top--12-2 {
    top: -4.75rem;
}
.-top--12-3 {
    top: -4.875rem;
}

.-top--13 { /* .-top--16 */
    top: -5rem;
}
.-top--13-1 {
    top: -5.125rem;
}
.-top--13-2 {
    top: -5.25rem;
}
.-top--13-3 {
    top: -5.375rem;
}

.-top--14 { /* .-top--17 */
    top: -5.5rem;
}
.-top--14-1 {
    top: -5.625rem;
}
.-top--14-2 {
    top: -5.75rem;
}
.-top--14-3 {
    top: -5.875rem;
}

.-top--15 { /* .-top--18 */
    top: -6rem;
}
.-top--15-1 {
    top: -6.125rem;
}
.-top--15-2 {
    top: -6.25rem;
}
.-top--15-3 {
    top: -6.375rem;
}

/*========
 * bottom
==========*/
.btm--0 {
    bottom: 0;
}
.btm--1 {
    bottom: 0.125rem;
}
.btm--2 {
    bottom: 0.25rem;
}
.btm--3 {
    bottom: 0.375rem;
}
.btm--4 {
    bottom: 0.5rem;
}
.btm--4-1 { /* .btm--5 */
    bottom: 0.625rem;
}
.btm--4-2 { /* .btm--6 */
    bottom: 0.75rem;
}
.btm--4-3 { /* .btm--7 */
    bottom: 0.875rem;
}

.btm--5 { /* .btm--8 */
    bottom: 1rem;
}
.btm--5-1 {
    bottom: 1.125rem;
}
.btm--5-2 {
    bottom: 1.25rem;
}
.btm--5-3 {
    bottom: 1.375rem;
}

.btm--6 { /* .btm--9 */
    bottom: 1.5rem;
}
.btm--6-1 {
    bottom: 1.625rem;
}
.btm--6-2 {
    bottom: 1.75rem;
}
.btm--6-3 {
    bottom: 1.875rem;
}

.btm--7 { /* .btm--10 */
    bottom: 2rem;
}
.btm--7-1 {
    bottom: 2.125rem;
}
.btm--7-2 {
    bottom: 2.25rem;
}
.btm--7-3 {
    bottom: 2.375rem;
}

.btm--8 { /* .btm--11 */
    bottom: 2.5rem;
}
.btm--8-1 {
    bottom: 2.625rem;
}
.btm--8-2 {
    bottom: 2.75rem;
}
.btm--8-3 {
    bottom: 2.875rem;
}

.btm--9 { /* .btm--12 */
    bottom: 3rem;
}
.btm--9-1 {
    bottom: 3.125rem;
}
.btm--9-2 {
    bottom: 3.25rem;
}
.btm--9-3 {
    bottom: 3.375rem;
}

.btm--10 { /* .btm--13 */
    bottom: 3.5rem;
}
.btm--10-1 {
    bottom: 3.625rem;
}
.btm--10-2 {
    bottom: 3.75rem;
}
.btm--10-3 {
    bottom: 3.875rem;
}

.btm--11 { /* .btm--14 */
    bottom: 4rem;
}
.btm--11-1 {
    bottom: 4.125rem;
}
.btm--11-2 {
    bottom: 4.25rem;
}
.btm--11-3 {
    bottom: 4.375rem;
}

.btm--12 { /* .btm--15 */
    bottom: 4.5rem;
}
.btm--12-1 {
    bottom: 4.625rem;
}
.btm--12-2 {
    bottom: 4.75rem;
}
.btm--12-3 {
    bottom: 4.875rem;
}

.btm--13 { /* .btm--16 */
    bottom: 5rem;
}
.btm--13-1 {
    bottom: 5.125rem;
}
.btm--13-2 {
    bottom: 5.25rem;
}
.btm--13-3 {
    bottom: 5.375rem;
}

.btm--14 { /* .btm--17 */
    bottom: 5.5rem;
}
.btm--14-1 {
    bottom: 5.625rem;
}
.btm--14-2 {
    bottom: 5.75rem;
}
.btm--14-3 {
    bottom: 5.875rem;
}

.btm--15 { /* .btm--18 */
    bottom: 6rem;
}
.btm--15-1 {
    bottom: 6.125rem;
}
.btm--15-2 {
    bottom: 6.25rem;
}
.btm--15-3 {
    bottom: 6.375rem;
}

.-btm--0 {
    bottom: -0;
}
.-btm--1 {
    bottom: -0.125rem;
}
.-btm--2 {
    bottom: -0.25rem;
}
.-btm--3 {
    bottom: -0.375rem;
}
.-btm--4 {
    bottom: -0.5rem;
}
.-btm--4-1 { /* .-btm--5 */
    bottom: -0.625rem;
}
.-btm--4-2 { /* .-btm--6 */
    bottom: -0.75rem;
}
.-btm--4-3 { /* .-btm--7 */
    bottom: -0.875rem;
}

.-btm--5 { /* .-btm--8 */
    bottom: -1rem;
}
.-btm--5-1 {
    bottom: -1.125rem;
}
.-btm--5-2 {
    bottom: -1.25rem;
}
.-btm--5-3 {
    bottom: -1.375rem;
}

.-btm--6 { /* .-btm--9 */
    bottom: -1.5rem;
}
.-btm--6-1 {
    bottom: -1.625rem;
}
.-btm--6-2 {
    bottom: -1.75rem;
}
.-btm--6-3 {
    bottom: -1.875rem;
}

.-btm--7 { /* .-btm--10 */
    bottom: -2rem;
}
.-btm--7-1 {
    bottom: -2.125rem;
}
.-btm--7-2 {
    bottom: -2.25rem;
}
.-btm--7-3 {
    bottom: -2.375rem;
}

.-btm--8 { /* .-btm--11 */
    bottom: -2.5rem;
}
.-btm--8-1 {
    bottom: -2.625rem;
}
.-btm--8-2 {
    bottom: -2.75rem;
}
.-btm--8-3 {
    bottom: -2.875rem;
}

.-btm--9 { /* .-btm--12 */
    bottom: -3rem;
}
.-btm--9-1 {
    bottom: -3.125rem;
}
.-btm--9-2 {
    bottom: -3.25rem;
}
.-btm--9-3 {
    bottom: -3.375rem;
}

.-btm--10 { /* .-btm--13 */
    bottom: -3.5rem;
}
.-btm--10-1 {
    bottom: -3.625rem;
}
.-btm--10-2 {
    bottom: -3.75rem;
}
.-btm--10-3 {
    bottom: -3.875rem;
}

.-btm--11 { /* .-btm--14 */
    bottom: -4rem;
}
.-btm--11-1 {
    bottom: -4.125rem;
}
.-btm--11-2 {
    bottom: -4.25rem;
}
.-btm--11-3 {
    bottom: -4.375rem;
}

.-btm--12 { /* .-btm--15 */
    bottom: -4.5rem;
}
.-btm--12-1 {
    bottom: -4.625rem;
}
.-btm--12-2 {
    bottom: -4.75rem;
}
.-btm--12-3 {
    bottom: -4.875rem;
}

.-btm--13 { /* .-btm--16 */
    bottom: -5rem;
}
.-btm--13-1 {
    bottom: -5.125rem;
}
.-btm--13-2 {
    bottom: -5.25rem;
}
.-btm--13-3 {
    bottom: -5.375rem;
}

.-btm--14 { /* .-btm--17 */
    bottom: -5.5rem;
}
.-btm--14-1 {
    bottom: -5.625rem;
}
.-btm--14-2 {
    bottom: -5.75rem;
}
.-btm--14-3 {
    bottom: -5.875rem;
}

.-btm--15 { /* .-btm--18 */
    bottom: -6rem;
}
.-btm--15-1 {
    bottom: -6.125rem;
}
.-btm--15-2 {
    bottom: -6.25rem;
}
.-btm--15-3 {
    bottom: -6.375rem;
}

/*======
 * left
========*/
.lft--0 {
    left: 0;
}
.lft--1 {
    left: 0.125rem;
}
.lft--2 {
    left: 0.25rem;
}
.lft--3 {
    left: 0.375rem;
}
.lft--4 {
    left: 0.5rem;
}
.lft--4-1 { /* .lft--5 */
    left: 0.625rem;
}
.lft--4-2 { /* .lft--6 */
    left: 0.75rem;
}
.lft--4-3 { /* .lft--7 */
    left: 0.875rem;
}

.lft--5 { /* .lft--8 */
    left: 1rem;
}
.lft--5-1 {
    left: 1.125rem;
}
.lft--5-2 {
    left: 1.25rem;
}
.lft--5-3 {
    left: 1.375rem;
}

.lft--6 { /* .lft--9 */
    left: 1.5rem;
}
.lft--6-1 {
    left: 1.625rem;
}
.lft--6-2 {
    left: 1.75rem;
}
.lft--6-3 {
    left: 1.875rem;
}

.lft--7 { /* .lft--10 */
    left: 2rem;
}
.lft--7-1 {
    left: 2.125rem;
}
.lft--7-2 {
    left: 2.25rem;
}
.lft--7-3 {
    left: 2.375rem;
}

.lft--8 { /* .lft--11 */
    left: 2.5rem;
}
.lft--8-1 {
    left: 2.625rem;
}
.lft--8-2 {
    left: 2.75rem;
}
.lft--8-3 {
    left: 2.875rem;
}

.lft--9 { /* .lft--12 */
    left: 3rem;
}
.lft--9-1 {
    left: 3.125rem;
}
.lft--9-2 {
    left: 3.25rem;
}
.lft--9-3 {
    left: 3.375rem;
}

.lft--10 { /* .lft--13 */
    left: 3.5rem;
}
.lft--10-1 {
    left: 3.625rem;
}
.lft--10-2 {
    left: 3.75rem;
}
.lft--10-3 {
    left: 3.875rem;
}

.lft--11 { /* .lft--14 */
    left: 4rem;
}
.lft--11-1 {
    left: 4.125rem;
}
.lft--11-2 {
    left: 4.25rem;
}
.lft--11-3 {
    left: 4.375rem;
}

.lft--12 { /* .lft--15 */
    left: 4.5rem;
}
.lft--12-1 {
    left: 4.625rem;
}
.lft--12-2 {
    left: 4.75rem;
}
.lft--12-3 {
    left: 4.875rem;
}

.lft--13 { /* .lft--16 */
    left: 5rem;
}
.lft--13-1 {
    left: 5.125rem;
}
.lft--13-2 {
    left: 5.25rem;
}
.lft--13-3 {
    left: 5.375rem;
}

.lft--14 { /* .lft--17 */
    left: 5.5rem;
}
.lft--14-1 {
    left: 5.625rem;
}
.lft--14-2 {
    left: 5.75rem;
}
.lft--14-3 {
    left: 5.875rem;
}

.lft--15 { /* .lft--18 */
    left: 6rem;
}
.lft--15-1 {
    left: 6.125rem;
}
.lft--15-2 {
    left: 6.25rem;
}
.lft--15-3 {
    left: 6.375rem;
}

.-lft--0 {
    left: -0;
}
.-lft--006 {
	left: -0.0625rem;
}
.-lft--1 {
    left: -0.125rem;
}
.-lft--2 {
    left: -0.25rem;
}
.-lft--3 {
    left: -0.375rem;
}
.-lft--4 {
    left: -0.5rem;
}
.-lft--4-1 { /* .-lft--5 */
    left: -0.625rem;
}
.-lft--4-2 { /* .-lft--6 */
    left: -0.75rem;
}
.-lft--4-3 { /* .-lft--7 */
    left: -0.875rem;
}

.-lft--5 { /* .-lft--8 */
    left: -1rem;
}
.-lft--5-1 {
    left: -1.125rem;
}
.-lft--5-2 {
    left: -1.25rem;
}
.-lft--5-3 {
    left: -1.375rem;
}

.-lft--6 { /* .-lft--9 */
    left: -1.5rem;
}
.-lft--6-1 {
    left: -1.625rem;
}
.-lft--6-2 {
    left: -1.75rem;
}
.-lft--6-3 {
    left: -1.875rem;
}

.-lft--7 { /* .-lft--10 */
    left: -2rem;
}
.-lft--7-1 {
    left: -2.125rem;
}
.-lft--7-2 {
    left: -2.25rem;
}
.-lft--7-3 {
    left: -2.375rem;
}

.-lft--8 { /* .-lft--11 */
    left: -2.5rem;
}
.-lft--8-1 {
    left: -2.625rem;
}
.-lft--8-2 {
    left: -2.75rem;
}
.-lft--8-3 {
    left: -2.875rem;
}

.-lft--9 { /* .-lft--12 */
    left: -3rem;
}
.-lft--9-1 {
    left: -3.125rem;
}
.-lft--9-2 {
    left: -3.25rem;
}
.-lft--9-3 {
    left: -3.375rem;
}

.-lft--10 { /* .-lft--13 */
    left: -3.5rem;
}
.-lft--10-1 {
    left: -3.625rem;
}
.-lft--10-2 {
    left: -3.75rem;
}
.-lft--10-3 {
    left: -3.875rem;
}

.-lft--11 { /* .-lft--14 */
    left: -4rem;
}
.-lft--11-1 {
    left: -4.125rem;
}
.-lft--11-2 {
    left: -4.25rem;
}
.-lft--11-3 {
    left: -4.375rem;
}

.-lft--12 { /* .-lft--15 */
    left: -4.5rem;
}
.-lft--12-1 {
    left: -4.625rem;
}
.-lft--12-2 {
    left: -4.75rem;
}
.-lft--12-3 {
    left: -4.875rem;
}

.-lft--13 { /* .-lft--16 */
    left: -5rem;
}
.-lft--13-1 {
    left: -5.125rem;
}
.-lft--13-2 {
    left: -5.25rem;
}
.-lft--13-3 {
    left: -5.375rem;
}

.-lft--14 { /* .-lft--17 */
    left: -5.5rem;
}
.-lft--14-1 {
    left: -5.625rem;
}
.-lft--14-2 {
    left: -5.75rem;
}
.-lft--14-3 {
    left: -5.875rem;
}

.-lft--15 { /* .-lft--18 */
    left: -6rem;
}
.-lft--15-1 {
    left: -6.125rem;
}
.-lft--15-2 {
    left: -6.25rem;
}
.-lft--15-3 {
    left: -6.375rem;
}

/*=======
 * right
=========*/
.rgt--0 {
    right: 0;
}
.rgt--1 {
    right: 0.125rem;
}
.rgt--2 {
    right: 0.25rem;
}
.rgt--3 {
    right: 0.375rem;
}
.rgt--4 {
    right: 0.5rem;
}
.rgt--4-1 { /* .rgt--5 */
    right: 0.625rem;
}
.rgt--4-2 { /* .rgt--6 */
    right: 0.75rem;
}
.rgt--4-3 { /* .rgt--7 */
    right: 0.875rem;
}

.rgt--5 { /* .rgt--8 */
    right: 1rem;
}
.rgt--5-1 {
    right: 1.125rem;
}
.rgt--5-2 {
    right: 1.25rem;
}
.rgt--5-3 {
    right: 1.375rem;
}

.rgt--6 { /* .rgt--9 */
    right: 1.5rem;
}
.rgt--6-1 {
    right: 1.625rem;
}
.rgt--6-2 {
    right: 1.75rem;
}
.rgt--6-3 {
    right: 1.875rem;
}

.rgt--7 { /* .rgt--10 */
    right: 2rem;
}
.rgt--7-1 {
    right: 2.125rem;
}
.rgt--7-2 {
    right: 2.25rem;
}
.rgt--7-3 {
    right: 2.375rem;
}

.rgt--8 { /* .rgt--11 */
    right: 2.5rem;
}
.rgt--8-1 {
    right: 2.625rem;
}
.rgt--8-2 {
    right: 2.75rem;
}
.rgt--8-3 {
    right: 2.875rem;
}

.rgt--9 { /* .rgt--12 */
    right: 3rem;
}
.rgt--9-1 {
    right: 3.125rem;
}
.rgt--9-2 {
    right: 3.25rem;
}
.rgt--9-3 {
    right: 3.375rem;
}

.rgt--10 { /* .rgt--13 */
    right: 3.5rem;
}
.rgt--10-1 {
    right: 3.625rem;
}
.rgt--10-2 {
    right: 3.75rem;
}
.rgt--10-3 {
    right: 3.875rem;
}

.rgt--11 { /* .rgt--14 */
    right: 4rem;
}
.rgt--11-1 {
    right: 4.125rem;
}
.rgt--11-2 {
    right: 4.25rem;
}
.rgt--11-3 {
    right: 4.375rem;
}

.rgt--12 { /* .rgt--15 */
    right: 4.5rem;
}
.rgt--12-1 {
    right: 4.625rem;
}
.rgt--12-2 {
    right: 4.75rem;
}
.rgt--12-3 {
    right: 4.875rem;
}

.rgt--13 { /* .rgt--16 */
    right: 5rem;
}
.rgt--13-1 {
    right: 5.125rem;
}
.rgt--13-2 {
    right: 5.25rem;
}
.rgt--13-3 {
    right: 5.375rem;
}

.rgt--14 { /* .rgt--17 */
    right: 5.5rem;
}
.rgt--14-1 {
    right: 5.625rem;
}
.rgt--14-2 {
    right: 5.75rem;
}
.rgt--14-3 {
    right: 5.875rem;
}

.rgt--15 { /* .rgt--18 */
    right: 6rem;
}
.rgt--15-1 {
    right: 6.125rem;
}
.rgt--15-2 {
    right: 6.25rem;
}
.rgt--15-3 {
    right: 6.375rem;
}

.-rgt--0 {
    right: -0;
}
.-rgt--1 {
    right: -0.125rem;
}
.-rgt--2 {
    right: -0.25rem;
}
.-rgt--3 {
    right: -0.375rem;
}
.-rgt--4 {
    right: -0.5rem;
}
.-rgt--4-1 { /* .-rgt--5 */
    right: -0.625rem;
}
.-rgt--4-2 { /* .-rgt--6 */
    right: -0.75rem;
}
.-rgt--4-3 { /* .-rgt--7 */
    right: -0.875rem;
}

.-rgt--5 { /* .-rgt--8 */
    right: -1rem;
}
.-rgt--5-1 {
    right: -1.125rem;
}
.-rgt--5-2 {
    right: -1.25rem;
}
.-rgt--5-3 {
    right: -1.375rem;
}

.-rgt--6 { /* .-rgt--9 */
    right: -1.5rem;
}
.-rgt--6-1 {
    right: -1.625rem;
}
.-rgt--6-2 {
    right: -1.75rem;
}
.-rgt--6-3 {
    right: -1.875rem;
}

.-rgt--7 { /* .-rgt--10 */
    right: -2rem;
}
.-rgt--7-1 {
    right: -2.125rem;
}
.-rgt--7-2 {
    right: -2.25rem;
}
.-rgt--7-3 {
    right: -2.375rem;
}

.-rgt--8 { /* .-rgt--11 */
    right: -2.5rem;
}
.-rgt--8-1 {
    right: -2.625rem;
}
.-rgt--8-2 {
    right: -2.75rem;
}
.-rgt--8-3 {
    right: -2.875rem;
}

.-rgt--9 { /* .-rgt--12 */
    right: -3rem;
}
.-rgt--9-1 {
    right: -3.125rem;
}
.-rgt--9-2 {
    right: -3.25rem;
}
.-rgt--9-3 {
    right: -3.375rem;
}

.-rgt--10 { /* .-rgt--13 */
    right: -3.5rem;
}
.-rgt--10-1 {
    right: -3.625rem;
}
.-rgt--10-2 {
    right: -3.75rem;
}
.-rgt--10-3 {
    right: -3.875rem;
}

.-rgt--11 { /* .-rgt--14 */
    right: -4rem;
}
.-rgt--11-1 {
    right: -4.125rem;
}
.-rgt--11-2 {
    right: -4.25rem;
}
.-rgt--11-3 {
    right: -4.375rem;
}

.-rgt--12 { /* .-rgt--15 */
    right: -4.5rem;
}
.-rgt--12-1 {
    right: -4.625rem;
}
.-rgt--12-2 {
    right: -4.75rem;
}
.-rgt--12-3 {
    right: -4.875rem;
}

.-rgt--13 { /* .-rgt--16 */
    right: -5rem;
}
.-rgt--13-1 {
    right: -5.125rem;
}
.-rgt--13-2 {
    right: -5.25rem;
}
.-rgt--13-3 {
    right: -5.375rem;
}

.-rgt--14 { /* .-rgt--17 */
    right: -5.5rem;
}
.-rgt--14-1 {
    right: -5.625rem;
}
.-rgt--14-2 {
    right: -5.75rem;
}
.-rgt--14-3 {
    right: -5.875rem;
}

.-rgt--15 { /* .-rgt--18 */
    right: -6rem;
}
.-rgt--15-1 {
    right: -6.125rem;
}
.-rgt--15-2 {
    right: -6.25rem;
}
.-rgt--15-3 {
    right: -6.375rem;
}

/*================
 * vertical align
==================*/
.v-aln--btm {
    vertical-align: bottom;
}

/*=============
 * line height
===============*/
.ln-hgt--08 {
	line-height: 0.8;
}
.ln-hgt--09 {
	line-height: 0.9;
}
.ln-hgt--10 {
    line-height: 1.0;
}
.ln-hgt--11 {
    line-height: 1.1;
}
.ln-hgt--12 {
    line-height: 1.2;
}
.ln-hgt--13 {
    line-height: 1.3;
}
.ln-hgt--14 {
    line-height: 1.4;
}
.ln-hgt--15 {
    line-height: 1.5;
}
.ln-hgt--16 {
    line-height: 1.6;
}
.ln-hgt--17 {
    line-height: 1.7;
}

/*=========
 * z-index
===========*/
.z-idx--1 {
	z-index: 1000;
}
.z-idx--100 {
	z-index: 100;
}
.z-idx--110 {
	z-index: 110;
}
.z-idx--115 {
	z-index: 115;
}



/*=====================
 * Mouse hover effects 
=======================*/
.hvr--und:hover {
    text-decoration: underline;
}
.hvr--bkg--non:hover {
    background: none;
}

.hvr--bkg--gry-22vh:hover {
	background: var(--gray-22vh);
}
.hvr--bkg--gry-21vh:hover {
	background: var(--gray-21vh);
}
.hvr--bkg--gry-20vh:hover {
	background: var(--gray-20vh);
}
.hvr--bkg--gry-l:hover {
    background: var(--gray-l);
}
.hvr--bkg--gry-vl:hover {
    background: var(--gray-vl);
}
.hvr--bkg--gry-2vl:hover {
    background: var(--gray-2vl);
}
.hvr--bkg--gry-3vl:hover {
    background: var(--gray-3vl);
}
.hvr--bkg--gry-4vl:hover {
    background: var(--gray-4vl);
}
.hvr--bkg--gry-5vl:hover {
    background: var(--gray-5vl);
}

.hvr--bkg--thm-3vl:hover {
	background: var(--color-pri-3vl);
}
.hvr--bkg--thm-6vl:hover {
	background: var(--color-pri-6vl);
}
.hvr--bkg--thm-7vl:hover {
	background: var(--color-pri-7vl);
}
.hvr--bkg--thm-10vl:hover {
	background: var(--color-pri-10vl);
}
.hvr--bkg--thm-13vl:hover {
	background: var(--color-pri-13vl);
}

.hvr--bkg--ylw-5vl:hover {
	background: var(--color-sec-5vl);
}
.hvr--bkg--ylw-4vl:hover {
	background: var(--color-sec-4vl);
}
.hvr--bkg--ylw-3vl:hover {
	background: var(--color-sec-3vl);
}
.hvr--bkg--ylw-2vl:hover {
    background: var(--color-sec-2vl);
}
.hvr--bkg--ylw-vl:hover {
    background: var(--color-sec-vl);
}
.hvr--bkg--ylw-l:hover {
    background: var(--color-sec-l);
}
.hvr--bkg--ylw-m:hover {
    background: var(--color-sec-m);
}
.hvr--bkg--ylw-h:hover {
    background: var(--color-sec-h);
}
.hvr--bkg--blu-h:hover {
    background-color: var(--blue-h);
}
.hvr--bdr--gry-3vl:hover {
	border-color: var(--gray-3vl);
}
.hvr--bdr--gry-vl:hover {
	border-color: var(--gray-vl);
}
.hvr--bdr--gry-m:hover {
	border-color: var(--gray-m);
}
.hvr--bdr--gry-h:hover {
	border-color: var(--gray-h);
}
.hvr--bdr--gry-vh:hover {
	border-color: var(--gray-vh);
}
.hvr--bdr--gry-2vh:hover {
	border-color: var(--gray-2vh);
}
.hvr--bdr--gry-3vh:hover {
	border-color: var(--gray-3vh);
}
.hvr--bdr--gry-4vh:hover {
	border-color: var(--gray-4vh);
}
.hvr--bdr--gry-5vh:hover {
	border-color: var(--gray-5vh);
}
.hvr--bdr--gry-6vh:hover {
	border-color: var(--gray-6vh);
}
.hvr--bdr--gry-7vh:hover {
	border-color: var(--gray-7vh);
}
.hvr--bdr--gry-8vh:hover {
	border-color: var(--gray-8vh);
}
.hvr--bdr--gry-13vh:hover {
	border-color: var(--gray-13vh);
}
.hvr--bdr--gry-15vh:hover {
	border-color: var(--gray-15vh);
}
.hvr--bdr--gry-17vh:hover {
	border-color: var(--gray-17vh);
}
.hvr--bdr--ylw-8vl:hover {
    border-color: var(--color-sec-8vl);
}
.hvr--bdr--ylw-7vl:hover {
    border-color: var(--color-sec-7vl);
}
.hvr--bdr--ylw-6vl:hover {
    border-color: var(--color-sec-6vl);
}
.hvr--bdr--ylw-5vl:hover {
    border-color: var(--color-sec-5vl);
}
.hvr--bdr--ylw-4vl:hover {
    border-color: var(--color-sec-4vl);
}
.hvr--bdr--ylw-3vl:hover {
    border-color: var(--color-sec-3vl);
}
.hvr--bdr--ylw-2vl:hover {
    border-color: var(--color-sec-2vl);
}
.hvr--bdr--ylw-vl:hover {
    border-color: var(--color-sec-vl);
}
.hvr--bdr--ylw-l:hover {
    border-color: var(--color-sec-l);
}
.hvr--bdr--ylw-m:hover {
    border-color: var(--color-sec-m);
}
.hvr--bdr--ylw-h:hover {
    border-color: var(--color-sec-h);
}
.hvr--bdr--ylw-vh:hover {
    border-color: var(--color-sec-vh);
}
.hvr--bdr--ylw-2vh:hover {
    border-color: var(--color-sec-2vh);
}
.hvr--bdr--ylw-3vh:hover {
    border-color: var(--color-sec-3vh);
}

.hvr--txt--wht:hover {
    color: var(--white);
}

.hvr--txt-ylw:hover {
	color: var(--txt-yellow);
}
.hvr--txt--ylw-l:hover {
    color: var(--color-sec-l);
}
.hvr--txt--ylw-vl:hover {
    color: var(--color-sec-vl);
}
.hvr--txt--ylw-2vl:hover {
    color: var(--color-sec-2vl);
}

.hvr--txt--thm-m:hover {
    color: var(--color-pri-m);
}
.hvr--txt--thm-l:hover {
    color: var(--color-pri-l);
}
.hvr--txt--blu:hover {
    color: var(--txt-blue);
}
.hvr--txt--und:hover {
	text-decoration: underline;
}

.bkg--trp {
	background: transparent;
}

/*===========
 * word-break
=============*/
.wrd-brk {
	word-break: break-all;
}

/*============ 
 * RESPONSIVE 
==============*/
/* scr-1100-- */
@media screen and (max-width: 1100px) {
    .scr-1100--mgn-top--5 {
        margin-top: 5rem;
    }
    .scr-1100--mgn-x--1 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
	.scr-1100--mgn-top--13 {
        margin-top: 1.375rem;
    }
	.scr-1100--mgn-top--18 {
        margin-top: 1.875rem;
    }
    .scr-1100--pad-top--0 {
        padding-top: 0;
    }
    .scr-1100--pct-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
	.scr-1100--pct-wdh--12-27 {
		width: calc((8.33333333333% * 12) - 2.75rem);
	}
    .scr-1100--pct-wdh--4-2 {
        width: calc((8.33333333333% * 4) - 2rem);
    }
}

/* scr-1000-- */
@media screen and (max-width: 1000px) {
    .scr-1000--pct-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
    .scr-1000--mgn-top--3 {
        margin-top: 3rem;
    }
}

/* scr-950-- */
@media screen and (max-width: 950px) {
	.scr-950--pct-wdh--12-27 { /* .pct-wdh--12-9 */
		width: calc((8.33333333333% * 12) - 2.75rem);
	}
    .scr-950--pct-wdh--6 {
        width: calc(8.33333333333% * 6);
    }
    .scr-950--pct-wdh--8 {
        width: calc(8.33333333333% * 8);
    }
    .scr-950--pct-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
    .scr-950--pct-wdh--7 {
        width: calc(8.33333333333% * 7);
    }
	.scr-950--mgn-top--13 {
        margin-top: 1.375rem;
    }
    .scr-950--mgn-top--06 {
        margin-top: 0.625rem;
    }
	.scr-950--mgn-x--0 {
        margin-left: 0;
        margin-right: 0
    }
	.scr-950--move-x--mid {
		left: 50%;
		transform: translateX(-50%);
	}
	.scr-950--pxl-hgt--170 {
		height: 170px;
	}
}

/* scr-900-- */
@media screen and (max-width: 900px) {	
    .scr-900--pct-wdh--11 {
        width: calc(8.33333333333% * 11);
    }
    .scr-900--mgn-x--0 {
        margin-left: 0;
        margin-right: 0
    }
    .scr-900--mgn-top--13 {
        margin-top: 1.375rem;
    }
    .scr-900--move-x--mid {
        left: 50%;
        transform: translateX(-50%);
    }	
    
	h3 {
		font-size: 23px;
	}
	h4 {
		font-size: 17px;
	}
}

/* scr-800-- */
@media screen and (max-width: 800px) {
    .scr-800--pct-wdh--12-2 {
        width: calc((8.33333333333% * 12) - 2rem);
    }
    
    /* medium screen width */
    .row--md-scr-wdh--11 {
       width: calc(8.33333333333% * 11);
    }
     /* medium screen width */
    .box--md-scr-wdh--11 { /* .box--scr-800-pct-wdh--11 */
       width: calc(8.33333333333% * 11);
    }
}

/* scr-768-- */
@media screen and (max-width: 768px) {
    /* small screen width */
    .row--sm-scr-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
    /* small screen width */
    .box--sm-scr-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
     .col--sm-scr-wdh--6 {
        width: calc(8.33333333333% * 6);
    }
    /* small screen full width */
    .col--sm-scr-wdh--12 {
        width: calc(8.33333333333% * 12);
    } 
}

/* scr-724-- */
@media screen and (max-width: 724px) {
    .scr-724--dsp--non {
        display: none;
    }
	.scr-724--dsp--blk {
		display: block;
	}
    
    .hero__qik-srch {
        display: none;
    }
    .hero__btn {
        display: block;
    }

	.header__logo {
		margin-left: 20px;
	}

	.scr-724--mgn-lft--13 {
		margin-left: 1.375rem;
	}
    
    .scr-724--pct-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
    .scr-724--fnt-sz--32 {
        font-size: 32px;
    }
    .scr-724--txt--lft {
        text-align: left;
    }
	.scr-724--pad--13 {
        padding-left: 1.375rem;
		padding-right: 1.375rem;
    }
	.scr-724--move-x--lft {
		left: 0;
		transform: translateX(-0%);
	}
	.scr-724--pct-wdh--12-27 {
		width: calc((8.33333333333% * 12) - 2.75rem);
	}
	.scr-724--mgn-top--15 {
		margin-top: 1.5rem;
	}
}

@media screen and (max-width: 660px) {
	.scr-660--card {
		display: flex;
		align-items: flex-start;
		overflow: hidden;
	    position: relative;	
		width: calc(100% - 30px);
		padding: 15px;
		border-bottom: solid var(--slide-card-bdr) 1px;
	    transition: background 0.2s ease-in-out;
		background: var(--slide-card-bkg); /* --color-pri-8vl */
		cursor: pointer;
	}
	.scr-660--card__img {
		display: block;
	    width: 120px;
		height: 120px;
	    border-radius: 6px;
		transition: transform 0.2s ease-in-out;
		background: var(--gray-10vh);
	}	
	.scr-660--card:hover .scr-660--card__img {
		transform: scale(1.02);
	}
	.scr-660--card:hover {
		background: var(--slide-card-hvr-bkg);
	}
	.scr-660--card__text {
		display: block;
	    position: relative;
		width: calc(100% - 130px);
	    margin-left: 10px;
		border-radius: 0;
	    padding: 8px 8px;
		font-family: "regular", sans-serif;
	    background: transparent;
	}
	.scr-660--card__username {
		display: block;
	    position: relative;
		width: 100%;
	    font-family: "semibold", sans-serif;
	}
	.scr-660--card__last-active {
		display: inline-flex;
	    align-items: center;
		justify-content: center;
	    position:  absolute;
		height: 22px;
	    right: 4px;
		bottom: -10px;
	    padding: 0 6px;
		border-radius: 20px;
		border: solid var(--slide-card-last-active-bdr) 2px;
		font-family: 'medium', sans-serif;
	    font-size: 11px;
		background: var(--slide-card-last-active-bkg);
		color: var(--slide-card-last-active-txt);
	}

	.scr-660--mgn-lft--13 {
		margin-left: 1.375rem;
	} 
    .scr-660--txt--lft {
        text-align: left;
    }
}

/* scr-650-- */
@media screen and (max-width: 650px) {
	.scr-650--dsp--non {
		display: none;
	}
	.scr-650--dsp--flx {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.scr-650--pct-wdh--12-27 {
		width: calc((8.33333333333% * 12) - 2.75rem);
	}    
    .scr-650--pct-wdh--12 {
         width: calc(8.33333333333% * 12);
    }
    .scr-650--pct-wdh--6 {
         width: calc(8.33333333333% * 6);
    }
    .scr-650--mgn-x--1 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
	.scr-650--mgn-x--0 {
        margin-left: 0;
        margin-right: 0;
    }
	.scr-650--mgn-top--13 {
        margin-top: 1.375rem;
    }
	.scr-650--mgn-top--17 {
		margin-top: 1.75rem;
	}
	.scr-650--mgn-top--33 {
		margin-top: 3.375rem;
	}
    .scr-650--mgn-top--5 {
        margin-top: 5rem;
    }	
    .scr-650--flt--lft {
        float: left;
    }
    .scr-650--clr-flt {
        clear: both;
    }
	.scr-650--move-x--mid {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* scr-600-- */
@media screen and (max-width: 600px) {
	.scr-600--dsp--blk {
		display: block;
	}
    .scr-600--move-x--mid {
		left: 50%;
		transform: translateX(-50%);
	}
	.scr-600--txt--mid {
		text-align: center;
	}
	.scr-600--mgn-lft--0 {
		margin-left: 0;
	}
	.scr-600--mgn-top--20 {
		margin-top: 20px;
	}
	.scr-600--flx--x-mid {
		justify-content: center;
	}
}

/* scr-576-- */
@media screen and (max-width: 576px) {
    .scr-576--pct-wdh--12-07 {
		width: calc((8.33333333333% * 12) - 0.75rem); 
	}
	.scr-576--pad-x--1 {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media screen and (max-width: 545px) {
	.scr-545--dsp--blk {
		display: block;
	}
	.scr-545--pct-wdh--12 {
        width: 100%;
    }
	.scr-545--shd--non {
		box-shadow: none;
	}
	.scr-545--pad-x--03 {
		padding-left: 0.375rem;
		padding-right: 0.375rem;	
	}
	.scr-545--move-x--mid {
		left: 50%;
		transform: translateX(-50%);
	}
	.scr-545--mgn-lft--0 {
		margin-left: 0;
	}
	.scr-545--mgn-top--12 {
		margin-top: 1.25rem;
	}
	.scr-545--txt--mid {
		text-align: center;
	}
	.scr-545--flx--x-mid {
		justify-content: center;
	}
	.scr-545--pct-wdh--12-25 {
        width: calc((8.33333333333% * 12) - 2.25rem);
    }
}

/* scr-500-- */
@media screen and (max-width: 500px) {	
    .scr-500--pct-wdh--12-07 {
        width: calc((8.33333333333% * 12) - 0.75rem);
    }
    .scr-500--mgn-top--0 {
        margin-top: 0;
    }
    .scr-500--mgn-top--3 {
        margin-top: 3rem;
    }
	.scr-500--mgn-lft--03 {
        margin-left: 0.375rem;
    }
    .scr-500--mgn-x--0 {
        margin-left: 0;
        margin-right: 0;
    }
    .scr-500--clr-flt {
        clear: both;
    }
	.scr-500--pct-wdh--12-07 {
		width: calc((8.33333333333% * 12) - 0.75rem);
	}
}

/* scr-480-- */
@media screen and (max-width: 480px) {
	.scr-480--pct-wdh--12 {
        width: 100%;
    }
	.scr-480--pct-wdh--12-25 {
        width: calc((8.33333333333% * 12) - 2.25rem);
    }
	.scr-480--dsp--blk {
		display: block;
	}
	.scr-480--dsp--i-blk {
		display: inline-block;
	}	
	.scr-480--flx--x-mid {
		justify-content: center;
	}	
	.scr-480--move-x--mid {
		left: 50%;
		transform: translateX(-50%);
	}
	.scr-480--mgn-lft--0 {
		margin-left: 0;
	}
	.scr-480--pos--abs {
		position: absolute;
	}
	.scr-480--txt--mid {
		text-align: center;
	}
	.scr-480--shd--non {
		box-shadow: none;
	}
	.scr-480--pad-x--03 {
		padding-left: 0.375rem;
		padding-right: 0.375rem;	
	}	
    /* xtra-small screen full width */
    .box--xs-scr-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
    /* xtra-small screen y padding */
    .box--xs-scr-pad-y--3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    /* xtra-small screen x padding */
    .box--xs-scr-pad-x--3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    /* xtra-small screen full width */
    .row--xs-scr-wdh--12 {
        width: calc(8.33333333333% * 12);
    }
    /* xtra-small screen y padding */
    .row--xs-scr-pad-y--3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    /* xtra-small screen x padding */
    .row--xs-scr-pad-x--3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media screen and (max-width: 465px) {
	.scr-465--pct-wdh--12-05 {
        width: calc((8.33333333333% * 12) - 0.5rem);
    }
	.scr-465--pct-wdh--12-2 {
        width: calc((8.33333333333% * 12) - 2rem);
    }
	.scr-465--dsp--blk {
		display: block;
	}
	.scr-465--dsp--i-blk {
		display: inline-block;
	}
	.scr-465--move-x--mid {
		left: 50%;
		transform: translateX(-50%);
	}
	.scr-465--mgn-lft--0 {
		margin-left: 0;
	}
	.scr-465--mgn-top--07 {
		margin-top: 0.7rem;
	}

	.vnchat-panel {
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100dvh;
		z-index: 250;
	}
}

@media screen and (max-width: 440px) {
	
}

@media screen and (max-width: 400px) {
	.scr-400--pct-wdh--12-05 {
        width: calc((8.33333333333% * 12) - 0.5rem);
    }	
}

@media screen and (max-width: 380px) {
	
}


/* TERMS OF SERVICE */
.terms-container {
	max-width: 1000px;
    margin: 0 auto;
	margin-top: 20px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e9ecf3;
}

.terms-header {
    padding: 2.5rem 3rem 1.5rem 3rem;
}

.terms-header h1 {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.terms-body {
    padding: 0 3rem;
    background: #ffffff;
}

.terms-body h2 {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 2.2rem 0 1rem 0;
    color: #0b1e33;
    border-bottom: 2px solid #eef2f6;
    padding-bottom: 0.4rem;
}

.terms-body h2:first-of-type {
    margin-top: 0;
}

.terms-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.8rem 0 0.6rem 0;
    color: #1e2f41;
}

.terms-body p {
    margin-bottom: 1rem;
    color: #2d3a4b;
}

.terms-body ul, .terms-body ol {
    margin: 0.8rem 0 1.5rem 1.8rem;
}

.terms-body li {
    margin-bottom: 0.5rem;
    color: #2d3a4b;
}

.terms-body strong {
    color: #0b1e33;
    font-weight: 600;
}

hr {
    border: none;
    border-top: 2px dashed #d0d9e6;
    margin: 2rem 0;
}

@media (max-width: 700px) {
    .terms-header { padding: 1.8rem 1.5rem; }
    .terms-body { padding: 1.8rem 1.5rem; }
    .terms-header h1 { font-size: 2rem; }
}

/* PRIVACY POLICY */
.privacy-container {
    max-width: 1000px;
    margin: 0 auto;
	margin-top: 20px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.privacy-header {
    padding: 2.5rem 3rem 1.5rem 3rem;
}

.privacy-header h1 {
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.privacy-header .last-updated {
    font-size: 0.95rem;
    opacity: 0.85;
    background: rgba(255,255,255,0.15);
    display: inline-block;
    padding: 0.3rem 1.2rem;
    border-radius: 40px;
    margin-top: 0.7rem;
    font-weight: 400;
    backdrop-filter: blur(4px);
}

.privacy-body {
    padding: 0 3rem;
    background: #ffffff;
}

.privacy-body h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 2.4rem 0 1rem 0;
    color: #0b2a41;
    border-bottom: 2px solid #e9ecf3;
    padding-bottom: 0.5rem;
}

.privacy-body h2:first-of-type {
    margin-top: 0;
}

.privacy-body h3 {
    font-size: 1.28rem;
    font-weight: 600;
    margin: 1.8rem 0 0.6rem 0;
    color: #1e3b5a;
}

.privacy-body p {
    margin-bottom: 1rem;
    color: #2d3f53;
}

.privacy-body ul, .privacy-body ol {
    margin: 0.8rem 0 1.5rem 1.8rem;
}

.privacy-body li {
    margin-bottom: 0.5rem;
    color: #2d3f53;
}

.privacy-body strong {
    color: #0b2a41;
    font-weight: 600;
}

hr {
    border: none;
    border-top: 2px dashed #cbd5e0;
    margin: 2.2rem 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 1.8rem;
}

table td {
    padding: 0.9rem 1rem;
    border: 1px solid #d7e0ea;
    vertical-align: top;
}

table tr:first-child td {
    background-color: #f4f8ff;
    font-weight: 600;
}

@media (max-width: 700px) {
    .privacy-header { padding: 1.8rem 1.5rem; }
    .privacy-body { padding: 1.8rem 1.5rem; }
    .privacy-header h1 { font-size: 2rem; }
}