@charset "utf-8";

/* CSS Document */

body, html { background-color: #ffffff; color: #000000; font-size: 16px; line-height: 1.75rem; margin: 0px; padding: 0px; position: relative; font-family: 'Montserrat', '\5FAE\8EDF\6B63\9ED1\9AD4', 'Microsoft JhengHei', Helvetica, Arial, sans-serif !important; }


.header .logo { background-image: url("../images/run2gather.svg"); background-size: auto 35px; background-position:25px 17px; width:420px; height:65px; background-color: transparent; background-repeat: no-repeat; cursor: pointer; }
@media handheld, screen and (max-width: 1024px) {
.header .logo { background-image: url("../images/run2gather.svg"); background-size: auto 35px; background-position:0px 17px; width:230px; height:65px; }
}
@media handheld, screen and (max-width: 480px) {
.header .logo { background-image: url("../images/run2gather_logo.svg"); background-size: auto 35px; background-position:0px 17px; width:52px; height:65px; }
}

p, div, span, a { font-size: 16px; line-height: 1.75rem; }
a:link { color: #4b8349; text-decoration: none; }
a:visited { text-decoration: underline; color: #4b8349; }
a:hover { text-decoration: underline; color: #4b8349; }
a:active { text-decoration: underline; color: #4b8349; }
a { outline: none; border: none; }


.text-primary { color: #4b8349 !important; }

.btn-primary { color: #FFFFFF; background-color: #4b8349!important; border-color: #4b8349!important; }
.btn-primary:hover { color: #FFFFFF; background-color: #4b8349!important; border-color: #4b8349!important; box-shadow: none!important; }
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow: none!important; }
.green { color: #639259; }
.brown { color: #4b8349; }

.btn { border-radius:50px!important; }

.bg-light { background-color: #4b8349!important; }

h2 { border-left: 5px solid #4b8349; padding-left: 10px; }
h3, h4, h5 { color: #4b8349 !important; font-weight:bold; } 

p { margin: 0px; padding: 0px 0px 10px 0px; }
.footer .organizer_row .t_team { float: none; width: 100%; }
.h10 { height: 10px; }
.h20 { height: 20px; }
.space { clear: both; line-height: 0px; height: 0px; width: 100%; }
.space5 { clear: both; line-height: 0px; height: 5px; width: 100%; }
.space10 { clear: both; line-height: 0px; height: 10px; width: 100%; }
.space15 { clear: both; line-height: 0px; height: 15px; width: 100%; }
.space20 { clear: both; line-height: 0px; height: 20px; width: 100%; }
.space25 { clear: both; line-height: 0px; height: 25px; width: 100%; }
.space30 { clear: both; line-height: 0px; height: 30px; width: 100%; }
.space35 { clear: both; line-height: 0px; height: 35px; width: 100%; }
.space40 { clear: both; line-height: 0px; height: 40px; width: 100%; }
.space45 { clear: both; line-height: 0px; height: 35px; width: 100%; }
.space50 { clear: both; line-height: 0px; height: 40px; width: 100%; }
.space55 { clear: both; line-height: 0px; height: 35px; width: 100%; }
.space60 { clear: both; line-height: 0px; height: 40px; width: 100%; }
.alert { /*color: #4b8349;*/ font-weight: 600; }
.small { font-size: 13px; }


/* smooth scroll to anchor */

* { scroll-behavior: smooth; }


/* wrapper */

.wrapper { min-width: 320px; margin: 0px; padding: 0px; /*overflow: auto;*/ }
.content_frame { margin: 0px; padding: 0px; width: 100%; /*overflow: auto;*/ }
.content_frame.fixed { position: fixed; }
.content { min-height: calc( 100vh - 477px); }

@media handheld, screen and (max-width: 1024px) {
	.content { min-height: calc( 100vh - 433px); }
}

@media handheld, screen and (max-width: 768px) {
	.content { min-height: calc( 100vh - 500px); }
}


/* header */

.header { position: fixed; top: 0px; height: 109px; margin: 0px; padding: 0px; background-color: #ffffff; width: 100%; border-bottom: 1px solid #ebe9f1; z-index: 7000; min-width:320px; -webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.1); box-shadow: 0px 3px 3px rgba(0,0,0,0.1); }

@media handheld, screen and (max-width: 1024px) {
	.header .logo { margin-left: 60px; }
}

.inner_frame { max-width: 1200px; width: 100%; margin: 0px auto; position: relative; }


/* menu */

#menuToggle { display: block; position: absolute; background: #ffffff; border-top:1px solid rgba(0, 0, 0, 0.1); top: 65px; left: 0px; z-index: 5000; -webkit-user-select: none; user-select: none; width: 100%; }
#menuToggle .toggle_btn { display: none; }
#menuToggle input { display: none; }

#menu { position: relative; width: 100%; max-width: 1160px; left: 0px; top: 0px; margin: auto; padding: 0px; color: #ffffff; background: #ffffff; list-style-type: none; -webkit-font-smoothing: antialiased; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-around; column-gap: 0px; }
#menu:before { display: none; }
#menu li { text-align: center; line-height: 34px; margin-bottom: 0px; cursor: pointer; white-space: nowrap; }
#menu li > a { padding: 0px 20px; }
#menu li:hover a { border-bottom: 5px solid #4b8349; }
#menu li > a:hover { color:#4b8349!important; }
#menu li.active > a { color:#4b8349!important; border-bottom: 5px solid #4b8349; background-color: #ffffff; }
#menu li li.active > a { background-color: #d2ccf5; }

/* submenu */
#menu li { position: relative; display: block!important; transition-duration: 0.5s; padding: 0px; height: 44px; }
#menu li a:link { display: inline-block; width: 100%; height: 100%; line-height: 34px; transition: all 0.5s ease; border-top: 5px solid transparent; }
#menu li:hover { cursor: pointer; }
ul#menu li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; top: 44px; left: 0; display: none; background: #ffffff; min-width: 100%; list-style-type: none; margin: 0px; padding: 0px; -webkit-box-shadow:0px 0px 12px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.1); box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.1); border-radius:0px; overflow: hidden;}
ul#menu li:hover>ul, ul#menu li ul:hover { visibility: visible; opacity: 1; display: block; }
ul#menu li ul li { height: inherit; color: #000000; clear: both; min-width: 100%; border-top: 0px; border-bottom: 0px; margin: 0px; text-align: left; border-bottom: 0px solid #eaeaea; }
ul#menu li ul li a { padding: 8px 12px; border-left: 5px solid transparent!important; border-top: 0px!important; border-bottom: 0px!important; transition: all 0.5s ease; }
ul#menu li ul li a { color: #000000!important; text-align: left; }
ul#menu li ul li:hover a { border-top: 0px!important; background: #4b8349; /*border-left: 5px solid #1a9431!important;*/ }
#menuToggle #menu input { display: none; }


#menuToggleRight { float: right; position: absolute; right: 0px; top: 0px; z-index: 6000; }
#menuToggleRight input { display: none; }
#menuToggleRight .toggle_btn { display: none; }
#menuRight { position: relative; width: 100%; max-width: 1160px; left: 0px; top: 0px; margin: auto; padding: 0px; color: #ffffff; background: transparent; list-style-type: none; -webkit-font-smoothing: antialiased; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-around; column-gap: 10px; }
#menuRight span { color: #4b8349; font-size: 25px; line-height: 65px; width: 60px; display: block; }
#menuRight:before { display: none; }
#menuRight li { text-align: center; line-height: 34px; margin-bottom: 0px; cursor: pointer; white-space: nowrap; width: 100%; }
#menuRight li:hover>a { border-top: 5px solid #4b8349; }
#menuRight li.active>a { border-top: 5px solid #4b8349; background-color: #4b8349; }

/* submenu */
#menuRight li { position: relative; display: block!important; transition-duration: 0.5s; padding: 0px; height: 44px; }
#menuToggleRight .login_btn { display: block; width: 60px; height: 65px; text-align: center; }
#menuToggleRight .login_btn span { color: #4b8349; font-size: 25px; width: 60px; line-height: 65px; }
#menuToggleRight .login_btn a { color: #4b8349; font-size: 25px; width: 60px; line-height: 65px; text-decoration: none; }
#menuRight li a:link { display: inline-block; width: 100%; height: 100%; line-height: 34px; transition: all 0.5s ease; border-top: 5px solid transparent; }
#menuRight li:hover { cursor: pointer; }
ul#menuRight li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; top: 65px; right: 0; display: none; background: #ffffff; min-width: 100%; list-style-type: none; margin: 0px; padding: 0px;-webkit-box-shadow:0px 0px 12px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.1); box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.1); border-radius:0px; overflow: hidden; }
ul#menuRight li:hover>ul, ul#menuRight li ul:hover { visibility: visible; opacity: 1; display: block; }
ul#menuRight li ul li { height: inherit; color: #000000; clear: both; min-width: 100%; border-top: 0px; border-bottom: 0px; margin: 0px; text-align: left; border-bottom: 1px solid #eaeaea; }
ul#menuRight li ul li a { padding: 8px 12px; border-left: 5px solid transparent!important; border-top: 0px!important; border-bottom: 0px!important; transition: all 0.5s ease; }
ul#menuRight li ul li a { color: #000000!important; text-align: left; }
ul#menuRight li ul li:hover a { border-top: 0px!important; text-decoration: none; color:#ffffff; background-color:#4b8349;}
ul#menuRight li ul li a:hover { color:#ffffff!important; background-color:#4b8349;}
/*
ul#menuRight li:nth-child(1) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
ul#menuRight li:nth-child(2) ul li:hover a { border-top: 0px!important; border-left: 5px solid #4b8349!important; }
ul#menuRight li:nth-child(3) ul li:hover a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
ul#menuRight li:nth-child(4) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
ul#menuRight li:nth-child(5) ul li:hover a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
ul#menuRight li:nth-child(6) ul li:hover a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
ul#menuRight li:nth-child(7) ul li:hover a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
*/
#menuToggleRight #menuRight input { display: none; }

#menuUpload { float: right; position: absolute; right: 60px; top: 0px; z-index: 6000; }
#menuUpload .toggle_btn { display: block; width: 60px; height: 65px; text-align: center; }
#menuUpload .toggle_btn a { color: #4b8349; font-size: 25px; width: 60px; line-height: 65px; }

#menuToggleLanguage { float: right; position: absolute; right: 125px; top: 0px; z-index: 6000; }
#menuToggleLanguage input { display: none; }
#menuToggleLanguage .toggle_btn { display: none; }
#menuLanguage { position: relative; width: 100%; max-width: 1160px; left: 0px; top: 0px; margin: auto; padding: 0px; color: #ffffff; background: transparent; list-style-type: none; -webkit-font-smoothing: antialiased; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-around; column-gap: 10px; }
#menuLanguage span { color: #4b8349; font-size: 16px; line-height: 65px; width: 60px; display: block; }
#menuLanguage:before { display: none; }
#menuLanguage li { text-align: center; line-height: 34px; margin-bottom: 0px; cursor: pointer; white-space: nowrap; width: 100%; }
#menuLanguage li:hover>a { border-top: 5px solid #4b8349; }
#menuLanguage li.active>a { border-top: 5px solid #4b8349; background-color: #4b8349; }

/* submenu */
#menuLanguage li { position: relative; display: block!important; transition-duration: 0.5s; padding: 0px; height: 44px; }
#menuLanguage li a:link { display: inline-block; width: 100%; height: 100%; line-height: 34px; transition: all 0.5s ease; border-top: 5px solid transparent; }
#menuLanguage li:hover { cursor: pointer; }
ul#menuLanguage li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; top: 65px; right: 0; display: none; background: #ffffff; min-width: 100%; list-style-type: none; margin: 0px; padding: 0px; -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.1); box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.1); border-radius:0px; overflow: hidden; }
ul#menuLanguage li:hover>ul, ul#menuLanguage li ul:hover { visibility: visible; opacity: 1; display: block; }
ul#menuLanguage li ul li { height: inherit; color: #000000; clear: both; min-width: 100%; border-top: 0px; border-bottom: 0px; margin: 0px; text-align: left; border-bottom: 1px solid #eaeaea; }
ul#menuLanguage li ul li a { padding: 8px 12px; border-left: 5px solid transparent!important; border-top: 0px!important; border-bottom: 0px!important; transition: all 0.5s ease; }
ul#menuLanguage li ul li a { color: #000000!important; text-align: left; }
ul#menuLanguage li ul li:hover a { border-top: 0px!important; text-decoration: none; color:#ffffff; background-color:#4b8349; }
ul#menuLanguage li ul li a:hover { color:#ffffff!important; background-color:#4b8349;}
/*
/*
ul#menuLanguage li:nth-child(1) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
ul#menuLanguage li:nth-child(2) ul li:hover a { border-top: 0px!important; border-left: 5px solid #4b8349!important; }
ul#menuLanguage li:nth-child(3) ul li:hover a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
ul#menuLanguage li:nth-child(4) ul li:hover a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
ul#menuLanguage li:nth-child(5) ul li:hover a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
ul#menuLanguage li:nth-child(6) ul li:hover a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
ul#menuLanguage li:nth-child(7) ul li:hover a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
*/
#menuToggleLanguage #menuLanguage input { display: none; }

#menuToggleOverlay { display: none; }
#menuToggleOverlay .menu_overlay { display: none; }

@media handheld, screen and (max-width: 1024px) {
	#menuToggle { display: block; position: absolute; background: transparent ;border-top:0px; top: 0px; left: 0px; right: inherit; z-index: 5000; -webkit-user-select: none; user-select: none; width: auto; }
    #menuToggle input { display: block; width: 60px; height: 65px; position: absolute; top: 0px; left: 0px; margin: 0px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; }
    #menuToggle .toggle_btn { display: block; width: 60px; height: 65px; text-align: center; }
    #menuToggle .toggle_btn span { color: #4b8349; font-size: 25px; width: 60px; line-height: 65px; }
    /*#menuToggle .toggle_btn span { display: block; width: 25px; height: 3px; margin-bottom: 6px; position: relative; background: #4b8349; z-index: 1; transform-origin: 6px 6px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -o-transform-origin: 6px 6px; -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -ms-transform-origin: 6px 6px; -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -moz-transform-origin: 6px 6px; -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; -webkit-transform-origin: 6px 6px; -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
    #menuToggle .toggle_btn span:first-child { transform-origin: 0% 0%; -o-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; }
    #menuToggle .toggle_btn span:nth-last-child(2) { transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; }*/
    /*#menuToggle input:checked~.toggle_btn span { opacity: 1; transform: rotate(45deg) translate(-13px, -8px); -o-transform: rotate(45deg) translate(-13px, -8px); -ms-transform: rotate(45deg) translate(-13px, -8px); -moz-transform: rotate(45deg) translate(-13px, -8px); -webkit-transform: rotate(45deg) translate(-13px, -8px); background: #4b8349; }
    #menuToggle input:checked~.toggle_btn span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); -o-transform: rotate(0deg) scale(0.2, 0.2); -ms-transform: rotate(0deg) scale(0.2, 0.2); -moz-transform: rotate(0deg) scale(0.2, 0.2); -webkit-transform: rotate(0deg) scale(0.2, 0.2); }
    #menuToggle input:checked~.toggle_btn span:nth-last-child(2) { transform: rotate(-45deg) translate(-4px, 8px); -o-transform: rotate(-45deg) translate(-4px, 8px); -ms-transform: rotate(-45deg) translate(-4px, 8px); -moz-transform: rotate(-45deg) translate(-4px, 8px); -webkit-transform: rotate(-45deg) translate(-4px, 8px); }*/
    #menu { position: absolute; left: 0px; top: 65px; margin: 0px; width: 250px; padding: 25px 25px 25px 0px; list-style-type: none; -webkit-font-smoothing: antialiased; display: block; transform-origin: 0% 0%; transform: translate(-100%, 0px); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -o-transform-origin: 0% 0%; -o-transform: translate(-100%, 0px); -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -ms-transform-origin: 0% 0%; -ms-transform: translate(-100%, 0px); -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -moz-transform-origin: 0% 0%; -moz-transform: translate(-100%, 0px); -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -webkit-transform-origin: 0% 0%; -webkit-transform: translate(-100%, 0px); -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); }
    /*#menu:before { position: absolute; top: -10px; left: 16px; content: ""; display: block; width: 0px; height: 0px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #4b8349; }*/
    #menu li { float: none; padding: 0px 0px 25px 20px; margin-bottom: 15px; font-size: 16px; line-height: 22px; width: auto; height: 20px; background-repeat: no-repeat; background-position: left center; cursor: pointer; text-align: left; white-space: nowrap; }
    #menu li:last-child { margin-bottom: 0px; }
    #menuToggle input:checked~ul { transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
    #menu li { border-top: 0px solid transparent; border-bottom: 0px solid transparent; }
    #menu li:hover a, #menu li.active a { border-bottom: 0px; border-left: 5px solid #4b8349!important; }
    /*#menu li:nth-child(1):hover a, #menu li:nth-child(1).active a { border-top: 0px; border-left: 5px solid #ac2e45; }
    #menu li:nth-child(2):hover a, #menu li:nth-child(2).active a { border-top: 0px; border-left: 5px solid #4b8349; }
    #menu li:nth-child(3):hover a, #menu li:nth-child(3).active a { border-top: 0px; border-left: 5px solid #1a9431; }
    #menu li:nth-child(4):hover a, #menu li:nth-child(4).active a { border-top: 0px; border-left: 5px solid #ff0000; }
    #menu li:nth-child(5):hover a, #menu li:nth-child(5).active a { border-top: 0px; border-left: 5px solid #0860a8; }
    #menu li:nth-child(6):hover a, #menu li:nth-child(6).active a { border-top: 0px; border-left: 5px solid #99cf16; }
    #menu li:nth-child(7):hover a, #menu li:nth-child(7).active a { border-top: 0px; border-left: 5px solid #9a3b26; }*/
    ul#menu li ul { position: relative; top: 0px; left: 0px; width: 100%; }
    #menu { padding: 25px 0px; }
    #menu li { height: auto; /*padding: 8px 12px 8px 16px;*/     padding: 0px; margin-bottom: 0px; }
    #menu li a { display: block; width: 100%; padding: 10px 12px 10px 16px; }
    #menu li a:link { line-height: inherit; border-top: 0px; border-left: 5px solid transparent; }
    ul#menu li ul li { padding: 0px; }
    ul#menu li ul li a { padding: 10px 12px 10px 32px; }
    ul#menu li:hover>ul,     ul#menu li ul:hover { visibility: hidden; opacity: 0; display: none; }
    #menuToggle #menu input { display: block; width: 100%; height: 42px; position: absolute; top: 0px; left: 0px; margin: 0px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }
    
    #menuToggle #menu input:hover ~ a { color: #4b8349!important; text-decoration: none; }
    #menuToggle #menu input:checked~ul { visibility: visible; opacity: 1; display: block; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; border-radius:0px; overflow: hidden; }
    ul#menu li:nth-child(1) input:checked~a { border-top: 0px!important; }
    /*
    ul#menu li:nth-child(1) input:checked~a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
    ul#menu li:nth-child(2) input:checked~a { border-top: 0px!important; border-left: 5px solid #4b8349!important; }
    ul#menu li:nth-child(3) input:checked~a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
    ul#menu li:nth-child(4) input:checked~a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
    ul#menu li:nth-child(5) input:checked~a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
    ul#menu li:nth-child(6) input:checked~a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
    ul#menu li:nth-child(7) input:checked~a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
    */
    #menuToggleRight { display: block; position: absolute; background: transparent; top: 0px; left: inherit; right: 0px; z-index: 5000; -webkit-user-select: none; user-select: none; width: auto; }
    #menuToggleRight input { display: block; width: 60px; height: 65px; position: absolute; top: 0px; left: 0px; margin: 0px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; }
    #menuToggleRight .toggle_btn { display: block; width: 60px; height: 65px; text-align: center; }
    #menuToggleRight .toggle_btn span { color: #4b8349; font-size: 25px; width: 60px; line-height: 65px; }
    #menuRightFrame { overflow: hidden; height: 0px; display: block; position: absolute; top: 65px; right: 0px; width: 180px; }
    #menuRight span { display: none; }
    #menuRight { display: block; position: absolute; left: inherit; right: 0px; top: 0px; margin: 0px; width: 180px; padding: 25px 25px 25px 0px; list-style-type: none; -webkit-font-smoothing: antialiased; opacity: 0; transform-origin: 0% 0%; transform: translate(0px, -172px); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -o-transform-origin: 0% 0%; -o-transform: translate(0px, -172px); -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -ms-transform-origin: 0% 0%; -ms-transform: translate(0px, -172px); -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -moz-transform-origin: 0% 0%; -moz-transform: translate(0px, -172px); -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -webkit-transform-origin: 0% 0%; -webkit-transform: translate(0px, -172px); -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); transition: all 0.55s ease; -o-transition: all 0.55s ease; -ms-transition: all 0.55s ease; -moz-transition: all 0.55s ease; -webkit-transition: all 0.55s ease; }
    /*#menuRight:before { position: absolute; top: -12px; left: 18px; content: ""; display: block; width: 0px; height: 0px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 14px solid #4b8349; }*/
    #menuRight li { float: none; padding: 0px 0px 25px 20px; margin-bottom: 15px; font-size: 16px; line-height: 22px; width: auto; height: 20px; background-repeat: no-repeat; background-position: left center; cursor: pointer; text-align: left; white-space: nowrap; }
    #menuRight li:last-child { margin-bottom: 0px; }
    #menuToggleRight input:checked~#menuRightFrame { /*height: 172px;*/ height:100dvh; }
    #menuToggleRight input:checked~#menuRightFrame ul { opacity: 1; transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
    #menuRight li { border-top: 0px solid transparent; border-bottom: 0px solid transparent; }
    #menuRight li:nth-child(1):hover a, #menuRight li:nth-child(1).active a { border-top: 0px; border-left: 5px solid #ac2e45; }
    #menuRight li:nth-child(2):hover a, #menuRight li:nth-child(2).active a { border-top: 0px; border-left: 5px solid #4b8349; }
    #menuRight li:nth-child(3):hover a, #menuRight li:nth-child(3).active a { border-top: 0px; border-left: 5px solid #1a9431; }
    #menuRight li:nth-child(4):hover a, #menuRight li:nth-child(4).active a { border-top: 0px; border-left: 5px solid #ff0000; }
    #menuRight li:nth-child(5):hover a, #menuRight li:nth-child(5).active a { border-top: 0px; border-left: 5px solid #0860a8; }
    #menuRight li:nth-child(6):hover a, #menuRight li:nth-child(6).active a { border-top: 0px; border-left: 5px solid #99cf16; }
    #menuRight li:nth-child(7):hover a, #menuRight li:nth-child(7).active a { border-top: 0px; border-left: 5px solid #9a3b26; }
    ul#menuRight li ul { position: relative; top: 0px; left: 0px; width: 100%; }
    #menuRight { padding: 0px 0px; }
    #menuRight li { height: auto; /*padding: 8px 12px 8px 16px;*/     padding: 0px; margin-bottom: 0px; }
    #menuRight li a { display: block; width: 100%; padding: 10px 12px 10px 16px; }
    #menuRight li a:link { line-height: inherit; border-top: 0px; border-left: 5px solid transparent; }
    ul#menuRight li ul li { padding: 0px; }
    ul#menuRight li ul li a { padding: 10px 12px 10px 16px; }
    ul#menuRight li:hover>ul,     ul#menuRight li ul:hover { visibility: hidden; opacity: 0; display: none; }
    #menuToggleRight #menuRight input { display: none; width: 100%; height: 42px; position: absolute; top: 0px; left: 0px; margin: 0px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }
    #menuToggleRight #menuRight input:checked~ul { visibility: visible; opacity: 1; display: block; border-radius:0px;}
    ul#menuRight li:nth-child(1) input:checked~a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
    ul#menuRight li:nth-child(2) input:checked~a { border-top: 0px!important; border-left: 5px solid #4b8349!important; }
    ul#menuRight li:nth-child(3) input:checked~a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
    ul#menuRight li:nth-child(4) input:checked~a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
    ul#menuRight li:nth-child(5) input:checked~a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
    ul#menuRight li:nth-child(6) input:checked~a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
    ul#menuRight li:nth-child(7) input:checked~a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
    #menuToggleLanguage { display: block; position: absolute; background: transparent; top: 0px; left: inherit; right: 120px; z-index: 5000; -webkit-user-select: none; user-select: none; width: auto; }
    #menuToggleLanguage input { display: block; width: 60px; height: 65px; position: absolute; top: 0px; left: 0px; margin: 0px; cursor: pointer; opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        -webkit-touch-callout: none; }
    #menuToggleLanguage .toggle_btn { display: block; width: 60px; height: 65px; text-align: center; }
    #menuToggleLanguage .toggle_btn span { color: #4b8349; font-size: 16px; width: 60px; line-height: 65px; }
    #menuLanguageFrame { overflow: hidden; height: 0px; display: block; position: absolute; top: 65px; right: 0px; width: 89px; }
    #menuLanguage span { display: none; }
    #menuLanguage { position: absolute; left: inherit; right: 0px; top: 0px; margin: 0px; width: auto; padding: 25px 25px 25px 0px; list-style-type: none; -webkit-font-smoothing: antialiased; display: block; opacity: 0; transform-origin: 0% 0%; transform: translate(0px, -86px); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -o-transform-origin: 0% 0%; -o-transform: translate(0px, -86px); -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -ms-transform-origin: 0% 0%; -ms-transform: translate(0px, -86px); -ms-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -moz-transform-origin: 0% 0%; -moz-transform: translate(0px, -86px); -moz-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); -webkit-transform-origin: 0% 0%; -webkit-transform: translate(0px, -86px); -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); transition: all 0.55s ease; -o-transition: all 0.55s ease; -ms-transition: all 0.55s ease; -moz-transition: all 0.55s ease; -webkit-transition: all 0.55s ease; }
    #menuLanguage li { float: none; padding: 0px 0px 25px 20px; margin-bottom: 15px; font-size: 16px; line-height: 22px; width: auto; height: 20px; background-repeat: no-repeat; background-position: left center; cursor: pointer; text-align: left; white-space: nowrap; }
    #menuLanguage li:last-child { margin-bottom: 0px; }
    #menuToggleLanguage input:checked~#menuLanguageFrame { height: 86px; }
    #menuToggleLanguage input:checked~#menuLanguageFrame ul { opacity: 1; transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
    #menuLanguage li { border-top: 0px solid transparent; border-bottom: 0px solid transparent; }
    #menuLanguage li:nth-child(1):hover a, #menuLanguage li:nth-child(1).active a { border-top: 0px; border-left: 5px solid #ac2e45; }
    #menuLanguage li:nth-child(2):hover a, #menuLanguage li:nth-child(2).active a { border-top: 0px; border-left: 5px solid #4b8349; }
    #menuLanguage li:nth-child(3):hover a, #menuLanguage li:nth-child(3).active a { border-top: 0px; border-left: 5px solid #1a9431; }
    #menuLanguage li:nth-child(4):hover a, #menuLanguage li:nth-child(4).active a { border-top: 0px; border-left: 5px solid #ff0000; }
    #menuLanguage li:nth-child(5):hover a, #menuLanguage li:nth-child(5).active a { border-top: 0px; border-left: 5px solid #0860a8; }
    #menuLanguage li:nth-child(6):hover a, #menuLanguage li:nth-child(6).active a { border-top: 0px; border-left: 5px solid #99cf16; }
    #menuLanguage li:nth-child(7):hover a, #menuLanguage li:nth-child(7).active a { border-top: 0px; border-left: 5px solid #9a3b26; }
    ul#menuLanguage li ul { position: relative; top: 0px; left: 0px; width: 100%; border-radius: 0px;}
    #menuLanguage { padding: 0px 0px; }
    #menuLanguage li { height: auto; /*padding: 8px 12px 8px 16px;*/     padding: 0px; margin-bottom: 0px; }
    #menuLanguage li a { display: block; width: 100%; padding: 10px 12px 10px 16px; }
    #menuLanguage li a:link { line-height: inherit; border-top: 0px; border-left: 5px solid transparent; }
    ul#menuLanguage li ul li { padding: 0px; }
    ul#menuLanguage li ul li a { padding: 10px 12px 10px 16px; }
    ul#menuLanguage li:hover>ul,     ul#menuLanguage li ul:hover { visibility: hidden; opacity: 0; display: none; }
    #menuToggleLanguage #menuLanguage input { display: none; width: 100%; height: 42px; position: absolute; top: 0px; left: 0px; margin: 0px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }
    #menuToggleLanguage #menuLanguage input:checked~ul { visibility: visible; opacity: 1; display: block; }
    ul#menuLanguage li:nth-child(1) input:checked~a { border-top: 0px!important; border-left: 5px solid #ac2e45!important; }
    ul#menuLanguage li:nth-child(2) input:checked~a { border-top: 0px!important; border-left: 5px solid #4b8349!important; }
    ul#menuLanguage li:nth-child(3) input:checked~a { border-top: 0px!important; border-left: 5px solid #1a9431!important; }
    ul#menuLanguage li:nth-child(4) input:checked~a { border-top: 0px!important; border-left: 5px solid #ff0000!important; }
    ul#menuLanguage li:nth-child(5) input:checked~a { border-top: 0px!important; border-left: 5px solid #0860a8!important; }
    ul#menuLanguage li:nth-child(6) input:checked~a { border-top: 0px!important; border-left: 5px solid #99cf16!important; }
    ul#menuLanguage li:nth-child(7) input:checked~a { border-top: 0px!important; border-left: 5px solid #9a3b26!important; }
    /*#menuToggleOverlay input { width: 100%; height: calc(100% - 65px); position: fixed; top: 65px; left: 0px; z-index: 4001; opacity:0; }*/
    #menuToggleOverlay { display: block; }
    #menuToggleOverlay input { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 4001; opacity: 0; }
    #menuToggleOverlay input:checked { width: 0px; height: 0px; }
    #menuToggleOverlay input:checked~div.menu_overlay { display: none; }
    #menuToggleOverlay div.menu_overlay { display: block; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 4000; }
}


/* popup */

.popup_overlay { display: none; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 6000; }
.popup_frame { background-color: #ffffff; position: absolute; left: 50%; margin-left: -400px; width: 800px; min-height: 400px; z-index: -10; /*padding: 30px;*/ top: 100%; margin-top: 30px; opacity: 0; transition: all 0.55s ease; -o-transition: all 0.55s ease; -ms-transition: all 0.55s ease; -moz-transition: all 0.55s ease; -webkit-transition: all 0.55s ease; }
.popup_frame.show { top: 0%; opacity: 1; z-index: 7000; }
.popup_close { cursor: pointer; position: absolute; top: 22px; right: 22px; width: 20px; height: 20px; }
.popup_close:before { content: ""; display: block; width: 25px; height: 3px; background: #4b8349; transform: rotate(45deg) translate(4px, 8px); -o-transform: rotate(45deg) translate(4px, 8px); -ms-transform: rotate(45deg) translate(4px, 8px); -moz-transform: rotate(45deg) translate(4px, 8px); -webkit-transform: rotate(45deg) translate(4px, 8px); }
.popup_close:after { content: ""; display: block; width: 25px; height: 3px; background: #4b8349; transform: rotate(-45deg) translate(-6px, 2px); -o-transform: rotate(-45deg) translate(-6px, 2px); -ms-transform: rotate(-45deg) translate(-6px, 2px); -moz-transform: rotate(-45deg) translate(-6px, 2px); -webkit-transform: rotate(-45deg) translate(-6px, 2px); }
.popup_title { font-size: 28px; line-height: 32px; color: #4b8349; width: 100%; border-bottom: 1px solid #4b8349; padding: 18px 50px 12px 30px; margin: 0px; }

.popup_frame.popup_register { min-height: 300px; top: 100%; margin-top: 30px; position: fixed; }
.popup_frame.popup_register.show { top: 50%; margin-top: -172px; }

.popup_frame.scroll { height: 90vh; top: 100%; margin-top: 30px; position: fixed; padding:0px; }
.popup_frame.scroll.show { top: 5vh; margin-top: 0px; }
.popup_frame.scroll .popup_content_frame { height: calc(90vh - 63px - 71px); overflow-y: scroll; overflow-x: hidden; }

@media handheld, screen and (max-width: 960px) {
    .popup_frame { width: 90%; margin-left: -45%; /*padding: 30px 3%;*/ }
}
@media handheld, screen and (max-width: 640px) {
    .popup_frame { width: 90%; margin-left: -45%; /*padding: 20px 5%;*/ }
    .popup_close { top: 18px; right: 18px; }
    .popup_title { font-size: 22px; line-height: 28px; 	padding: 16px 50px 12px 20px; }
	
	.popup_frame.scroll .popup_content_frame { height: calc(90vh - 57px - 71px); overflow-y: scroll; }
}



/* banner */

.banner { /*max-height:610px;*/ width: 100%; /*max-width:1160px;*/ margin: auto; margin-top: 109px; }
.banner img { height: 100%; width: 100%; }
.banner_inner { position: relative; max-height: 200px; width: 100%; min-width: 320px; /*height:22vw;*/ height: 200px; overflow: hidden; display: flex !important; justify-content: center; align-items: center; background-image: url(../images/banner_inner.png); background-repeat: repeat-x; background-color: #bccfde; /*background-position: right 65%;*/ background-position: top 80% center;background-size: cover; /*top: 1px;*/ margin-top: 109px; }
.banner_inner .inner_frame { position: absolute; height: 100%; }
.banner_inner img { height: 100%; width: 100%; }


@media handheld, screen and (max-width: 1024px) {
	.banner { margin-top: 65px; }
    .banner_inner { margin-top: 65px; }
}


/* content */

.step_counter { padding: 40px 50px 10px 50px; }
.counter_bg { background-color: #4b8349; display: table; padding: 30px 30px 10px 30px; margin-left: auto; margin-right: auto; }
.counter_row { font-size: 36px; line-height: 48px; padding-bottom: 10px; padding-bottom: 30px; display: block; text-align: center; }
.counter_row .brown, .counter_row .green { font-weight: 900; font-size: 50px; }
.counter_row span { font-size: 36px; line-height: 48px; font-weight: bold; margin-left: 10px; margin-right: 10px; }
.counter_row span.nowrap { white-space: nowrap; }
.counter_row img { height: 48px; weight: auto; }
.video_row { padding: 20px 0px; }
.video_row iframe { width: 64vw; height: 48vw; max-width: 960px; max-height: 720px; }
.inner_content { padding: 30px 30px; display: block; }

p { margin-bottom: 10px; }
.intro, .intro .green, .intro .brown, .intro a { font-size: 16px; }
.intro .green, .intro .brown, .intro a { font-weight: 900; }
.step_section { background-color: #ffffff; padding: 30px 0px 0px 0px; }
.step_section h1 { text-align: center; font-size: 36px; line-height: 56px; font-weight: 600; margin-bottom: 20px; }
.step_row { width: auto; /*margin-bottom: 20px;*/ margin-left: 30px; margin-right: 30px; display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.step { float: left; padding: 0px 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; box-sizing: border-box; margin-bottom: 20px; }
.step_row1 { width: auto; margin-bottom: 2px; margin-left: 30px; margin-right: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.step_pic { text-align: center; margin-bottom: 25px; }
.step_pic img { width: 75%; max-width: 200px; height: auto; }
.step_title { text-align: center; font-size: 24px; margin-bottom: 15px; }
.step_text { font-size: 16px; }
.btn_row { text-align: center; padding: 20px 5px 20px 5px; display: block; align-items: center; justify-content: center; clear: both; }
.btn_row_2 { text-align: center; padding: 20px 5px 20px 5px; display: table; align-items: center; justify-content: center; clear: both; margin-left: auto; margin-right: auto; }
.btn_row_2 .btn { float: none; width: inherit; }
.btn_line { padding: 0px 0px 15px 0px; display: flex; }

h3 { font-size: 24px; }

hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid #eaeaea; box-sizing: content-box; height: 0; overflow: visible; }


/* button */

.btn1 { text-align: center; background-color: #4b8349; color: #ffffff; border-radius: 18px; font-size: 16px; line-height: 20px; padding: 8px 20px; cursor: pointer; }

a.btn1 { text-decoration: none; }
a.btn1:link { color: #ffffff; text-decoration: none; }
a.btn1:hover { color: #ffffff; text-decoration: none; }
a.btn1:visited { color: #ffffff; text-decoration: none; }
.btn { /*background-color: #4b8349;*/ color: #ffffff; border-radius: 0px; font-size: 16px; line-height: 20px; padding: 8px 20px; cursor: pointer; }
.btn:hover { color: #ffffff; text-decoration: none; }
a.btn { text-decoration: none; }
a.btn:link { color: #ffffff; text-decoration: none; }
a.btn:hover { color: #ffffff; text-decoration: none; }
a.btn:visited { color: #ffffff; text-decoration: none; }

#menu li a { text-decoration: none; }
#menu li a:link { color: #7e8085; text-decoration: none; }
#menu li a:hover { color: #4b8349!important; text-decoration: none; }
#menu li a:visited { color: #7e8085; text-decoration: none; }
.btn_row .btn { float: none; display: block; margin-bottom: 20px; }
.coming_soon { text-align: center; height: 200px; font-size: 60px; line-height: 70px; color: #4b8349; display: flex; align-items: center; justify-content: center; }


/* table */

.align_center { display: flex; align-items: center; justify-content: center; }
.text_center { text-align: center; }

table { border-collapse: collapse; border-spacing: 0; border: 1px solid #eaeaea; }

table th, table td { border: 1px solid #eaeaea; padding: 15px 10px; }


/*.intro_table tr > td:first-child { border-left:5px solid #4b8349; }*/

.intro_table tr>td:first-child { font-weight: 600; }
.intro_table tr>td[colspan="2"] { font-weight: normal; }

ul { margin: 0px; padding: 0px 0px 10px 25px; }

li { margin: 0px; padding: 0px 0px 5px 0px; }


/* procedure */

.team { float: left; width: 50%; margin-top: 15px; margin-bottom: 20px; }
.individual { float: left; width: 50%; margin-top: 15px; margin-bottom: 20px; }
.subtitle { font-size: 36px; line-height: 40px; color: #4b8349; margin-top: 10px; }
.procedure_content { float: none; width: 100%; }
.procedure_group { display: block; margin: 40px 0px 20px 0px; }
.procedure_step { display: flex; padding: 0px 0px 35px 0px; border-left: 2px solid #4b8349; margin-left: 20px; }
.procedure_step.rules { display: flex; padding: 0px 0px 35px 0px; border-left: 0px; margin-left: 0px; }
.procedure_step:last-child { border-left: 0px; padding-bottom: 0px; }
.procedure_content .procedure_num { position: relative; float: left; left: -21px; width: 41px; height: 41px; border-radius: 100%; background-color: #4b8349; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; }
.procedure_content .procedure_num { font-family: "Montserrat"; width: 41px; height: 41px; border-radius: 100%; background-color: #4b8349; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; }
.procedure_content .procedure_txt { float: left; width: calc(100vw - (100vw - 100%) - 70px); }
.procedure_step.rules .procedure_content .procedure_txt { float: left; width: 100%; }
.procedure_content .procedure_txt .procedure_title { font-size: 20px; line-height: 26px; font-weight: bold; padding-top: 6px; padding-bottom: 6px; margin-bottom: 10px; }
.procedure_image { float: right; filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5)); }
.procedure_image img { width: 354px; height: 226px; }
.procedure_image img.desktop { display: block; }
.procedure_image img.mobile { display: none; }
.route .procedure_step { border: 0px; }


/* method */

.method_row { margin-top: 50px; margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.method_row .subtitle { font-family: "Montserrat"; width: 41px; height: 41px; border-radius: 100%; background-color: #4b8349; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; font-weight: bold; text-align: center; position: absolute; left: 50%; margin-left: -21px; margin-top: 0px; top: 0px; }
.method { float: left; padding: 20px; float: left; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; margin-bottom: 30px; position: relative; }
.method .items { border-top: 3px solid #4b8349; background-color: #ffffff; padding: 40px 20px 20px 20px; height: calc(100vh - (100vh - 100%) - 60px); }
.method .item { margin-bottom: 15px; }
.method .item a { margin-bottom: 15px; }


/* use */

.agency_list { display: table; float: none; width: 100%; margin-right: 0%; margin-bottom: 50px; }
.agency_list h2 { margin-top: 30px; margin-bottom: 30px; }
.agency_table { width: 100%; }
.needy { display: table; float: left; width: 100%; margin-bottom: 50px; }
.needy h2 { margin-top: 30px; margin-bottom: 30px; }
.needy_table { width: 100%; margin-bottom: 20px; }


/* story */

.story_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.story { padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; }
.story .img { position: relative; background-color: #ffffff; height: 100%; }
.story img { width: 100%; height: auto; }
.story .layer { display: table; background-color: #ffffff; text-align: center; padding: 20px 25px 45px 25px; width: 100%; box-sizing: border-box; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.story .layer .content { display: table-cell; vertical-align: middle; }
.story .layer h3 { font-size: 1.94vw; line-height: 2.777vw; margin-top: 0px; margin-bottom: 10px; }
.story .layer .btn { float: none; }

@media (min-width: 1440px) {
	.story .layer h3 { font-size: 28px; line-height: 40px; margin-top: 0px; }
}

@media handheld, screen and (max-width: 768px) {
	.story { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }
    .story .layer h3 { font-size: 24px; line-height: 36px; margin-top: 0px; }
}


/* carbon example */

.carbon_example.bg { background-color: #eeeeee; margin: 0px; }
.carbon_example .story .img { background: none; }


/* carbon tasks */

.green_tasks { margin-top: 0px; margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.green_tasks .subtitle { font-family: "Montserrat"; padding: 0px 20px; height: 41px; border-radius: 50px; background-color: #639259; color: #ffffff; font-weight: bold; font-size: 22px; line-height: 40px; text-align: center; position: relative; width: fit-content; margin-left: auto; margin-right: auto; margin-top: 0px; top: 20px; }
.green_tasks .method { float: left; padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; margin-bottom: 0px; position: relative; margin-top: -30px; }
.green_tasks .method .items { border-top: 3px solid #639259; background-color: #4b8349; padding: 40px 20px 20px 20px; height: calc(100vh - (100vh - 100%) - 110px); }
.green_tasks .method .item { margin-bottom: 15px; }
.green_tasks .method .item a { margin-bottom: 15px; }

@media handheld, screen and (max-width: 768px) {
	.green_tasks .method { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}

@media handheld, screen and (max-width: 480px) {
	.green_tasks .method { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}


/* tips */

.carbon_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.tips { padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; box-sizing: border-box; }
.tips .tips_title { font-size: 22px; font-weight: bold; background-color: #639259; color: #ffffff; text-align: center; padding: 10px; }
.tips .img { position: relative; background-color: #ffffff; height: calc(100% - 48px); }
.tips img { width: 100%; height: auto; }
.tips .layer { display: table; background-color: #ffffff; padding: 0px 20px 20px 20px; width: 100%; box-sizing: border-box; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.tips .layer .content { display: table-cell; vertical-align: middle; }

@media (min-width: 1440px) {
	.tips .layer h3 { font-size: 28px; line-height: 40px; margin-top: 0px; }
}

@media handheld, screen and (max-width: 960px) {
	.tips { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 100%; margin-bottom: 0px; }
}

@media handheld, screen and (max-width: 480px) {
	.tips { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }
}


/* category */

.category_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.category { padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 50%; box-sizing: border-box; }
.category .cat_title { font-size: 22px; font-weight: bold; background-color: #4b8349; color: #ffffff; text-align: center; padding: 10px; }
.category .block { position: relative; background-color: #ffffff; height: calc(100% - 48px); }
.category img { width: 100%; height: auto; }
.category .layer { display: table; background-color: #ffffff; padding: 20px 20px 20px 20px; width: 100%; box-sizing: border-box; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.category .layer .content { display: table-cell; vertical-align: middle; }
.cat_title { font-size: 22px; font-weight: bold; background-color: #4b8349; color: #ffffff; text-align: center; padding: 10px; }

@media (min-width: 1440px) {
	.category .layer h3 { font-size: 28px; line-height: 40px; margin-top: 0px; }
}

@media handheld, screen and (max-width: 960px) {
	.category { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 100%; margin-bottom: 0px; }
}

@media handheld, screen and (max-width: 768px) {
	.category { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }
}


/* download */

.download_row { margin-left: -20px; margin-right: -20px; width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.download_row .subtitle {}
.download { float: left; padding: 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; box-sizing: border-box; margin-bottom: 20px; }
.download .items { margin-top: 20px; background-color: #ffffff; padding: 20px; height: calc(100vh - (100vh - 100%) - 110px); }
.download .item { margin-bottom: 15px; }
.download .item a { margin-bottom: 15px; }


/* footer */

.footer { background-color: transparent; color: #ffffff; }
.footer .organizer_row { display: block; clear: both; width: 100%; margin-bottom: 44px; }
.footer .organizer_row h3 { margin-bottom: 12px; }
.footer .organizer_row .mh { font-size: 12px; }
.footer .organizer_row .organizer { float: left; width: 38%; }
.footer .organizer_row .organizer .mtr { float: left; width: 38%; margin-right: 6%; }
.footer .organizer_row .organizer .gsgb { float: right; width: 42.5%; margin-right: 0%; }
.footer .organizer_row .organizer img { height: auto; width: 100%; max-width: 160px; }
.footer .organizer_row .supporter { float: right; width: 21%; }
.footer .organizer_row .supporter .boc { float: left; width: 90%; margin-right: 0%; }
.footer .organizer_row .supporter img { height: auto; width: 100%; }
.footer .organizer_row .chairman { float: left; width: 35%; font-size: 18px; }
.footer .organizer_row .co_chairman { float: left; width: 65%; font-size: 18px; }
.footer .organizer_row .co_chairman p { margin-bottom: 5px; }
.footer .organizer_row h4 { margin-top: 0; margin-bottom: 10px; }
.footer_remarks { text-align: center; margin-top: 10px; display: inline-block; font-size: 13px; line-height: 22px; }
.footer .contact_row { display: block; clear: both; width: 100%; padding-top: 10px; }
.footer .contact_row .address { float: left; }
.footer .contact_row .phone { float: left; }
.footer .contact_row .email { float: left; }
.footer .contact_row .social { float: right; }
.footer .social div { float: left; margin-left: 10px; width: 36px; height: 36px; cursor: pointer; }
.footer .social div img { width: 100%; height: 100%; }
.footer .social { float: right !important; }
.scroll-top { position: fixed; bottom: 5%; right: 30px; display: none; z-index:6000; border: 2px solid #ffffff!important; border-radius: 50% !important; width: 53px; height: 53px; }
.scroll-top .icon-chevron-up { position:relative; top:-3px; }
.scroll-top:hover { border: 2px solid #ffffff!important; }

@media handheld, screen and (max-width: 768px) {
	.footer .social { float: inherit !important; margin: auto; display: table; }
}

@media handheld, screen and (max-width: 1280px) {
	.footer .contact_row .address { width: 50%; }
    .footer .contact_row .phone { width: 25%; }
    .footer .contact_row .email { width: 25%; }
    .footer .contact_row .social { padding-top: 20px; float: none; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }
}

@media handheld, screen and (max-width: 1024px) {
	.content_frame { overflow: hidden; }
    .header { height: 65px; background-color: #ffffff; z-index: 6000; }
    .inner_content { padding: 25px 40px; }
    .step_section { padding: 25px 0px 0px 0px; }
}

@media handheld, screen and (max-width: 960px) {
	.footer .organizer_row { display: block; clear: both; width: 100%; margin-bottom: 30px; }
    .footer .organizer_row h3 { display: block; width: 100%; text-align: center; margin-bottom: 20px; }
    .footer .organizer_row .organizer { float: none; display: table; width: 100%; max-width: 420px; margin: 0px auto 10px auto; justify-content: center !important; }
    .footer .organizer_row .organizer .mtr { float: left; width: 44%; margin-right: 6.8%; text-align: center; }
    .footer .organizer_row .organizer .gsgb { float: left; width: 49.2%; margin-right: 0%; text-align: center; }
    .footer .organizer_row .supporter { float: none; display: table; width: 100%; max-width: 580px; margin: 0px auto 10px auto; }
    .footer .organizer_row .t_team { float: none; display: table; width: 100%; max-width: 580px; margin: 0px auto 10px auto; }
    .footer .organizer_row .supporter .boc { float: none; width: 44%; max-width: 255px; margin: 0px auto; }
    .footer .organizer_row .chairman { float: none; display: table; width: 100%; font-size: 18px; text-align: center; margin: 0px auto 10px auto; }
    .footer .organizer_row .chairman br { display: none; }
    .footer .organizer_row .co_chairman { float: none; display: table; width: 100%; font-size: 18px; text-align: center; margin: 0px auto 10px auto; }
    .footer .organizer_row .co_chairman p { margin-bottom: 5px; }
    .agency_list { float: none; width: 100%; margin-bottom: 30px; }
    .needy { float: none; width: 100%; margin-bottom: 30px; }
}

@media handheld, screen and (max-width: 960px) {
	.counter_eq { display: block; float: none; }
}

@media handheld, screen and (max-width: 768px) {
    .step_counter { padding: 30px 0px 0px 0px; }
    .counter_row { font-size: 30px; line-height: 44px; }
    .counter_row span { font-size: 30px; line-height: 44px; }
    .counter_row img { height: 44px; }
    .video_row iframe { width: 87.5vw; height: 65.625vw; max-width: 960px; max-height: 720px; }
    .inner_content { padding: 25px 30px; }
    .team { float: none; width: 100%; }
    .individual { float: none; width: 100%; }
    /* method */
    .method_row { margin-top: 50px; }
    .method { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    /* download */
    .download { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 0px; }
}

@media handheld, screen and (max-width: 680px) {}

@media handheld, screen and (max-width: 640px) {
	.coming_soon { font-size: 40px; line-height: 50px; }
    /* intro */
    .intro_table { border-top: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-bottom: 0px; }
    .intro_table tr { position: relative; display: flex; width: 100%; padding: 0px; vertical-align: top; flex-wrap: wrap; }
    .intro_table tr>td { border-left: 0px; border-right: 0px solid #eaeaea; }
    .intro_table tr>td:nth-child(2) { width: 43.5%; padding: 15px 3%; border-right: 1px solid #eaeaea; }
    .intro_table tr>td:nth-child(3) { width: 44%; padding: 15px 3%; border-right: 0px; }
    .intro_table tr>td:first-child { display: inherit !important; width: 96%; padding: 15px 2%; border: 0px; border-left: 5px solid #4b8349; }
    .intro_table tr>td[colspan="2"] { display: block !important; width: 95%; padding: 15px 2% 15px 3%; border-right: 0px; border-left: 0px; border-bottom: 1px solid #eaeaea; }
    /* method */
    .method_row { margin-top: 50px; }
    .method { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    
    .app_group { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; }
    .app_name { margin-bottom: 20px; }
    .app_group:nth-child(3n + 1) { clear: both; }
}

@media handheld, screen and (max-width: 1024px) {
	.step { float: left; padding: 0px 20px; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; box-sizing: border-box; }
}

@media handheld, screen and (max-width: 576px) {
	.popup_frame.popup_register.show { margin-top: -244px; }
}

@media handheld, screen and (max-width: 480px) {
	/*.header { height: 60px; }
    .header .logo { width: auto; height: 60px; background-size: auto 30px; }
    .header .logo { background-size: auto 30px; background-position: 16px 14px; width: 140px; height: 60px; }
    .header .logo_gsgb { background-size: auto 40px; background-position: 16px 10px; width: 120px; height: 60px; }
    #menuToggle { top: 20px; }
    #menu { top: 40px; }
    #menu:before { top: -10px; }*/
    .banner_inner { max-height: 150px; }
    .step_counter { padding: 25px 0px 0px 0px; }
    .counter_bg { padding: 15px 20px 10px 20px; }
    .counter_row { font-size: 20px; line-height: 32px; 	padding-bottom: 10px; }
    .counter_row .brown,     .counter_row .green { font-size: 38px; line-height: 44px; }
    .counter_row span { font-size: 26px; line-height: 40px; }
    .counter_row img { height: 40px; }
    .inner_content { padding: 20px 20px; }
    .step_section { padding: 20px 0px 0px 0px; }
    .step_section h1 { text-align: center; margin-top: 15px; margin-bottom: 10px; font-size: 36px; line-height: 42px; font-weight: 600; margin-bottom: 15px; }
    .step_row { margin-left: 15px; margin-right: 15px; padding-bottom: 30px; }
    .step { float: left; padding: 0px 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }
    .step_row1 { margin-bottom: 2px; margin-left: 15px; margin-right: 15px; }
    .step1 { padding: 0px 5px; }
    .step_title { font-size: 22px; margin-bottom: 15px; }
    .btn_row { padding: 15px 25px 0px 25px; }
    .donate_group { float: none; width: 100%; margin-right: 0%; }
}

@media handheld, screen and (max-width: 320px) {
	/*.header { height: 48px; }*/
    /*.header .logo { background-size: auto 26px; background-position: 14px 11px; width: 120px; height: 48px; }
    .header .logo_gsgb { background-size: auto 32px; background-position: 16px 8px; width: 100px; height: 48px; }
    #menu { top: 33px; }
    #menu:before { top: -10px; }
    #menuToggle { top: 15px; right: 15px; }*/
    .step_counter { padding: 20px 0px 0px 0px; }
    .counter_row { font-size: 20px; line-height: 36px; }
    .counter_row span { font-size: 20px; line-height: 36px; }
    .counter_row img { height: 36px; }
    .inner_content { padding: 15px 20px; }
    .step_section { padding: 15px 0px 0px 0px; }
    .step_section h1 { text-align: center; margin-top: 15px; margin-bottom: 10px; font-size: 36px; line-height: 42px; font-weight: 600; margin-bottom: 15px; }
    .step_title { font-size: 22px; margin-bottom: 15px; }
}

@media (min-width: 1440px) {
	.banner img { width: 100% !important; overflow: hidden; height: auto; /*flex-shrink: 0;*/     min-width: 100%; min-height: 100%; /*object-fit: cover;*/ }
}

@media (min-width: 1920px) {
	
	.banner_inner { background-size: cover; background-position: top 80% center; }
}

@media (max-width: 1440px) {
	/*.banner_inner { background-position: right bottom; }*/
    .banner_inner { background-size: cover; background-position: top 80% center; }
}

@media (max-width: 768px) {
	/*.banner_inner { background-position:16vw bottom; background-size: auto 30vw; }*/
    .banner_inner { background-size: cover; background-position: top 80% left 30%; }
}

@media (max-width: 480px) {
    .banner_inner { background-size: cover; }
	/*.banner_inner { background-position: right -40px top; background-size: auto 120%; }
    .banner_inner .page_title { font-size: 24px; top: 15px; }*/
}

@media (max-width: 320px) {
    .banner_inner { background-size: cover; }
	/*.banner_inner { background-position: right -30px top; background-size: auto 120%; }
    .banner_inner .page_title { top: 12px; }*/
}


/* light gallery */

.lightgallery { width: 100%; display: block; }
.lightgallery a:hover .media_thumb { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
.lightgallery a { display: inherit; overflow: hidden; position: relative; z-index: 9; width: 100%; height: 100%; }
.lightgallery a:before { display: block; content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; z-index: 190; }
.lightgallery a:after { font: normal 24px/1 FontAwesome; color: #ffffff; content: "\f002"; width: 24px; height: 24px; line-height: 24px; position: absolute; margin-left: -12px; margin-top: -12px; left: 50%; top: 50%; opacity: 0; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; z-index: 200; }
.lightgallery a:hover:before { background-color: rgba(0, 0, 0, 0.4); }
.lightgallery a:hover:after { opacity: 1; }
.lightgallery.image_hide a:hover:before { display: none; }
.lightgallery.image_hide a:hover:after { display: none; }
.lg-backdrop { z-index: 12040 !important; }
.lg-outer { z-index: 12050 !important; }
.lg-icon { font-family: feather !important; }
.lg-toolbar .lg-close:after { content: "\e8f6"; }
.lg-toolbar .lg-download:after { content: "\e864"; }
.lg-autoplay-button:after { content: "\e8ae"; }
.lg-show-autoplay .lg-autoplay-button:after { content: "\e8cb"; }
.lg-fullscreen:after { content: "\e908"; }
.lg-fullscreen-on .lg-fullscreen:after { content: "\e88d"; }

#lg-zoom-in:after { content: "\e8f9"; }

#lg-zoom-out:after { content: "\e8fa"; }

#lg-actual-size:after { content: "\e855"; }
.lg-outer #lg-share:after { content: "\e8c0"; }
.lg-outer .lg-dropdown .lg-icon { font-family: FontAwesome !important; }
.lg-outer #lg-share-facebook .lg-icon:after { content: "\f082"; }
.lg-outer #lg-share-twitter .lg-icon:after { content: "\f081"; }
.lg-outer #lg-share-googleplus .lg-icon:after { content: "\f0d4"; }
.lg-outer #lg-share-pinterest .lg-icon:after { content: "\f0d3"; }
.lg-actions .lg-prev:after { content: "\e843"; }
.lg-actions .lg-next:before { content: "\e844"; }
.lg-outer .lg-thumb-item { border: 3px solid #FFF; border: 0; border-radius: 0px; opacity: 0.5; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; }
.lg-outer .lg-thumb-item:hover { /*border-color: #309bd4;*/ border: 0; opacity: 1; }
.lg-outer .lg-thumb-item.active { /*border-color: #76ce76;*/ border: 0; opacity: 1; }

ul#lightGallery { list-style: none; margin: 0px; padding: 0px; }

ul#lightGallery li { margin: 0px; padding: 0px; border: 2px solid #ffffff; cursor: pointer; width: 100%; height: 180px; z-index: 9; display: flex !important; overflow: hidden; position: relative; justify-content: center; align-items: center; }

ul#lightGallery li:before { display: block; content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; z-index: 190; }

ul#lightGallery li:after { font: normal 24px/1 FontAwesome; color: #ffffff; content: "\f002"; width: 24px; height: 24px; line-height: 24px; position: absolute; margin-left: -12px; margin-top: -12px; left: 50%; top: 50%; opacity: 0; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; z-index: 200; }

ul#lightGallery li:hover img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }

ul#lightGallery li img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); width: auto; height: auto; flex-shrink: 0; min-width: 100%; min-height: 100%; max-width: 200px; object-fit: cover; }

ul#lightGallery li:hover:before { background-color: rgba(0, 0, 0, 0.4); }

ul#lightGallery li:hover:after { opacity: 1; }

ul#lightGallery li a { width: 100%; height: 100%; }


/* tab */

.tab_panel .tab_content { display: none; }
.tab_group>input:first-child:checked~.tab_panel .tab_content:first-child, .tab_group>input:nth-child(3):checked~.tab_panel .tab_content:nth-child(2), .tab_group>input:nth-child(5):checked~.tab_panel .tab_content:nth-child(3), .tab_group>input:nth-child(7):checked~.tab_panel .tab_content:nth-child(4), .tab_group>input:nth-child(9):checked~.tab_panel .tab_content:nth-child(5), .tab_group>input:nth-child(11):checked~.tab_panel .tab_content:nth-child(6), .tab_group>input:nth-child(13):checked~.tab_panel .tab_content:nth-child(7), .tab_group>input:nth-child(15):checked~.tab_panel .tab_content:nth-child(8) { display: block; }
.tab_group>input[type="radio"] { position: absolute; left: -200vw; }
.tab_group>label { position: relative; display: inline-block; padding: 5px 20px 6px 20px; border: 1px solid transparent; border-bottom: 0; cursor: pointer; font-weight: 600; margin-bottom: 0px; border-top: 5px solid transparent; border-left: 0px; border-right: 0px; }
.tab_group>label:hover, .tab_group>input:focus+label { color: #4b8349; }
.tab_group>input:checked+label { border-top: 5px solid #4b8349; background: #ffffff; border-bottom: 1px solid #fff; margin-bottom: -1px; }


/* form field */

.form-control { font-size: inherit; }


/* custom checkbox */

.custom_checkbox { display: inline; }
.custom_checkbox label { display: inline-block; font-size: 1rem; font-weight: 400; line-height: 20px; position: relative; cursor: pointer; padding-left: 32px; margin-right: 10px; min-height: 24px; margin-bottom: 0px; margin-top: 10px; }
.custom_checkbox input[type="checkbox"] { position: absolute; left: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; padding: 0px 30px 0px 0px; border-radius: 0px; text-align: center; margin: 0px; position: absolute; left: 0px; }
.custom_checkbox input[type="checkbox"]:before { content: " "; display: block; border: 1px solid #cccccc; width: 24px; height: 24px; position: absolute; top: 0px; left: 0px; border-radius: 0px; cursor: pointer; }
.custom_checkbox input[type="checkbox"]:after { content: " "; display: block; width: 16px; height: 16px; position: absolute; top: 4px; left: 4px; display: inline-block; background-image: none; background-size: 100% auto; filter: invert(61%) sepia(12%) saturate(2237%) hue-rotate(77deg) brightness(92%) contrast(87%); cursor: pointer; }
.custom_checkbox input[type="checkbox"]:checked:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"); }
.custom_checkbox span { line-height: 1.5; position: relative; top: 2px; }


/* radio */

.radio { display: flex; }
.radio label { display: flex; font-size: 1rem; font-weight: 400; line-height: 50px; position: relative; cursor: pointer; padding-left: 32px; margin-right: 10px; }
.radio label input[type="radio"] { position: absolute; left: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; padding: 0px 30px 0px 0px; border-radius: 0px; text-align: center; margin: 0px; position: absolute; left: 0px; }
.radio label input[type="radio"]:before { content: " "; display: block; border: 1px solid #cccccc; width: 24px; height: 24px; position: absolute; top: 12px; left: 0px; border-radius: 100%; }
.radio label input[type="radio"]:after { content: " "; display: block; width: 16px; height: 16px; position: absolute; top: 16px; left: 4px; display: inline-block; background-image: none; background-size: 100% auto; filter: invert(61%) sepia(12%) saturate(2237%) hue-rotate(77deg) brightness(92%) contrast(87%); }
.radio label input[type="radio"]:checked:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"); }


/* button choice */

.button_choice { margin-right: -4px; margin-left: -4px; }
.button_choice .choice-group { padding-right: 4px; padding-left: 4px; }
.button_choice .choice-group label span { font-size: 1rem; font-weight: 400; line-height: 1.45; }
.button_choice label { padding-left: 0rem; padding-right: 0.2rem; width: 100%; display: flex; min-height: 50px; }
.button_choice label input[type="radio"] { position: absolute; left: -9999px; }
.button_choice label span { height: 100%; width: 100%; padding: 15px 12px; border: 1px solid #cccccc; color: #333; background-color: #fff; border-radius: 0px; -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

#booking_payment .button_choice label span { border-radius: 5px; border: 3px solid #eeeeee; }
.form-group.error .button_choice label span:hover { border-color: #EA5455; }
.form-group.error .button_choice label span { border-color: #EA5455; }
.button_choice label span:hover { background-color: #e6e6e6; border-color: #adadad; }
.button_choice label input[type="radio"]:checked~span { color: #fff; background-color: #38af47; border-color: #38af47; }

#booking_payment .button_choice label input[type="radio"]:checked~span { border-color: #002c53; border-radius: 5px; border: 3px solid #002c53; }

#booking_payment .button_choice label span:hover { background-color: #e6e6e6; border-color: #adadad; }
.button_choice label input[type="radio"]:checked:focus~span { color: #fff; background-color: #38af47; border-color: #38af47; }

#booking_payment .button_choice label input[type="radio"]:checked:focus~span { color: #fff; background-color: #002c53; border-color: #002c53; }
.button_choice label .input-group-prepend { height: 50px; }
.button_choice label .input-group-prepend span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.button_choice.logo_image label span { padding: 0px; }
.button_choice.logo_image label span img { border-radius: 4px; }
.form-group .help-block { color: #EA5455; }
.form-group .help-block ul { padding: 5px 0px 0px 0px; }
.form-group .help-block ul li { font-size: 12px; line-height: 18px; padding: 0px; }

select.form-control:not([multiple='multiple']) { background-position: calc(100% - 12px) 15px, calc(100% - 20px) 15px, 100% 0; background-size: 18px auto; padding-right: 30px; }


/* select 2 in component */

.select2-container { width: 100% !important; margin: 0; display: inline-block; position: relative; vertical-align: middle; box-sizing: border-box; }
.select2-container--classic:focus, .select2-container--default:focus { outline: none; }
.select2-container--classic .select2-selection__choice, .select2-container--default .select2-selection__choice { font-size: 0.9rem; margin-top: 6px !important; }
.select2-container--classic .select2-selection--single, .select2-container--default .select2-selection--single { min-height: 3.2rem; padding: 5px; border: 1px solid #d8d6de; }
.select2-container--classic .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus { outline: 0; border-color: #002c53 !important; box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1) !important; }
.select2-container--classic .select2-selection--single .select2-selection__rendered i, .select2-container--classic .select2-selection--single .select2-selection__rendered svg, .select2-container--default .select2-selection--single .select2-selection__rendered i, .select2-container--default .select2-selection--single .select2-selection__rendered svg { font-size: 1.15rem; height: 1.15rem; width: 1.15rem; margin-right: 0.5rem; }
.select2-container--classic .select2-selection--single .select2-selection__arrow b, .select2-container--default .select2-selection--single .select2-selection__arrow b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 18px 14px, 18px 14px; background-repeat: no-repeat; height: 1rem; padding-right: 1.5rem; margin-left: 0; margin-top: 0; left: -8px; border-style: none; }
.select2-container--classic.select2-container--open, .select2-container--default.select2-container--open { box-shadow: 0 5px 25px rgba(34, 41, 47, 0.1); }
.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: #002c53 !important; outline: 0; }
.select2-container--classic.select2-container--focus, .select2-container--default.select2-container--focus { outline: 0; }
.select2-container--classic.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #002c53 !important; outline: 0; }
.select2-container--classic .select2-dropdown, .select2-container--default .select2-dropdown { border-color: #d8d6de; }
.select2-container--classic .select2-search--dropdown, .select2-container--default .select2-search--dropdown { padding: 0.5rem; }
.select2-container--classic .select2-search--dropdown .select2-search__field, .select2-container--default .select2-search--dropdown .select2-search__field { outline: none !important; border-radius: 0.357rem; border-color: #d8d6de; padding: 0.438rem 1rem; }
.select2-container--classic .select2-selection--multiple, .select2-container--default .select2-selection--multiple { min-height: 38px !important; border: 1px solid #d8d6de; }
.select2-container--classic .select2-selection--multiple:focus, .select2-container--default .select2-selection--multiple:focus { outline: 0; border-color: #002c53 !important; box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1) !important; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #002c53 !important; border-color: #002c53 !important; color: #fff; padding: 2px 5px; }
.select2-container--classic .select2-selection--multiple .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0 6px; }
.select2-container--classic .select2-selection--multiple .select2-selection__rendered li .select2-search__field, .select2-container--default .select2-selection--multiple .select2-selection__rendered li .select2-search__field { margin-top: 7px; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { float: right; margin-left: 0.7rem; margin-right: 0.5rem; font-size: 0px; display: inline-block; position: relative; line-height: 1rem; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:before, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); background-size: 0.85rem; height: 0.85rem; width: 0.85rem; position: absolute; top: 22%; left: -4px; }
.select2-container--classic .select2-selection--multiple i, .select2-container--classic .select2-selection--multiple svg, .select2-container--default .select2-selection--multiple i, .select2-container--default .select2-selection--multiple svg { position: relative; top: 1px; margin-right: 0.5rem; height: 1.15rem; width: 1.15rem; font-size: 1.15rem; padding-left: 1px; }
.select2-container--classic .select2-results__group, .select2-container--default .select2-results__group { padding: 6px 9px; font-weight: 600; }
.select2-container--classic .select2-results__option, .select2-container--default .select2-results__option { padding: 0.628rem 1rem; }
.select2-container--classic .select2-results__option[role='group'], .select2-container--default .select2-results__option[role='group'] { padding: 0; }
.select2-container--classic .select2-results__option[aria-selected='true'], .select2-container--default .select2-results__option[aria-selected='true'] { background-color: #002c53 !important; color: white !important; }
.select2-container--classic .select2-results__option i, .select2-container--classic .select2-results__option svg, .select2-container--default .select2-results__option i, .select2-container--default .select2-results__option svg { height: 1.15rem; width: 1.15rem; font-size: 1.15rem; margin-right: 0.5rem; }
.select2-container--classic .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted { background-color: rgba(177, 237, 231, 0.12) !important; color: #002c53 !important; }
.select2-container--classic .select2-result-repository__avatar img, .select2-container--default .select2-result-repository__avatar img { width: 50px; }
.select2-container--classic .select-lg, .select2-container--default .select-lg { min-height: 2.714rem !important; font-size: 1.2rem; margin-bottom: 0 !important; padding: 0.3rem 0.7rem; }
.select2-container--classic .select-lg.select2-selection--single .select2-selection__rendered, .select2-container--default .select-lg.select2-selection--single .select2-selection__rendered { padding-top: -0.1rem; }
.select2-container--classic .select-lg.select2-selection--single .select2-selection__arrow, .select2-container--default .select-lg.select2-selection--single .select2-selection__arrow { top: 0rem !important; }
.select2-container--classic .select-lg.select2-selection--multiple, .select2-container--default .select-lg.select2-selection--multiple { padding: 0 0.2rem; }
.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered, .select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered { padding-top: 0 !important; }
.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered li, .select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered li { font-size: 1.2rem; }
.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered li .select2-search__field, .select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered li .select2-search__field { margin-top: 10px; }
.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice, .select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice { padding: 5px; }
.select2-container--classic .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:before, .select2-container--default .select-lg.select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:before { top: 46%; }
.select2-container--classic .select-sm, .select2-container--default .select-sm { min-height: 2.142rem !important; padding: 0 0.2rem; font-size: 0.75rem; margin-bottom: 0 !important; line-height: 1.5; }
.select2-container--classic .select-sm.select2-selection--single .select2-selection__arrow, .select2-container--default .select-sm.select2-selection--single .select2-selection__arrow { top: -0.3rem !important; }
.select2-container--classic .select-sm.select2-selection--multiple, .select2-container--default .select-sm.select2-selection--multiple { line-height: 1.3; }
.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__rendered, .select2-container--default .select-sm.select2-selection--multiple .select2-selection__rendered { padding: 3px; }
.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__rendered li, .select2-container--default .select-sm.select2-selection--multiple .select2-selection__rendered li { font-size: 0.75rem; margin-top: 2px; }
.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__rendered li .select2-search__field, .select2-container--default .select-sm.select2-selection--multiple .select2-selection__rendered li .select2-search__field { margin-top: 4px; }
.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__choice, .select2-container--default .select-sm.select2-selection--multiple .select2-selection__choice { padding: 0 0.2rem; }
.select2-container--classic .select-sm.select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:before, .select2-container--default .select-sm.select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:before { top: 5%; }
.select2-container--classic .select-sm.select2-selection--multiple .select2-search--inline .select2-search__field, .select2-container--default .select-sm.select2-selection--multiple .select2-search--inline .select2-search__field { margin-top: 0; }


/* select 2 */

.select2-container { z-index: 6000; }
.app-content .select2-container { /*z-index:1000;*/ z-index: 9; }
.select2-container--default .select2-selection--single { border-radius: 0px; border: 1px solid #d8d6de; padding: 0px; }
.form-group.error .select2-container--default .select2-selection--single { border-color: #EA5455; }
.select2-container .error input { border-color: #EA5455; }

input.error { border-color: #EA5455; }
.help-block.error { color: #EA5455; font-size: 0.875rem; padding-top: 0.2rem; }
.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: #0a416f !important; }
.select2-container--default .select2-selection--single { height: 50px; }
.select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0px; padding-right: 15px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0.438rem 30px 0.438rem 1rem; font-size: inherit; font-weight: 400; line-height: 35px; color: #6e6b7b; background-color: #fff; }
.select2-container--classic .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus { border-color: #0a416f !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 6px; right: 20px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { color: #0a416f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: right 12px center; background-size: 18px auto; padding-right: 40px; line-height: 54px; left: 0px; }
.select2-container--classic .select2-results__option[aria-selected='true'], .select2-container--default .select2-results__option[aria-selected='true'] { background-color: #4b8349 !important; }
.select2-container--classic .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted { background-color: #999999 !important; color: #ffffff !important; }
.select2-container--classic .select2-search--dropdown .select2-search__field, .select2-container--default .select2-search--dropdown .select2-search__field { outline: none !important; border-radius: 0rem; border-color: #D8D6DE; padding: 0.7rem 1rem; }
.select2-dropdown { border-color: #aaa; border-radius: 0px; }


/* select2 multiple */

.select2-container--classic .select2-selection--multiple, .select2-container--default .select2-selection--multiple { min-height: 50px !important; border-radius: 0px; padding: 0.6rem 0.7rem 0rem 0.7rem; }
.select2-container--classic .select2-selection--multiple .select2-selection__rendered, .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0px; margin: 0px; }
.select2-container--default .select2-selection__choice { font-size: 1rem; margin-top: 0px!important; }
.select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice { border-radius: 0px; background-color: #3eaf4d!important; border-color: #3eaf4d!important; color: #fff; padding: 5px 10px; margin-right: 5px; margin-bottom: 5px; }


/* json form */

ul._jsonform-array-ul li:before { content: ""; }
.em-attendee-details .form-group { padding: 0px; margin: 0px; }
.em-attendee-details .form-group ul { padding: 0px; margin: 0px; }
.em-attendee-details .form-group ul li { padding: 0px; margin: 0px; }
.em-attendee-details .help-block { font-size: 12px; line-height: 18px; padding: 0px; }
.em-attendee-details>td>div>div>label { display: none; }
.qty_field_td select { width: 70px; }


/* social share */

.icon_xsmall { width: 14px; height: 14px; display: inline-block; }
.icon_small { width: 18px; height: 18px; display: inline-block; }
.icon_medium { width: 22px; height: 22px; display: inline-block; }
.icon_large { width: 30px; height: 30px; display: inline-block; }
.social-share img { filter: invert(25%) sepia(96%) saturate(306%) hue-rotate(105deg) brightness(96%) contrast(93%); }
.social-share:hover img { filter: invert(59%) sepia(43%) saturate(685%) hue-rotate(77deg) brightness(87%) contrast(94%); }


/* sweet alert */
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation { z-index: 6000; }
h2.swal2-title { border-left:0px; padding: .8em 1em 0; }
.swal2-html-container, .swal2-html-container p, .swal2-html-container div, .swal2-html-container span { font-size: 1.125em!important; line-height:1.75rem!important; }

/* code field */
div#code_fields input { border-width: 1px !important; border-color: 2f286d; font-weight: 900; }
.form-control:focus:valid, .form-control:focus.is-valid { box-shadow: none !important; background: #fcfcf2; }


/* step label */
.step_ribbon { padding: 4px 10px; width: 30px; height: 30px; line-height:20px; background: #2f286d; left: 0px; color: #ffffff; position: relative; display: table-cell; /*border-radius: 50%;*/ border-radius:0px; border: 1px solid black; vertical-align: middle; }
.step_ribbon.inactive { padding:4px 10px; width:inherit; background:#cccccc; border:1px solid #aaa; left:0px; color:#ffffff; position:relative; display:table-cell; vertical-align: middle; }
/*.step_ribbon:after { content:""; position:absolute; height:0; width:0; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:15px solid #2f286d; right:-15px; top:0px; }
.ribbon-2:before { content:""; position:absolute; height:0; width:0; border-bottom:8px solid #14455b; border-left:8px solid transparent; top:-8px; }*/
.step_title .feather-chevron-right { height:30px !important; }
.step_title .icon-chevron-right { height:30px !important; line-height:30px !important; }


.loading-overlay {position: fixed;top: 0;left: 0;right: 0;height: 100%;background-color: rgba(34, 41, 47, 0.5);display:flex;visibility: hidden;opacity: 0;transition: all 0.5s ease;z-index:-1;}
.loading-overlay.show { opacity:1; visibility: visible; width:100%; height:100%; z-index: 8000; }
.loading-overlay .spinner-border { height:8vw; width:8vw; margin:auto; }
.loading-overlay.inside { position:absolute; }
.loading-overlay .loading-text { position:absolute; width:100%; top:calc(50% + 4vw); left:0px; text-align:center; z-index:500; color:#ffffff; }

.loading-overlay.small .spinner-border { height:4vw; width:4vw; margin:auto; }
.loading-overlay.small.inside.show { z-index:100; }
.loading-overlay.small .loading-text { position:absolute; width:100%; top:calc(50% + 2vw); left:0px; text-align:center; z-index:500; color:#ffffff; }

@media (max-width:575.9px) {
  .loading-overlay.small .spinner-border { height:8vw; width:8vw; }
  .loading-overlay.small .loading-text { top:calc(50% + 4vw); }
}


.footer ul { list-style: none; padding: 0px; margin: 0px; }


/* QR code reader */

#qr_scanner .header { position: fixed; top: 0px; height:65px; margin: 0px; padding: 0px; background-color: #4b8349; width: 100%; border-bottom:0px; /*border-bottom: 1px solid #ebe9f1;*/ z-index: 7000; min-width:320px; }
#qr_scanner .header .title { font-size:20px; font-weight:bold; width:200px; text-align: center; line-height:65px; color:#ffffff; position: absolute; top: 0px; left:50%; margin-left:-100px; index:10; }
#qr_scanner #menuToggleRight .close_btn { display: block; width: 60px; height: 65px; text-align: center; }
#qr_scanner #menuToggleRight .close_btn span { color: #ffffff; font-size: 25px; width: 60px; line-height: 65px; }
#qr_scanner #menuToggleRight .close_btn a { color: #ffffff; font-size: 25px; width: 60px; line-height: 65px; text-decoration: none; }
#qr_scanner { height:100dvh; width:100%; position:absolute; left:0px; top:0px; z-index:8001; overflow-y:auto; background-color: #ffffff;}
#qr_scanner.hide { z-index:-1; overflow-y:hidden; }

#scan_page { height:calc(100dvh - 65px); /*height:auto;*/ width:100%; position:absolute; left:0px; top:65px; z-index:6999; background-color: #000000; }
.reader_frame { max-width:580px; margin:auto; }
#reader { border:0px!important; /*margin-top:65px;*/ height:inherit; }

#qr_scanner.admin .header { position:fixed; }
@media (min-width: 1024px) {
    #qr_scanner.admin #reader { margin-top:0px; }
}

#reader__header_message { font-size:18px!important; padding:15px!important; /*position: relative; top: 40px; left: 50%; margin-left: -45%!important; font-size: 18px!important; border: 0px!important; padding: 10px!important; width: 90%!important;*/ }
#reader__scan_region { width:100%; /*height:calc(100% - 65px)!important;*/ /*height:100%;*/ /*min-height:calc(100% - 65px)!important;*/ /*min-height:75vh!important; */ display:flex; align-items: center; justify-content: center; border:0px!important; }
#reader__scan_region img { width:150px!important; height:auto!important; margin:30px auto; }
#reader__scan_region video { display:block; margin:0px; width:100%; height:100%; /*max-width:100%!important; max-height:100%!important; margin:auto; position: absolute;*/ }
#reader__dashboard { margin: 0px auto; text-transform: none; word-wrap: normal; position:relative!important; /*bottom:0px; left:0px;*/ width:100%; z-index:5000; }
#reader__dashboard_section { padding: 20px 0px 60px 0px !important; }
#html5-qrcode-select-camera { margin: 0px auto; display: block; width: 90%; height: 3.2rem; padding: 0.6rem 1rem; font-size: 1rem;
    font-weight: 400; line-height: 1.45; color: #6e6b7b; background-color: #fff; background-clip: padding-box;  border: 1px solid #d8d6de;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E);
    background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; padding-right: 1.5rem; background-position: calc(100% - 12px) 15px, calc(100% - 20px) 15px, 100% 0;
    background-size: 18px auto; padding-right: 30px; }

#qr-shaded-region { /*border-width:calc((100dvh - 65px - 60vw)/2) calc((100vw - 60vw)/2)!important;*/ }
/*#qr-shaded-region { border-width:calc(20vw 20vw!important; }*/
/*#QR { position:absolute!important; top:0px; left:0px; width:100vw; height:100dvh; z-index:7000; background-color:#ffffff; }*/
/*#reader__scan_region { width:100%; height:100%!important; display:table-cell; vertical-align:middle; border:0px!important; }
/*#reader__scan_region video { width:100%!important; height:100%!important; }*/
#html5-qrcode-button-camera-permission { display:block; width:80%!important; max-width:250px!important; border:0px; font-size: 16px; cursor:pointer; padding:10px; background-color:#0b9bfb; color:#ffffff; margin-bottom:10px; }
a#html5-qrcode-anchor-scan-type-change { /*display:inline-block;*/ display:none!important; width:80%!important; max-width:250px!important; border:0px; font-size: 16px; cursor:pointer; padding:10px; background-color:#0b9bfb; color:#ffffff; text-decoration:none!important; box-sizing:border-box; }
/*#html5-qrcode-button-file-selection { display:inline-block; width:80%!important; max-width:250px!important; border:0px; font-size: 16px; cursor:pointer; padding:10px; background-color:#0b9bfb; color:#ffffff; margin-bottom:10px; }*/
#html5-qrcode-button-camera-permission, #html5-qrcode-button-camera-start, #html5-qrcode-button-camera-stop { color: #FFFFFF;
    background-image: linear-gradient(to right, #ff4431 , #fe0062); border-radius: 1.5rem; position:fixed; bottom:20px; left:50%; margin-left:-120px;
    border-color: #ff4431!important; border: 1px solid #ff4431; width:240px; font-size: 16px; line-height: 20px; padding: 10px 25px; cursor: pointer; box-shadow: none;
    font-weight: 500; text-align: center; vertical-align: middle;
    user-select: none; display: inline-block; -webkit-appearance: button; text-transform: none; overflow: visible; box-sizing: border-box; }

/*#scan_start { color:#ffffff; position:fixed; bottom:20px; left:50%; width:120px; margin-left:-60px; z-index:3000; }*/
#scan_stop { color:#ffffff; position:fixed; bottom:20px; left:50%; width:120px; margin-left:-60px; z-index:3000; }
#scan_again { color:#ffffff; position:fixed; bottom:20px; left:50%; width:120px; margin-left:-60px; z-index:3000; }
#scan_other { color:#ffffff; position:fixed; bottom:20px; left:50%; width:200px; margin-left:-100px; z-index:3000; }

#result_page { min-height:calc(100% - 65px); width:100%; display:table; vertical-align: middle; margin-top:65px; display: flex; align-items: center; justify-content: center; }
.result_text { text-align:center; font-size:18px; margin:20px; }

/* camera page */

#photo_snap { height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:6001; overflow-y:auto; }
#photo_snap.hide { z-index:-1; overflow-y:hidden; }

#video_page { position:relative; top:0px; margin-top:65px; }
#video_page.hide { position:absolute; top:9999px; }

#screencap_page { margin-top:65px; }


/* counter animation css */

@property --from {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.counter {
  transition: --from 1s;
  counter-reset: int var(--from);
  animation: counter var(--time, 1000) forwards ease-in-out;
}

.counter::after {
  content: counter(int);
}

@keyframes counter {
  to {
    --from: var(--to, 100);
  }
}


/* pagination */

.dataTables_wrapper .dataTables_paginate { width:100%; margin:0px; padding-top:20px; padding-bottom:20px; /*border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc;*/ height:auto; }
.pagination { border-radius: 0rem; margin:0px; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin-top: 0rem; padding-bottom: 0px; margin: 0px 0; justify-content: center;}
.pagination .page-item { border-radius: 0rem; margin-left:2px; margin-right:2px; padding:0px; /*border-left: 4px solid transparent;box-shadow: rgb(0 0 0 / 5%) 0 4px 20px 0;*/  } /*20230327 */

.pagination .page-item .page-link { border-radius: 0rem; color:#626262; background-color: #ffffff; border-color: #cccccc; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); padding: 0rem 0.9rem; }
.pagination .page-item.active .page-link { border-radius: 0rem; color:#626262; background-color: #4b8349; border-color: #4b8349; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.pagination .page-item:last-child:not(.next-item) .page-link { border-top-right-radius: 0rem; border-bottom-right-radius: 0rem; }
.pagination .page-item:first-child:not(.prev-item) .page-link { border-top-left-radius: 0rem; border-bottom-left-radius: 0rem; }
.pagination .page-item.prev-item .page-link, .pagination .page-item.next-item .page-link, .pagination .page-item.first .page-link, .pagination .page-item.last .page-link { color: inherit; }
.pagination .page-item .page-link:hover { color: #4b8349; }
/*.pagination .page-item.disabled { display:none; }*/
.pagination .page-item.disabled .page-link { color: #cccccc; }
.pagination .page-item.first.disabled .page-link { color: #cccccc; }
.pagination .page-item.last.disabled .page-link { color: #cccccc; }

.pagination .page-item.first a, .pagination .page-item.previous a, .pagination .page-item.next a, .pagination .page-item.last a { display: table-cell; width: 36px; line-height: 36px; text-indent: -9999px; overflow: hidden; text-overflow: ellipsis; }

.pagination > li.first > a:after, .pagination > li.first > span:after { margin-left: 6px; content: "1"; text-indent: 9999px; display: inline-block; width:20px; height:20px; top:8px; left:4px; position:relative; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-left'><polyline points='11 17 6 12 11 7'></polyline><polyline points='18 17 13 12 18 7'></polyline></svg>"); background-size: 100% auto; background-repeat: no-repeat; filter: brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(944%) hue-rotate(344deg) brightness(98%) contrast(86%); }
.pagination > li.previous > a:after, .pagination > li.previous > span:after { margin-left: 6px; content: "1"; text-indent: 9999px; display: inline-block; width:20px; height:20px; top:8px; left:4px; position:relative; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'><polyline points='15 18 9 12 15 6'></polyline></svg>"); background-size: 100% auto; background-repeat: no-repeat; filter: brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(944%) hue-rotate(344deg) brightness(98%) contrast(86%); }
.pagination > li.next > a:after, .pagination > li.next > span:after, .pagination .page-item.next .page-link:after { margin-left: 6px; content: "1"; text-indent: 9999px; display: inline-block; width:20px; height:20px; top:8px; left:4px; position:relative; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'><polyline points='9 18 15 12 9 6'></polyline></svg>"); background-size: 100% auto; background-repeat: no-repeat; filter: brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(944%) hue-rotate(344deg) brightness(98%) contrast(86%); }
.pagination > li.last > a:after, .pagination > li.last > span:after, .pagination .page-item.last .page-link:after { margin-left: 6px; content: "1"; text-indent: 9999px; display: inline-block; width:20px; height:20px; top:8px; left:4px; position:relative; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevrons-right'><polyline points='13 17 18 12 13 7'></polyline><polyline points='6 17 11 12 6 7'></polyline></svg>"); background-size: 100% auto; background-repeat: no-repeat; filter: brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(944%) hue-rotate(344deg) brightness(98%) contrast(86%); }


.pagination > li.first.disabled > a:after, .pagination > li.first.disabled > span:after, .pagination > li.previous.disabled > a:after, .pagination > li.previous.disabled > span:after, .pagination > li.next.disabled > a:after, .pagination > li.next.disabled > span:after, .pagination .page-item.next.disabled .page-link:after, .pagination > li.last.disabled > a:after, .pagination > li.last > span:after, .pagination .page-item.last.disabled .page-link:after { filter: invert(76%) sepia(57%) saturate(2%) hue-rotate(38deg) brightness(103%) contrast(81%); }

.pagination .page-item:not(.prev-item) .page-link, .pagination .page-item:not(.next-item) .page-link, .pagination .page-item:not(.first) .page-link, .pagination .page-item:not(.last) .page-link, .pagination .page-item:not(.active) .page-link { line-height: 36px; font-weight:400; font-size:15px; }

@media only screen and (max-width: 768px) { /* 20240206 change this */
/*.pagination .page-item:last-child { border-right: 1px solid #cccccc; }*/
/*.pagination .page-item .page-link { padding: 0rem 0.7rem; }
.pagination .page-item.first a, .pagination .page-item.previous a, .pagination .page-item.next a, .pagination .page-item.last a { width: 30px; text-indent: -60px; }
.pagination .page-item.previous a { text-indent: -110px; }
.pagination > li.first > a:after, .pagination > li.first > span:after { left:12px; }
.pagination > li.previous > a:after, .pagination > li.previous > span:after { left:20px; }
.pagination > li.next > a:after, .pagination > li.next > span:after, .pagination .page-item.next .page-link:after { left:12px; }
.pagination > li.last > a:after, .pagination > li.last > span:after, .pagination .page-item.last .page-link:after { left:12px; }
*/
div.dataTables_wrapper div.dataTables_paginate { text-align: right; }
}





/* override style */
.bg-white { border:1px solid #eaeaea; }
.card { border:1px solid #eaeaea; }

/*#distance_form .btn { border-radius:0px!important; }*/

.highlight_thread { border-bottom:1px solid #eaeaea; display:flex; padding:10px 0px;}
.highlight_thread .highlight_date { min-width:100px; width:100px; }

@media only screen and (max-width: 768px) {
.highlight_thread { display:block; }   
}

.summernote_content { display:block; }
.summernote_content p:last-child { display:inline-block; }
.summernote_content img.note-float-left { margin-right: 10px; }
.summernote_content img.note-float-right { margin-left: 10px; }


/* 20231207 upload file basic */
.custom-image { position: relative; display: inline-block; width: 100%; min-height:50px; margin-bottom: 0; }
.custom-image-input { position:absolute; z-index:-1; }
/*.custom-image-input { position: relative; z-index: 2; width: 100%; height: 50px; margin: 0; overflow: hidden; opacity: 0; }
.custom-image-input:lang(en) ~ .custom-file-label::after { content:"Add image"; }*/
.custom-image-label { position:static; top:0; right:0; bottom:0; z-index:3; line-height:32px; padding:0.6rem 1rem; color:#6e6b7b; content:"Browse"; background-color:white; border-radius:0px; margin:0px; border-left:1px solid #d8d6de; cursor:pointer; text-wrap:nowrap; display:flex; order:2; }
.form-group label.custom-image-label { margin-bottom:0px; }

.custom-image-input_multiple { position:absolute; z-index:-1; }
.custom-image-box { position:static; top:0; right:0; left:0; z-index:1; min-height:50px!important; max-height:auto!important; height:auto!important; padding:0px; overflow: hidden; font-weight: 400; line-height:32px; color: #6e6b7b; background-color:#fff; border:1px solid #d8d6de; border-radius:0px; display:flex; flex-wrap:nowrap; justify-content:space-between; order:1; flex: 1 1 100%; }
.custom-image-preview { padding:6px 4px 4px 6px; display:flex; flex-wrap:wrap; }

.custom-image-preview .photo_item { position:relative; overflow:hidden; margin-right:2px; margin-bottom:2px; cursor:pointer; }
.custom-image-preview .photo_item:before { display:block; content:""; position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0); -webkit-transition:background-color 0.15s ease 0s; -o-transition:background-color 0.15s ease 0s; transition:background-color 0.15s ease 0s; z-index:10; }
.custom-image-preview .photo_item:after { font-family:feather; font-size:24px; color:#ffffff; content:"\e8bd"; width:24px; height:24px; line-height:24px; position:absolute; margin-left:-12px; margin-top:-12px; left:50%; top:50%; opacity:0; -webkit-transition:opacity 0.3s ease 0s; -o-transition:opacity 0.3s ease 0s; transition:opacity 0.3s ease 0s; z-index:200; }
.custom-image-preview .photo_item.action_view { cursor:pointer; }
.custom-image-preview .photo_item.action_delete { cursor:pointer; }
.custom-image-preview .photo_item.action_delete:after { font-family:feather; content: "\e8db"; }
.custom-image-preview .photo_item:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
.custom-image-preview .photo_item:hover:before { background-color:rgba(0, 0, 0, 0.4); }
.custom-image-preview .photo_item:hover:after { opacity:1; }

.custom-image-preview img { height:100px; width:auto; cursor:pointer; }



/* dropzone - single image style */
.dz_init, .dz_template { display:none; }
.dropzone.single_image { min-height:inherit; margin:0px auto; border: 1px dashed #D9D9D9; background: #F8F8F8; border-radius:0px; padding:0px; cursor:pointer; position:relative; }
.dropzone.single_image .dz-message:before { display:none; }
.dropzone.single_image .dz-message { position:relative; text-align:center; font-size:24px; top:0px; color: #444444; padding: 50px 1.25rem; margin-top: 0px; margin-bottom: 0px; height: 100%; width:100%; left:0px; margin:0px; background-color: #ffffff; }
.dropzone.single_image.dz-started .dz-message { opacity:0; display:none; }
.dropzone.single_image .upload_container { /*display: table-cell; width: 100%; height: 100%;*/ line-height: 20px; font-weight: bold; vertical-align: middle; margin-left: auto; margin-right: auto; }
/*.dropzone.single_image .upload_container:before { content: '\f093'; font-family: 'FontAwesome'; font-size: 40px; color: #309bd4; }*/
.dropzone.single_image .upload_container svg { width:40px; height:40px; color:#2f286d; }
.dropzone.single_image .upload_container div { font-size:24px; line-height:30px; padding-top:20px; }
.dropzone.single_image .upload_container div.remarks { font-weight:normal; font-size:13px; line-height:20px; padding-top:10px; }
.dropzone.single_image .upload_container img.icon_upload{ width:86px; height:86px; }

.dropzone.single_image .dz-image img { width:100%; height:auto; max-width:inherit; }
.dropzone.single_image .dz-image video { width:100%!important; height:auto!important; max-width:inherit; max-height: 514px; display: inherit; z-index:50; margin: 0px auto; }

.dropzone.single_image .dz-preview { position: relative; min-height:200px!important; margin: 0px; padding: 0px; border: 0px; box-shadow: none; display:block; }
.dropzone.single_image .dz-success { min-height:inherit!important; }
.dropzone.single_image .dz-processing { /*in-height:inherit!important;*/ min-height:200px!important; }
.dropzone.single_image .dz-complete { min-height:inherit!important; }
.dropzone.single_image .dz-image-preview { min-height:inherit!important; }

.dropzone.single_image .dz-preview .dz-progress { opacity:1; text-indent:-9999px; position:absolute; width:100%; height:100%; min-height:100%; top:0px; left:0px; background-color:rgba(0,0,0, 0.5); }

.dropzone.single_image .dz-preview .dz-progress { opacity:0; }
.dropzone.single_image .dz-preview.dz-processing .dz-progress { opacity:1; }
.dropzone.single_image .dz-preview.dz-success .dz-progress { opacity:0; }

/*.dropzone.single_image .dz-preview .dz-progress .dz-loading { opacity:1; text-indent:0; position:absolute; width:100%; height:100%; min-height:200px; top:50%; margin-top:-30px; left:0px; background-color:rgba(0,0,0, 0.5); }*/

.dropzone.single_image .dz-preview.dz-success .dz-progress { opacity:0; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; margin:0px; border-radius:0px; }

.dropzone.single_image .dz-preview .dz-upload-info { opacity:0; }
.dropzone.single_image .dz-preview.dz-image-preview .dz-upload-info { opacity:1 ; display:block; width:70%; height:60px; margin:-30px auto; top:50%; position:absolute; left:15%; }
.dropzone.single_image .dz-preview.dz-file-preview .dz-upload-info { opacity:1 ; display:block; width:70%; height:60px; margin:-30px auto; top:50%; position:absolute; left:15%; }
.dropzone.single_image .dz-preview .dz-image { /*opacity:0;*/ }
.dropzone.single_image .dz-preview.dz-success .dz-image { opacity:1; border-radius:0rem; width:100%; height:auto; }

.dropzone.single_image .dz-upload { display:block; width:100%; background-color:rgba(255,255,255, 0.3); height:20px; bottom:0px; position:absolute; left:0px; border-radius:10px; overflow: hidden; }
.dropzone.single_image .dz-upload-bar { display:block; width:100%; background-color:rgba(255,255,255, 0.7); height:20px; bottom:0px; position:absolute; left:0px; border-radius:0px; }
.dropzone.single_image .dz-upload-text { text-indent:0px; display:block; position:absolute; top:0px; left:0px; color:#cccccc; font-size:24px; width:100%; height:30px; line-height:30px; text-align:center; }

.dropzone.single_image .dropzone-choose { opacity:0; position:absolute; width:60px; height:60px; margin:0px; background-color:rgba(0,0,0, 0.5); background-image: none; border: 0px; margin: 0px; cursor: pointer; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; top: 50%!important; left: calc(50% - 100px)!important; /* top:10px; right:80px; */ margin-top:-30px!important; z-index:1; }
.dropzone.single_image .dz-preview.dz-success:hover .dropzone-choose { opacity: 0.8; }
.dropzone.single_image .dz-preview.dz-success:hover .dropzone-choose:hover { opacity: 1; }
.dropzone.single_image .dropzone-choose:before { content:"1"; text-indent:-9999px; display:inline-block; width:40px; height:40px; position: absolute; margin-top: -20px; top: 50%; left: 50%; margin-left: -20px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'></path><polyline points='17 8 12 3 7 8'></polyline><line x1='12' y1='3' x2='12' y2='15'></line></svg>"); background-size:100% auto; filter: invert(100%) sepia(100%) saturate(1%) hue-rotate( 46deg) brightness(105%) contrast(101%); opacity:0.7; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; }
.dropzone.single_image .dropzone-choose:hover:before { opacity:1; }

.dropzone.single_image .dropzone-crop { opacity:0; position:absolute; width:60px; height:60px; margin:0px; background-color:rgba(0,0,0, 0.5); background-image: none; border: 0px; margin: 0px; cursor: pointer; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; top: 50%!important; left: calc(50% - 30px)!important; margin-top:-30px!important; z-index:1; }
.dropzone.single_image .dz-preview.dz-success:hover .dropzone-crop { opacity: 0.8; }
.dropzone.single_image .dz-preview.dz-success:hover .dropzone-crop:hover { opacity: 1; }
.dropzone.single_image .dropzone-crop:before { content:"1"; text-indent:-9999px; display:inline-block; width:40px; height:40px; position: absolute; margin-top: -20px; top: 50%; left: 50%; margin-left: -20px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-crop'><path d='M6.13 1L6 16a2 2 0 0 0 2 2h15'></path><path d='M1 6.13L16 6a2 2 0 0 1 2 2v15'></path></svg>"); background-size:100% auto; filter: invert(100%) sepia(100%) saturate(1%) hue-rotate( 46deg) brightness(105%) contrast(101%); opacity:0.7; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; }
.dropzone.single_image .dropzone-crop:hover:before { opacity:1; }


.dropzone.single_image .dz-remove { opacity:0; text-indent:-9999px; position:absolute; width:60px; height:60px; margin:0px; background-color:rgba(0,0,0, 0.5); background-image: none; border: 0px; margin: 0px; cursor: pointer; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; overflow:hidden; top: 50%!important; left: calc(50% + 40px)!important; margin-top: -30px!important; z-index:1; }
.dropzone.single_image .dz-preview.dz-success:hover .dz-remove { opacity:0.8; }
.dropzone.single_image .dz-preview.dz-success:hover .dz-remove:hover { opacity: 1; }
.dropzone.single_image .dz-remove:before { content:"1"; text-indent:-9999px; display:inline-block; width:40px; height:40px; position: absolute; margin-top: -20px; top: 50%; left: 50%; margin-left: -20px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path></svg>"); background-size:100% auto; filter: invert(100%) sepia(100%) saturate(1%) hue-rotate( 46deg) brightness(105%) contrast(101%); opacity:0.7; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; }
.dropzone.single_image .dz-remove:hover:before { opacity:1; }
.dropzone.single_image .dz-remove:after { content: ""; display:none; }

.dropzone.single_image .dz-preview.dz-success:before { opacity:0; position: absolute; width:100%; height:100%; content:" "; background-color:rgba(255, 255, 255, 0.6); display:block; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; }
.dropzone.single_image .dz-preview.dz-success:hover:before { opacity:1; }

.dropzone .dz-default.dz-message span, .dropzone .dz-default.dz-message button { display:table!important; width:100%; height:100%; border:0px; background:transparent; padding:0px; }

.dropzone .convert-overlay { position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: rgba(34, 41, 47, 0.5); display:flex; visibility: hidden; opacity: 0; transition: all 0.5s ease; z-index:-1; }
.dropzone .convert-overlay .spinner-border { height: 4vw; width: 4vw; margin:auto; }

.dropzone.converting .convert-overlay { opacity: 1; visibility: visible; z-index: 10; }

.dropzone ~ .help-block .danger { color: #EA5455; font-size: 0.875rem; padding-top: 0.2rem; }


/* no crop dropzone */
.no_crop .dz-message { height:402px; }
.no_crop.dropzone.single_image .dz-processing { min-height:402px!important; }
.no_crop.dropzone.single_image .dz-success { min-height:inherit!important; }
.no_crop.dropzone.single_image .dz-complete { min-height:inherit!important; }

@media (max-width: 575.9px) {
.no_crop .dz-message { height:inherit; }
.no_crop.dropzone.single_image .dz-processing { min-height:inherit!important; }
}

.no_crop.dropzone.single_image .dropzone-choose { left: calc(50% - 70px)!important; }
.no_crop.dropzone.single_image .dropzone-crop { display:none!important; }
.no_crop.dropzone.single_image .dz-remove { left: calc(50% + 10px)!important; }


/* dropzone multiple */

.dropzone.multiple_images .dz-preview { width:20%; height:80px; float:left; border:2px solid #ffffff;}
.dropzone.multiple_images .dz-preview img { width:100%; height:auto; flex-shrink:cover; }

.dropzone.multiple_images { min-height: inherit; margin: 0px auto; border: 1px dashed #D9D9D9; background: #ffffff; border-radius: 0px; padding: 0px; cursor: pointer; position: relative; display:table; width:100%; }
.dropzone.multiple_images .dz-message:before { display:none; }
.dropzone.multiple_images .dz-message { position: relative; text-align: center; font-size: 24px; top: 0px; color: #444444; padding: 50px 1.25rem; margin-top: 0px; margin-bottom: 0px; height: 100%; width: 100%; left: 0px; margin: 0px; background-color: #ffffff; }
.dropzone.multiple_images.dz-started .dz-message { opacity:0; display:none; }
.dropzone.multiple_images .upload_container { /*display: table-cell; width: 100%; height: 100%;*/ line-height: 20px; font-weight: bold; vertical-align: middle; margin-left: auto; margin-right: auto; }
/*.dropzone.multiple_images .upload_container:before { content: '\f093'; font-family: 'FontAwesome'; font-size: 40px; color: #309bd4; }*/
.dropzone.multiple_images .upload_container div { font-size:24px; line-height:30px; padding-top:20px; }
.dropzone.multiple_images .upload_container div.remarks { font-weight:normal; font-size:13px; line-height:20px; padding-top:10px; }
.dropzone.multiple_images .upload_container img.icon_upload{ width:86px; height:86px; }

.dropzone.multiple_images .dz-image img { width:100%; height:auto; max-width:inherit; }
.dropzone.multiple_images .dz-image video { width:100%!important; height:auto!important; max-width:inherit; max-height: 514px; display: inherit; z-index:50; margin: 0px auto; }

.dropzone.multiple_images .dz-preview { position:relative; height:auto; }
.dropzone.multiple_images .dz-preview.dz-success:hover .dz-remove { opacity:0.5; }

.dropzone.multiple_images .dz-preview .dz-progress { opacity:1; /*text-indent:-9999px;*/ position:absolute; width:100%; height:100%; /*min-height:200px;*/ top:0px; left:0px; background-color:rgba(0,0,0, 0.5); }

.dropzone.multiple_images .dz-preview.dz-success .dz-progress {
  opacity:0; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; }

.dropzone.multiple_images .dz-preview .dz-upload-info { opacity:0; }
.dropzone.multiple_images .dz-preview.dz-image-preview .dz-upload-info { opacity:1 ; display:block; width:70%; height:60px; margin:-30px auto; top:50%; position:absolute; left:15%; }
.dropzone.multiple_images .dz-preview.dz-file-preview .dz-upload-info { opacity:1 ; display:block; width:70%; height:60px; margin:-30px auto; top:50%; position:absolute; left:15%; }
.dropzone.multiple_images .dz-preview .dz-image { opacity:1; }
.dropzone.multiple_images .dz-preview.dz-success .dz-image { opacity:1; }

.dropzone.multiple_images .dz-upload { display:block; width:100%; background-color:rgba(255,255,255, 0.3); /*height:20px; bottom:0px; position:absolute; left:0px;*/ border-radius:10px; overflow: hidden; }
.dropzone.multiple_images .dz-upload-bar { display:block; width:100%; background-color:rgba(255,255,255, 0.7); height:20px; bottom:0px; position:absolute; left:0px; border-radius:0px; }
.dropzone.multiple_images .dz-upload-text { text-indent:0px; display:block; position:absolute; top:0px; left:0px; color:#cccccc; font-size:24px; width:100%; height:30px; line-height:30px; text-align:center; }

.dropzone.multiple_images .dz-remove { opacity:0; text-indent:-9999px; position:absolute; width:100%; height:100%; margin:0px; background-color:rgba(0,0,0, 0.5); background-image: none; border: 0px; margin: 0px; cursor: pointer; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; overflow:hidden; z-index:1; top:0px; right:0px; }
.dropzone.multiple_images .dz-preview.dz-success:hover .dz-remove { opacity:0.8; }
.dropzone.multiple_images .dz-preview.dz-success:hover .dz-remove:hover { opacity: 1; }
.dropzone.multiple_images .dz-remove:before { content:"1"; text-indent:-9999px; display:inline-block; width:40px; height:40px; position: absolute; margin-top: -20px; top: 50%; left: 50%; margin-left: -20px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-trash'><polyline points='3 6 5 6 21 6'></polyline><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'></path></svg>"); background-size:100% auto; filter: invert(100%) sepia(100%) saturate(1%) hue-rotate( 46deg) brightness(105%) contrast(101%); opacity:0.7; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; }
.dropzone.multiple_images .dz-remove:hover:before { opacity:1; }
.dropzone.multiple_images .dz-remove:after { content: ""; display:none; }

.dropzone.multiple_images .dropzone-choose { width:20%; height:80px; float:left; border:2px solid #ffffff; }

.dropzone_height_sync { height: calc(100% - 62px); }

/* 20231214 photo album adjust */
#album_images.dropzone.multiple_images { display: flex; flex-wrap: wrap; }
#album_images.dropzone.multiple_images .dz-preview { /*flex: 0 0 20%;*/ height:inherit; }
#album_images.dropzone.multiple_images .dz-preview .dz-progress { opacity:0; }
#album_images.dropzone.multiple_images .dz-preview .dz-success-mark { opacity:0; position: absolute; bottom: 0px; right: 0px; border-top: 60px solid transparent; border-right: 60px solid #2f286d; }
#album_images.dropzone.multiple_images .dz-preview .dz-success-mark .icon-check { position: absolute; bottom: 16px; right: -42px; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing .dz-progress { opacity:1; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-progress { opacity:0; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-success-mark { opacity:1; }
#album_images.dropzone.multiple_images .dz-preview .dz-remove { display:none; }
#album_images.dropzone.multiple_images .dz-preview.dz-image-preview .dz-remove { display:block; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing .dz-remove { display:none; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-remove { display:none; }

#album_images.dropzone.multiple_images .dz-preview:hover .dz-remove { opacity:0.8; }
#album_images.dropzone.multiple_images .dz-preview:hover .dz-remove:hover { opacity: 1; }

#album_images.dropzone.multiple_images .dz-preview .convert-overlay.show { opacity: 1; visibility: visible; z-index: 10; }

/*#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }
#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }
#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }*/



/* dropzone audio preview */

.dropzone.single_image .dz-audio { position:absolute; width:100%; height:54px; margin-top:-27px; top:50%; border: 0px; }
.dropzone .dz-audio audio { width:90%; display:block; margin:auto; }

audio::-webkit-media-controls-panel { }
audio::-webkit-media-controls-mute-button { }
audio::-webkit-media-controls-play-button { }
audio::-webkit-media-controls-timeline-container { }
audio::-webkit-media-controls-current-time-display { /*display: none;*/}
audio::-webkit-media-controls-time-remaining-display { display: none; }
audio::-webkit-media-controls-timeline { }
audio::-webkit-media-controls-volume-slider-container { }
audio::-webkit-media-controls-volume-slider { }
audio::-webkit-media-controls-seek-back-button { }
audio::-webkit-media-controls-seek-forward-button { }
audio::-webkit-media-controls-fullscreen-button { }
audio::-webkit-media-controls-rewind-button { }
audio::-webkit-media-controls-return-to-realtime-button { }
audio::-webkit-media-controls-toggle-closed-captions-button { }




/* modal */

.modal.show { display:flex!important; padding:0px; }
.modal .modal-dialog { transform: none; margin:auto; width:95vw; }
.modal .modal-content { border-radius: 20px; overflow: hidden; }
.modal .modal-header { border-radius:0px; position:relative; }
.modal .modal-header .close { padding: 0.2rem 0.62rem; box-shadow: 0 0px 0px 0 rgb(34 41 47 / 0%); border-radius:0px; background-color:transparent; opacity: 1; transition: all 0.23s ease 0.1s; position:absolute; transform:none; top:24px; right:24px; }
.modal .modal-header .modal-title { line-height:40px; font-weight:bold; }
.modal .modal-footer { border-radius:0px; }
.modal .modal-header .close:hover, .modal .modal-header .close:focus, .modal .modal-header .close:active { transform: translate(0px, 0px); }

/* set all to scrollable modal */
.modal { overflow-y:hidden; }
.modal .modal-body { max-height:calc(100vh - 160px); overflow-y:auto; }

.modal { min-width:320px; z-index:5800; }
.modal.modal-slide-in { /*margin-top:62px;*/ margin-top:0px; }
.modal-slide-in .modal-dialog .modal-content { position:relative; }
.modal-slide-in .modal-dialog { /*margin-top:62px;*/ margin-top:0px; }
.modal-slide-in .modal-dialog { width:100%; min-width:320px; }
.modal-header { height:62px; }
.modal-slide-in .close { top:26px; right:20px; }
.modal-slide-in .modal-dialog .modal-body { padding:20px; padding-bottom:100px; margin:0px 0px 0px 0px; overflow-y:auto!important; }
.modal.modal-slide-in .modal-title { line-height: 40px; }
.modal.modal-slide-in .modal_button { position:fixed; bottom:0px; left:0px; z-index: 100; }


.modal.modal-slide-in#modal_add .modal_button { display:none; }
.modal.modal-slide-in#modal_edit .modal_button { display:none; }

@media (min-width: 576px) {
.modal-slide-in .modal-dialog.sidebar-lg { width:400px!important; }
}

/* summernote */

.note-editor.card { box-shadow:none; border-radius:0px; }
.note-editor .note-toolbar { display:block; }
.note-editor.note-frame .note-status-output { display:none; }

.note-editor .btn { padding:10px 15px; }
.note-editor .dropdown-toggle::after { display:none; }
.note-editor .dropdown-toggle .note-icon-caret:before { margin-left:0px; }
.note-editor .panel-heading.note-toolbar .dropdown-menu { margin-top:0px; border-radius: 0px; }
.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu { padding:10px; width: max-content; }
.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu > li:hover { background-color:#f0f0f0; }
.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu > li { padding:8px 10px; }
.note-editor .panel-heading.note-toolbar .note-style p { margin:0px; }
.note-editor .modal.show { display:flex!important; padding:0px!important; }
.note-editor .modal.show .modal-dialog { transform: none; margin:auto; width:95vw; }
.note-editor .modal .modal-content { border-radius:0px; }
.note-editor .modal .modal-header { border-radius:0px; position:relative; }
.note-editor .modal .modal-header .close { padding: 0.2rem 0.62rem; box-shadow: 0 0px 0px 0 rgb(34 41 47 / 0%); border-radius:0px; background-color:transparent; opacity: 1; transition: all 0.23s ease 0.1s; position:absolute; transform:none; top:24px; right:24px; }
.note-editor .modal .modal-header .modal-title { line-height:40px; font-weight:bold; }
.note-editor .modal .modal-footer { border-radius:0px; }
.note-editor .modal .form-check { position:relative; line-height:22px; padding-top:10px; padding-bottom:10px; padding-left:0px; }
.note-editor .modal .form-check label { position:relative; cursor:pointer; padding-left:32px; }
.note-editor .modal .form-check input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; padding: 0px 30px 0px 0px; border-radius:0px; text-align: center; margin:0px; position: absolute; left: 0px; }
.note-editor .modal .form-check input[type="checkbox"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:0px; left:0px; }
.note-editor .modal .form-check input[type="checkbox"]:after { content:" "; display:block; width:16px; height:16px; position:absolute; top:4px; left:4px; display:inline-block; background-image:none; background-size:100% auto; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.note-editor .modal .form-check input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
.note-editor .modal .form-check input[type="checkbox"]:checked:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"); }

.note-popover.popover { display: none; }
.note-link-popover { border-radius:0px;  }
.note-link-popover .popover-content { padding:5px 10px; }
.note-link-popover .popover-content > .btn-group { margin:0px; }
.note-popover .btn { padding:10px; }

.note-editor .note-image-input { text-indent: -9999px; display: block; color: #6e6b7b; border: 1px solid #d8d6de; height: 50px; border-radius: 0px; }

.note-editor.note-frame.card { margin-bottom:0px; }


/* cropper */
#modal_crop.show { height:100%; width:100%; margin: 0px; display: block!important; padding: 0px!important; overflow: hidden; z-index:8000; }
/*#modal_crop { height:100vh; width:100vw; margin: 0px; display: none!important; padding: 0px!important; overflow: hidden; }
#modal_crop.show { display: block!important; }*/
#modal_crop .modal-dialog { height:100%; width:100%; max-width:inherit; margin: 0px; padding: 0px!important; }
#modal_crop .modal-dialog .modal-content { height:100%; width:100%; max-width:inherit; margin: 0px; padding: 0px!important; }
#modal_crop .modal-body { height:calc(100% - 60px - 80px); padding: 0px!important; }
#modal_crop .img-container { height:100%; width:100%; padding: 0px!important; }
#modal_crop .img-container img { width:auto; max-height:100%; }
#modal_crop .img-container #crop_image { opacity:0; }


/*.banner_inner .inner_frame:before { content:" "; position:absolute; top:-12dvw; left:-2dvw; width:50dvw; height:50dvw; border-radius:100%; background-color:#98b630; opacity:0.2; z-index:0; }
.banner_inner:before { content:" "; position:absolute; top:-15dvw; left:-4dvw; width:40dvw; height:40dvw; border-radius:100%; background-color:#35831d; opacity:0.3; z-index:0; }*/

/*.banner_inner .inner_frame:before { content:" "; position:absolute; top: 1dvw; left: -44dvw; width: 4dvw; height: 100dvw; transform: skewX(-50deg); transform: skewX(-50deg); background-color:#98b630; opacity:0.5; z-index:0; }
.banner_inner:before { content:" "; position:absolute; top: -5dvw; left: 25dvw; width: 10dvw; height: 15dvw; transform: skewX(-50deg); background-color:#35831d; opacity:0.3; z-index:0; }*/

.banner_inner .bar { content:" "; position:absolute; transform: skewX(-45deg); opacity:0.5; z-index:0; }
.banner_inner .bar:nth-child(1) { top:-50px; left:-36px; width:120px; height:390px; background-color:#ec5200; opacity:0.5; }
.banner_inner .bar:nth-child(2) { top:40px; left:-24px; width:60px; height:390px; background-color:#ecac00; opacity:0.3; }
.banner_inner .bar:nth-child(3) { top:-260px; left:130px; width:24px; height:390px; background-color:#ecac00; opacity:0.3; }

/*.banner_inner .bar { content:" "; position:absolute; transform: skewX(-45deg); opacity:0.5; z-index:0; }
.banner_inner .bar:nth-child(1) { top:-50px; left:-36px; width:120px; height:390px; background-color:#467028; opacity:0.5; }
.banner_inner .bar:nth-child(2) { top:40px; left:-24px; width:60px; height:390px; background-color:#84a61e; opacity:0.3; }
.banner_inner .bar:nth-child(3) { top:-260px; left:130px; width:24px; height:390px; background-color:#97ba0c; opacity:0.3; }*/

/*.banner_inner:after { content:" "; position:absolute; left:0px; bottom:0px; width:100dvw; height:10dvw; background-image:url(../images/top_curve.png); background-size:cover; }*/


/*.banner_inner .bar:nth-child(1) { animation-name: barloop; animation-timing-function:linear; animation-duration:0.7s; }
.banner_inner .bar:nth-child(2) { animation-name: barloop; animation-timing-function:linear; animation-duration:0.8s; }
.banner_inner .bar:nth-child(3) { animation-name: barloop; animation-timing-function:linear; animation-duration:0.5s;}*/

/*.banner_inner .inner_frame:before { animation-name: moveCircle1; animation-duration:0.5s; animation-fill-mode: backwards; animation-delay:0.3s; }
.banner_inner:before { animation-name: moveCircle2; animation-duration:0.5s; animation-fill-mode: backwards; animation-delay:0.8s; }*/
/*.banner_inner:after { animation-name: curving; animation-duration:0.2s; animation-fill-mode: backwards; animation-delay: 0.2s; }*/

@keyframes barloop  {
  0% {
    transform: skewX(-45deg) translate(0px, 0px);
  }
  25% {
    transform: skewX(-45deg) translate(0px, 390px);
  }
  50% {
    transform: skewX(-45deg) translate(0px, 0px);
  }
  70% {
    transform: skewX(-45deg) translate(0px, 0px);
  }
  100% {
    transform: skewX(-45deg) translate(0px, -390px);
  }
}


@keyframes curving {
  0% {
    transform: translateX(-100dvw);
    transform: scaleX(6);
  }
  100% {
    transform: translateX(0dvw);
    transform: scaleX(1);
  }
}

@keyframes moveCircle1 {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  90% {
    transform: scale(1.1);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}

@keyframes moveCircle2 {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  90% {
    transform: scale(1.1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

.banner_inner { max-height:260px; height:260px; }

.footer .social img { filter: invert(1); }
.footer a { color: #ffffff; text-decoration:none; }
.footer a:hover { color: #ffffff; }
.footer a:active { color: #ffffff; }

.footer { background-color: transparent; color: #ffffff; padding-top: 4dvw; overflow: hidden; }
.footer .inner_frame { background-color:#4b8349; position:relative; width:100%; max-width:100%; }
.footer .inner_frame .inner_content { max-width:1200px; margin:auto; }
.footer .inner_frame:before { content:" "; /*display:block;*/ display:none; background-color:#4b8349; width:500dvw; height:250dvw; border-radius:100%; position:absolute; top:-4dvw; left:-200dvw; }

@media handheld, screen and (max-width: 960px) {
    .footer { padding-top: 6dvw; }
    .footer .inner_frame:before { top:-6dvw; }
}

@media handheld, screen and (max-width: 640px) {
    .footer { padding-top: 80px; }
    .footer .inner_frame:before { top:-80px; }
}

/*.footer .inner_frame:after { content:" "; position:absolute; left:26dvw; top:-100px; width:50px; height:50px; background-image:url("../images/running.gif"); background-size:cover; z-index:2; }*/
.footer { position:relative; /*padding-top:100px;*/ }
.footer .sky { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; }
.footer .sky .plane { content:" "; position:absolute; left: -6dvw; top:40px; width:100px; height:60px; background-image:url("../images/airplane.png"); background-size:cover; z-index:2; }
.footer .sky .plane { animation-name: flyingPlane; animation-duration:20s; animation-timing-function:linear; animation-iteration-count:infinite; }

.footer .sky .cloud { content:" "; position:absolute; background-image:url("../images/cloud.png"); background-size:cover;  }
.footer .sky .cloud.c1 { left:10dvw; top:10px; width:80px; height:80px; z-index:0; animation-duration:10s; }
.footer .sky .cloud.c2 { left:57dvw; top:20px; width:100px; height:100px; z-index:3; animation-duration:14s; }
.footer .sky .cloud.c3 { left:80dvw; top:15px; width:70px; height:70px; z-index:1; animation-duration:12s;}
.footer .sky .cloud { animation-name: floatCloud; /*animation-duration:10s;*/ animation-timing-function:linear; animation-iteration-count:infinite; }

@keyframes flyingPlane {
  0% {
    transform: translateX(-6dvw);
  }
  100% {
    transform: translateX(106dvw);
  }
}


@keyframes floatCloud {
  0% {
    transform: translatey(0px);
  }
  25% {
    transform: translatey(20px);
  }
  50% {
    transform: translatey(0px);
  }
  75% {
    transform: translatey(-20px);
  }
  100% {
    transform: translateX(0px);
  }
}

.banner_inner.map { position: relative; max-height:inherit; width: 100%; min-width: 320px; /*height:22vw;*/ height:inherit; overflow: hidden; display: flex !important; justify-content: center; align-items: center; background-image:none; background-repeat: repeat-x; background-color: #bccfde; background-position: right 65%; background-size: cover; /*top: 1px;*/ margin-top: 109px; background-color:#71c8db; }
.banner_inner.map .inner_frame { position: relative; }
.banner_inner.map:before { display:none; }
.banner_inner.map .inner_frame:before { display:none; }


@media handheld, screen and (max-width: 1024px) {
  .banner_inner.map { margin-top:65px; }
}

.map_record { position:relative; }
.map_record .badge { position:absolute; display:block; width:10%; height:16.7%; background-image:url("../images/badge.png"); background-size:cover; }
.map_record .badge .race_num { position:absolute; left:65%; top:65%; font-size:24px; line-height:24px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000; }

.map_record .badge.asia { top:26%; left:70%; }
.map_record .badge.europe { top:18%; left:52%; }
.map_record .badge.namerica { top:22%; left:22%; }
.map_record .badge.samerica { top:54%; left:31.5%; }
.map_record .badge.africa { top:50%; left:48%; }
.map_record .badge.australia { top:62%; left:82%; }


.map_record .badge.animation_1 { animation-name: badgePopup; animation-duration:0.3s; animation-fill-mode: backwards; animation-delay:0s;}
.map_record .badge.animation_2 { animation-name: badgePopup; animation-duration:0.3s; animation-fill-mode: backwards; animation-delay:0.5s;}
.map_record .badge.animation_3 { animation-name: badgePopup; animation-duration:0.3s; animation-fill-mode: backwards; animation-delay:1s;}
.map_record .badge.animation_4 { animation-name: badgePopup; animation-duration:0.3s; animation-fill-mode: backwards; animation-delay:1.5s;}
.map_record .badge.animation_5 { animation-name: badgePopup; animation-duration:0.3s; animation-fill-mode: backwards; animation-delay:2s;}
.map_record .badge.animation_6 { animation-name: badgePopup; animation-duration:0.3s; animation-fill-mode: backwards; animation-delay:2.5s;}


@media handheld, screen and (max-width: 1199px) {
	.map .badge .race_num { font-size:4dvw; line-height:4dvw; }
}


@keyframes badgePopup {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  90% {
    transform: scale(1.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}


/* event title */
.banner_inner .event_title { position: absolute; font-weight: 600; color: #ffffff; /*bottom: 30px;*/ text-shadow: 0px -3px 10px rgb(60 88 55 / 30%);  }

.banner_inner .event_title { font-size: 24px; line-height: 40px; left: 20px; top: 13px; }
@media handheld, screen and (max-width: 1024px) {
	.banner_inner .event_title { font-size: 24px; line-height: 40px; left: 30px; top: 13px; }
}
@media handheld, screen and (max-width:768px) {
  .banner_inner.map .event_title { display:none; }
	.banner_inner .event_title { font-size: 20px; line-height: 30px; left: 20px; top: 13px; }
}
/*@media handheld, screen and (max-width:480px) {
	.banner_inner .event_title { font-size: 15px; line-height: 24px; left: 20px; top: 15px; }
}*/



/* page title */
.banner_inner .page_title { position: absolute; font-weight: 600; color: #ffffff; /*bottom: 30px;*/ text-shadow: 0px -3px 10px rgb(60 88 55 / 60%); }
.banner_inner .page_title { font-size: 48px; line-height: 80px; left: 25px; top: 40px; }
@media handheld, screen and (max-width: 1024px) {
  .banner_inner .page_title { font-size: 48px; line-height: 80px; left: 35px; top: 40px; }
  /*.banner_inner.map .page_title { font-size: 4.68dvw; line-height:7.8125dvw; top: 2dvw; left: 3dvw; }*/
}
@media handheld, screen and (max-width:768px) {
  .banner_inner.map .page_title { display:none; }
	.banner_inner .page_title { font-size: 40px; line-height: 60px; left: 25px; top: 40px; }
}
/*@media handheld, screen and (max-width:480px) {
	.banner_inner .page_title { font-size: 30px; line-height: 48px; left: 25px; top: 40px; }
}*/



/* mahjong style */

.tile-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; min-height: 70px; align-items: center; }
.clickable-tile { cursor: pointer; }
.clickable-tile:hover { transform: translateY(-4px); box-shadow: 3px 4px 6px rgba(0,0,0,0.2); }
.selected-discard { background-color: #ffe6e6 !important; border: 2px solid #e74c3c !important; }

.mj-tile { width: 52px; height: 68px; background: #fef9e7; border: 2px solid #999; border-radius: 6px; background-size:cover; box-shadow: 2px 2px 3px rgba(0,0,0,0.15); display: flex; flex-direction: column; justify-content: center;  align-items: center; font-size: 18px; font-weight: bold; transition: all 0.2s ease;  position: relative; text-indent:-9999px; margin-bottom:15px; }
.tile-wrap { gap:6px; min-height:50px; }
td .tile-wrap { justify-content:start; }
td .mj-tile { width: 36px; height: 47.2px; border: 1px solid #999; border-radius: 4px; box-shadow: 1px 1px 2px rgba(0,0,0,0.15);}

.mj-tile span { display:none; }
.mj-tile small { display:none; }
.tile-honor { background-color: #ffffff !important; }

.is-ganged { opacity: 0.45; border: 2px solid #6c2bd9; background-color: #e9d5ff; }

.mj-tile[data-tile='1p'] { background-image:url("../images/mahjong/tile_1p.png"); }
.mj-tile[data-tile='2p'] { background-image:url("../images/mahjong/tile_2p.png"); }
.mj-tile[data-tile='3p'] { background-image:url("../images/mahjong/tile_3p.png"); }
.mj-tile[data-tile='4p'] { background-image:url("../images/mahjong/tile_4p.png"); }
.mj-tile[data-tile='5p'] { background-image:url("../images/mahjong/tile_5p.png"); }
.mj-tile[data-tile='6p'] { background-image:url("../images/mahjong/tile_6p.png"); }
.mj-tile[data-tile='7p'] { background-image:url("../images/mahjong/tile_7p.png"); }
.mj-tile[data-tile='8p'] { background-image:url("../images/mahjong/tile_8p.png"); }
.mj-tile[data-tile='9p'] { background-image:url("../images/mahjong/tile_9p.png"); }
.mj-tile[data-tile='1m'] { background-image:url("../images/mahjong/tile_1m.png"); }
.mj-tile[data-tile='2m'] { background-image:url("../images/mahjong/tile_2m.png"); }
.mj-tile[data-tile='3m'] { background-image:url("../images/mahjong/tile_3m.png"); }
.mj-tile[data-tile='4m'] { background-image:url("../images/mahjong/tile_4m.png"); }
.mj-tile[data-tile='5m'] { background-image:url("../images/mahjong/tile_5m.png"); }
.mj-tile[data-tile='6m'] { background-image:url("../images/mahjong/tile_6m.png"); }
.mj-tile[data-tile='7m'] { background-image:url("../images/mahjong/tile_7m.png"); }
.mj-tile[data-tile='8m'] { background-image:url("../images/mahjong/tile_8m.png"); }
.mj-tile[data-tile='9m'] { background-image:url("../images/mahjong/tile_9m.png"); }
.mj-tile[data-tile='1s'] { background-image:url("../images/mahjong/tile_1s.png"); }
.mj-tile[data-tile='2s'] { background-image:url("../images/mahjong/tile_2s.png"); }
.mj-tile[data-tile='3s'] { background-image:url("../images/mahjong/tile_3s.png"); }
.mj-tile[data-tile='4s'] { background-image:url("../images/mahjong/tile_4s.png"); }
.mj-tile[data-tile='5s'] { background-image:url("../images/mahjong/tile_5s.png"); }
.mj-tile[data-tile='6s'] { background-image:url("../images/mahjong/tile_6s.png"); }
.mj-tile[data-tile='7s'] { background-image:url("../images/mahjong/tile_7s.png"); }
.mj-tile[data-tile='8s'] { background-image:url("../images/mahjong/tile_8s.png"); }
.mj-tile[data-tile='9s'] { background-image:url("../images/mahjong/tile_9s.png"); }
.mj-tile[data-tile='zhong'] { background-image:url("../images/mahjong/tile_zhong.png"); }
.mj-tile[data-tile='fa'] { background-image:url("../images/mahjong/tile_fa.png"); }
.mj-tile[data-tile='bai'] { background-image:url("../images/mahjong/tile_bai.png"); }
.mj-tile[data-tile='north'] { background-image:url("../images/mahjong/tile_north.png"); }
.mj-tile[data-tile='east'] { background-image:url("../images/mahjong/tile_east.png"); }
.mj-tile[data-tile='south'] { background-image:url("../images/mahjong/tile_south.png"); }
.mj-tile[data-tile='west'] { background-image:url("../images/mahjong/tile_west.png"); }
        
#newTilePanel { flex: 0 0 28%;/*background-color: #fff2f2 !important; border: 2px solid #ff7878;*/ }
@media handheld, screen and (max-width:768px) {
  #newTilePanel { flex: 0 0 100%; }
}


button { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background 0.2s; }
.btn-primary { background: #2d7dcc; color: #fff; }
.btn-primary:hover { background: #2066aa; }
.btn-win { background: #27ae60; color: #fff; }
.btn-win:hover { background: #219653; }
.btn-draw { background: #e74c3c; color: #fff; margin-left: 10px; }
.btn-draw:hover { background: #c0392b; }
.btn-skip { background: #666666; color: #fff; margin-left:10px; }
.btn-skip:hover { background: #444444; }
.btn-sort { background: #9b59b6; color: #fff; margin-top: 8px; }
.btn-sort:hover { background: #804399; }
.btn-gang { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); padding: 2px 8px; font-size: 11px; line-height:20px; background:#8e44ad; color:#fff; white-space:nowrap; z-index: 99; pointer-events: auto; cursor: pointer; }
.btn-gang:disabled { background: rgb(170, 170, 170); cursor: not-allowed; }
.btn-panel-gang { background:#8e44ad; color:#fff; margin-bottom:12px; }
.btn-panel-gang:hover { background:#713691; }
/*#confirmDiscardBtn { position:absolute; right:-50px; }*/
#confirmDiscardBtn:disabled { background: #bbbbbb; cursor: not-allowed; }

.loading { color: #2d7dcc; font-weight: bold; }

.fan-detail-block { text-align:left; }
.total_fan { font-weight:bold; }   
.btn-expand-detail { cursor:pointer; }