:root {
	/* --open-sans: 'Open Sans', sans-serif; */
	--open-sans: 'Poppins', sans-serif;
	--main-width: 886px;
	--main-color: #323232;
	--color1: #e85629;	
	--color2: #4ba7f0;
	--dotted: #a5a2a2;
}

*, html, body {
	/* font-family: 'Noto Sans', sans-serif; */
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: var(--main-color);
}
body { background-color: #f3f4f4; }


a, a:hover, a:focus, a:visited, a:active { color: var(--color2); }
a:hover { text-decoration: underline; }
b { font-weight: 600; }

.app-htl-img { max-width: 282px; height: auto; border-radius: 3px; }

/* top */

.app-top { display: flex; align-items: center; height: 112px; border: solid 1px #dfdede; background-color: #ffffff; }
.app-top-2, .app-top .app-container { display: flex; align-items: center; }
.app-top-2 a { font-weight: 600; font-size: 22px; margin: 0 12px 0 0; line-height: 30px; border-right: 3px solid #dcdbdb; padding-right: 12px; text-decoration: none; letter-spacing: -0.88px; color: var(--main-color); }
.app-top-2 a img { display: none; }
.app-top-2 a:hover, .app-top-2 a:focus, .app-top-2 a:active, .app-top-2 a:visited { color: var(--main-color); }
.app-top-2 p { font-size: 19px; line-height: 24px; font-weight: 500; margin: 0; }
.app-top-xs { line-height: 24px; font-weight: 500; text-align: center; padding-top: 21px; }
.app-top-3 { font-family: var(--open-sans); font-size: 12px; line-height: 14px; color: #868789; padding-top: 8px; }
.app-top-4 { margin: 0 0 0 auto; display: flex; align-items: center; }
.app-top-5 a, .app-top-5 span, .app-top-5 a:visited { font-size: 13px; color: #959595; }
.app-top-5 span { padding: 0 15px 0 15px; }
.app-dropdown-lang > div, .app-lang { display: flex; align-items: center; }
.app-dropdown-lang > div span { font-size: 14px; }
.app-dropdown-lang > div i { font-size: 20px; color: #aaa6a6; margin-left: 9px; }
.app-dropdown-lang .dropdown-menu a { font-size: 14px; line-height: 1.4em; }
.app-lang { margin-left: 44px; }
.app-lang > i { font-size: 18px; color: #918e8e; margin-right: 9px; }

/* menu xs */

.app-menu-xs { margin-left: 25px; cursor: pointer; }
.app-menu-xs > i { font-size: 23px; color: #7c7777; }
.app-menu-xs-content { position: fixed; top: 0; right: -100%; background-color: #ffffff; border-radius: 3px; height: 100vh; padding: 13px 17px 13px 17px; transition: right .25s; z-index: 8888; }
.app-has-menu-xs .app-menu-xs-content { right: 0; }
.app-menu-xs-hide { font-size: 23px; color: #7c7777; cursor: pointer; margin-bottom: 20px; }
.app-menu-xs-content ul { list-style-type: none; padding: 0; margin: 0; }
.app-menu-xs-content ul li { padding: 5px 0 5px 0; }
.app-menu-xs-content ul li a { font-size: 15px; text-transform: uppercase; color: var(--main-color); }
.app-menu-xs-content .app-lang { margin-top: 15px; margin-left: 0; border-top: 2px dotted var(--dotted); padding-top: 20px; }
.app-menu-xs-content .app-dropdown-lang .dropdown-menu { padding-top: 5px; padding-bottom: 5px; }
.app-menu-xs-content .app-dropdown-lang .dropdown-menu li { padding: 0; }
.app-menu-xs-content .app-dropdown-lang .dropdown-menu li a { text-transform: none; font-size: 14px; }
.app-menu-xs-content .app-dropdown-lang .dropdown-menu li a:first-letter { text-transform: uppercase; }

/* foot */

.app-foot-menu { height: 73px; background-color: #595b5c; display: flex; align-items: center; justify-content: center; list-style-type: none; padding: 0; margin: 0; }
.app-foot-menu li { padding: 0 10px 0 10px; }
.app-foot-menu a { font-size: 12px; color: #c2bdbd; text-transform: uppercase; }
.app-foot-menu a:hover, .app-foot-menu a:active, .app-foot-menu a:focus, .app-foot-menu a:visited { color: #c2bdbd; }

.app-cookie { min-height: 56px; display: flex; background-color: #989999; padding: 13px 0 13px 0; }
.app-cookie .app-container { display: flex; align-items: center; }
.app-cookie-content { display: flex; align-items: center; }
.app-cookie-content p { margin: 0 20px 0 0; font-size: 13px; font-family: var(--open-sans); color: #ffffff; font-weight: 600; line-height: 16px; }
.app-cookie-content > span { display: block; margin-left: auto; }
.app-cookie-content span { font-size: 13px; }
.app-cookie-content i { cursor: pointer; font-size: 13px; color: #ffffff; }

.app-foot-logos { display: flex; align-items: center; justify-content: space-between; margin: 37px auto 37px auto; }
.app-foot-logos svg { flex-shrink: 0; }
.app-foot-logo-1 { display: flex; align-items: center; }
.app-foot-logo-1 svg { display: none; }
.app-foot-logo-1 p { font-size: 15px; line-height: 20px; color: #868789; margin: 0 0 0 12px; max-width: 130px; }
.app-foot-logo-2 { display: flex; align-items: center; }
.app-foot-logo-2 > div { max-width: 160px; margin-left: 18px; }
.app-foot-logo-2 > div div { font-size: 22px; line-height: 1em; font-weight: 600; padding-bottom: 5px; }
.app-foot-logo-2 > div p { font-size: 12px; line-height: 14px; color: #868789; margin: 0; }
.app-foot-logo-2 img { display: none; }
.app-foot-logo-3 { width: 180px; }
.app-foot-logo-3 p { font-size: 12px; line-height: 14px; color: #9c9ea3; margin: 5px 0 0 0; text-align: right; }

.app-foot-row { background-color: #f3f4f4; }
.app-foot-row p { font-size: 13px; line-height: 18px; color: #7e7f81; text-align: center; margin: 0; padding: 36px 0 36px 0; }
.app-foot-row p a { font-size: 13px; color: #7e7f81; }

/* common */

.app-container { padding-left: 17px; padding-right: 17px; }
.app-content { border-radius: 3px; background-color: #ffffff; }
.app-full-content h4 { font-size: 27px; font-weight: 500; margin: 0 0 30px 0; }
.app-full-content div { font-weight: 600; }
.app-full-content p, .app-full-content li, .app-full-content a { font-size: 14px; line-height: 1.3em; word-wrap: break-word; }

.app-btn-1 { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 4px; background-color: var(--color1); font-size: 17px; color: #ffffff; font-weight: 600; text-align: center; line-height: 1.1em; padding: 0 40px 0 40px; cursor: pointer; }
.app-btn-1:hover, .app-btn-1:active, .app-btn-1:focus, .app-btn-1:visited { text-decoration: none; color: #ffffff; }
.app-btn-1 i { font-size: 30px; color: #ffffff; margin-left: 10px; }
.app-btn-back { display: inline-flex; align-items: center; font-size: 16px; line-height: 22px; color: #acacac; cursor: pointer; }
.app-btn-back i { font-size: 24px; color: #acacac; margin-right: 10px; }

.form-horizontal .control-label { font-weight: normal; margin: 0; display: inline; }
.form-horizontal .control-label:first-letter { text-transform: uppercase; }
.form-horizontal textarea { height: 150px; }

.textbox, .listbox, .form-control { padding: 5px 10px 5px 10px;	height: 45px; border-radius: 6px; border: solid 1px #e3e3e3; background-color: #ffffff; color: #3c3c3c; font-size: 14px; }
.textbox { width: 100%; }
.fuelux .checkbox input[type="checkbox"]:focus + .checkbox-label, .fuelux .checkbox input[type="checkbox"]:hover + .checkbox-label, .fuelux .checkbox .checkbox-label:hover { color: #323232; }
.fuelux .checkbox-custom::before { top: 5px; }
.fuelux .checkbox-custom.checked::before { background: var(--color2); border-color: var(--color2); }
.ui-state-error .checkbox-label, .ui-state-error .checkbox-label * { color: #ff0000 !important; font-weight: bold; } 

/* growl */

.app-growl-anim { animation-duration: 500ms; -webkit-animation-duration: 500ms;	animation-delay: 0;	-webkit-animation-delay: 0; animation-fill-mode: both; -webkit-animation-fill-mode: both; }
.app-growl { position: fixed; width: 100%; left: 0; top: 1cm; display: none; z-index: 22222; }
.app-growl-content { display: table; margin: 0 auto 0 auto; position: relative; box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.16); border: 1px solid #c5c3c3; }
.app-growl-content-wrapper { display: flex; align-items: center; min-height: 97px; padding: 15px 25px 15px 15px; background-color: #ffffff; }
.app-growl-close { position: absolute; top: 10px; right: 10px; cursor: pointer; }
.app-growl-content-ico { width: 70px; text-align: center; margin-right: 15px; }
.app-growl-content-ico i { font-size: 48px; display: none; }
.app-growl-ico-error { color: #ff0000; }
.app-growl-ico-warn { color: var(--color2); }
.app-growl-ico-info { color: var(--color2); }
.app-growl-content-error .app-growl-ico-error { display: block; }
.app-growl-content-warn .app-growl-ico-warn { display: block; }
.app-growl-content-info .app-growl-ico-info { display: block; }
.app-growl-item, .app-growl-item * { font-size: 0.938rem; }
.app-growl-item a { color: var(--color2); }

/* modal */

.app-modal-title { display: flex; align-items: center; padding-left: 5px; font-size: 1.125rem; font-weight: 600; color: #3c3c3c; text-transform: uppercase; }
.app-modal-title div { min-width: 32px; min-height: 32px; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color2); margin-right: 15px; }
.app-modal-title div i { font-size: 16px; color: #ffffff; }
.app-modal-button { background-color: var(--color2); font-weight: 600; color: #ffffff; text-align: center; vertical-align: middle; display: table; margin: 0 0 0 auto; height: 37px; padding: 0 10px 0 10px; min-width: 100px; border: none; }
.app-modal-button-2 { background-color: var(--color1); }
.modal-body label { font-size: 0.875rem; font-weight: normal; color: #5c5c5c; margin-top: 5px; }
.modal-body label:first-letter, .app-modal-button:first-letter { text-transform: capitalize; }
.app-modal-button-cancel { color: #3c3c3c; border: 1px solid #7c7878; background-color: #ffffff; }
.app-modal .modal-footer { overflow: hidden; }
.app-modal .modal-footer .app-modal-button { float: right; margin-left: 8px; margin-right: 0; }
.modal-timeout-footer { display: flex; justify-content: flex-end; }
.app-login-pass-1 { padding-top: 7px; text-align: right; }
.app-login-pass-1 span { font-size: 0.875rem; color: var(--color1); cursor: pointer; }

/* wait */

.app-wait { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; justify-content: center; align-items: center; }
.app-wait-white, .app-wait-blue {  
	-webkit-animation: rotate 1.8s linear infinite;
	animation: rotate 1.8s linear infinite;
	-webkit-transform-origin: center center;
	transform-origin: center center;
}
.app-wait-blue { height: 60px; width: 60px; }
.app-wait-white { height: 20px; width: 20px; }
.app-wait-blue .app-wait-path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	stroke: #30beec;
	-webkit-animation: dash 1.2s ease-in-out infinite;
	animation: dash 1.2s ease-in-out infinite;
	stroke-linecap: round;
}
.app-wait-white .app-wait-path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	stroke: #ffffff;
	-webkit-animation: dash 1.2s ease-in-out infinite;
	animation: dash 1.2s ease-in-out infinite;
	stroke-linecap: round;
}

@-webkit-keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}
@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}

/* anim */

.fadeInUp, .fadeInDown, .slideInLeft, .slideInRight, .slideOutLeft, .slideOutRight, .slideOutUp, .slideInDown, .slideOutDown, .slideInUp,
.fadeInLeft, .fadeInRight, .fadeOutLeft, .fadeOutRight {
	-webkit-animation-duration: 200ms;
	animation-duration: 200ms;
	-webkit-animation-delay: 0;
	animation-delay: 0;
}
.zoomIn, .zoomOut {
	-webkit-animation-duration: 500ms;
	animation-duration: 500ms;
	-webkit-animation-delay: 0;
	animation-delay: 0;
}

.open > ul.dropdown-menu {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	opacity: 1;
}
ul.dropdown-menu {
	-webkit-transform-origin: top;
	transform-origin: top;
	-webkit-animation-fill-mode: forwards;  
	animation-fill-mode: forwards; 
	transform: scale(1, 0);
	-webkit-transform: scale(1, 0);
	display: block;
	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	opacity: .3;
}

/* blocks */

.app-block-imgs { display: flex; justify-content: space-between; flex-wrap: wrap; }

.app-block-pool .app-content { padding: 28px 40px 28px 40px; display: flex; margin-top: 27px; margin-bottom: 0; }
.app-block-pool-1, .app-block-pool-2 { width: 50%; display: flex; align-items: center; }
.app-block-pool-1 > div { height: 48px; width: 22px; background-color: #f3f4f4; display: flex; align-items: flex-end; margin-right: 20px; }
.app-block-pool-1 > div > div { background-color: var(--color2); width: 100%; }
.app-block-pool-1 p, .app-block-pool-2 p { font-size: 14px; line-height: 20px; color: #7e7f81; margin: 0; text-transform: uppercase; }
.app-block-pool-1 p b, .app-block-pool-2 p b { font-size: 14px; white-space: nowrap; color: #7e7f81; }
.app-block-pool-3 { text-align: center; font-size: 13px; line-height: 18px; color: #adaeaf; padding-top: 18px; }
.app-block-pool-progress { position: relative; margin: 4px 20px 4px 4px; float: left; text-align: center; }
.app-block-pool-progress span { font-size: 18px; color: #4c4c4c; font-weight: 600; }
.app-block-pool-overflow { position: relative; overflow: hidden; width: 90px; height: 45px; margin-bottom: -14px; }
.app-block-pool-bar { position: absolute; top: 0; left: 0; width: 90px; height: 90px; border-radius: 50%; box-sizing: border-box; border: 10px solid #f2f2f2; border-bottom-color: var(--color2); border-right-color: var(--color2); }

/* order */

.app-order .app-content { padding: 15px 10px 54px 10px; }
.app-ord-btn { display: table; margin: 35px 0 0 auto; }
.app-ord-1 { font-size: 27px; line-height: 1.26em; padding: 17px 15px 31px 37px; }
.app-ord-2 { padding: 35px 0 0 0; }
.app-ord-3 { display: flex; align-items: center; margin-bottom: 15px; }
.app-ord-3 > label { font-weight: normal; margin: 0; padding: 0; min-width: 220px; width: 220px; }
.app-ord-3 > div { width: 300px; }
.app-ord-4 { padding-top: 15px; padding-bottom: 45px; }
.app-ord-4 .checkbox-label, .app-ord-4 .checkbox-label *, .app-agr-lbl, .app-agr-lbl * { font-size: 14px; }
.app-ord-4 .checkbox { margin: 0 0 0 18px; }
.app-ord-4 .app-ord-3 { margin-bottom: 8px; }
.app-ord-4 .checkbox[data-agr-id="0"] { margin: 0; }
.app-ord-5 { display: flex; margin: 15px 0 50px 0; justify-content: flex-end; }
.app-ord-5 .app-ord-pmt-dgt-5 { display: flex; margin-left: 6px; min-height: 31px; }
.app-ord-5 .app-ord-pmt-dgt-5:first-of-type { background-color: #e3e3e3; }
.app-ord-5 .app-ord-pmt-dgt-5:first-of-type i, .app-ord-5 .app-ord-pmt-dgt-5:first-of-type span { color: #4d4d4d; }
.app-ord-6 { display: flex; align-items: flex-start; margin-top: 48px; }
.app-ord-6 i { font-size: 30px; color: var(--color2); margin-top: 4px; }
.app-ord-6 p { margin: 0 0 0 17px; line-height: 26px; }
.app-ord-7 { display: flex; align-items: flex-start; padding-left: 25px; padding-bottom: 20px; }
.app-ord-7 i { font-size: 36px; color: var(--color2); margin-top: 4px; }
.app-ord-7 > span { margin: 0 0 0 18px; display: block; }
.app-ord-7 .app-agr-lbl, .app-ord-7 .app-agr-lbl * { line-height: 26px; color: #7e7f81; }
.app-ord-8 { display: none; }
.app-order-edit .app-pmts { margin-top: 40px; }
.app-order-edit .app-pmts-btn-back { display: none; }

.app-pmts-btns { margin-top: 30px; }
.app-pmts-btn-back .app-btn-prev { font-size: 15px; cursor: pointer; }
.app-pmts-btn-back .app-btn-prev i { font-size: 14px; color: #3C3C3C; margin-right: 8px; }
.app-pmts-btn-next-off { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 4px; background-color: #ebebeb; font-size: 17px; color: #ffffff; font-weight: 600; text-align: center; line-height: 1.1em; padding: 0 40px 0 40px; cursor: pointer; }
.app-pmts-btn-next-off i { color: #ffffff; font-size: 1.188rem; margin-left: 10px; }
.app-pmts-btns .app-btn-1 { background-color: var(--color2); }

.app-ord-pmt-dgt-1 { padding: 21px 23px 21px 21px; background: url(/vchcode) calc(100% - 20px) calc(100% - 20px) no-repeat; background-size: 75px 75px; }
.app-ord-pmt-dgt-2 i { color: var(--color2); font-size: 27px; width: auto; }
.app-ord-pmt-dgt-2 p { color: var(--color2); font-weight: 600; font-size: 24px; line-height: 1em; margin-left: 14px; display: flex; align-items: baseline; }
.app-ord-pmt-dgt-2 p span { color: var(--color2); font-weight: normal; font-size: 18px; line-height: 24px; padding-left: 15px; }
.app-ord-pmt-dgt-2 span { color: var(--color2); font-size: 24px; line-height: 33px; }
.app-ord-pmt-dgt-3 { margin-left: 5px; }
.app-ord-pmt-dgt-5 { display: none; }
.app-ord-pmt-dgt-5 span { font-size: 11px; }
.app-ord-pmt-dgt-7 { padding: 24px 35px 32px 35px; }
.app-ord-pmt-dgt-8 { font-size: 24px; line-height: 33px; font-weight: normal; margin-bottom: 27px; }

.app-pmts-item { border: 1px solid #e3e3e3; border-radius: 6px; }
.app-pmts-item:hover { border-color: var(--color2); }
.app-pmts-item-1 { display: none; }
.app-pmts-item-3 { color: #787878; font-size: 14px; white-space: nowrap; }
.app-pmts-item-lbl { font-size: 14px; font-weight: normal; color: #4d4d4d; }
.app-pmts-item-sel, .app-pmts-item-sel:hover { border-color: var(--color2); border-width: 2px; }
.app-pmts-item-sel .app-pmts-item-3 { color: var(--color2); }
.app-pmts-item-sel .app-pmts-item-lbl { color: var(--color2); }
.app-pmtsg-total { margin: 0; font-size: 20px; line-height: 27px; padding-left: 47px; }
.app-pmtsg-total span { font-size: 20px; line-height: 27px; font-weight: 600; }
.app-pmtsg-total span { font-weight: 600; }
.app-pmts-invalid .app-pmts-item { border-color: #ff0000; }

/* confirm */

#confirm .app-content { padding: 15px 10px 39px 10px; }
.app-cnf-chk-1 { display: flex; flex-direction: column; align-items: center; font-size: 17px; line-height: 24px; font-weight: 400; margin-bottom: 50px; text-align: center; }
.app-cnf-chk-1 div { font-size: 27px; line-height: 38px; margin: 27px 0 8px 0; font-weight: normal; text-align: center; }
.app-cnf-chk-1 svg { margin-top: 50px; }

.app-cnf-chk-2 { display: flex; align-items: flex-start; padding: 40px 80px 20px 80px; }
.app-cnf-chk-2 i { font-size: 45px; color: #ff0000; margin-right: 15px; }
.app-cnf-chk-2 > div div { font-size: 27px; line-height: 38px; margin-bottom: 30px; }
.app-cnf-chk-2 > div p { display: table; margin: 35px auto 0 auto; }

.app-cnf-chk-3 { display: flex; align-items: flex-start; padding: 40px 100px 50px 100px; }
.app-cnf-chk-3 i { font-size: 45px; color: var(--color2); margin-right: 15px; }
.app-cnf-chk-3 > div div { font-size: 27px; line-height: 38px; margin-bottom: 30px; }

.app-cnf-info { padding: 25px 30px 10px 30px; }
.app-cnf-chk-4 { padding: 40px 40px 35px 40px; text-align: center; }
.app-cnf-chk-4 > i { font-size: 50px; color: var(--color2); margin-bottom: 20px; }
.app-cnf-chk-4a { font-size: 17px; line-height: 24px; font-weight: 400; margin-bottom: 45px; }
.app-cnf-chk-4a div { font-size: 27px; line-height: 38px; font-weight: 400; margin-bottom: 7px; }
.app-cnf-chk-4c { display: table; margin: 45px auto 45px auto; }
.app-cnf-chk-4d div { font-size: 17px; font-weight: 400; line-height: 24px; font-style: italic; margin-bottom: 20px; }
.app-cnf-chk-4d p { font-size: 17px; line-height: 24px; font-weight: 600; margin: 0; text-align: center; }
.app-cnf-chk-4d p a { font-size: 17px; line-height: 24px; }
.app-cnf-chk-4e { display: table; margin: 25px auto 0 auto; }
.app-cnf-chk-4e a { display: flex; align-items: center; border-radius: 5px; border: solid 1px var(--color2); padding: 16px 22px 16px 22px; max-width: 310px; }
.app-cnf-chk-4e a:hover, .app-cnf-chk-4e a:active, .app-cnf-chk-4e a:focus, .app-cnf-chk-4e a:visited { color: var(--main-color); text-decoration: none; }
.app-cnf-chk-4e i { font-size: 24px; color: var(--color2); margin-right: 12px; }
.app-cnf-chk-4e span { display: block; font-size: 12px; line-height: 15px; margin-left: 12px; color: var(--main-color); }
