/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=heading---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {margin:0; padding: 0; font-weight: 400; line-height: 130%;  cursor: default; color: #3A3F54; position: relative; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=txt-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.txt-white { color: #fff !important; }
.txt-navy { color: #3A3F54 !important; }
.txt-blue { color: #3f80de !important; }
.txt-sky { color: #42A8EA !important; }
.txt-cyan { color: #00b2cb !important; }
.txt-purple { color: #9966cc !important; }
.txt-red { color: #ff5f5f !important; }
.txt-yellow { color: #ffb94a !important; }
.txt-grass { color: #87b758 !important; }
.txt-green { color: #37c48a !important; }
.txt-orange { color: #ff855f !important; }
.txt-velvet { color: #c11e5c !important;}
.txt-filament { color: #ffce00 !important; }
.txt-pink { color: #e86dab !important; }
.txt-brown { color: #91694d !important; }

.txt-222 { color: #222; }
.txt-555 { color: #555; }
.txt-888 { color: #888; }
.txt-999 { color: #999; }
.txt-aaa { color: #aaa; }
.txt-bbb { color: #bbb; }
.txt-ccc { color: #ccc; }

.txt-300 { font-weight: 300; }
.txt-400 { font-weight: 400; }
.txt-500 { font-weight: 500; }
.txt-600 { font-weight: 600; }
.txt-700 { font-weight: 700; }
.txt-800 { font-weight: 800; }

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

.txt-0 { font-size: 0 !important; }
.txt-12 { font-size: 12px !important; }
.txt-14 { font-size: 14px !important; }
.txt-16 { font-size: 16px !important; }
.txt-18 { font-size: 18px !important; }
.txt-21 { font-size: 21px !important; }
.txt-24 { font-size: 24px !important; }
.txt-30 { font-size: 30px !important; }
.txt-36 { font-size: 36px !important; }
.txt-48 { font-size: 48px !important; }
.txt-60 { font-size: 60px !important; }

.txt-16-14 { font-size: 16px !important; }
.txt-18-16 { font-size: 18px !important; }
.txt-21-18 { font-size: 21px !important; }
.txt-24-18 { font-size: 24px !important; }
.txt-30-18 { font-size: 30px !important; }
.txt-36-18 { font-size: 36px !important; }
.txt-36-24 { font-size: 36px !important; }

.line-20 { line-height: 20px; }
.line-30 { line-height: 30px; }
.line-40 { line-height: 40px; }
.line-50 { line-height: 50px; }
.line-60 { line-height: 60px; }

.v-middle { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-base { vertical-align:baseline; }

.txt-no-deco { text-decoration: none !important;}
.txt-underline { text-decoration: underline;}
.txt-overline { text-decoration: overline;}
.txt-throughline { text-decoration: line-through;}

.word-keep { word-break: keep-all;}



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=underline-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.underline { border-bottom-style: solid !important; border-bottom-width: 1px !important; }

.underline-2px { border-bottom-width: 2px !important; }
.underline-3px { border-bottom-width: 3px !important; }
.underline-4px { border-bottom-width: 4px !important; }

.underline-white { border-bottom-color: #fff !important; }
.underline-navy { border-bottom-color: #3A3F54 !important; }
.underline-blue { border-bottom-color: #3f80de !important; }
.underline-sky { border-bottom-color: #42A8EA !important; }
.underline-cyan { border-bottom-color: #00b2cb !important; }
.underline-purple { border-bottom-color: #9966cc !important; }
.underline-red { border-bottom-color: #ff5f5f !important; }
.underline-yellow { border-bottom-color: #ffb94a !important; }
.underline-grass { border-bottom-color: #87b758 !important; }
.underline-green { border-bottom-color: #37c48a !important; }
.underline-orange { border-bottom-color: #ff855f !important; }
.underline-velvet { border-bottom-color: #c11e5c !important;}
.underline-filament { border-bottom-color: #ffce00 !important; }
.underline-pink { border-bottom-color: #e86dab !important; }




/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =bg------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.bg-white { background-color: #fff; }
.bg-pale { background-color: #f9f9f9; }
.bg-efefef { background-color: #efefef; }
.bg-ddd { background-color: #ddd; }
.bg-bbb { background-color: #bbb; }
.bg-aaa { background-color: #aaa; }
.bg-777 { background-color: #777; }
.bg-333 { background-color: #333; }
.bg-paleblue { background-color: #f0f6ff; }
.bg-palegreen { background-color: #ebf7f2; }
.bg-navy { background-color: #3A3F54; }
.bg-blue { background-color: #3f80de; }
.bg-sky { background-color: #42A8EA; }
.bg-cyan { background-color: #00b2cb; }
.bg-purple { background-color: #9966cc; }
.bg-red { background-color: #ff5f5f; }
.bg-yellow { background-color: #ffb94a; }
.bg-grass { background-color: #87b758; }
.bg-green { background-color: #37c48a; }
.bg-orange { background-color: #ff855f; }
.bg-velvet { background-color: #c11e5c;}
.bg-filament { background-color: #ffce00; }
.bg-pink { background-color: #e86dab; }
.bg-brown { background-color: #91694d; }

.bg-cover {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.bg-contain {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.bg-pattern {
	background-size: 30%;
	background-position: center;
	background-repeat: repeat;
}


.gradation {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
}

.gradation.stick-top {
	top: 0;
	left: 0;
	background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.1));
}

.gradation.stick-bottom {
	bottom: 0;
	left: 0;
	background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.7));
}

.darkness {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	pointer-events: none;
}


.half-bg {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
}

.half-bg.stick-left { left: 0;}
.half-bg.stick-right { right: 0;}




/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* =hr------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
hr.dashed {
	width: 100%;
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	border-top: 2px dashed #ddd;
	position: relative;
	clear: both;
	float: left;
}

hr.solid {
	width: 100%;
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	border-top: 1px solid #ddd;
	position: relative;
	clear: both;
	float: left;
}

hr.short {
	display: inline-block;
	width: 50px;
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	position: relative;
	clear: both;
	border-top-style: solid !important;
	border-top-width: 1px !important;
}

hr.short-1px { border-top-width: 1px !important; }
hr.short-2px { border-top-width: 2px !important; }
hr.short-3px { border-top-width: 3px !important; }
hr.short-4px { border-top-width: 4px !important; }

hr.white { border-top-color: #fff !important; }
hr.navy { border-top-color: #3A3F54 !important; }
hr.blue { border-top-color: #3f80de !important; }
hr.sky { border-top-color: #42A8EA !important; }
hr.cyan { border-top-color: #00b2cb !important; }
hr.purple { border-top-color: #9966cc !important; }
hr.red { border-top-color: #ff5f5f !important; }
hr.yellow { border-top-color: #ffb94a !important; }
hr.grass { border-top-color: #87b758 !important; }
hr.green { border-top-color: #37c48a !important; }
hr.orange { border-top-color: #ff855f !important; }
hr.velvet { border-top-color: #c11e5c !important;}
hr.filament { border-top-color: #ffce00 !important; }
hr.pink { border-top-color: #e86dab !important; }


hr.vertical {
	width: 0;
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	border-left: 1px solid #ddd;
	position: relative;
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=angle-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.angle-b {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background: #fff;
	border: 1px solid #ddd;
	position: absolute;
	bottom: 0;
	left: 0;
	margin-left: 12.5%;
	transform: translateX(-50%) translateY(50%) rotate(45deg);
}

.angle-t {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background: #fff;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=card------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.card {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	background: #fff;
	box-shadow: 0 1px 8px rgba(0,0,0,0.3);
	border-radius: 4px;
	padding: 40px;
	float: left;
}

.card.no-shadow {
	box-shadow: none;
}

.card.bg-pale { background: #f9f9f9; }

.card.no-top-corner { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }

.corner-0 { border-radius: 0 !important; }
.corner-4 { border-radius: 4px; }
.corner-8 { border-radius: 8px; }






/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=ripple----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.ripple {
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	transform-origin: 50% 50%;
	opacity: 0;
	background-color: rgba(255,255,255,0.7);
	pointer-events: none;
}

.ripple.dark { background-color: rgba(0,0,0,0.4) !important; }

.btn.btn-inv .ripple { background-color: rgba(0,0,0,0.4); }
.btn.btn-white .ripple { background-color: rgba(0,0,0,0.4); }
.btn.btn-inv.btn-white .ripple { background-color: rgba(255,255,255,0.7); }





/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=btn-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.btn {
	display: inline-block;
	overflow: hidden;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	margin: 0;
	padding: 0 20px;
	position: relative;
	font-size: 0;
	font-weight: 600;
	font-family: 'Montserrat','Malgun Gothic',sans-serif;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	/*border:none;*/
	outline: none;
	border-radius: 4px;
	color: #fff;
	border-width: 0;
	border-color: #3a3f54;
	background: #3a3f54;
	/*transform: translateZ(0);*/
}

.btn.multiline {
	height: auto !important;
	line-height: 140% !important;
	padding: 10px !important;
	white-space: normal;
}
.btn.multiline > * { pointer-events: none;}
.btn.multiline > .caption { word-break: break-all;  padding: 0; }
.btn.multiline > .container { line-height: 140%;}

.btn:disabled,
.btn.disabled { pointer-events: none; opacity: 0.6;}

.btn:disabled .caption,
.btn.disabled .caption { opacity: 0.6 !important;}

.btn:disabled i,
.btn.disabled i { opacity: 0.6;}

.btn > .caption,
.btn > i {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	pointer-events: none;
}

.btn > .caption { font-size: 14px; padding: 0 4px; }
.btn.btn-l > .caption { font-size: 16px; }
.btn.btn-xl > .caption { font-size: 18px; }


.btn.hidden-icon > i {
	opacity: 0;
	position: absolute;
	top: 50%;
	transform-origin: 50% 50%;
	transition: transform 0.2s, opacity 0.2s;
}

.btn.hidden-icon.right > i { transform: translateX(-100%) translateY(-50%) translateZ(0); }
.btn.hidden-icon.left > i { transform: translateX(50%) translateY(-50%) translateZ(0); }

.btn.hidden-icon.on > i,
.btn.hidden-icon:hover > i { opacity: 1; transform: translateX(-50%) translateY(-50%) translateZ(0); }

.btn.hidden-icon > .caption {
	transform: translateX(0) translateY(0) translateZ(0);
	transition: transform 0.2s;
}

.btn.hidden-icon.right.on > .caption,
.btn.hidden-icon.right:hover > .caption { transform: translateX(-12px) translateY(0) translateZ(0); }

.btn.hidden-icon.left.on > .caption,
.btn.hidden-icon.left:hover > .caption { transform: translateX(12px) translateY(0) translateZ(0); }


.btn.btn-s {
	padding: 0 5px;
	min-width: 30px;
	height: 30px;
	line-height: 30px;
}

.btn.btn-l {
	padding: 0 30px;
	min-width: 50px;
	height: 50px;
	line-height: 50px;
}

.btn.btn-xl {
	padding: 0 40px;
	min-width: 60px;
	height: 60px;
	line-height: 60px;
}

.btn.full { width: 100%; }
.btn.square { padding: 0 !important; }

.btn.btn-white { border-color: #fff; background: #fff; color: #3a3f54; }
.btn.btn-blue  { border-color: #4389ed; background: #4389ed; }
.btn.btn-sky  { border-color: #42a8ea; background: #42a8ea; }
.btn.btn-cyan  { border-color: #00b2cb; background: #00b2cb; }
.btn.btn-purple  { border-color: #9966cc; background: #9966cc; }
.btn.btn-red  { border-color: #ff5f5f; background: #ff5f5f; }
.btn.btn-yellow  { border-color: #ffb94a; background: #ffb94a; }
.btn.btn-orange  { border-color: #ff855f; background: #ff855f; }
.btn.btn-grass  { border-color: #87b758; background: #87b758; }
.btn.btn-green  { border-color: #37c48a; background: #37c48a; }
.btn.btn-brown  { border-color: #91694d; background: #91694d; }

.btn:hover { border-color: #41475e; background: #41475e; }
.btn.btn-white:hover { border-color: #fff; background: #fff; color: #41475e; }
.btn.btn-blue:hover { border-color: #3f80de; background: #3f80de; }
.btn.btn-sky:hover { border-color: #3e9ddb; background: #3e9ddb; }
.btn.btn-cyan:hover { border-color: #00a5bd; background: #00a5bd; }
.btn.btn-purple:hover { border-color: #8f60bf; background: #8f60bf; }
.btn.btn-red:hover { border-color: #f25a5a; background: #f25a5a; }
.btn.btn-yellow:hover { border-color: #f2b046; background: #f2b046; }
.btn.btn-orange:hover { border-color: #f27e5a; background: #f27e5a; }
.btn.btn-grass:hover { border-color: #7ca851; background: #7ca851; }
.btn.btn-green:hover { border-color: #33b57f; background: #33b57f; }
.btn.btn-brown:hover { border-color: #825e45; background: #825e45; }


.btn.btn-inv { background: transparent !important; color: #3a3f54; }
.btn.btn-inv:hover { background: transparent !important; color: #41475e; }
.btn.btn-inv:hover > .bg { background: rgba(0,0,0,0.05) !important; }

.btn.btn-inv.btn-white { color: #fff; }
.btn.btn-inv.btn-sky { color: #42a8ea; }
.btn.btn-inv.btn-blue { color: #4389ed; }
.btn.btn-inv.btn-cyan { color: #00b2cb; }
.btn.btn-inv.btn-purple { color: #9966cc; }
.btn.btn-inv.btn-red { color: #ff5f5f; }
.btn.btn-inv.btn-yellow { color: #ffb94a; }
.btn.btn-inv.btn-orange { color: #ff855f; }
.btn.btn-inv.btn-grass { color: #87b758; }
.btn.btn-inv.btn-green { color: #37c48a; }
.btn.btn-inv.btn-brown { color: #91694d; }

.btn.btn-inv.btn-blue:hover { color: #3f80de; }
.btn.btn-inv.btn-sky:hover { color: #3e9ddb; }
.btn.btn-inv.btn-cyan:hover { color: #00a5bd; }
.btn.btn-inv.btn-purple:hover { color: #8f60bf; }
.btn.btn-inv.btn-red:hover { color: #f25a5a; }
.btn.btn-inv.btn-yellow:hover { color: #f2b046; }
.btn.btn-inv.btn-orange:hover { color: #f27e5a; }
.btn.btn-inv.btn-grass:hover { color: #7ca851; }
.btn.btn-inv.btn-green:hover { color: #33b57f; }
.btn.btn-inv.btn-brown:hover { color: #825e45; }


.btn > .bg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	border-color: inherit;
	border-width: 0px;
	border-style: solid;
	background: inherit;
	border-radius: inherit;
	pointer-events: none;
}

.btn.btn-inv > .bg {
	background: inherit;
	border-width: 2px;
}

.btn.no-border > .bg {
	border: none !important;
}





/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=form-unit-------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
input:not([type=checkbox]):not([type=radio]) {
	display: inline-block;
	appearance: none;
	-moz-appearance:textfield;
	width: 100%;
	height: 50px;
	line-height: 28px;
	border-radius: 4px;
	border: 1px solid #e4e4e4;
	background: #f8f8f8;
	font-size: 16px;
	font-weight: 400;
	color: #222;
	padding: 10px;
	margin: 0;
	text-decoration: none;
	box-sizing: border-box;
	
}

input:not([type=checkbox]):not([type=radio]):hover { border: 1px solid #ccc; }
input:not([type=checkbox]):not([type=radio]):focus { border: 1px solid #4389ed; background: #fff; }

input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input::-ms-reveal {display: none; width:0; height:0;}
input::-ms-clear {display: none; width:0; height:0;}
input::-webkit-input-placeholder { color: #aaa !important; font-weight: 400; }
input:-ms-input-placeholder { color: #aaa !important; font-weight: 400; }

textarea {
	display: inline-block;
	appearance: none;
	width: 100%;
	height: 200px;
	line-height: 28px !important;
	border-radius: 4px;
	border: 1px solid #e4e4e4;
	background: #f8f8f8;
	font-size: 16px;
	font-weight: 400;
	color: #222;
	overflow: auto;
	-webkit-overflow-scrolling:touch;
	font-size: 16px;
	padding: 10px;
	text-decoration: none;
}

textarea.long {
	height: 224px;
}

textarea:hover { border: 1px solid #ccc; }
textarea:focus { border: 1px solid #4389ed; background: #fff; }

textarea::-webkit-input-placeholder { color: #aaa !important; font-weight: 400; }
textarea:-ms-input-placeholder { color: #aaa !important; font-weight: 400; }




.tf-item {
	display: inline-block;
	width: 100%;
	height: 50px;
	overflow: hidden;
	position: relative;
	font-size: 0;
	vertical-align: middle;
}

.tf-item.with-btn {
	padding-right: 110px;
}

.tf-item.with-btn > .btn {
	width: 100px;
	position: absolute;
	top: 50%;
	right: 0;
	padding: 0;
	transform: translateY(-50%);
}
.tf-item.with-btn > .btn > i { transition: none;}
.tf-item.with-btn > .btn:hover > i { transform: translateX(0); }

.tf-item.with-icon > input {
	padding-right: 40px;
}

.tf-item.with-icon > i {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	pointer-events: none;
	color: #aaa;
}

.tf-item.with-icon > input:hover + i { color: #888; }
.tf-item.with-icon > input:focus + i { color: #4389ed; }




.select-item {
	display: inline-block;
	width: 100%;
	height: 50px;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}

.select-item > select {
	display: block;
	appearance: none;
	width: 100%;
	height: 50px;
	line-height: 28px;
	overflow: hidden;
	white-space: nowrap;
	/*text-overflow: ellipsis;*/
	border: none;
	border-radius: 4px;
	background: transparent;
	font-size: 16px;
	font-weight: 400;
	color: #222;
	margin: 0;
	padding: 10px !important;
	padding-right: 30px !important;
	text-indent: 0 !important;
	text-decoration: none;
	-webkit-padding-before: 0;
	-webkit-padding-after: 0;
	-webkit-padding-start: 0;
	-webkit-padding-end: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	position: relative;
	border: 1px solid #e4e4e4;
	background: #f8f8f8;
	cursor: pointer;
}

.select-item:after {
	display: block;
	content: '\e5c5';
	font-family: 'Material Icons';
	width: 48px;
	height: 48px;
	border-radius: 4px;
	line-height: 48px;
	position: absolute;
	top: 1px;
	right: 1px;
	vertical-align: middle;
	pointer-events: none;
	z-index: 1;
	font-size: 24px;
	color: #3A3F54;
	text-align: center;
}

.select-item > select:hover { border: 1px solid #ccc; }

.select-item > select:focus {
    outline: none;
	background-color: #fff;
	color: #555;
	border: 1px solid #4389ed;
}

.select-item > select:focus::-ms-value {background: #fff; color: #555; }
.select-item > select::-ms-expand { display: none; }




.upload-item {
	display: inline-block;
	width: 100%;
	height: 50px;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}

.upload-item > input {
	appearance: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
	text-decoration: none;
	-webkit-padding-before: 0;
	-webkit-padding-after: 0;
	-webkit-padding-start: 0;
	-webkit-padding-end: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	position: relative;
	opacity: 0;
	font-size: 0 !important;
}

.upload-item > .fake-btn {
	display: inline-block;
	appearance: none;
	width: 100%;
	height: 50px;
	line-height: 28px;
	border-radius: 4px;
	border: 1px solid #e4e4e4;
	background: #f8f8f8;
	font-size: 16px;
	font-weight: 400;
	padding: 10px;
	padding-right: 50px;
	box-sizing: border-box;

	position: absolute;
	top: 0;
	left: 0;
	color: #888;
	cursor: pointer;
	
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	white-space: nowrap;
	word-break: none;
	font-size: 16px;
}

.upload-item > .fake-btn:hover { border: 1px solid #ccc; }
.upload-item > input:focus + .fake-btn { border: 1px solid #4389ed; background: #fff; }

.upload-item > .fake-btn.on { color: #222; }

.upload-item > .fake-btn > i {
	display: inline-block;
	width: 48px;
	height: 48px;
	line-height: 48px;
	position: absolute;
	top: 1px;
	right: 1px;
	pointer-events: none;
	color: #3A3F54;
	font-size: 24px;
	text-align: center;
}



.radio-item {
	display: inline-block;
	width: auto;
	height: 50px;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
	padding: 0 10px;
	border-radius: 4px;
	cursor: pointer;
	transform: translateZ(0);
}

.radio-item:hover { background: #f8f8f8;}
.radio-item.disabled { pointer-events: none; opacity: 0.5; cursor: default;}

.radio-item > input {
	position: absolute;
	top: -100px;
	left: 0;
	visibility: hidden;
}

.radio-item > .labelling {
	display: inline-block;
	width: auto;
	height: 50px;
	overflow: hidden;
	position: relative;
	font-size: 0;
}

.radio-item > .labelling > .icons {
	display: inline-block;
	width: auto;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	position: relative;
	color: #3A3F54;
	vertical-align: middle;
}

.radio-item:hover > .labelling > .icons { color: #41475e;}

.radio-item > .labelling > .icons > i {
	vertical-align: middle;
}

.radio-item > .labelling > .icons > i:nth-of-type(1) { display: inline-block; }
.radio-item > .labelling > .icons > i:nth-of-type(2) { display: none; }
.radio-item > input:checked + .labelling > .icons > i:nth-of-type(1) { display: none; }
.radio-item > input:checked + .labelling > .icons > i:nth-of-type(2) { display: inline-block; }

.radio-item > .labelling > .caption {
	display: inline-block;
	width: auto;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	position: relative;
	padding: 0 5px;
	font-size: 16px;
	color: #555;
	vertical-align: middle;
}

.radio-item:hover > .labelling > .caption { color: #222; }
.radio-item > input:checked + .labelling > .caption { color: #222; }




.check-item {
	display: inline-block;
	width: auto;
	height: 50px;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
	padding: 0 10px;
	border-radius: 4px;
	cursor: pointer;
	transform: translateZ(0);
}

.check-item:hover { background: #f8f8f8;}
.check-item.disabled { pointer-events: none; opacity: 0.5; cursor: default;}

.check-item > input {
	position: absolute;
	top: -100px;
	left: 0;
	visibility: hidden;
}

.check-item > .labelling {
	display: inline-block;
	width: auto;
	height: 50px;
	overflow: hidden;
	position: relative;
	font-size: 0;
}

.check-item > .labelling > .icons {
	display: inline-block;
	width: auto;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	position: relative;
	color: #3A3F54;
	vertical-align: middle;
}

.check-item:hover > .labelling > .icons { color: #41475e;}

.check-item > .labelling > .icons > i {
	vertical-align: middle;
}

.check-item > .labelling > .icons > i:nth-of-type(1) { display: inline-block; }
.check-item > .labelling > .icons > i:nth-of-type(2) { display: none; }
.check-item > input:checked + .labelling > .icons > i:nth-of-type(1) { display: none; }
.check-item > input:checked + .labelling > .icons > i:nth-of-type(2) { display: inline-block; }

.check-item > .labelling > .caption {
	display: inline-block;
	width: auto;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	position: relative;
	padding: 0 5px;
	font-size: 16px;
	color: #555;
	vertical-align: middle;
}

.check-item:hover > .labelling > .caption { color: #222; }
.check-item > input:checked + .labelling > .caption { color: #222; }





.checkbox-block label {
	position:relative;
	display:block;
	height: 56px;
	line-height: 56px;
	padding: 0 8px;
	color:#999;
	background:#fff;
}

.checkbox-block label > .toggle-switch {
	width: 40px;
	height: 20px;
	
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.checkbox-block label > .toggle-switch > .track {
	width: 24px;
	height: 14px;
	background: #aaa;
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 7px;
	transform: translateX(-50%) translateY(-50%);
	transition: all 0.2s;
}

.checkbox-block label > .toggle-switch > .seeker {
	width: 20px;
	height: 20px;
	background: #fff;
	position: absolute;
	left: 0;
	top: 50%;
	border-radius: 50%;
	transform: translateX(0%) translateY(-50%) translateZ(0);
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
	transition: all 0.2s;
}

.checkbox-block input[type="checkbox"] {position:absolute; visibility:hidden;}
.checkbox-block input[type="checkbox"]:checked + label { color: #333; }
.checkbox-block input[type="checkbox"]:checked + label > .toggle-switch > .track { background: #81D4FA; }
.checkbox-block input[type="checkbox"]:checked + label > .toggle-switch > .seeker {
	background: #03A9F4;
	transform: translateX(100%) translateY(-50%) translateZ(0);
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=list------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
ul,ol,dl {list-style:none; margin:0; padding:0; cursor: default;}

.full-list {
	width: 100%;
	height: auto;
	overflow: hidden;
	float: left;
}

.full-list > li {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	float: left;
}

.full-list > li.w50 { width: 50%; }
.full-list > li.w50:nth-child(2n+1) { clear: both; float: left;}

.full-list.border > li { border-bottom: 1px solid #d4d4d4; }

.full-list.disc > * {
	margin: 0;
	overflow: visible;
	position: relative;
	padding-left: 20px;
}

.full-list.disc > *:before {
	content: '\E061';
	font-family: 'Material Icons';
	position: absolute;
	display: inline-block;
	width: 20px;
	font-size: 12px;
	text-align: center;
	color: #aaa;
	transform: translateX(-100%) scale(0.6,0.6);
}

.full-list.disc.white > *:before { color: #fff; }

.flexible-3-2-1 > li { width: 33.33%; }
.flexible-2-1 > li { width: 50%; }
.flexible-4-2 > li { width: 25%; }



.full-list.receipt-list {
	overflow: visible;
}

.full-list.receipt-list > li {
	padding: 30px 0;
	padding-left: 40px;
}

.full-list.receipt-list > li > .timeline {
	position: absolute;
	width: 40px;
	height: 100%;
	top: 0;
	left: 0;

}

.full-list.receipt-list > li > .timeline > .dot {
	width: 20px;
	height: 20px;
	background: #f9f9f9;
	border: 6px solid #ddd;
	position: absolute;
	top: 35px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px;
}

.full-list.receipt-list > li > .timeline > hr {
	display: block;
	width: 4px;
	height: 100%;
	background: #ddd;
	border: none;
	margin: 0;
	position: absolute;
	top: 40px;
	left: 50%;
}

.full-list.receipt-list > li > .timeline > hr:nth-of-type(1) { transform: translateX(-50%) translateY(-100%); }
.full-list.receipt-list > li > .timeline > hr:nth-of-type(2) { transform: translateX(-50%) translateY(0); }

.full-list.receipt-list > li:only-child > .timeline > hr:nth-of-type(1),
.full-list.receipt-list > li:only-child > .timeline > hr:nth-of-type(2) { display: none;}

.full-list.receipt-list > li.last > .timeline > hr:nth-of-type(1) { display: none;}
.full-list.receipt-list > li.first > .timeline > hr:nth-of-type(2) { display: none;}

.full-list.receipt-list > li > .date {
	display: inline-block;
	line-height: 30px;
	padding: 0 15px;
	background: #42a8ea;
	color: #fff;
	border-radius: 15px;
	vertical-align: middle;
}

.full-list.receipt-list > li > .receipt {
	width: 100%;
	height: auto;
	float: left;
	overflow: visible;
	background: #fff;
	position: relative;
	margin-top: 10px;
}

.full-list.receipt-list > li > .receipt:after {
	content: '';
	display: block;
	width: 100%;
	height: 11px;
	background-image: url('../img/zigzag_pattern_down.png');
	background-repeat: repeat-x;
	background-size: 11px 11px;
	background-position: center center;
	position: absolute;
	top: 0;
	left: 0;
}

.full-list.receipt-list > li > .receipt > .container {
	padding: 20px;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 4px 4px;
}

.full-list.receipt-list > li > .receipt > .container > .receipt-no {
	position: absolute;
	top: 10px;
	left: -8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #fff;
	background: #bbb;
	padding: 0 5px;
}

.full-list.receipt-list > li > .receipt > .container > .receipt-no:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-top: 4px solid #aaa;
	border-right: 4px solid #aaa;
	border-left: 4px solid rgba(0,0,0,0);
	border-bottom: 4px solid rgba(0,0,0,0);
	position: absolute;
	top: 20px;
	left: 0;
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=tab-item--------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.tab-item {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 0 !important;
}

.tab-item > input {
	position: absolute;
	top: -100px;
	left: 0;
	visibility: hidden;
}

.tab-item .tab-btn {
	display: block;
	width: 50%;
	height: auto;
	overflow: hidden;
	position: relative;
	background: #f2f2f2;
	text-align: center;
	cursor: pointer;
	transition: background 0.3s;
	color: #3a3f54;
	font-size: 0;
	float: left;
	padding: 10px 5px;
}

.tab-item .tab-btn > .caption,
.tab-item .tab-btn > .container { color: inherit; opacity: 0.6; transition: all 0.3s; }

.tab-item .tab-btn:hover > .caption,
.tab-item .tab-btn:hover > .container { opacity: 1;}

.tab-item.u3 .tab-btn:nth-of-type(1) { width:33%; }
.tab-item.u3 .tab-btn:nth-of-type(2) { width:34%; }
.tab-item.u3 .tab-btn:nth-of-type(3) { width:33%; }

.tab-item.u4 .tab-btn { width:25%; }
.tab-item.u5 .tab-btn { width:20%; }

.tab-item .tab-btn > .caption {
	float: left;
	width: 100%;
	height: auto;
	overflow: hidden;
	line-height: 150%;
	position: relative;
	padding: 10px 0;
}

.tab-item > input:checked + .tab-btn { background: #fff; pointer-events: none;}
.tab-item > input:checked + .tab-btn > .caption,
.tab-item > input:checked + .tab-btn > .container { color: inherit; opacity: 1;}

.tab-item > input:checked + .tab-btn > .bg { opacity: 1;}

.tab-item .tab-btn > .container {
	float: left;
	width: 100%;
	height: auto;
	overflow: hidden;
	pointer-events: none;
	position: relative;
}

.tab-item .tab-btn > .bg {
	width: 100%;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s;
	opacity: 0;
}


.tab-item .tab-cont { display: none;}

.tab-item input:nth-of-type(1):checked ~ .tab-cont:nth-of-type(1) { display: block;}
.tab-item input:nth-of-type(2):checked ~ .tab-cont:nth-of-type(2) { display: block;}
.tab-item input:nth-of-type(3):checked ~ .tab-cont:nth-of-type(3) { display: block;}
.tab-item input:nth-of-type(4):checked ~ .tab-cont:nth-of-type(4) { display: block;}
.tab-item input:nth-of-type(5):checked ~ .tab-cont:nth-of-type(5) { display: block;}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=table-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.default-table {
	width: 100%;
	border-collapse: collapse;
	padding: 0;
	cursor: default;
}

.default-table tr { border-bottom: 1px solid #d4d4d4; }
.default-table tr.no-border { border: none; }
.default-table.no-last-border tr:last-child { border: none; }
.default-table.dashed tr { border-bottom: 1px dashed #d4d4d4; }

.default-table tr th,
.default-table tr td { padding-top: 20px; padding-bottom: 20px; line-height: 180%; }

.default-table.no-padding tr th,
.default-table.no-padding tr td { padding: 0; }

.default-table.tiny tr th,
.default-table.tiny tr td { padding-top: 5px; padding-bottom: 5px; }

.default-table.thin tr th,
.default-table.thin tr td { padding-top: 10px; padding-bottom: 10px; }

.default-table.fat tr th,
.default-table.fat tr td { padding-top: 40px; padding-bottom: 40px; }

.default-table.all-border tr th,
.default-table.all-border tr td { border: 1px solid #d4d4d4; }

.default-table.vertical-border tr { border: none; }
.default-table.vertical-border tr th,
.default-table.vertical-border tr td { border-bottom: none; border-left: 1px solid #d4d4d4; }

.default-table.vertical-border tr th:first-of-type,
.default-table.vertical-border tr td:first-of-type { border: none !important; }

.default-table.fixed-layout { table-layout: fixed; }
.default-table.fixed-layout * { word-break: break-all; }


.default-table.flexible-layout {
	text-align: center;
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=toggle-box------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.toggle-box {
	width: 100%;
	height: auto;
	overflow: hidden;
	user-select: none;
}

.toggle-box > .toggle-box-btn {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 20px 0;
	padding-right: 50px;
	position: relative;
	cursor: pointer;
	font-size: 0;
}

.toggle-box > .toggle-box-btn * {
	pointer-events: none;
}

.toggle-box > .toggle-box-btn:hover {
	background: rgba(0,0,0,0.05);
}

.toggle-box > .toggle-box-btn > .icons {
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 0;
	position: absolute;
	top: 50%;
	right: 10px;
	text-align: center;
	transform: translateY(-50%) translateZ(0);
	transition: transform 0.3s ease-out;
	border: 2px solid #87b758;
	border-radius: 8px;
	color: #87b758;
}

.toggle-box > .toggle-box-btn > .icons.blue { border: 2px solid #3f80de; color: #3f80de;}

.toggle-box > .toggle-box-btn > .icons > .rotater {
	width: 26px;
	height: 26px;
	line-height: 26px;
	font-size: 0;
	position: relative;
	text-align: center;
	transform-origin: 50% 50%;
	transform: rotate(90deg);
	transition: transform 0.3s ease-out;
}

.toggle-box > .toggle-box-btn.on > .icons > .rotater { transform: rotate(0deg); }

.toggle-box > .toggle-box-btn > .icons > .rotater > i {
	vertical-align: middle;
	width: 26px;
	height: 26px;
	line-height: 26px;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
	transition: opacity 0.3s ease-out;
	color: inherit;
}

.toggle-box > .toggle-box-btn > .icons > .rotater > i:nth-child(1) { opacity: 1;}
.toggle-box > .toggle-box-btn > .icons > .rotater > i:nth-child(2) { opacity: 0;}
.toggle-box > .toggle-box-btn.on > .icons > .rotater > i:nth-child(1) { opacity: 0;}
.toggle-box > .toggle-box-btn.on > .icons > .rotater > i:nth-child(2) { opacity: 1;}

.toggle-box > .toggle-box-btn > h4 {
	cursor: pointer;
	line-height: 20px;
	padding-left: 10px;
	padding-right: 10px;
}


.toggle-box > .toggle-box-cont {
	display: none;
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 0 10px 30px 10px;
}

.toggle-box > .toggle-box-cont > p {
	width: 100%;
	padding: 10px;
}

.toggle-box > .toggle-box-btn.on + .toggle-box-cont { display: block; }




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=paging----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.paging {
	display: inline-block;
	width: auto;
	height: auto;
	overflow: hidden;
	text-align: center;
	font-size: 0;
	border-radius: 4px;
	padding: 10px 0;
}

.paging a {
	display: inline-block;
	min-width: 50px;
	height: 50px;
	line-height: 50px;
	color: #888;
	box-sizing: border-box;
	padding: 0 3px;
	position: relative;
	border-radius: 0;
	font-size: 0;
	vertical-align: middle;
}

.paging a.number:hover,
.paging a.number:active {
	border-bottom: 3px solid #fff;
}

.paging a.number > span {
	display: inline-block;
	height: inherit;
	line-height: inherit;
	vertical-align: middle;
	font-size: 18px;
	font-weight: 600;
}

.paging a.number.on {
	color: #222;
	border-bottom: 3px solid #fff;
}

.paging a.prev,
.paging a.next {
	color: #888;
	font-size: 0;
	border-radius: 4px;
}

.paging a.prev > i,
.paging a.next > i {
	height: inherit;
	line-height: inherit;
	font-size: 24px;
	vertical-align: middle;
}

.paging a.prev.disabled,
.paging a.next.disabled {
	color: #ddd;
	pointer-events: none;
}

.paging a.prev:hover,
.paging a.prev:active,
.paging a.next:hover,
.paging a.next:active {
	background: rgba(0,0,0,0.05);
	color: #222;
}




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=callout-item----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.callout-item {
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid #ddd;
	padding: 20px 50px;
}

.callout-item:before {
	content: '';
	display: block;
	width: 5px;
	height: 100%;
	background: #ff855f;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.callout-item:after {
	display: block;
	content: '\e001';
	font-family: 'Material Icons';
	width: 50px;
	height: 40px;
	line-height: 40px;
	font-size: 30px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	color: #ff855f;
}



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=display---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.dp-inblock { display: inline-block; }
.dp-block { display: block; }
.dp-inline { display: inline;}

.ofl-hidden { overflow: hidden !important; }
.ofl-visible { overflow: visible !important; }

.pull-l { float: left; }
.pull-r { float: right; }
.pull-none { float: none !important; }
.clear { clear: both; }

.border-ddd { border: 1px solid #ddd; }
.border-ccc { border: 1px solid #ccc; }
.border-t { border-top: 1px solid #ddd; }
.border-b { border-bottom: 1px solid #ddd; }
.border-none { border: none !important; }

.pos-rel { position: relative;}
.pos-abs { position: absolute;}

.full { width: 100%; }
.w30 { width: 30%; }
.w50 { width: 50%; }
.w70 { width: 70%; }
.respon-15-30 { width: 15%; }
.respon-35-70 { width: 35%; }
.respon-50-100 { width: 50%; }

.no-opacity { opacity: 1 !important; }
.opacity-08 { opacity: 0.8 !important; }
.opacity-05 { opacity: 0.5 !important; }
.opacity-02 { opacity: 0.2 !important; }




/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=padding---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.pd-v-1u { padding-top: 50px; padding-bottom: 50px; }
.pd-v-2u { padding-top: 100px; padding-bottom: 100px; }
.pd-v-3u { padding-top: 150px; padding-bottom: 150px; }
.pd-v-4u { padding-top: 200px; padding-bottom: 200px; }

.pd-h-1u { padding-left: 50px; padding-right: 50px; }
.pd-h-2u { padding-left: 100px; padding-right: 100px; }
.pd-h-3u { padding-left: 150px; padding-right: 150px; }
.pd-h-4u { padding-left: 200px; padding-right: 200px; }

.pd-v-2 { padding-top: 2px; padding-bottom: 2px; }
.pd-v-5 { padding-top: 5px; padding-bottom: 5px; }
.pd-v-10 { padding-top: 10px; padding-bottom: 10px; }
.pd-v-20 { padding-top: 20px; padding-bottom: 20px; }
.pd-v-30 { padding-top: 30px; padding-bottom: 30px; }
.pd-v-40 { padding-top: 40px; padding-bottom: 40px; }
.pd-v-50 { padding-top: 50px; padding-bottom: 50px; }
.pd-v-60 { padding-top: 60px; padding-bottom: 60px; }
.pd-v-80 { padding-top: 80px; padding-bottom: 80px; }
.pd-v-100 { padding-top: 100px; padding-bottom: 100px; }
.pd-v-120 { padding-top: 120px; padding-bottom: 120px; }

.pd-h-5 { padding-left: 5px; padding-right: 5px; }
.pd-h-10 { padding-left: 10px; padding-right: 10px; }
.pd-h-20 { padding-left: 20px; padding-right: 20px; }
.pd-h-30 { padding-left: 30px; padding-right: 30px; }
.pd-h-40 { padding-left: 40px; padding-right: 40px; }
.pd-h-50 { padding-left: 50px; padding-right: 50px; }
.pd-h-60 { padding-left: 60px; padding-right: 60px; }
.pd-h-80 { padding-left: 80px; padding-right: 80px; }
.pd-h-100 { padding-left: 100px; padding-right: 100px; }
.pd-h-120 { padding-left: 120px; padding-right: 120px; }

.pd-h-20-10 { padding-left: 20px; padding-right: 20px; }

.pd-l-5 { padding-left: 5px !important; }
.pd-l-10 { padding-left: 10px !important; }
.pd-l-20 { padding-left: 20px !important; }

.pd-r-5 { padding-right: 5px !important; }
.pd-r-10 { padding-right: 10px !important; }
.pd-r-20 { padding-right: 20px !important; }

.pd-t-1u { padding-top: 50px; }
.pd-t-2u { padding-top: 100px; }
.pd-t-3u { padding-top: 150px; }
.pd-t-4u { padding-top: 200px; }

.pd-b-1u { padding-bottom: 50px; }
.pd-b-2u { padding-bottom: 100px; }
.pd-b-3u { padding-bottom: 150px; }
.pd-b-4u { padding-bottom: 200px; }

.no-padding { padding: 0 !important;}



/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*=margin----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.mg-v-5 { margin-top: 5px !important; margin-bottom: 5px !important; }
.mg-v-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.mg-v-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.mg-v-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.mg-v-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.mg-v-50 { margin-top: 50px !important; margin-bottom: 50px !important; }
.mg-v-60 { margin-top: 60px !important; margin-bottom: 60px !important; }
.mg-v-80 { margin-top: 80px !important; margin-bottom: 80px !important; }
.mg-v-100 { margin-top: 100px !important; margin-bottom: 100px !important; }
.mg-v-120 { margin-top: 120px !important; margin-bottom: 120px !important; }

.mg-t-5 { margin-top: 5px !important; }
.mg-t-10 { margin-top: 10px !important; }
.mg-t-20 { margin-top: 20px !important; }
.mg-t-30 { margin-top: 30px !important; }
.mg-t-40 { margin-top: 40px !important; }
.mg-t-50 { margin-top: 50px !important; }
.mg-t-60 { margin-top: 60px !important; }
.mg-t-80 { margin-top: 80px !important; }
.mg-t-100 { margin-top: 100px !important; }
.mg-t-120 { margin-top: 120px !important; }

.mg-h-2 { margin-left: 2px !important; margin-right: 2px !important; }
.mg-h-5 { margin-left: 5px !important; margin-right: 5px !important; }
.mg-h-10 { margin-left: 10px !important; margin-right: 10px !important; }
.mg-h-20 { margin-left: 20px !important; margin-right: 20px !important; }
.mg-h-30 { margin-left: 30px !important; margin-right: 30px !important; }
.mg-h-40 { margin-left: 40px !important; margin-right: 40px !important; }
.mg-h-50 { margin-left: 50px !important; margin-right: 50px !important; }
.mg-h-60 { margin-left: 60px !important; margin-right: 60px !important; }
.mg-h-80 { margin-left: 80px !important; margin-right: 80px !important; }
.mg-h-100 { margin-left: 100px !important; margin-right: 100px !important; }
.mg-h-120 { margin-left: 120px !important; margin-right: 120px !important; }

.mg-l-2 { margin-left: 2px !important; }
.mg-l-5 { margin-left: 5px !important; }
.mg-l-10 { margin-left: 10px !important; }
.mg-l-20 { margin-left: 20px !important; }

.mg-r-2 { margin-right: 2px !important; }
.mg-r-5 { margin-right: 5px !important; }
.mg-r-10 { margin-right: 10px !important; }
.mg-r-20 { margin-right: 20px !important; }