/* color and fonts */
body, html, body html, html body { font-family: 'Montserrat', '\5FAE\8EDF\6B63\9ED1\9AD4', 'Microsoft JhengHei', Helvetica, Arial, sans-serif !important; font-size:13px; /*background-color: #FFFFFF; color:#000000;*/ min-width:320px; background: #f8f7f4; overflow-x:hidden; /* for select2 horizontal scroll fix */ padding:0px!important;} /* 20220322 */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { /*color: #000000;*/ }

html .pace .pace-progress { z-index:6000; }

/* 20231227 replace and add  code start */
html body.public-site.upload_photo_page { overflow-x:initial; position:relative; height:auto; }


/* login page */
#login_page .app-content { background-color: #ffffff;}
/*#login_page .app-content { background-color: #F8F8F8;}*/
.bg_login { background: url("../../app-assets/images/runner.jpg") no-repeat; background-size:auto 100%; }
.bg_login h1 { text-shadow: 2px 2px 6px #000000; }
.login-logo { width:200px; height:auto; }

.auth-wrapper .auth-bg { background-color: #ffffff; }
/*.auth-wrapper .auth-bg { background-color: #f8f7f4; }*/

/* 20231227 replace and add  code end */


#logo { width:150px; }
.auth.vertical-layout.vertical-menu-modern.menu-collapsed .app-content, .vertical-layout.vertical-menu-modern.menu-collapsed .footer { margin-left:0 !important; }
.text-right { text-align:right; }

/* header footer */
.horizontal-menu .header-navbar { background: #000000; }
.header-navbar { font-family: 'Montserrat', '\5FAE\8EDF\6B63\9ED1\9AD4', 'Microsoft JhengHei', Helvetica, Arial, sans-serif !important; z-index:500; /*background-color:#ffffff;*/ font-size:14px; width:100%; height:62px; min-height:62px;}
.header-navbar.navbar-shadow { box-shadow: 0 4px 10px 0 rgb(155 155 155 / 10%); }
.horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand { height:62px; }
.navbar-brand { margin:0px; }
.brand-logo { background: url(../../app-assets/images/logo/logo_fullname_white.png) no-repeat; height:62px; width:140px; background-size: contain; background-position:center; margin:0px auto; }
*{ scroll-behavior: smooth; }


/* 20240116 **/

hr {
  border-top: 1px solid #dcdae1;
}

/* menu */


/* 20220302 **/

/**
.navbar-header.border-bottom.expanded:before {
  content: "";
  background-image: linear-gradient(rgba(5, 49, 100, 0.2) 30%, rgb(5, 49, 100, 0.2) 50%, rgb(5, 49, 100, 0.7) 70%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color:#000001
}**/


/* 20220325 */

.category_group label input[type="radio"]:checked ~ span img {
  filter: invert(1);
}

.public-site ul.navigation.navigation-main {
  background: white !important;
  padding: 15px 0px;
}


.public-site #user_left_menu .main-menu .navigation > li.active > a {
  background: rgba(88, 243, 167, 0.12);
  border-radius: 0px;
  border-right: 5px solid #58f3a7;
}

.public-site .menu-title {
  margin-left: 12px;
}


.event_details .card-footer{
  height: 45px;
}

/* 20220325 end */


/*20220322 */

.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;
}

.event_details .table_actions:hover{
  background: #58f3a7 !important;
  transition: 0.2s;
}

.event_details .btn_notification {
  color:#ffffff; margin:auto; background:#000001!important; position:absolute; top:0px; right:40px; height:100%; padding:12px; border-right:1px solid #ffffff;
  width:40px;

}

.event_details .btn_notification:hover{
  background: #58f3a7 !important;
  transition: 0.2s;
}

.event_details .btn_notification .badge.badge-up {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 1rem;
  min-height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  line-height: 0.5;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
/*.icon_small{
  width: 18px;
  height: 18px;
  display: inline-block;
}*/
.event_details .btn_upload:hover {
  background: #58f3a7 !important;
  transition: 0.2s;
}


.event_details .btn_close {
  color:#ffffff; margin:auto; background:#000001!important; position:relative; top:0px; left:0px; height:100%; padding:12px; width:45px;
}

.event_details .btn_close:hover{
  background: #29c76f !important;
  transition: 0.2s;
}

/* end 20220322 */

/*20220310*/

.content-header{
  display:none !important;
}

a#dropdown-flag .feather.feather-chevron-down {
  width: 10px;
  height: 10px;
}

.dropdown-menu{
  right: 1px;
  left: inherit;
  min-width: 14rem;
}

.icon_event_setting{
  width: 30px;
  height: 30px;
  margin: 0 5px;
  display: inline-block;
}

a#dropdown-flag .feather {
  height: 20px;
  width: 20px;
}

#dropdown-flag i, #dropdown-flag span{
  display:inline !important;
}

#dropdown-flag .feather{
  margin-bottom:2px;
}

a.nav-link.nav-menu-main.menu-toggle{  /* 20220310 */
  display:none;
  }

.header-navbar .navbar-container ul.navbar-nav li a.dropdown-user-link img {
  box-shadow: none;
}
/* step in menu */
.menu-collapsed .navigation-main span.step{
  left: 10px;
  top: 7px;
  width: 15px;
  height: 15px;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  background-color: #eee;
  border-radius: 50%;
  margin-right: 10px;
  z-index: 10;
  line-height: 15px;
  position: absolute;
}

.menu-collapsed .navigation-main .step svg {
  width: 9px;
  height: 9px;
}

.menu-expanded .navigation-main span.step{
  width: 25px;
  height: 25px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  background-color: #eee;
  border-radius: 50%;
  margin-right: 10px;
  z-index: 10;
  line-height: 24px;
  position: absolute;
  right: 0px;
  top: 14px;
}

ul.navigation.navigation-main.pt-1.pb-1.border-bottom.step-box {
  padding: 0px !important;
}

.navigation-main.step-box li{
  position:relative;
  z-index: 10;
}
.menu-collapsed .navigation-main.step-box li:after{
  content: "1";
  text-indent:-9999px;
  position: absolute;
  color:#eee;
  /*border: 1px dashed #d9d7e3;*/
  background: 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-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  height: 12px;
  width: 12px;
  display: inline-block;
  left: 24px;
  top: -6px;
  background-size:100% auto;
  background-repeat: no-repeat;
}

.menu-expanded .navigation-main.step-box li:after{
  content: "1";
  text-indent:-9999px;
  position: absolute;
  color:#eee;
  /*border: 1px dashed #d9d7e3;*/
  background: 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-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  height: 12px;
  width: 12px;
  display: inline-block;
  right: 17px;
  top: -6px;
  background-size:100% auto;
  background-repeat: no-repeat;
}


.navigation-main.step-box li:first-child:after{
  display:none;
}


.navigation-main span.step.done{
  background: #58f3a7;
  color: white;
;}

/* end 20220310 */

.event-menu-overlay{
  background-image: linear-gradient(rgba(5, 49, 100, 0.2) 30%, rgb(5, 49, 100, 0.2) 50%, rgb(5, 49, 100, 0.7) 70%);
  width: 100%;
  height: 100%;
  padding: 20px 20px 20px 20px;
}
.event-menu h4{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.event-menu h4, .event-menu small {
  text-shadow: 0 0 3px #022446;

}

ul.nav.navbar-nav.flex-row.event-menu {
  position: absolute;
  bottom: 10px;
}
/* end 20220302 **/

/*.horizontal-menu .header-navbar { background: #000001!important; }*/
.horizontal-menu .header-navbar.navbar-fixed { min-width: 320px; /*position:fixed;*/ position:sticky; top:0px; z-index:5200!important; }
.horizontal-menu .horizontal-menu-wrapper { position:static; top:0px; z-index:5300; width:inherit; }
.horizontal-menu .horizontal-menu-wrapper .header-navbar { min-height:62px; }
.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-header { position:relative; display: block; min-width:180px; height:62px; left:0px; margin-left:0px; }
.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container { padding:0px; height: inherit!important; }
.horizontal-menu .navbar.header-navbar .navbar-container { padding:0px; max-width:1400px; margin:auto; }
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li { padding-top: 0px; padding-bottom: 0px; display:table-cell; vertical-align:middle; }
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a { height:62px; line-height:62px; border-radius: 0px; display:block; vertical-align: middle; margin:0px; padding:0px 25px; }
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a:hover { border-radius:0px; background-color:rgba(255, 255, 255, 0.2); }
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover > a { border-radius:0px; background-color:rgba(255, 255, 255, 0.2); }


.horizontal-menu .header-navbar .navbar-container { border-radius: 0rem; }


.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a { background:#58f3a7!important; box-shadow: 0px 0px 6px 1px rgb(115 103 240 / 0%); border-radius: 0px; }  /* 20220310 */
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a { color: #000000; }
.header-navbar .navbar-container ul.navbar-nav li a.dropdown-user-link .user-name { margin-bottom:0rem!important; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user { height:62px; padding:0px 15px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu { width:auto!important; /*width:100%!important;*/ margin-top:0px; border-radius:0px; padding:0px; border: 1px solid #eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item { padding: 1.5rem 1.5rem; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item i { margin-right:12px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:hover { /*color:#000001; background-color:#eeeeee;*/ }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:active { /*color:#000001; background-color:#eeeeee;*/ }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:focus { /*color:#000001; background-color:#eeeeee;*/ }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-divider { margin: 0px; }

.header-navbar .navbar-container ul.navbar-nav li.dropdown-language { height:62px; padding:0px 15px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu { width:100%!important; margin-top:0px; border-radius:0px; padding:0px; min-width:inherit; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .selected-language { line-height:62px; display:block!important; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item { padding: 1.5rem 1.5rem; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item i { margin-right:12px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item:hover { color:#000001; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item:active { color:#000001; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item:focus { color:#000001; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-divider { margin: 0px; }

#menu { height:62px; background-color:#000000; }
/*#menu .nav-link { line-height:72px; padding:0px 20px!important; margin:0px!important; }*/
#menu .navbar-nav { margin: 0; flex-flow: row wrap; }


@media (max-width:991.9px) {
  .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a { padding:0px 15px; }
  .header-navbar .navbar-container ul.navbar-nav li.dropdown-language { padding: 0px 7px 0 7px; }
  .header-navbar .navbar-container ul.navbar-nav li.dropdown-user { padding:0px 0px 0px 0px!important; }
}

@media (min-width: 768px){
  #menu { flex-flow: row nowrap; justify-content: flex-start; }
  #menu {  flex-direction: row; }
}
#menu { position: relative; display: flex; align-items: center; }

@media (max-width:400px) {
.upload_text { display:none; }
}

.header-navbar .navbar-container ul.navbar-nav li > a.nav-link { color: #ffffff; }

#user_menu { position:absolute; right:15px; }
#menuToggle { top:0px; left:0px; -webkit-user-select: none; user-select: none; }
#menuToggle input { display: none; }
.header-navbar .navbar-container ul.navbar-nav li > a.nav-link { height:62px; }

@media (max-width:767.9px) {

/* hamburger menu */
/*#menuToggle:before { content: "\e88f"; font-size:2rem; font-family: feather!important; font-style: normal; font-weight: 400; line-height:62px; width:62px; text-align: center; display:block; color: #ffffff; } */

/* 20220310 */
#menuToggle:before { content:"1"; text-indent:-9999px; display:inline-block; width:28px; height:28px; color:#000001; position: relative; top:16px; left:72px; background-image: url("data:image/svg+xml,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'><g><polygon class='st0' points='14.5,13.2 5,13.2 5.8,11.8 15.3,11.8 	'/></g><g><polygon class='st0' points='17.9,6.9 5,6.9 5.8,5.5 18.7,5.5 	'/></g><g><polygon class='st0' points='17.9,19.5 5,19.5 5.8,18.2 18.7,18.2 	'/></g></svg>"); background-size:100% auto; filter: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }


/*end 20220310 */


#menuToggle input { display: block; width:52px; height: 62px; position: absolute; top:0px; left:60px; margin: 0px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }
#menuToggle input:checked { width:100%; height: 100%; z-index:4000; display:block; position: fixed; top:0px; left:0px;}

#menu { z-index:5000!important; position: fixed; left:0px; top:0px; margin:0px; width:200px; height:100%; padding: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.0);
	-o-transform-origin: 0% 0%;
	-o-transform: translate(-100%, 0px);
	-o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-ms-transform-origin: 0% 0%;
	-ms-transform: translate(-100%, 0px);
	-ms-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-moz-transform-origin: 0% 0%;
	-moz-transform: translate(-100%, 0px);
	-moz-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	-webkit-transform-origin: 0% 0%;
	-webkit-transform: translate(-100%, 0px);
	-webkit-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu .nav-link { line-height:50px; padding: 0px 25px!important; }
#menu li { float:none; width:100%; padding: 0px!important; margin:0px!important; background-repeat:no-repeat; background-position: left center; cursor:pointer; text-align:left; white-space: nowrap; }
#menu li a { width:100%; margin:0px!important; padding: 0px!important; }
#menuToggle input:checked ~ #menu { transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }

#menuToggle .menu-overlay { position: fixed; top: 0; left: 0; right: 0; height: 120vh; background-color: rgba(34, 41, 47, 0.5); z-index: 997; display: block; visibility: hidden; opacity: 0; transition: all 0.5s ease; }
#menuToggle input:checked ~ .menu-overlay { display:block; opacity:1; visibility: visible; width:100%; height:100%; }

.header-navbar .navbar-container .show .dropdown-menu { left:inherit!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: 6000; }
.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); }
}

/* left menu */

.main-menu { margin-top:62px; height:calc(100vh - 62px); /*z-index:3000!important;*/ }
.main-menu .navbar-header { height:137px; width: 260px; padding:0;} /*20220302*/

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu { width: 54px; }
.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-header.border-bottom { display:none; }
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header.border-bottom { display:block; }
.main-menu .event_title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 210px; }
.main-menu.menu-native-scroll .main-menu-content { overflow-y:auto!important; height: calc(100% - 137px)!important; }
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.menu-native-scroll .main-menu-content { overflow-y:hidden!important; height:100%!important; }
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-native-scroll .main-menu-content { overflow-y:auto!important; height: calc(100% - 137px)!important; }
.main-menu ul.navigation-main { padding-bottom: 0rem; }
.main-menu ul.navigation-main > li:first-child { margin-top:0rem; }
.main-menu .navigation { font-size:13px; }
.main-menu.menu-light .nav-item > a:hover { background-color:#eeeeee; }
.main-menu.menu-light .navigation > li > a { margin: 0px; padding: 12px 20px 12px 20px; } /* 20220322 */
.main-menu.menu-light .navigation > li.active > a { background:#F8F8F8; box-shadow:none; color:#000000; border-radius:0px; }
.main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a, .main-menu.menu-light .navigation > li.sidebar-group-active > a { background:transparent; border-radius: 0px; }
.main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a:hover, .main-menu.menu-light .navigation > li.sidebar-group-active > a:hover { background-color:#eeeeee; }
.main-menu.menu-light .navigation > li > ul li:not(.has-sub) { margin: 0px; }
.main-menu.menu-light .navigation > li > ul li:first-of-type { margin-top:0px !important; }
.main-menu.menu-light .navigation > li > ul li a { padding: 10px 30px 10px 35px; }
.main-menu.menu-light .navigation > li > ul li a:hover { background-color:#eeeeee; }

.main-menu.menu-light .navigation > li ul .active { background: linear-gradient(118deg, #7367F0, rgba(115, 103, 240, 0)); border-radius:0px; z-index: 1; background:#F8F8F8; color:#000000; box-shadow:none; }
.main-menu.menu-light .navigation > li ul .active > a { color: #000000; }

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:after { top:18px; }
.vertical-layout .header-navbar .navbar-container ul.navbar-nav li.dropdown .dropdown-menu { top: inherit!important; }

.vertical-layout .content-header { display:none; }
.vertical-layout .content-header .menu-toggle { color: #58f3a7!important; }
.vertical-layout .content-header .menu-toggle svg { width:22px; height:22px; vertical-align:top; margin-top:3px; }
.vertical-layout .modern-nav-toggle { /*display:none!important;*/  position:absolute; right:10px; top:5px; color: #ffffff; }
.vertical-layout .modern-nav-toggle:hover { color: #ffffff; }
.vertical-layout .nav_close { position:absolute; right:10px; top:5px; }
.vertical-layout .nav_close .modern-nav-toggle { display:block!important; }

.vertical-layout.menu-open .sidenav-overlay { opacity:1; visibility: visible; width:100%; height:100%; z-index:1000; } /* 20220310 */



.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a svg, .vertical-layout.vertical-menu-modern .main-menu .navigation > li > a i { position:relative; top:-2px; width:19px; height:19px; }

.main-menu.menu-light .navigation > li > a i, .main-menu.menu-light .navigation > li > a svg { position:relative; top:-1px; width:19px; height:19px; }


@media (max-width: 1199.98px) {
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu { width:260px; }
.vertical-layout .content.app-content { margin-left:0px!important; }
.vertical-layout .content.app-content .content-header { position:fixed; top:62px; left:0px; display:block; width:100%; background-color:#ffffff; padding:10px; z-index:10; box-shadow: 0 4px 20px 0 rgb(0 0 0 / 3%); }
.vertical-layout .content.app-content .content-header .content-header-left { margin:0px!important; }
.vertical-layout .content.app-content .content-header .menu-toggle { display:inline-block; }
.vertical-layout .content.app-content .content-header { display:block; }
.vertical-layout .content.app-content .content-body { margin-top:0px; }

a.nav-link.nav-menu-main.menu-toggle{  /* 20220310 */
  display: block;
  line-height: 53px;
  border-left: 1px solid #e8e7eb;
  border-right: 1px solid #e8e7eb;
  width: 53px;
  position: fixed;
  top: 0px;
  z-index: 10000;
  left: 180px;
  background:white;
}

.no-left-menu a.nav-link.nav-menu-main.menu-toggle{
  display:none !important;
}

.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container {
  margin-left: 53px;
}
.no-left-menu.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container {
  margin-left: 0;
}

}

@media (max-width: 767.98px) {
.main-menu { transform: translate3d(-260px, 0, 0); }

/* 20220310 */

.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container {
  margin-left: 0px;
}

a.nav-link.nav-menu-main.menu-toggle{
  z-index:0;
  left:114px;
}

.vertical-layout.menu-open .sidenav-overlay{
  z-index:10000;
}
#menuToggle{
  left:60px;
}

.vertical-overlay-menu.menu-open .main-menu {
  z-index: 100000;
  margin-top: 0px;
  height: 100vh;
}

a.sm-logo {
  background-color: #57f3a7;
  width: 60px;
  position: fixed;
  height: 62px;
  display: inline-block;
  top: 0px;
  left: 0px;
}


/* end 20220310 */


}



/* center card */
.center_card { background-color:#f1f9ff; padding-top:50px; padding-bottom:60px; }
.center_card .form-control { background-color:transparent; border:0px; border-bottom:1px solid #000000; border-radius:0px; padding:0px; }
.center_card .form-control:focus:valid, .form-control:focus.is-valid { box-shadow: 0 3px 10px 0 rgb(34 41 47 / 0%); }

/* breadcrumb */
.breadcrumbs-top .content-header-title { border-right: 0px solid #D6DCE1!important; }
.breadcrumb { border-left: 1px solid #D6DCE1; margin-top: 5px; padding: 0.45rem 1rem 0.3rem 1rem; }

/* content area */
html .blank-page .content.app-content { background-color: #ffffff; }
html body .content.app-content, footer { min-width:320px; }
html body .content { margin-left:0px; min-height:100%; }
html body .content .content-wrapper { /*max-width:1280px; padding:40px 5vw; margin:0 auto;*/ }
html .content.app-content { /*padding: 62px 0px 0px 0px;*/ padding:0px; }
html .content.app-content.fixed_footer { padding: 62px 0px 72px 0px; }
.card-body { padding:15px; }

html body.vertical-layout .content.app-content { margin-left:260px; }

.btn_language_version svg { color:#58f3a7!important; width: 22px; height: 22px; vertical-align: top; margin-top:8px; }


@media (max-width: 575.98px) {
html body .app-content { /*padding: 62px 0px 0px 0px!important;*/ padding:0px!important; }
html .content.app-content.fixed_footer { padding: 62px 0px 72px 0px!important; }
}

/* search panel */
.search_panel { margin:10px 0px 30px 0px; }


/* table style */
.table th, .table td { border-top: 1px solid #ebe9f1; }

.table-striped tbody tr:nth-of-type(odd) { background-color: #f8f8f8; }
.table-striped tbody tr:nth-of-type(even) { background-color: #ffffff; }
.table:not(.table-dark):not(.table-light) thead:not(.thead-dark) th, .table:not(.table-dark):not(.table-light) tfoot:not(.thead-dark) th { background-color:transparent; }

.product_image { margin: 0px; padding: 0px; cursor: pointer; width: 80px; height: 80px; display: flex!important; overflow: hidden; position: relative; justify-content: center; align-items: center; }
.product_image img { width: auto; height: auto; flex-shrink: 0; min-width: 100%; min-height: 100%; max-width:80px; object-fit: cover; }


/* table action dropdown */
.table_actions .dropdown-menu { padding:0px; border-radius:0px; animation-duration: 0.3s; animation-fill-mode: both; animation-name: fadeIn; left: -10px!important; z-index:100; }
.table_actions .dropdown-menu .dropdown-item { padding: 1rem 1rem; }
.table_actions .dropdown-menu .dropdown-item:hover { color:#000001; background-color:#eeeeee; }
.table_actions .dropdown-menu .dropdown-item:active { color:#000001; background-color:#eeeeee; }
.table_actions .dropdown-menu .dropdown-item:focus { color:#000001; background-color:#eeeeee; }
.table_actions .dropdown-menu .dropdown-divider { margin: 0px; }
.table thead th, .table tfoot th { text-transform:inherit; }
.table_actions .dropdown-toggle { height:100%; width:100%; }
.table_actions .dropdown-toggle svg { color:#000001; width:22px; height:22px; }
.table_actions .dropdown-toggle::after { content:''; display:none; }

/* card action dropdown */
.card_actions .dropdown-toggle svg { color: #000000; width: 22px; height: 22px; }
.card_actions .dropdown-menu { padding:0px; border-radius:0px; }

.card_actions.dropup .dropdown-toggle::before { width:0px!important; height:0px!important; content:none;}
.card_actions.dropup .dropdown-toggle::after { width:0px!important; height:0px!important; content:none;}

.action_col svg { color: #000001; width: 22px; height: 22px; }

/* data table */

.table-responsive { min-height: 300px; overflow-y: hidden; overflow-x: auto!important; display:block; }
.table-responsive.grid_view { display:table; }

div.dataTables_wrapper { padding-bottom:0px; display: block; width: 100%; overflow-y:inherit; overflow-x: inherit; /*-webkit-overflow-scrolling: touch;*/ }
.dataTables_wrapper .dt-buttons { display:none; }
.dataTables_wrapper .dataTables_filter { display:none; }

@media (max-width: 1280px) {
div.dataTables_wrapper { /*padding-bottom:0px; display: block; width: 100%; min-height: 300px; overflow-y:hidden; overflow-x: auto;*/ /*-webkit-overflow-scrolling: touch;*/ }
.table-responsive { /*min-height: 300px;*/ overflow-y: hidden; overflow-x: auto!important; display:block; }
}

.table_bottom_btn { margin-top:15px; }

table.dataTable { margin-top: 0px !important; margin-bottom: 0px !important; /*border-collapse: separate !important;*/ }
table.dataTable td, table.dataTable th { padding: 15px 15px!important; vertical-align: middle; /*height:40px;*/ min-width:30px; }
table.dataTable thead tr th { background-color: #eeeeee!important; border-top: 0px solid #ebe9f1; border-bottom: 0px solid #ebe9f1; }
.table th, .table td { padding: 5px 5px; vertical-align: top; }
.table thead th, .table tfoot th { font-size:inherit; letter-spacing:inherit; }
.table thead th { border-bottom: 1px solid #ebe9f1; height:inherit; }
table.dataTable td.image_col img { height:70px; width:auto; }
table.dataTable td.image_col { width: 100px; padding:0px!important; }
table.dataTable th.check_col, table.dataTable td.check_col { white-space: nowrap; width:10px; padding-left:20px!important; padding-right:0px!important; }
table.dataTable th.drag_col, table.dataTable td.drag_col { white-space: nowrap; width:10px; padding-left:20px!important; padding-right:0px!important; }
table.dataTable th.action_col, table.dataTable td.action_col { white-space: nowrap; width:10px; padding-left:0px!important; padding-right:20px!important; }
table.dataTable th.avatar_col, table.dataTable td.avatar_col { white-space: nowrap; width:10px; padding:0px!important; }


table.dataTable td.break_col { word-break: break-word !important; word-wrap: break-word !important; min-width:60px; }

table.dataTable th.action_col .dropdown, table.dataTable td.action_col .dropdown { /*z-index:2!important;*/ }

/* fixed column */
table.dataTable thead th.dtfc-fixed-left { background-color:#f8f8f8!important; z-index:1!important; }
table.dataTable thead th.dtfc-fixed-right { background-color:#f8f8f8!important; /*z-index:1!important;*/ }
.public-site table.dataTable thead th.dtfc-fixed-left { background-color:#fff!important; z-index:1!important; } /* 20220327  */
.public-site table.dataTable thead th.dtfc-fixed-right { background-color:#fff!important; /*z-index:1!important;*/ }  /* 20220327  */
table.dataTable td.dtfc-fixed-left { background-color:#ffffff!important; /*z-index:1!important;*/ -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
table.dataTable td.dtfc-fixed-right { background-color:#ffffff!important; /*z-index:1!important;*/ -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
table.dataTable tbody tr:hover td.dtfc-fixed-left { background-color: #f9f9f9!important; }
table.dataTable tbody tr:hover td.dtfc-fixed-right { background-color: #f9f9f9!important; }


table.dataTable tbody tr { background-color: #FFFFFF; /*box-shadow: rgb(0 0 0 / 5%) 0 4px 20px 0;*/ -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 0rem; }
table.dataTable tbody tr:hover { background-color: #f9f9f9; }
/*table.dataTable { border-spacing: 0 1rem; padding: 0rem; overflow-y: hidden; overflow-x: inherit; display: table; }*/
table.dataTable { border-spacing: 0 1rem; padding: 0rem; }

/*@media (max-width: 1280px) {
table.dataTable { overflow-x: auto; display: block; }
table.dataTable thead { width:100%; }
table.dataTable tbody { width:100%; }
}*/

/*.action_col a { white-space: nowrap; width:auto; padding-left:10px; margin-left:10px; border-left:1px solid #cccccc; }
.action_col a:first-child { padding-left:0px; margin-left:0px; border-left:0px solid #cccccc; }*/

/* sorting */
table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting { padding-right: 20px; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before { font-size:12px; left:inherit; right:10; top:15px; bottom:inherit; opacity:0.5; display:none; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after { font-size:12px; left:inherit; right:10; top:21px; bottom:inherit; opacity:0.5; }
/*table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-color:#dadada!important; }*/
table.dataTable thead .sorting:hover:after, table.dataTable thead .sorting_asc:hover:after, table.dataTable thead .sorting_desc:hover:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after { opacity:0.7; }
table.dataTable thead .sorting_asc:before { content:""!important; }
table.dataTable thead .sorting_desc:before { content:""!important; }
table.dataTable thead .sorting_asc:after { content:""!important; background-image:none; }
table.dataTable thead .sorting_desc:after { content:""!important; background-image:none; }
table.dataTable thead .sorting_asc span:before { content:""; }
table.dataTable thead .sorting_desc span:before { content:""; }
table.dataTable thead .sorting_asc span:after { margin-left:6px; content:"1"; text-indent:-9999px; display:inline-block; width:18px; color:#58f3a7; position: relative; top: 1px; 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'><polyline points='17 11 12 6 7 11'></polyline><polyline points='17 18 12 13 7 18'></polyline></svg>"); background-size:100% auto; filter: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }
table.dataTable thead .sorting_desc span:after { margin-left:6px; content:"1"; text-indent:-9999px; display:inline-block; width:18px; color:#58f3a7; position: relative; top: 1px; 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'><polyline points='7 13 12 18 17 13'></polyline><polyline points='7 6 12 11 17 6'></polyline></svg>"); background-size:100% auto; filter: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { display:none; }

table.data-list-view.dataTable, table.data-thumb-view.dataTable { border-spacing: 0 1rem; padding: 0rem; }

table.data-list-view.dataTable thead th:first-child, table.data-thumb-view.dataTable thead th:first-child { padding-left:1rem; }

table.data-list-view.dataTable tbody tr, table.data-thumb-view.dataTable tbody tr { border-radius: 0rem; }
table.data-list-view.dataTable tbody tr td:first-child, table.data-thumb-view.dataTable tbody tr td:first-child {
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;
}
table.data-list-view.dataTable tbody tr td:last-child, table.data-thumb-view.dataTable tbody tr td:last-child {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

.grid_view table { display: block; border-collapse: separate; }
.grid_view table thead { padding: 0px; background: #F8F8F8; display: block; }
.grid_view table thead tr { position: relative; padding: 0px; display: inline-block; /*background-color: #F8F8F8;*/ border: 0px; width: 100%; vertical-align: top; white-space: nowrap; }

/*.grid_view table thead tr { display:block;  }*/

.grid_view table tbody { display: table; border-bottom: 0px; margin-left:-0.7%; margin-right:-0.7%;}
.grid_view table tbody tr { position: relative; padding: 0px; display: inline-block; background-color: #ffffff; border-top: 0px solid #e5e6e7; width: 23.6%; margin-left:0.7%; margin-right:0.7%; margin-bottom:1rem; vertical-align: top; }
.grid_view table tr { border-top: 0px; }
.grid_view table>tbody>tr>td { display: inherit!important; width: 100%; padding: 0px; border-bottom: 0px solid #e5e6e7; border-top: 0px solid #e7eaec; }
.grid_view table tbody td.check_col { display: none!important; position: absolute; top: 14px; left: 14px; width: 24px; height: 24px; box-sizing: border-box; padding: 0px!important; z-index: 10; }
.grid_view table .check_col .myCheck span.details_input { margin-top: 0px; }
.grid_view table td { text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; height:auto; }
.grid_view table tbody tr { /*padding: 15px;*/ /*border-left:1px solid #e7eaec;*/ /*padding-left: 0.5rem; padding-right: 0.5rem; margin-bottom: 1rem;*/ }
.grid_view table td.image_col img { height:auto; width:100%; }
/*.grid_view table tbody tr:last-child:not { padding: 15px; border-left:1px solid #e7eaec; }*/

.grid_view table tbody tr:hover { background-color: rgba(34, 41, 47, 0.075); }
.grid_view table tbody tr:hover td.check_col { display: block!important; }


@media (max-width: 991.98px) {
.grid_view table tbody tr { width: 31.3%; margin-left:1%; margin-right:1%; }
}
/*@media (max-width: 767.98px) {
.grid_view table tbody tr { width: 31.3%; margin-left:1%; margin-right:1%; }
}*/
@media (max-width: 575.98px) {
.grid_view table tbody tr { width: 47%; margin-left:1.5%; margin-right:1.5%; }
}


/* check box column */

.grid_view table tbody tr.selected td.check_col { display: block!important; }
.grid_view table tbody tr.selected td.check_col { padding-top: 10px; }
.grid_view table tbody tr td { padding-bottom: 5px; }
.grid_view table tbody tr td.action_col { padding:20px!important; padding-top:0px!important; width:100%; }
.grid_view table tbody tr:hover td.sorting_1 { background-color: transparent; }

/* datatable sorting style for grid view */

.grid_view table thead .sorting_asc, .grid_view table thead .sorting_desc { background-color: #dadada; /*border-bottom: 1px solid #f0f0f0;*/ }
.grid_view table tbody tr td.sorting_1 { background-color: transparent; }
.grid_view table tbody tr.selected td.sorting_1 { background-color: transparent; }
.grid_view table thead .sorting, .grid_view table thead .sorting_asc, .grid_view table thead .sorting_desc { border-bottom: 0px; white-space: nowrap; float: left; }
.grid_view table thead th.sorting_disabled { display: none; }
.grid_view .lightgallery a { display: flex; overflow: hidden; position: relative; height: 150px; justify-content: center; align-items: center; }
.grid_view .media_thumb { width: auto; height: auto; flex-shrink: 0; min-width: 100%; min-height: 100%; max-width: 100px; object-fit: cover; }
.grid_view table.empty tbody { display: block; }
.grid_view table.empty tbody tr { width: 100%!important; padding: 0.75rem; }
.grid_view table.empty tbody tr td { padding: 0px; }


/* dragable */
tr.gu-mirror { display:table; background-color: #FFFFFF; box-shadow: rgb(0 0 0 / 5%) 0 4px 20px 0; border-radius: 0rem; }
tr.gu-mirror td { padding: 15px 20px!important; vertical-align: middle; height: 40px; }
tr.gu-mirror td.drag_col { white-space: nowrap; width: 10px; padding-right: 0px!important; }
tr.gu-mirror td.action_col { white-space: nowrap; width: 10px; padding-left: 0px!important; }
.drag_handle { touch-action:none; }
.drag_handle:hover { cursor:move; }
tr.gu-mirror td.image_col { padding:0px!important; }
tr.gu-mirror td.image_col img { height:70px; width:auto; }



/* customize table */

@media (max-width: 560px) {

table#ticket_table { display:block; width:100%; }
table#ticket_table thead { display:none; }
table#ticket_table tbody { width:100%; display:block; }
table#ticket_table tr { width:100%; display:block; position:relative; margin-bottom:20px; padding:5px; }
table#ticket_table tr td { display:inline-block; width:100%; height:auto; padding:10px!important; box-sizing:border-box; vertical-align:top; }
table#ticket_table tr td:nth-child(1) { position:absolute; top:4px; left:5px; width:auto;  }
table#ticket_table tr td:nth-child(2) { padding-bottom:0px!important; padding-left:34px!important; padding-right:40px!important; font-weight:bold; }
table#ticket_table tr td:nth-child(3) { width:32%; }
table#ticket_table tr td:nth-child(4) { width:32%; text-align:center;}
table#ticket_table tr td:nth-child(5) { width:32%; text-align:right; padding-right:0px!important; }
table#ticket_table tr td:nth-child(6) { position:absolute; top:5px; right:5px; width:auto; }

/* dragable table for ticket table */
tr.ticket_table_row.gu-mirror { width:100%; display:block; position:relative; margin-bottom:20px; padding:5px; }
tr.ticket_table_row.gu-mirror td { display:inline-block; width:100%; height:auto; padding:10px!important; box-sizing:border-box; vertical-align:top; }
tr.ticket_table_row.gu-mirror td:nth-child(1) { position:absolute; top:4px; left:5px; width:auto;  }
tr.ticket_table_row.gu-mirror td:nth-child(2) { padding-bottom:0px!important; padding-left:34px!important; padding-right:40px!important; font-weight:bold; }
tr.ticket_table_row.gu-mirror td:nth-child(3) { width:32%; }
tr.ticket_table_row.gu-mirror td:nth-child(4) { width:32%; text-align:center;}
tr.ticket_table_row.gu-mirror td:nth-child(5) { width:32%; text-align:right; padding-right:0px!important; }
tr.ticket_table_row.gu-mirror td:nth-child(6) { position:absolute; top:5px; right:5px; width:auto; }

}


/* pagination */

.dataTables_wrapper .dataTables_paginate { width:100%; margin:0px; padding-top:20px; padding-bottom:20px; /*border-left:1px solid #e5e6e7; border-right:1px solid #e5e6e7; border-bottom:1px solid #e5e6e7;*/ 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; /*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: #e5e6e7; -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: #58f3a7; border-color: #58f3a7; -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: #58f3a7; }
/*.pagination .page-item.disabled { display:none; }*/
.pagination .page-item.disabled .page-link { color: #e5e6e7; }
.pagination .page-item.first.disabled .page-link { color: #e5e6e7; }
.pagination .page-item.last.disabled .page-link { color: #e5e6e7; }

.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: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }
.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: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }
.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: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }
.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: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }

.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(100%) sepia(27%) saturate(256%) hue-rotate(175deg) brightness(95%) contrast(91%); }

.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 #e5e6e7; }*/
/*.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; }
}


/* no record handle */

table.dataTable p.no_record { padding:20px 20px 30px 20px!important; margin:0px; }
div.no_record_template { display:none; }
table.dataTable td.dataTables_empty { width:100%; }
table.dataTable.table-hover.empty tbody tr:hover { background-color: #ffffff; }

table.dataTable.empty thead { display:none; }
/*table.dataTable.empty { display:none; }
table.dataTable.empty + .no_record_template { display:block; }*/

/* filter button set */

.filter_set { margin-top:5px; }
.filter_title { font-weight:bold; margin-bottom:10px; }
.filter_button { display: inline-block; margin:0px; padding:0px; }
.filter_button li { cursor:pointer; float:left; list-style: none; margin-right:20px; margin-bottom:10px; }
.filter_button li span { background-color:#000000; color:#ffffff; padding:0px 10px; border-radius:20px; display:inline-block; margin-left:5px; }

/* form */
.form-control { height: 50px; border-radius: 0px; }
input.form-control { height: 50px; border-radius: 0px; }
select.form-control { min-width: 55px; }
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; }

/*.form-group { margin-bottom: 1rem; }*/
/*.form-group .help-block ul { margin-bottom: 0; }*/
.form-control:focus { border-color:#000001; color:#000000; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0); }
.form-control::-webkit-input-placeholder { font-size:1rem; color:#cccccc; }
.form-control::-moz-placeholder { color:#cccccc; }
.form-control:-ms-input-placeholder { color:#cccccc; }
.form-control::-ms-input-placeholder { color:#cccccc; }
.form-control::placeholder { color:#cccccc; }


.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text { border-color:#000001; color:#000000; box-shadow: none; }

/*.input-group { margin-bottom:15px; }
.input-group-text { border-radius: 0px; padding: 0.438rem 0.6rem; }
.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text { border-color:#333333; color:#000000; box-shadow: none; }
*/

.input-group.stepper { display: inline-flex; width: inherit; height:35px; }
.input-group.stepper .form-control { padding:0px; width:44px; flex:none; text-align:center; }
.input-group.stepper .input-group-prepend .btn { padding:0px; width:35px; border-radius: 0; color:white!important; }
.input-group.stepper .input-group-append .btn { padding:0px; width:35px; border-radius: 0; color:white!important; }
.input-group.stepper input { height:35px;}

input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; /*background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important; background-repeat: no-repeat, repeat !important; background-position: right .7em top 50%, 0 0 !important; background-size: .65em auto, 100% !important;*/ /*padding: 0em 1rem;*/ padding: 1.2rem 1rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn, .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}



.form_footer { border-top: 1px solid #eaecee; background-color:#ffffff; position:fixed; padding: 15px 20px; min-height: 72px; transition: 300ms ease all; width:100%; margin-left:0px; left:0px; bottom:0px; z-index:200; text-align:center; display:none; }

.vertical-layout .form_footer { width:calc(100vw - 260px); margin-left:260px; }

@media (max-width: 1199.98px) {
.form_footer { width:100%; margin-left:0px; }
.vertical-layout .form_footer {  width:100%; margin-left:0px; }
}

#order_exist { display:none; }
#custom_data_table_copy { display:none; }


/* 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:#000001 !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: 1rem; font-weight:400; line-height:36px; color: #6e6b7b; background-color: #fff; }
.select2-container--classic .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus { border-color: #000001 !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:#000001; 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: #000001 !important; }
.select2-container--classic .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted { background-color: rgba(7, 46, 117, 0.12) !important; color: #000001 !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:#58f3a7!important; border-color:#58f3a7!important; color: #fff; padding:5px 10px; margin-right:5px; margin-bottom:5px; }

/*.form-group { margin-bottom: 1rem; }*/
/*.form-group .help-block ul { margin-bottom: 0; }
.form-control { border-radius: 0px; height:46px; }
input.form-control { border-radius: 0px; height:46px; line-height:46px; padding: 0.438rem 0.6rem; }
select.form-control { border-radius: 0px; height:46px; line-height:46px; padding:0px 0.6rem; }
.form-control:focus { border-color:#333333; color:#000000; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0); }
.form-control::-webkit-input-placeholder { font-size:1rem; color:#000000; }
.form-control::-moz-placeholder { color:#000000; }
.form-control:-ms-input-placeholder { color:#000000; }
.form-control::-ms-input-placeholder { color:#000000; }
.form-control::placeholder { color:#000000; }

.input-group { margin-bottom:15px; }
.input-group-text { border-radius: 0px; padding: 0.438rem 0.6rem; }
.input-group:not(.bootstrap-touchspin):focus-within .form-control, .input-group:not(.bootstrap-touchspin):focus-within .input-group-text {border-color:#333333; color:#000000; box-shadow: none; }*/



/* buttons */
/*.btn { border-radius:50px; border:0px; }*/
.btn { /*border-radius:4px;*/ border:0px; font-size:13px; font-weight:bold; padding: 18px 40px; }
.btn:hover { box-shadow:none; }
.btn:focus, .btn.focus { outline: 0; box-shadow: 0 0 0 0rem rgba(115, 103, 240, 0.25); }
.btn-primary { /*border-color:#58f3a7!important; background-color:#58f3a7 !important; border:1px solid #58f3a7;*/ border-width:1px; /*color: #fff !important;*/ }
/*.btn-primary:focus, .btn-primary:active, .btn-primary.active { color: #fff; background-color:#58f3a7 !important; }
.btn-primary:hover { border-color:#eb5e00 !important; background-color:#eb5e00 !important; }*/
.btn-primary:hover:not(.disabled):not(:disabled) { box-shadow:none; }
/*.btn-outline-primary { border: 1px solid #58f3a7 !important; background-color: transparent; color: #58f3a7; }
.btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active { color:#fff!important; background-color: #eb5e00 !important; }
.btn-outline-primary:hover { border-color: #eb5e00 !important; background-color: #eb5e00 !important; color:#fff!important; }
.btn-outline-primary:hover:not(.disabled):not(:disabled) { box-shadow:none; }
.btn-info { border-color: #dbeefa !important; background-color: #dbeefa !important; color: #667aa0 !important; }
.btn-info:focus, .btn-info:active, .btn-info.active { color: #667aa0; background-color: #dbeefa !important; }
.btn-info:hover { border-color: #bae4ff !important; background-color: #bae4ff !important; }
.btn-info:hover:not(.disabled):not(:disabled) { box-shadow: 0 0px 0px 0px #dbeefa; }
.btn-success { border-color: #f7d71d !important; background-color: #f7d71d !important; color: #58f3a7 !important; }
.btn-success:focus, .btn-info:active, .btn-info.active { color: #58f3a7; background-color: #f7d71d !important; }
.btn-success:hover { border-color: #fdb900 !important; background-color: #fdb900 !important; }
.btn-success:hover:not(.disabled):not(:disabled) { box-shadow: 0 0px 0px 0px #f7d71d; }

.btn-lg { border:0px; font-size:20px; line-height:20px; padding:20px 60px; }*/

.btn-secondary:hover:not(.disabled):not(:disabled) { box-shadow:none; }



/* data table add on elements */

/* search row */
.search_row { padding:0px 0px 1rem 0px; overflow:hidden; }
.search_row .align-left { float:left; }
.search_row .align-right { float:right; }
.search_row .info_text { height:35px; line-height:35px; display:inline-table; }
.search_row .grid_icon { display:nonex; /*display:inline-block;*/ margin-left:10px; margin-right:0px; }
.search_row .grid_icon .fa:before { font-size:20px; color:#000001; margin-right:5px; position: relative; top: 2px; }
.search_row .grid_icon .view_grid, .search_row .grid_icon .view_list { opacity:0.6; cursor:pointer; }
.search_row .grid_icon .view_grid:hover, .search_row .grid_icon .view_list:hover { opacity:1; }
.search_row .grid_icon .view_grid.selected, .search_row .grid_icon .view_list.selected { opacity:1; }

.search_field { position:relative; display:inline-block; /*height:46px;*/ vertical-align:top; }
.search_field input.form-control { margin:0px; display:inline; border-radius:0px; /*height:46px;*/ padding-right: 46px; padding-left: 15px; }
.search_field input.form-control:focus { border-color:#000001; /*box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);*/ }
.search_field .btn-search-icon { color:#000001; position:absolute; right:0px; top:0px; height:100%; width:46px; background-color:transparent; border-width:0px; margin:0px; color:#999999; outline:none; padding:0px; }
.search_field .btn-search-icon svg { width:22px; height:22px; }

.search_row .add_new { display:inline-block; margin-left:10px; }
.search_row .add_new .btn { height:35px; padding: 0.75rem 2rem; }

.table_search { height:50px; white-space: nowrap; font-size: 13px; font-weight: bold; padding: 16px 20px; }
.table_search_reset { height:50px; white-space: nowrap; font-size: 13px; font-weight: bold; padding: 16px 20px; }

/* export buttons */
.search_row .export_group { display:none; /*display:inline-block;*/ margin-left:10px; padding-left:15px; border-left:1px solid #e5e6e7; }


/* table image + lightgallery */
.media_thumb { width: auto; height: auto; flex-shrink: 0; min-width: 100%; min-height: 100%; max-width: 100px; object-fit: cover; }
.lightgallery.image_hide img { display:none; }

.image_fill { width:100%;  display: flex!important; position: relative; justify-content: center; align-items: center; }
.image_fill img { width:100%; height:100%; flex-shrink: 0; min-width: 100%; min-height: 100%; object-fit: cover;}
.home_event_image { max-height:300px; overflow: hidden; }
.home_event_image img { width:100%; height:auto; }

.album_frame { background-color: #f8f8f8; }
.gallery_image { height:200px; }
.gallery_image img { max-width:100%; max-height:400px;}

.volunteer_image { height:200px; }
.volunteer_image img { max-width:100%; max-height:400px;}


@font-face {
  font-family: 'FontAwesome';
  src: url('../../app-assets/fonts/font-awesome/fontawesome-webfont.eot?v=4.7.0');
  src: url('../../app-assets/fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../../app-assets/fonts/font-awesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../../app-assets/fonts/font-awesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../../app-assets/fonts/font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../../app-assets/fonts/font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


.enlarge_photo { margin:0px; padding:0px; border:2px solid #ffffff; cursor:pointer; width:100%; height:100px; min-height: 120px; z-index: 9; display: flex!important; overflow: hidden; position: relative; justify-content: center; align-items: center; }
.enlarge_photo: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; }
.enlarge_photo: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; }
.enlarge_photo:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
/*.enlarge_photo 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; }*/
.enlarge_photo 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: 100%; height: 100%; flex-shrink: 0; /*min-width: 100%; min-height: 100%; max-width:200px; object-fit: cover;*/ }


.enlarge_photo:hover:before { background-color:rgba(0, 0, 0, 0.4); }
.enlarge_photo:hover:after { opacity:1; }
.enlarge_photo a { width:100%; height:100%; }

.photo_block { display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; align-content:stretch; -webkit-align-content:stretch; justify-content:space-between; -webkit-justify-content: space-between; gap:4px 4px; -webkit-gap:4px 4px; }
.photo_block div { width:auto; flex-grow:1; flex: 1 0 auto; -webkit-flex-grow:1; -webkit-flex: 1 0 auto; }
.photo_block .enlarge_photo { border:0px; }


/* thumb enlarge */
.media_thumb {
 -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); }
.cover_photo { border: 4px solid #76ce76; }


.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 feather; 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; }

.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:6040!important; }
.lg-outer { z-index:6050!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: #333333;*/ 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%; }


/* product modal */
.product_img { width:100%; }
.product_img img { width:100%; height:auto; }


@media (max-width: 991.98px) {
.heading-elements .list-inline { display:block; }

}

.form-group label { font-size: 0.9rem; margin-bottom: 0.2rem;}
.nav.nav-tabs .nav-item .nav-link { font-size: 1rem; }

.row { margin-right: -10px; margin-left: -10px; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { padding-right: 10px; padding-left: 10px; }

@media (max-width: 575.98px) {
.row { margin-right: -10px; margin-left: -10px; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { padding-right: 10px; padding-left: 10px; }
}

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {

}
@media (min-width: 1200px) {

}
@media (max-width: 575.98px) {
.breadcrumb-wrapper { display:none; }
.search_row .align-right { float: none; }
.search_row .search_field { width: 58%; }
.search_row .add_new { margin:0px; width: 40%; float: right; }
.search_row .add_new .btn { width: 100%; padding: 0.75rem 1rem; }
}
@media (max-width: 767.98px) {
.search_row .align-left { float: none; margin-bottom:0.5rem; }
}
@media (max-width: 991.98px) {

}
@media (max-width: 1199.98px) {
	/* 20220310 */


  .navigation-main span.step{
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    background-color: #eee;
    border-radius: 50%;
    margin-right: 10px;
    z-index: 10;
    line-height: 24px;
    position: absolute;
    right: 0px;
    top: 14px;
  }

  .navigation-main.step-box li:after{
    content: "1";
    text-indent:-9999px;
    position: absolute;
    color:#eee;
    /*border: 1px dashed #d9d7e3;*/
    background: 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-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    height: 12px;
    width: 12px;
    display: inline-block;
    right: 17px;
    top: -6px;
    background-size:100% auto;
    background-repeat: no-repeat;
  }
/* end 20220310 */
}

/* print style */
@media print {
.no_print { display:none; }
.breadcrumb-wrapper, .check_col, .action_col, .search_row, .dataTables_paginate, footer { display:none; }
.card-body { padding:0px; }
}



/* 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:#58f3a7; }
.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; }

/* 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 #58f3a7; }
#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:0px; }
.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); }


.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:6px; }
.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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
.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; }
/*#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; }

/* 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:0px; 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: #000001; background-color:#58f3a7; border-color:#58f3a7; }
#booking_payment .button_choice label input[type="radio"]:checked ~ span { border-color: #000001; border-radius:0px; border: 3px solid #000001; }
#booking_payment .button_choice label span:hover { background-color: #e6e6e6; border-color: #adadad; }
.button_choice label input[type="radio"]:checked:focus ~ span { color: #000001; background-color:#58f3a7; border-color:#58f3a7; }
#booking_payment .button_choice label input[type="radio"]:checked:focus ~ span { color: #000001; background-color:#000001; border-color:#000001; }
.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:0px;}

.modal.order_form.show { height:80vh; width:1260px; top:50%; left:50%; margin-top:-40vh; margin-left:-630px; display: block!important; padding: 0px!important; overflow: hidden; }

.modal.order_form .modal-dialog { height:100%; width:100%; max-width:inherit; margin: 0px; padding: 0px!important; }
.modal.order_form .modal-dialog .modal-content { height:100%; width:100%; max-width:inherit; margin: 0px; padding: 0px!important; }
.modal.order_form .modal-body { height:calc(80vh - 60px - 80px); width:100%; padding:0px!important; overflow:hidden; }
.modal.order_form .modal-body .order_form_left { height:calc(80vh - 60px - 80px); width:100%; overflow-y:scroll; overflow-x:hidden; }
.modal.order_form .modal-body .order_form_right { height:calc(80vh - 60px - 80px); width:100%; overflow-y:auto; overflow-x:hidden; }
.modal.order_form #order_success .modal-body { height:calc(80vh - 60px); }
.modal.order_form #order_success .modal-body .order_form_left { height:calc(80vh - 60px);overflow-y:auto; }

.modal.order_form #registration { position:absolute; top:0px; left:-100%; width:100%; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; display:none; }
.modal.order_form #checkout { position:absolute; top:0px; left:100%; width:100%; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; display:none; }
.modal.order_form #registration.show { top:0px; left:0px; }
.modal.order_form #checkout.show { top:0px; left:0px; }
.modal.order_form button#order_submit { display:none; }
.modal.order_form button#order_edit { display:none; }
.modal.order_form button#order_cancel { display:none; }

@media (max-width: 1400px) {
.modal.order_form.show { width:90vw; margin-left:-45vw; }
}

@media (max-width: 991.9px) {
.modal.order_form .modal-body { height:calc(80vh - 60px - 80px); overflow-y:scroll; }
.modal.order_form .modal-body .order_form_left { height:inherit; width:100%; overflow-y:hidden; overflow-x:hidden; }
.modal.order_form .modal-body .order_form_right { height:inherit; width:100%; overflow-y:hidden; overflow-x:hidden; }
.modal.order_form #order_success .modal-body .order_form_left { height:100%; overflow-y:auto; }
.modal.order_form #registration.show { position:relative; top:0px; left:0px; }
.modal.order_form #checkout.show { position:relative; top:0px; left:0px; }
}

@media (max-width: 575.9px) {
.modal.order_form.show { width:100%; height:100vh; margin-left:-50%; margin-top:0px; top:0px; }
.modal.order_form .modal-body { height:calc(100vh - 60px - 80px); overflow-y:scroll; }
.modal.order_form .btn { padding: 18px 25px; }
.modal.order_form #order_success .modal-body { height:calc(100vh - 60px); }
.modal.order_form #order_success .modal-body .order_form_left { height:calc(100%vh - 60px);overflow-y:auto; }
}

.modal-backdrop { z-index: 5600; }
.swal2-container { z-index:7060!important; }

#product_form img { max-height:90px; max-width:90px; }

/* colors */
.filter_primary { filter: invert(85%) sepia(7%) saturate(3167%) hue-rotate(87deg) brightness(99%) contrast(91%); }
.filter_white { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }

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

/* public registration form

/* remarks */
#attendee_form .product-remarks { font-size: 0.857rem; font-weight: 400; line-height:1.45; }

/* radio buttons */
#attendee_form .form-group .controls > div { display:flex; }
#attendee_form .form-group .controls label.btn { padding:0px; padding-right:8px; width:100%; display:flex; height:50px; margin:0px; }
#attendee_form .form-group .controls label.btn input[type="radio"] { position:absolute; left:-9999px; }
#attendee_form .form-group .controls label.btn span { font-size: 1rem; font-weight: 400; line-height: 1.45; 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; }
#attendee_form .form-group .controls label.btn span:hover { background-color: #e6e6e6; border-color: #adadad; }
#attendee_form .form-group .controls label.btn input[type="radio"]:checked ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#attendee_form .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#attendee_form .form-group .controls label.btn .input-group-prepend { height:50px; }
#attendee_form .form-group .controls label.btn .input-group-prepend span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
#attendee_form .form-group.error .controls label.btn span:hover { border-color: #EA5455; }
#attendee_form .form-group.error .controls label.btn span { border-color: #EA5455; }

/* radio */
#attendee_form .form-group .controls div.radio { display:flex; }
#attendee_form .form-group .controls div.radio label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#attendee_form .form-group .controls div.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; }
#attendee_form .form-group .controls div.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%;}
#attendee_form .form-group .controls div.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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#attendee_form .form-group .controls div.radio label input[type="radio"]:checked:before { border:1px solid #000000; background-color:#000000; }
#attendee_form .form-group .controls div.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>"); }

.radio_group div.radio { display:inline; }
.radio_group div.radio label { display:inline-block; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
.radio_group div.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_group div.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_group div.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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
.radio_group div.radio label input[type="radio"]:checked:before { border:1px solid #000000; background-color:#000000; }
.radio_group div.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>"); }


/* checkbox */
#attendee_form .form-group .controls div.checkbox { display:flex; }
#attendee_form .form-group .controls div.checkbox label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#attendee_form .form-group .controls div.checkbox label 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; }
#attendee_form .form-group .controls div.checkbox label input[type="checkbox"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:0px;}
#attendee_form .form-group .controls div.checkbox label input[type="checkbox"]: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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#attendee_form .form-group .controls div.checkbox label input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
#attendee_form .form-group .controls div.checkbox label 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>"); }

/* textarea */
#attendee_form .form-group .controls textarea { display: block; width: 100%; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: #6e6b7b; background-color: #fff; background-clip: padding-box; border: 1px solid #d8d6de; border-radius:0px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; padding: 0.8rem 1rem !important; height:90px!important; }
#attendee_form .form-group .controls textarea:focus { outline:none; border:1px solid #000001;}
#attendee_form .form-group.error .controls textarea { border-color: #EA5455; }

/* 20220712 style for edit attendee form */

/* remarks */
#attendee_info_append .product-remarks { font-size: 0.857rem; font-weight: 400; line-height:1.45; }

/* radio buttons */
#attendee_info_append .form-group .controls > div { display:flex; }
#attendee_info_append .form-group .controls label.btn { padding:0px; padding-right:8px; width:100%; display:flex; height:50px; margin:0px; }
#attendee_info_append .form-group .controls label.btn input[type="radio"] { position:absolute; left:-9999px; }
#attendee_info_append .form-group .controls label.btn span { font-size: 1rem; font-weight: 400; line-height: 1.45; 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; }
#attendee_info_append .form-group .controls label.btn span:hover { background-color: #e6e6e6; border-color: #adadad; }
#attendee_info_append .form-group .controls label.btn input[type="radio"]:checked ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#attendee_info_append .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#attendee_info_append .form-group .controls label.btn .input-group-prepend { height:50px; }
#attendee_info_append .form-group .controls label.btn .input-group-prepend span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
#attendee_info_append .form-group.error .controls label.btn span:hover { border-color: #EA5455; }
#attendee_info_append .form-group.error .controls label.btn span { border-color: #EA5455; }

/* radio */
#attendee_info_append .form-group .controls div.radio { display:flex; }
#attendee_info_append .form-group .controls div.radio label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#attendee_info_append .form-group .controls div.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; }
#attendee_info_append .form-group .controls div.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%;}
#attendee_info_append .form-group .controls div.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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#attendee_info_append .form-group .controls div.radio label input[type="radio"]:checked:before { border:1px solid #000000; background-color:#000000; }
#attendee_info_append .form-group .controls div.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>"); }

/* checkbox */
#attendee_info_append .form-group .controls div.checkbox { display:flex; }
#attendee_info_append .form-group .controls div.checkbox label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#attendee_info_append .form-group .controls div.checkbox label 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; }
#attendee_info_append .form-group .controls div.checkbox label input[type="checkbox"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:0px;}
#attendee_info_append .form-group .controls div.checkbox label input[type="checkbox"]: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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#attendee_info_append .form-group .controls div.checkbox label input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
#attendee_info_append .form-group .controls div.checkbox label 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>"); }

/* textarea */
#attendee_info_append .form-group .controls textarea { display: block; width: 100%; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: #6e6b7b; background-color: #fff; background-clip: padding-box; border: 1px solid #d8d6de; border-radius:0px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; padding: 0.8rem 1rem !important; height:90px!important; }
#attendee_info_append .form-group .controls textarea:focus { outline:none; border:1px solid #000001;}
#attendee_info_append .form-group.error .controls textarea { border-color: #EA5455; }

/* 20231207 add style for extra information form start */
/* remarks */
#extra_form .product-remarks { font-size: 0.857rem; font-weight: 400; line-height:1.45; }

/* radio buttons */
#extra_form .form-group .controls > div { display:flex; }
#extra_form .form-group .controls label.btn { padding:0px; padding-right:8px; width:100%; display:flex; height:50px; margin:0px; }
#extra_form .form-group .controls label.btn input[type="radio"] { position:absolute; left:-9999px; }
#extra_form .form-group .controls label.btn span { font-size: 1rem; font-weight: 400; line-height: 1.45; 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; }
#extra_form .form-group .controls label.btn span:hover { background-color: #e6e6e6; border-color: #adadad; }
#extra_form .form-group .controls label.btn input[type="radio"]:checked ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#extra_form .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#extra_form .form-group .controls label.btn .input-group-prepend { height:50px; }
#extra_form .form-group .controls label.btn .input-group-prepend span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
#extra_form .form-group.error .controls label.btn span:hover { border-color: #EA5455; }
#extra_form .form-group.error .controls label.btn span { border-color: #EA5455; }

/* radio */
#extra_form .form-group .controls div.radio { display:flex; }
#extra_form .form-group .controls div.radio label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#extra_form .form-group .controls div.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; }
#extra_form .form-group .controls div.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%;}
#extra_form .form-group .controls div.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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#extra_form .form-group .controls div.radio label input[type="radio"]:checked:before { border:1px solid #000000; background-color:#000000; }
#extra_form .form-group .controls div.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>"); }

/* checkbox */
#extra_form .form-group .controls div.checkbox { display:flex; }
#extra_form .form-group .controls div.checkbox label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#extra_form .form-group .controls div.checkbox label 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; }
#extra_form .form-group .controls div.checkbox label input[type="checkbox"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:0px;}
#extra_form .form-group .controls div.checkbox label input[type="checkbox"]: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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#extra_form .form-group .controls div.checkbox label input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
#extra_form .form-group .controls div.checkbox label 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>"); }

/* textarea */
#extra_form .form-group .controls textarea { display: block; width: 100%; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: #6e6b7b; background-color: #fff; background-clip: padding-box; border: 1px solid #d8d6de; border-radius:0px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; padding: 0.8rem 1rem !important; height:90px!important; }
#extra_form .form-group .controls textarea:focus { outline:none; border:1px solid #000001;}
#extra_form .form-group.error .controls textarea { border-color: #EA5455; }

/* 20220712 style for edit attendee form */

/* remarks */
#extra_info_append .product-remarks { font-size: 0.857rem; font-weight: 400; line-height:1.45; }

/* radio buttons */
#extra_info_append .form-group .controls > div { display:flex; }
#extra_info_append .form-group .controls label.btn { padding:0px; padding-right:8px; width:100%; display:flex; height:50px; margin:0px; }
#extra_info_append .form-group .controls label.btn input[type="radio"] { position:absolute; left:-9999px; }
#extra_info_append .form-group .controls label.btn span { font-size: 1rem; font-weight: 400; line-height: 1.45; 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; }
#extra_info_append .form-group .controls label.btn span:hover { background-color: #e6e6e6; border-color: #adadad; }
#extra_info_append .form-group .controls label.btn input[type="radio"]:checked ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#extra_info_append .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#58f3a7; border-color:#58f3a7; }
#extra_info_append .form-group .controls label.btn .input-group-prepend { height:50px; }
#extra_info_append .form-group .controls label.btn .input-group-prepend span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
#extra_info_append .form-group.error .controls label.btn span:hover { border-color: #EA5455; }
#extra_info_append .form-group.error .controls label.btn span { border-color: #EA5455; }

/* radio */
#extra_info_append .form-group .controls div.radio { display:flex; }
#extra_info_append .form-group .controls div.radio label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#extra_info_append .form-group .controls div.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; }
#extra_info_append .form-group .controls div.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%;}
#extra_info_append .form-group .controls div.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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#extra_info_append .form-group .controls div.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>"); }

/* checkbox */
#extra_info_append .form-group .controls div.checkbox { display:flex; }
#extra_info_append .form-group .controls div.checkbox label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
#extra_info_append .form-group .controls div.checkbox label 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; }
#extra_info_append .form-group .controls div.checkbox label input[type="checkbox"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:0px;}
#extra_info_append .form-group .controls div.checkbox label input[type="checkbox"]: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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
#extra_info_append .form-group .controls div.checkbox label input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
#extra_info_append .form-group .controls div.checkbox label 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>"); }

/* textarea */
#extra_info_append .form-group .controls textarea { display: block; width: 100%; font-size: 1rem; font-weight: 400; line-height: 1.6rem; color: #6e6b7b; background-color: #fff; background-clip: padding-box; border: 1px solid #d8d6de; border-radius:0px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; padding: 0.8rem 1rem !important; height:90px!important; }
#extra_info_append .form-group .controls textarea:focus { outline:none; border:1px solid #000001;}
#extra_info_append .form-group.error .controls textarea { border-color: #EA5455; }

/* 20231207 add style for extra information form end */


/* checkbox */
fieldset { position:relative; }
fieldset label { display:inline-block; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:32px; margin-right:10px; }
fieldset 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; }
fieldset input[type="checkbox"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:0px; cursor:pointer; }
fieldset input[type="checkbox"]: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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); cursor:pointer; }
fieldset input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
fieldset 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>"); }


/* radio */
.custom-radio { display:flex; }
.custom-radio label { display:flex; font-size: 1rem; font-weight: 400; line-height:50px; position:relative; cursor:pointer; padding-left:10px; margin-right:10px; }
.custom-radio .custom-control-input { 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-radio .custom-control-label:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:100%; background-color:transparent; }
.custom-radio .custom-control-label: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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); }
.custom-radio .custom-control-label: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>")!important; }
.custom-control-input:not(:disabled):active ~ .custom-control-label::before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:100%; background-color:transparent; }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before { box-shadow: 0 2px 4px 0 rgb(0 44 83 / 0%) !important; }
.custom-control-input:checked ~ .custom-control-label::before { /*color: #fff; border-color: #cccccc; background-color:transparent; content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:12px; left:0px; border-radius:100%;*/ }
.custom-radio .custom-control-input:checked ~ .custom-control-label::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>")!important; }

.narrow_radio .custom-radio label { line-height:30px; }
.narrow_radio .custom-radio .custom-control-label:before { top:2px; }
.narrow_radio .custom-control-input:not(:disabled):active ~ .custom-control-label::before { top:2px; }
.narrow_radio .custom-radio .custom-control-label:after { top:6px; }

/* ticket radio */
.ticket_radio { display:inline; }
.ticket_radio 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; }
.ticket_radio 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; }
.ticket_radio input[type="radio"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:0px; left:0px;  border-radius:100%; cursor:pointer; }
.ticket_radio input[type="radio"]: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; }
.ticket_radio 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>"); }
.ticket_radio span {line-height:1.2;}


/* ticket checkbox */
.ticket_checkbox { display:inline; }
.ticket_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; }
.ticket_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; }
.ticket_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; }
.ticket_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(79%) sepia(49%) saturate(504%) hue-rotate(88deg) brightness(99%) contrast(93%); cursor:pointer; }
.ticket_checkbox input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
.ticket_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>"); }
.ticket_checkbox span {line-height:1.2;}

.ticket_list { display:inline; }
.ticket_list label { display:inline-block; font-size: 1rem; font-weight: 400; line-height:22px; width:22px; height:22px; position:relative; cursor:pointer; padding:0px; margin:0px; min-height:20px; margin-right:10px; }
.ticket_list 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; }
.ticket_list input[type="checkbox"]:before { content:" "; display:block; border:0px solid #cccccc; width:22px; height:22px; position:absolute; top:0px; left:0px; border-radius:100%; cursor:pointer; opacity:0.4; }
.ticket_list input[type="checkbox"]:after { content:" "; display:block; width:16px; height:16px; position:absolute; top:3px; left:3px; display:inline-block; background-image:none; background-size:100% auto; filter: invert(99%) sepia(4%) saturate(2%) hue-rotate(286deg) brightness(115%) contrast(100%); cursor:pointer; opacity:0.4; }
.ticket_list input[type="checkbox"]:checked:before { opacity:1; }
.ticket_list input[type="checkbox"]:checked:after { opacity:1; }
.ticket_list input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
.ticket_list 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>"); }

.ticket_list.ticket_color_0 input[type="checkbox"]:before { background-color:transparent; border:1px solid #cccccc; opacity:1; }
.ticket_list.ticket_color_0 input[type="checkbox"]:after { content:" "; display:block; width:16px; height:16px; position:absolute; top:3px; left:3px; display:inline-block; background-image:none; background-size:100% auto; filter: invert(61%) sepia(12%) saturate(2237%) hue-rotate(77deg) brightness(92%) contrast(87%)!important; cursor:pointer; opacity:1; }
.ticket_list.ticket_color_0 input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
.ticket_list.ticket_color_0 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>"); }

.ticket_list.ticket_color_1 input[type="checkbox"]:before { background-color:#7367f0; }
.ticket_list.ticket_color_2 input[type="checkbox"]:before { background-color:#28c76f; }
.ticket_list.ticket_color_3 input[type="checkbox"]:before { background-color:#ff9f43; }
.ticket_list.ticket_color_4 input[type="checkbox"]:before { background-color:#ea5455; }
.ticket_list.ticket_color_5 input[type="checkbox"]:before { background-color:#00cfe8; }
.ticket_list.ticket_color_6 input[type="checkbox"]:before { background-color:#82868b; }
.ticket_list.ticket_color_7 input[type="checkbox"]:before { background-color:#903535; }
.ticket_list.ticket_color_8 input[type="checkbox"]:before { background-color:#fe57fc; }

.ticket_color_1 { color:#7367f0; }
.ticket_color_2 { color:#28c76f; }
.ticket_color_3 { color:#ff9f43; }
.ticket_color_4 { color:#ea5455; }
.ticket_color_5 { color:#00cfe8; }
.ticket_color_6 { color:#82868b; }
.ticket_color_7 { color:#903535; }
.ticket_color_8 { color:#fe57fc; }
.bullet.ticket_color_1 { background-color:#7367f0; }
.bullet.ticket_color_2 { background-color:#28c76f; }
.bullet.ticket_color_3 { background-color:#ff9f43; }
.bullet.ticket_color_4 { background-color:#ea5455; }
.bullet.ticket_color_5 { background-color:#00cfe8; }
.bullet.ticket_color_6 { background-color:#82868b; }
.bullet.ticket_color_7 { background-color:#903535; }
.bullet.ticket_color_8 { background-color:#fe57fc; }

#ecert_template .dz-message { height:402px; }
#ecert_template.dropzone.single_image .dz-processing { min-height:402px!important; }
#ecert_template.dropzone.single_image .dz-success { min-height:inherit!important; }
#ecert_template.dropzone.single_image .dz-complete { min-height:inherit!important; }

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

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

/* 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; }


.table_no_record { display:none; }

.sub_title[aria-expanded="true"] .arrow_up { display:block; }
.sub_title[aria-expanded="true"] .arrow_down { display:none; }
.sub_title[aria-expanded="false"] .arrow_up { display:none; }
.sub_title[aria-expanded="false"] .arrow_down { display:block; }


/* coordinate sliders */
.coordinate { position:relative; margin-right:0px; margin-bottom:0px; }
.coordinate.show_slider { position:relative; margin-right:40px; margin-bottom:60px; }
.coordinate.show_slider #slider-x { display:block; }
.coordinate.show_slider #slider-y { display:block; }
#slider-x { display:none; position:absolute; left:0px; bottom:-43px; width:100%; }
#slider-y { display:none; position:absolute; top:0px; right:-36px; height:100%!important; }
#slider-x.noUi-target { background:transparent; border-radius:0px; border:0px solid #D3D3D3; box-shadow: inset 0 0px 0px #f0f0f0, 0 0px 0px 0px #bbb; }
#slider-y.noUi-target { background:transparent; border-radius:0px; border:0px solid #D3D3D3; box-shadow: inset 0 0px 0px #f0f0f0, 0 0px 0px 0px #bbb; }

#slider-y .noUi-origin {--guidelineWidth:600px;}
#slider-y .noUi-origin:before { content: ""; display: block; position: absolute; height: 1px; width:var(--guidelineWidth); left:calc(0px - var(--guidelineWidth) - 36px); top:0px; background: #E8E7E6; }
#slider-x .noUi-origin {--guidelineHeight:600px;}
#slider-x .noUi-origin:before { content: ""; display: block; position: absolute; height:var(--guidelineHeight); width:1px; left:100%; top:calc(0px - var(--guidelineHeight) - 25px); background: #E8E7E6; }

.language_status .avatar { cursor:default; }

/*#modal_view .modal-body { background-color:#f6f8fc; }*/



/*************************** public site ***********************************/

html body.public-site .content .content-wrapper { max-width: 1440px; padding: 40px 40px; margin: 0 auto; }
html body.public-site .content { min-height: calc(100% - 326px); }

@media (max-width: 767.9px) {
html body.public-site .content .content-wrapper { padding: 30px 4vw; margin: 0 auto; }
html body.public-site .content { min-height: calc(100% - 381px); }
}
@media (max-width: 575.98px) {
html body.public-site .content .content-wrapper { padding: 20px 3vw; margin: 0 auto; overflow-x:hidden; }
html body.public-site #checkoutForm.content .content-wrapper { overflow-x:inherit; }

html body.public-site { /*overflow-x: hidden;*/ }
/*html body.public-site .content { min-height:inherit; }*/
html body.public-site .content { min-height: calc(100% - 637px); }
}

/* right top pulldown menu */
html body.public-site .header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item { padding:12px 15px 12px 15px; border-left: 5px solid #ffffff; }
html body.public-site .header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:hover { background:#eeeeee; border-left: 5px solid #eeeeee; }
html body.public-site .header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item.active, html body.public-site .header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:active { color: #000000; background: rgba(88, 243, 167, 0.12); border-left: 5px solid #58f3a7; }

/* home */
.top_banner { position:relative; top:62px; min-height:480px; background: url('../../app-assets/images/login_banner9.jpg') center; background-size: cover; }
.top_banner .container { max-width: 1440px; padding: 50px 40px; margin: 0 auto; }
@media (max-width: 767.9px) {
.top_banner .container { padding: 50px 4vw; margin: 0 auto; }
}
.top_banner form { max-width: 400px; margin:auto; }

.intro_card { min-height:440px; background: url('../../app-assets/images/login_banner9.jpg') center; background-size: cover; }
.banner_text { width:48%; border-left:6px solid #156e20; padding-left:20px; padding-top:120px; position:absolute; left:86px; }
.banner_text h1 { font-size:36px; }
.banner_text h2 { font-size:22px; }
.banner_button { position:absolute; right:0px; bottom:10%; }
.statistic_card img { width:100px; height:auto; }

@media (max-width:1440px) {
.intro_card { min-height:30.5vw; }
.banner_text { padding-top:8.3vw; left:6vw; }
.banner_text h1 { font-size:2.4vw; }
.banner_text h2 { font-size:1.5vw; }
.banner_button { position:absolute; right:0px; bottom:10%; }
}

@media (max-width:1199.9px) {
.intro_card { min-height:35vw; }
.banner_text { padding-top:8.3vw; left:7.4vw; }
.banner_text h1 { font-size:2.952vw; }
.banner_text h2 { font-size:1.845vw; }
}

@media (max-width:767.9px) {
.banner_text { width:60%; }
.banner_text h1 { font-size:24px; }
.banner_text h2 { font-size:15px; }
.intro_card { min-height:45vw; }
}

@media (max-width: 575.98px) {
.banner_text { width:65%; }
.banner_text h1 { font-size:20px; }
.banner_text h2 { font-size:14px; }
.intro_card { min-height:80vw; }
}

@media (max-width:419.9px) {
.intro_card { min-height:320px; }
.banner_text { padding-top:25px; padding-left:15px; left:25px; }
.banner_button button { padding-left:20px; padding-right:10px; }
.statistic_card img { width:80px; height:auto; }
}

/* event */

.event_card:hover { transform: scale3d(1.02, 1.02, 1.02); }
.event_card .card-body { position:relative; }

.popular_event .swiper-wrapper .event_card { width:100%; max-width:400px; }
.popular_event .swiper-slide { width: 28%; }
@media (max-width:991.9px) {
.popular_event .swiper-slide { width: 40%; }
}
@media (max-width:767.9px) {
.popular_event .swiper-slide { width: 60%; }
}
@media (max-width:575.9px) {
.popular_event .swiper-slide { width: 75%; }
}
@media (max-width:479.9px) {
.popular_event .swiper-slide { min-width:260px; width: 80%; }
}
.popular_event { padding-bottom:50px; }
.popular_event .swiper-pagination { bottom:10px; }


.organizers .swiper-wrapper .event_card { width:100%; max-width:250px; }
.organizers { padding-bottom:50px; }


.album_swiper .swiper-wrapper .event_card { width:100%; max-width:400px; }
.album_swiper .swiper-slide { width: 28%; }
@media (max-width:991.9px) {
.album_swiper .swiper-slide { width: 40%; }
}
@media (max-width:767.9px) {
.album_swiper .swiper-slide { width: 60%; }
}
@media (max-width:575.9px) {
.album_swiper .swiper-slide { width: 75%; }
}
@media (max-width:479.9px) {
.album_swiper .swiper-slide { min-width:260px; width: 80%; }
}
.album_swiper { padding-bottom:50px; }
.album_swiper .swiper-pagination { bottom:10px; }


.eventalbum_swiper .swiper-wrapper .event_card { width:100%; max-width:400px; }
.eventalbum_swiper .swiper-slide { width: 28%; }
@media (max-width:991.9px) {
.eventalbum_swiper .swiper-slide { width: 40%; }
}
@media (max-width:767.9px) {
.eventalbum_swiper .swiper-slide { width: 60%; }
}
@media (max-width:575.9px) {
.eventalbum_swiper .swiper-slide { width: 75%; }
}
@media (max-width:479.9px) {
.eventalbum_swiper .swiper-slide { min-width:260px; width: 80%; }
}
.eventalbum_swiper { padding-bottom:50px; }
.eventalbum_swiper .swiper-pagination { bottom:10px; }


.photographer_swiper .swiper-wrapper .event_card { width:100%; max-width:400px; }
.photographer_swiper .swiper-slide { width: 28%; }
@media (max-width:991.9px) {
.photographer_swiper .swiper-slide { width: 40%; }
}
@media (max-width:767.9px) {
.photographer_swiper .swiper-slide { width: 60%; }
}
@media (max-width:575.9px) {
.photographer_swiper .swiper-slide { width: 75%; }
}
@media (max-width:479.9px) {
.photographer_swiper .swiper-slide { min-width:260px; width: 80%; }
}
.photographer_swiper { padding-bottom:50px; }
.photographer_swiper .swiper-pagination { bottom:10px; }

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color:#000001; }


.category_group label {padding-left: 0rem; padding-right: 0.2rem; width:inherit!important; /* width:100%; */ height:40px; display:flex;}
.category_group label span { height:100%; width:inherit; padding: 10px 15px; 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; cursor:pointer; }
.category_group label span:hover { background-color: #e6e6e6; border-color: #adadad; }
.category_group label input[type="checkbox"] { position:absolute; left:-9999px; }
.category_group label input[type="checkbox"]:checked ~ span { color: #000001; background-color:#58f3a7; border-color:#58f3a7; }
.category_group label input[type="checkbox"]:checked:focus ~ span { color: #000001; background-color:#58f3a7; border-color:#58f3a7; }
.category_group label input[type="radio"] { position:absolute; left:-9999px; }
.category_group label input[type="radio"]:checked ~ span { color: #000001; background-color:#58f3a7; border-color:#58f3a7; }
.category_group label input[type="radio"]:checked:focus ~ span { color: #000001; background-color:#58f3a7; border-color:#58f3a7; }
.category_group label input[type="radio"]:checked ~ span img { filter:none; }

/* event ribbon */
.ribbon { width: 30%; max-width: 120px; height: 45px; overflow: hidden; position: absolute; top: -8px; right: 0; padding: 0 10px;}/*20220327 */


.ribbon span { transform: skew(-10deg); position: absolute; display: block; width:100%; line-height:20px; padding: 2px 11px 2px 0; background-color: #58f3a7; color: #fff; text-transform: uppercase; text-align: center; } /*20220327 */

.ribbon.full span { background-color: #ea5455; }
.ribbon.expired span { background-color: #08416f; }

/* event add to favourite button */
.event_card .card-footer { position:relative; }
.event_like, .event_follow, .event_share { width:50px; height:100%; border-radius:0px; background-color:#ffffff; border-left:1px solid #dae1e7; position:absolute; bottom:0px; right:0px; cursor:pointer; }
.event_like.active svg { color:#ea5455; fill:#ea5455; }
.event_follow.active svg { color:#58f3a7; fill:#58f3a7; }

.like_card .event_like, .like_card .event_follow { width:36px; height:100%; border-radius:0px; background-color:#ffffff; border-left:1px solid #dae1e7; position:absolute; bottom:0px; right:0px; }


/* footer */

footer.footer_wrapper { position:relative; z-index:20; padding:0px; background-color:#000000; min-width:320px; width:100%; margin-left:auto; margin-right:auto; color:#ffffff; font-size:16px; line-height:28px; }
footer.footer_wrapper .footer { width:100%; max-width: 1440px; padding: 40px 40px; margin: 0 auto; }
footer .brand-logo { height:36px; background-position: left top; }
footer.footer_wrapper ul { list-style:none; padding:0px; margin:0px; }
footer.footer_wrapper .social_media { list-style:none; padding:0px; margin:0px; display:flex; width:fit-content; }
footer.footer_wrapper .social_media li { display:flex; margin-right:10px; }
footer.footer_wrapper .social_media li img { max-width:30px; width:2.0325vw; min-width:20px; }


footer a { color: #ffffff; }
footer a:hover { color: #58f3a7; }

@media (max-width: 767.9px) {
footer.footer_wrapper .footer { padding: 30px 4vw; }
}

/* user feed */

/* left menu */

#left .avatar_img .avatar_setting { position:relative; max-width:180px; max-height:180px; width:65%; height:65%;}
#left .avatar_img .avatar_setting .edit_profile { position:absolute; top:3%; right:3%; }

#user_left_menu { position:sticky; top:80px; }
#user_left_menu .main-menu { margin-top:0px; height:inherit; position:relative; display:block; border-radius:5px;} /*20230327 */
#user_left_menu .main-menu .navigation { background-color:#f6f8fc; }
#user_left_menu .main-menu .navigation > li.active > a { background:#ffffff; border-radius: 3px;}
/*.main-menu-content .menu-title { display:none; }*/ /* strange rollover behaviour.... */

.event_banner:hover { transform: scale3d(1.02, 1.02, 1.02); }

.my_events_swiper .swiper-wrapper .event_card, .recent_events_swiper .swiper-wrapper .event_card, .browse_events_swiper .swiper-wrapper .event_card { width:100%; max-width:400px; }
.my_events_swiper, .recent_events_swiper, .browse_events_swiper { padding-bottom:50px; }
.my_events_swiper .swiper-pagination, .recent_events_swiper .swiper-pagination, .browse_events_swiper .swiper-pagination { bottom:10px; }
.my_events_swiper .swiper-slide, .recent_events_swiper .swiper-slide, .browse_events_swiper .swiper-slide { width: 28%; }
/*@media (max-width:991.9px) {
.my_events_swiper .swiper-slide, .recent_events_swiper .swiper-slide, .browse_events_swiper .swiper-slide { width: 40%; }
}
@media (max-width:767.9px) {
.my_events_swiper .swiper-slide, .recent_events_swiper .swiper-slide, .browse_events_swiper .swiper-slide { width: 60%; }
}*/
@media (max-width:575.9px) {
.my_events_swiper .swiper-slide, .recent_events_swiper .swiper-slide, .browse_events_swiper .swiper-slide { width: 40%; }
}
/*@media (max-width:479.9px) {
.my_events_swiper .swiper-slide, .recent_events_swiper .swiper-slide, .browse_events_swiper .swiper-slide { min-width:260px; width: 80%; }
}*/


/* my event page */

.event_details .card-body { position: relative; }
.event_details .card-footer { position: relative; }
.event_details .table_actions { background:#000001!important; position:absolute; top:0px; right:0px; height:100%; width:40px; padding:12px 8px; }
.event_details .table_actions a.dropdown-toggle { color:#ffffff; margin:auto; }
.event_details .table_actions svg { color:#ffffff; margin:auto; }
.event_details .table_actions .dropdown-menu { left:inherit!important; /*right:20px!important;*/ }
.event_details .btn_upload { color:#ffffff; margin:auto; background:#000001!important; position:absolute; top:0px; right:80px; height:100%; padding:12px 0px 12px 12px; border-right:1px solid #ffffff; width:140px; }/* 20220322 */
.event_details .btn_upload svg { color:#ffffff; margin:auto; }

#my_event .image_fill {  display:block!important;  position:sticky; top:62px; }
@media (max-width:767.9px) {
#my_event .image_fill { border-right: 0px solid #dae1e7;}
}
#my_event .image_fill img { width: 100%; height:auto; flex-shrink: 0; min-width:inherit; min-height:inherit; }

.progress { height:5px; }
.progress-bar { overflow: initial; }
.progress small { padding:0px 6px; }
.progress { background-color:#bbbbbb; }

.users-list .avatar { border:2px solid #ffffff; margin-right: -10px; }


/* ebadges swiper */
/*#my_ebadge { overflow:hidden; }
#my_ebadge .swiper-container { overflow:inherit; }*/

.my_ebadges_swiper .swiper-wrapper .ebadge { width:100%; max-width:400px; }
.my_ebadges_swiper { padding-bottom:50px; }
.my_ebadges_swiper .swiper-pagination { bottom:10px; }
.my_ebadges_swiper .swiper-slide { width: 11.5%; }
@media (max-width:991.9px) {
.my_ebadges_swiper .swiper-slide { width: 14%; }
}
@media (max-width:767.9px) {
.my_ebadges_swiper .swiper-slide { width: 16%; }
}
@media (max-width:575.9px) {
.my_ebadges_swiper .swiper-slide { width: 20%; }
}
@media (max-width:479.9px) {
.my_ebadges_swiper .swiper-slide { width: 25%; }
}

#feed_ebadge .my_ebadges_swiper .swiper-wrapper .ebadge { width:100%; max-width:100px; }
#feed_ebadge .my_ebadges_swiper { padding-bottom:0px; }
#feed_ebadge .my_ebadges_swiper .swiper-pagination { bottom:10px; }
#feed_ebadge .my_ebadges_swiper .swiper-slide { width: 25%; }

/* following swiper */
.my_following_swiper .swiper-wrapper .follow { width:100%; max-width:400px; }
.my_following_swiper .swiper-slide { width: 25%; }



/*html body.public-site .form_footer { border-top:0px; background-color:#f6f8fc; position:static; bottom:0px; padding: 25px 20px; min-height: 72px; transition: 300ms ease all; width: 100%; display:block; z-index:9; }*/

/* breadcrumb */
html body.public-site .event_breadcrumb .event_name { white-space: nowrap; text-overflow: ellipsis; overflow:hidden; width:100%; }
@media (max-width: 575.98px) {
html body.public-site .event_breadcrumb { background-color:#ffffff; position:fixed; top:82px; z-index:4100; height:25px; border-bottom:1px solid #dae1e7; }
html body.public-site .event_breadcrumb:before { background-color:#ffffff; content:" "; position:absolute; height:20px; width:100%; left:0px; top:-20px; border-top:1px solid #dae1e7; }
html body.public-site .event_breadcrumb .event_name { position:relative; top:-16px; line-height:1.5; width:calc(100% - 130px);}
html body.public-site .event_breadcrumb .table_actions { top: -20px; height:45px; }
html body.public-site .event_breadcrumb .btn_close { top: -20px; height:45px; width:60px; text-align:center; }
html body.public-site .event_breadcrumb h3 { font-size: 1.286rem; font-weight:normal!important; }
}

#event_brief { background-color:#f6f8fc; position:sticky; top:82px; z-index:4100; box-shadow: 0 11px 13px 0 rgb(110 131 149 / 4%) !important;} /*20220327 */
#event_brief:before { background-color:#f6f8fc; content:" "; position:absolute; height:20px; width:100%; left:0px; top:-20px; }
.event_brief_image { max-width:180px; }
.event_brief_content { width: calc(100% - 180px); }
.event_brief_banner { width: calc(100% - 220px); }
.event_brief_button { max-width:220px; border-left: 1px solid #dae1e7; }
@media (max-width:1199.9px) {
.event_brief_banner { width: calc(100% - 180px); }
.event_brief_button { max-width:180px; border-left: 1px solid #dae1e7; }
.event_brief_button .event_details .btn_upload { width:100px; }
}
@media (max-width:991.9px) {
.event_brief_button .event_details .btn_upload { width:100px; }
}
@media (max-width:767.9px) {
.event_brief_banner { width:100%; flex: none; }
.event_brief_button .card-body { position:absolute; }
.event_brief_button { max-width:100%; flex: none; border-left: 0px; }
.event_brief_button .event_details .btn_upload { width:140px; }
}
@media (max-width:575.9px) {

}


/*html body.public-site .action_col .table_actions .dropdown-menu { transform:none!important; left:-200px!important; right:0px!important; top:-60px!important; width: fit-content; }
html body.public-site .table_actions .dropdown-menu { transform:none!important; right:25px!important; top:25px!important; }*/

.table_no_record.sticky {top: 200px; position: sticky; }
@media (max-width: 575.98px) {
html body.public-site .table_no_record { padding-left:15px; padding-right:15px; }
}
/* calendar picker */

input[name='date_range'].form-control[readonly] { background-color: #ffffff; opacity: 1; }
.flatpickr-calendar { border-radius:0px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { pointer-events: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: #000001; border-color: #000001; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #58f3a7; }
.flatpickr-current-month .numInputWrapper span { display:none!important; }
.flatpickr-current-month .numInputWrapper:hover { background: rgba(0,0,0,0)!important; }
.flatpickr-current-month .numInputWrapper input { pointer-events: none; }


/* 20231227 replace and add  code start */

/* code field */
div#code_fields input {
  border-width: 0 0 2px 0 !important;
  border-color: black;
  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;
  background: black;
  left: 0px;
  color: #56f4a4;
  position: relative;
  display: table-cell;
  border-radius: 50%;
  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 #58f3a7; 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;
}

/* 20231227 replace and add  code end */


table.empty.dataTable thead { display:none; }
table.empty.dataTable tbody tr { background-color:transparent!important; box-shadow:none!important; }
table.empty.dataTable td.dtfc-fixed-left { background-color:transparent!important; }

table.dataTable tbody tr.my-rank { background:#f6fdfc; }
table.dataTable tbody tr.my-rank td.dtfc-fixed-left { background:#f6fdfc!important; }
table.dataTable tbody tr.my-rank td.dtfc-fixed-right { background:#f6fdfc!important; }
table.dataTable tbody tr.my-rank a:hover { }

table.dataTable.no_shadow tbody tr {box-shadow: none !important;} /*20230327 */
table.dataTable.no_shadow {border-spacing: 0 1px;}/*20230327 */
.ranking.table:not(.table-dark):not(.table-light) thead:not(.thead-dark) th, .table:not(.table-dark):not(.table-light) tfoot:not(.thead-dark) th{ background-color: white !important;} /*20230327 */
.ranking td.sorting_1.dtfc-fixed-left { font-size: 1.4rem; font-weight: 600; text-indent: 10px; color: #08416f; } /*20230327 */

table.dataTable tbody td.rank_1 { background: url("../../app-assets/images/icons/medal_1.svg") 7px 0px no-repeat; background-size: 60px; color: transparent !important; padding: 0px !important; }
table.dataTable tbody td.rank_2 { background: url("../../app-assets/images/icons/medal_2.svg") 7px 0px no-repeat; background-size: 60px; color: transparent !important; padding: 0px !important; }
table.dataTable tbody td.rank_3 { background: url("../../app-assets/images/icons/medal_3.svg") 7px 0px no-repeat; background-size: 60px; color: transparent !important; padding: 0px !important; }

/* friends */
.item_list .avatar_img .avatar_setting { position:relative; max-width:120px; max-height:120px; width:100%; height:100%;}
.item_list .avatar_img .avatar_setting .btn_delete { position:absolute; top:5px; right:-10px; }
.item_list .avatar_img .avatar_setting .btn_confirm { position:absolute; top:5px; right:-10px; }
.item_list .avatar_img .avatar_setting .btn_confirm a { border-bottom-left-radius: 0px!important; border-bottom-right-radius: 0px!important; }
.item_list .avatar_img .avatar_setting .btn_delete_waiting { position:absolute; top:36px; right:-10px; }
.item_list .avatar_img .avatar_setting .btn_delete_waiting a { border-top-left-radius: 0px!important; border-top-right-radius: 0px!important; }
.item_list .avatar_img .avatar_setting .btn_delete_request { position:absolute; top:5px; right:-10px; }

.item_list .avatar_img .avatar_setting .badge { position:absolute; top:5px; right:-10px; }
.item_list .avatar_img .avatar_setting .badge.badge-light-success { background-color:#e5f8ed; }

@media (max-width:575.9px) {
.nav-tabs.nav-justified .nav-item a.nav-link[href='#friend'] { font-size:15px!important; padding-left:0px; padding-right:0px; }
.nav-tabs.nav-justified .nav-item a.nav-link[href='#request_friend'] { font-size:15px!important; padding-left:0px; padding-right:0px; }
.nav-tabs.nav-justified .nav-item a.nav-link[href='#confirm_friend'] { font-size:15px!important; padding-left:0px; padding-right:0px; }
.nav-justified > .nav-link, .nav-justified .nav-item { flex-basis:auto; }
}
@media (max-width:360px) {
.nav-tabs.nav-justified .nav-item a.nav-link[href='#friend'] { font-size:13px!important; padding-left:0px; padding-right:0px; }
.nav-tabs.nav-justified .nav-item a.nav-link[href='#request_friend'] { font-size:13px!important; padding-left:0px; padding-right:0px; }
.nav-tabs.nav-justified .nav-item a.nav-link[href='#confirm_friend'] { font-size:13px!important; padding-left:0px; padding-right:0px; }
}

/* event details*/
.event_page { max-width:1088px; margin-left:auto; margin-right:auto; }
.event_top_banner { position:relative; }
.event_top_title { width:100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:4; overflow: hidden; }

#event_register .event_like { position:absolute; top:0px; right:50px; width:50px; border-radius:0px; border:0px; border-left:1px solid #dae1e7; height:100%; }
#event_register .btn_register { color:#ffffff; margin:auto; background:#58f3a7!important; position:static; top:0px; left:0px; height:100%; padding:12px; width:100%; }
#event_register .btn_register svg { color:#ffffff; margin:auto; }
#event_register .btn_register:hover { background: #29c76f !important; transition: 0.2s; }
#event_register .event_share  { position:absolute; top:0px; right:0px; width:50px; border-radius:0px; border:0px; border-left:1px solid #dae1e7; height:100%; }
#event_register .event_share:hover { color: #58f3a7 !important; transition: 0.2s; }

#event_register { position:sticky; top:62px; z-index:10; border-bottom: 1px solid rgba(34, 41, 47, 0.125); }

#event_register.sticktotop { position:sticky; top:62px; z-index:10; left: 0px; width: 100%; min-width:320px; /*box-shadow: 0 0 10px rgb(107 129 173 / 42%);*/}
/*#event_register.sticktotop:before { content:""; position:absolute; left:-1000px; width:3000px; height:100%; border-top: 1px solid rgba(34, 41, 47, 0.125); background-color:#ffffff; }*/
@media (max-width:575.9px) {
#event_register.sticktotop { position:static; top:inherit; z-index:0; left: 0px; width: 100%; min-width:320px; }
#event_register.sticktotop .btn_register { position:fixed; top:inherit; bottom:50px; width:200px; left:50%; margin-left:-100px; height:50px; z-index:10; margin-top:0px; margin-bottom:0px; /*box-shadow: 0 0 10px rgb(107 129 173 / 42%);*/ border-right: 0px;}
}

#event_content .event_follow { position:absolute; top:0px; right:0px; border-radius:0px; border:0px; border-left:1px solid #dae1e7; height:100%; }

.social-share img { /*filter: invert(20%) sepia(13%) saturate(7396%) hue-rotate(185deg) brightness(87%) contrast(94%);*/ }
.social-share:hover img { filter: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%); }


/* count down */
.countdown.show .running { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 5px; }
.countdown.show .running timer { font-size: 1.6rem; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; color: black; }
.countdown.show .running timer .days, .countdown.show .running timer .hours, .countdown.show .running timer .minutes, .countdown.show .running timer .seconds { width: 20%; min-width: 40px; text-align: center; margin: 0 7px; }
.countdown.show .running .labels { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; }
.countdown.show .running .labels small { width: 20%; min-width: 58px; text-align: center; margin: 0px 2px; }
.countdown.show .running .text { font-size: 20px; margin-top: 12px; font-weight: 600; }
.countdown.show .running button { border: none; background-color: black; color: white; border-radius: 25px; padding: 10px 20px; margin: 10px; }
.countdown.show .running .break { -ms-flex-preferred-size: 100%; flex-basis: 100%; height: 0; }
.countdown.show .ended { display: none; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.countdown.show .ended .text { font-size: 20px; }
.countdown.show .ended button { border: none; background-color: #5a0000; color: white; border-radius: 25px; padding: 10px 20px; margin: 10px; }
.countdown.show .ended .break { -ms-flex-preferred-size: 100%; flex-basis: 100%; height: 0; }

/* organizer profile */

#organizer_profile { max-width:680px; width:100%; }
.organizer_logo { max-width:260px; width:60%; }


/* event language pulldown */
.event_language .dropdown-menu { width:inherit; padding:0px; border-radius:0px; animation-duration: 0.3s; animation-fill-mode: both; animation-name: fadeIn; z-index: 8; transform: none!important; top: 20px!important; right:-1px!important; left: inherit!important; }
.event_language .dropdown-menu .dropdown-item { padding: 1.2rem 1.5rem; }
.event_language .dropdown-menu .dropdown-item:hover { color:#000001; background-color:#eeeeee; }
.event_language .dropdown-menu .dropdown-item:active { color:#000001; background-color:#eeeeee; }
.event_language .dropdown-menu .dropdown-item:focus { color:#000001; background-color:#eeeeee; }
.event_language .dropdown-menu .dropdown-divider { margin: 0px; }
.event_language .dropdown-toggle { height:100%; width:100%; }
.event_language .dropdown-toggle .feather-globe { color:#000001; width:18px; height:18px; }
.event_language .dropdown-toggle::after { content:''; display:none; }

/* workout */

.workout_filter_buttons .btn { padding:5px; }
.workout_filter_buttons .btn-dark { border:1px solid transparent; }
.workout_filter_buttons .btn-dark .workout_button { width:auto; height:23px; filter: invert(100%) sepia(98%) saturate(5%) hue-rotate(41deg) brightness(107%) contrast(100%); }
.workout_filter_buttons .btn-outline-dark .workout_button { width:auto; height:23px; filter: invert(8%) sepia(53%) saturate(7426%) hue-rotate(252deg) brightness(70%) contrast(95%); }
.workout_filter_buttons .btn-outline-dark:active .workout_button { filter: invert(100%) sepia(98%) saturate(5%) hue-rotate(41deg) brightness(107%) contrast(100%); }
.workout_filter_buttons .btn-outline-dark:hover .workout_button { filter: invert(100%) sepia(98%) saturate(5%) hue-rotate(41deg) brightness(107%) contrast(100%); }

.workout_table { color:#000001; line-height:22px; }
.workout_table tr { cursor:pointer; }
.workout_table .value { font-size:1.3rem; line-height:1.3px; color:#271e61; font-weight:bold; }
.workout_table img.workout_type { height:40px; width:auto; /*filter: invert(76%) sepia(36%) saturate(621%) hue-rotate(95deg) brightness(101%) contrast(95%);*/ }
.workout_table img.workout_thumbnail { height:52px; width:auto; border-radius:0px; }
.workout_table .icon-chevron-right { font-size:30px; font-weight:bold; }

.workout_table .workout_month td { padding-top:8px; padding-bottom:8px; }

@media (max-width:767.9px) {
/*.workout_table { line-height:18px; font-size:14px; }
.workout_table td { padding-top:12px; padding-bottom:12px; }
.workout_table .value { font-size:20px; line-height:22px; }
.workout_table img.workout_type { height:50px; }
.workout_table img.workout_thumbnail { height:50px; border-radius:8px; }
.workout_table .icon-chevron-right { font-size:26px; }*/
}

@media (max-width:575.9px) {
.workout_table { line-height:12px; font-size:10px; }
.workout_table td { padding:10px 4px; }
.workout_table .value { font-size:14px; line-height:18px; }
.workout_table img.workout_type { height:36px; }
.workout_table img.workout_thumbnail { height:36px; border-radius:0px; }
.workout_table .icon-chevron-right { font-size:18px; }
}

.workout_table tr td:first-child { position:sticky; left:0px; background-color:#ffffff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index:10; }
.workout_table tbody tr:hover td:first-child { background-color: #f9f9f9; }
#my_workout .input-group select.form-control { height:40px; }
#my_workout .input-group select.form-control:not([multiple='multiple']) { background-position: calc(100% - 12px) 10px, calc(100% - 20px) 10px, 100% 0; }
table.dataTable td.workout_info { padding:15px 0px 15px 0px!important; }  /* 20220331 */
table.workout_table td:last-child {padding-left: 0px !important;}  /* 20220331 */
.workout_info .row { min-width:350px; }
@media (max-width:575.9px) {
.workout_info .row { min-width:200px; }
}

#search_panel { /*position:sticky; top:62px; z-index:10;*/ padding:0px 0px 10px 0px; }
#search_panel.sticktotop { background-color:#ffffff; padding:8px 10px 0px 10px; position:sticky; top:62px; z-index:50; left: 0px; width: 100%; min-width:320px; border-top: 1px solid rgba(34, 41, 47, 0.125); border-bottom: 1px solid rgba(34, 41, 47, 0.125); /*box-shadow: 0 0 10px rgb(107 129 173 / 42%);*/}
/*#event_register.sticktotop:before { content:""; position:absolute; left:-1000px; width:3000px; height:100%; border-top: 1px solid rgba(34, 41, 47, 0.125); background-color:#ffffff; }*/
@media (max-width:575.9px) {
#search_panel.sticktotop { background-color:#ffffff; padding:10px 0px 0px 0px; position:fixed; top:62px; z-index:50; left: 0px; width: 100%; min-width:320px; border-top: 1px solid rgba(34, 41, 47, 0.125); border-bottom: 1px solid rgba(34, 41, 47, 0.125); }

}
#adv_search .btn_search { height:50px; padding:16px 40px;}
.mobile_search label { padding-left: 0rem; padding-right: 0.2rem; width:inherit!important; /* width:100%; */ height:100%; display:flex;}
.mobile_search label span { display:table-cell; vertical-align: middle; height:100%; width:inherit; padding: 15px 15px 10px 15px; 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; cursor:pointer; }
.mobile_search label span:hover { background-color: #e6e6e6; border-color: #adadad; }

.category_search.show { display:block!important; }
.category_search { display:block!important; }
#adv_search.show { opacity:1; /*height:63px;*/ height:auto; display:block!important; }
#adv_search { height:0; overflow:hidden; transition: height 0.3s ease-out; }
#search_panel.sticktotop ~ #search_overlay.show { opacity:0; visibility: hidden; width:100%; height:100%; z-index:0; }
#search_panel.sticktotop ~ #search_overlay { position:fixed; top:62px; left:0; right:0; height:calc(100%-62px); background-color: rgba(34, 41, 47, 0.5); display:flex; visibility: hidden; opacity: 0; transition: opacity 0.5s ease; z-index:-1; width:100%; transition: width 0s ease; }

@media (max-width:767.9px) {
#adv_search.show { /*height:120px;*/ height:auto; }
}
@media (max-width:991.9px) {
.category_search.show { opacity:1; height:auto; display:block!important; }
.category_search { display:block!important; height:0; overflow:hidden; -webkit-transition: height 0.3s ease-out; transition: height 0.3s ease-out; }
#search_panel.sticktotop ~ #search_overlay.show { opacity:1; visibility: visible; width:100%; height:100%; z-index:9; }
#search_panel.sticktotop ~ #search_overlay { position:fixed; top:62px; left:0; right:0; height:calc(100%-62px); background-color: rgba(34, 41, 47, 0.5); display:flex; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; z-index:-1; width:100%; transition: width 0s ease; }
}


.item_list { position:relative; }
.event_loading { position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: rgba(34, 41, 47, 0.5); display:flex; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index:-1; /*margin-left: 10px; margin-right: 10px; width: calc(100% - 20px);*/ }
.event_loading.show { opacity:1; visibility: visible; /*width:100%;*/ height:100%; z-index: 4000; }
.event_loading .spinner-border { height:8vw; width:8vw; margin:auto; }

.event_link { color:#58f3a7; }
.event_link:hover { color:#29c76f; }

.modal .loading { position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: rgba(34, 41, 47, 0.5); display:flex; /*visibility: hidden;*/ opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index:-1; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); }
.modal .loading.show { opacity:1; /*visibility: visible;*/ width:100%; height:100%; z-index: 4000; }
.modal .loading .spinner-border { height:8vw; width:8vw; margin:auto; }

.map .loading { position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: rgba(34, 41, 47, 0.5); display:flex; /*visibility: hidden;*/ opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index:-1; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); }
.map .loading.show { opacity:1; /*visibility: visible;*/ width:100%; height:100%; z-index: 4000; }
.map .loading .spinner-border { height:8vw; width:8vw; margin:auto; }


/* upload record page */
#record_type { overflow: hidden; position:relative; }
#upload_gpx { position:relative; top:0px; left:-100%; width:100%; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }
#upload_screenshot { position:absolute; top:0px; left:100%; width:100%; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }
#upload_gpx.show { top:0px; left:0px; }
#upload_screenshot.show { top:0px; left:0px; }

.record_type_switch { color:#58f3a7; cursor:pointer; font-size:1rem; }
.record_type_switch:hover { color:#29c76f; }
.record_type_switch input[type="radio"] { position: absolute; left: -9999px; }

/* friend details */
.friend_info .friend_image { max-width:220px; }
.friend_info .friend_record { max-width:300px; }

.requested { display:none; }


/* map style */

.leaflet-map { height: 400px; max-height: 100vh;  width: 100%; padding: 0px; margin: 0px; }
.elevation-div { height: 200px; width: 100%; padding: 0px; margin: 0px; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; }
.elevation-control .tooltip { position: inherit; z-index: inherit; display: inherit; margin: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; text-align: inherit; text-align: inherit; text-decoration: inherit; text-shadow: inherit; text-transform: inherit; letter-spacing: inherit; word-break: inherit; word-spacing: inherit; white-space: inherit; line-break: inherit; font-size: inherit; word-wrap: inherit; opacity: 1; }
.elevation-control.elevation .background { background-color: #ffffff;}
.custom-theme.height-focus.circle-lower { fill:#71b61c; stroke:#ffffff; stroke-width:2px; r:7; }
.custom-theme.elevation-polyline { stroke:#F00; stroke-opacity:1; stroke-width:2; }
.custom-theme.elevation-polyline-segments { stroke:#FF0; stroke-width: 2; stroke-dasharray:4; }
.custom-theme.elevation-control.elevation .area { /*background: linear-gradient(#e66465, #9198e5);*/ fill: rgba(0, 44, 83, 0.2); stroke: #271e61!important; stroke-width: 1; }
.custom-theme.elevation-control.elevation .area path { stroke: #271e61!important; }

.elevation-control.elevation .axis line, .elevation-control.elevation .axis path { stroke: #271e61; }
/*.elevation-control.elevation .axis .x.axis { display:none; }*/
.elevation-control.elevation .axis .y.axis { position:absolute; left:20px; }
.elevation-control.elevation .axis .y.axis path { display:none; }
.elevation-control.elevation .axis .y.axis .tick line { display:none; }
.elevation-control.elevation .grid .x.grid.bottom { display:none; }
.elevation-control.elevation .grid .y.grid.left .tick line { stroke:rgba(128, 118, 201, 0.4); stroke-width: 1px; shape-rendering: crispEdges; stroke-dasharray: 5; }
.elevation-control.elevation .legend { display:none; }
.leaflet-top.leaflet-right { display:none; }
.leaflet-bottom.leaflet-left { display:none; }
.leaflet-bottom.leaflet-right .leaflet-control-search { display:none; }
.leaflet-bottom.leaflet-right .leaflet-control-locate { display:none; }
.leaflet-bottom.leaflet-right .leaflet-pegman { display:none; }
.leaflet-bottom.leaflet-right .leaflet-control-rotate { display:none; }
.leaflet-bottom.leaflet-right .leaflet-control-attribution.leaflet-edit-osm { display:none; }

.leaflet-control-layers-inline .leaflet-control-layers-base label:nth-child(2) { display:none; }
.leaflet-control-layers-inline .leaflet-control-layers-base label:nth-child(3) { border-right: 2px solid rgba(0,0,0,.2); border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.leaflet-control-layers-inline .leaflet-control-layers-base label:last-of-type { display:none; }
.leaflet-control-layers-base label:last-child { display:none; }

.data-summary { margin-bottom:20px; }
.data-summary .summaryvalue { /*font-family: 'Noto Sans HK', "microsoft jhenghei", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;*/ font-size:30px; color:#271e61; font-weight:bold; display:block; width:100%; line-height: 30px;}
.data-summary .summarylabel { color:#271e61; font-size:0.8rem;}
.data-summary .save_time .summaryvalue { font-size:22px; color:#271e61; }
.data-summary .summaryvalue { font-size:1.8rem; }
.data-summary .record_type { max-height: 50px; margin-top: 15px; width:auto; }

.elevation_title { font-size:28px; color:#271e61; font-weight:bold;  }

#user_profile_head #user-bg { min-height: 200px; }
#right-col .my_event #user_info{ margin-top:-120px; }
#map_thumbnail img { width:100%; height:auto; }
.leaflet-gesture-handling.hide:after { opacity:0!important; transition: opacity 0s ease-in-out!important; }


.StripeElement.form-control {
  padding: 0 1rem;
}

.event_desc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.flatpickr-calendar.open { z-index: 6051; }

/* event team */
.option_block { border-right: 1px solid #ebe9f1 !important; }
.option_block:after { content:attr(data-after); font-weight:bold; font-size:20px; text-align:center; line-height:30px; position:absolute; width:30px; height:30px; background-color:#ffffff; top:50%; margin-top:-15px; right:-15px; }
@media (max-width:575.9px) {
.option_block { border-right: 0px solid #ebe9f1 !important; border-bottom: 1px solid #ebe9f1 !important; }
.option_block:after { content:attr(data-after); font-weight:bold; font-size:20px; text-align:center; line-height:30px; position:absolute; width:30px; height:30px; background-color:#ffffff; top:inherit; bottom:-15px; left:50%; margin-left:-15px; right:inherit; }
}

/* record and feed */
.record { position:relative; }
.feed_title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width:calc(100% - 100px); }
/*#feeds .feed_title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width:calc(100% - 60px); }*/
.feed_delete { position:absolute; top:4px; right:4px; }

.grow-wrap { display: grid; }
.grow-wrap::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; }
.grow-wrap > textarea { resize: none; overflow: hidden; }
.grow-wrap > textarea { border: 1px solid #d8d6de; padding:10px!important; font: inherit; grid-area: 1 / 1 / 2 / 2; }
.grow-wrap::after { border: 1px solid #d8d6de; padding:10px!important; font: inherit; grid-area: 1 / 1 / 2 / 2; }
.grow-wrap > input.form-control { height:40px; border: 1px solid #d8d6de; padding:10px!important; font: inherit; grid-area: 1 / 1 / 2 / 2; }

.feed_button { position:relative; }
.feed_button .event_like { position:absolute; top:0px; right:45px; width:45px; border-radius:0px; border:0px; border-left:1px solid #dae1e7; height:100%; }
.feed_button .event_share  { position:absolute; top:0px; right:0px; width:45px; border-radius:0px; border:0px; border-left:1px solid #dae1e7; height:100%; }
.feed_button .event_share:hover { color: #58f3a7 !important; transition: 0.2s; }

.feed_delete:hover { color: #58f3a7 !important; transition: 0.2s; }

.record_msg p { margin-bottom:0px; }
#feed_loading .event_loading { position:absolute; height:0px;}
#feed_loading .event_loading.show { height:280px; position:relative; }
.end_record { display:none; }

/* image grid add rollover effect */
.image-wrap: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; }
.image-wrap: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; }
.view_more .image-wrap:after { content:" "; }
.image-wrap:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
.image-wrap 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: 100%; height: 100%; flex-shrink: 0; }
.image-wrap:hover:before { background-color:rgba(0, 0, 0, 0.4); }
.image-wrap:hover:after { opacity:1; }

/* mobile page */

html body.mobile-page .content .content-wrapper { padding:5vw; overflow-x:hidden; }
html body.mobile-page #left .avatar_img .avatar_setting { max-width: 120px; max-height: 120px; width: 65%; height: 65%; }
html body.mobile-page .swiper-container { overflow:inherit; }
html body.mobile-page #friend_list .friend_link img { border:4px solid #ffffff; }

/* mobile page color */
html body.mobile-page #left .avatar_img .avatar_setting .edit_profile { position: absolute; top:2%; right:-5%; }
.btn-secondary { transition: 0.5s; border-color: #58f3a7!important; background: rgb(88,243,167);
  background: linear-gradient(270deg, rgba(88,243,167,1) 0%, rgba(88,243,196,1) 86%); color: #000000 !important; }

.btn-secondary:hover{ border-color: #58f3a7!important; background: rgb(88,243,167);
    background: linear-gradient(270deg, rgb(137 249 194) 0%, rgb(131 243 209) 86%); color: #000000 !important; }

#feed_ebadge { overflow-x:hidden; }
#feed_ebadge .swiper-container { overflow:inherit; }
#following { overflow-x:hidden; }
#following .swiper-container { overflow:inherit; }

#userImage.dropzone.single_image .dz-preview.dz-success .dz-image { max-height:360px; text-align: center; }
#userImage.dropzone.single_image .dz-preview.dz-success .dz-image img { max-height:360px; height:100%; width:auto; }
#userImage.leaflet-map { height: 360px; }

.track_duration .input-group-prepend { width:120px; }
.track_duration .input-group-prepend .input-group-text { width:100%; }
@media (max-width:575.9px) {
.track_duration .input-group-prepend { width:65px; }
}

.modal#Modal_upload { height:90vh; width:100%; max-width:1000px; margin-top:-100vh; }
.modal#Modal_upload.show { top:50%; left:50%; margin-top:-45vh; margin-left:-500px; display: block!important; padding: 0px!important; overflow: hidden; }
@media (max-width:1024px) {
.modal#Modal_upload { height:100vh; width:100%; max-width:1000px; }
.modal#Modal_upload.show { height:100vh; width:100%; max-width:1000px; top:50%; left:50%; margin-top:-50vh; margin-left:-50%; display: block!important; padding: 0px!important; overflow: hidden; }
}
.modal#Modal_upload .modal-dialog { height:100%; width:100%; max-width:inherit; margin: 0px; padding: 0px!important; }
.modal#Modal_upload .modal-dialog .modal-content { height:100%; width:100%; max-width:inherit; margin: 0px; padding: 0px!important; }
.modal#Modal_upload .modal-body { height:calc(80vh - 60px - 80px); width:100%; padding:20px!important; overflow-y: scroll; overflow-x: hidden; }


/* workout details */
/*.event_thumbnail { position:relative; }
.event_thumbnail .btn_unlink { position:absolute; top:-8px; right:-4px; }*/

.workout_type { max-height: 50px; margin-top:5px; width: auto; }

.event_thumbnail h5 { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* feed right column */

@media (max-width: 767.9px) {
	body.fixed { position:fixed; }
}

.rightcolumn-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; }
.rightcolumn-overlay.show{ opacity: 0; visibility: hidden; height:100%; z-index:-1; }

@media (max-width:767.9px) {
html body.public-site { width:100%; }
html body.public-site .content .content-wrapper { overflow-x:hidden; }
html body.public-site #checkoutForm.content .content-wrapper { overflow-x:inherit; }

.content-body .feed_right { position:fixed; right:-400px; top:62px; width:400px; z-index:10; max-width:400px; flex:none; background-color:#f6f8fc; padding:20px; border-left:1px solid #ebe9f1; height:calc(100vh - 62px); overflow-y:scroll; transition:right 0.15s ease 0s; -o-transition:right 0.15s ease 0s; -ms-transition:right 0.15s ease 0s; -moz-transition:right 0.15s ease 0s; -webkit-transition:right 0.15s ease 0s;  }

.rightcolumn-overlay.show{ opacity:1; visibility: visible; width:100%; height:100%; z-index: 2; }

.right_col_check { width:30px; height:40px; position:fixed; top:80px; right:0px; z-index:51; opacity:0; transition:right 0.15s ease 0s; -o-transition:right 0.15s ease 0s; -ms-transition:right 0.15s ease 0s; -moz-transition:right 0.15s ease 0s; -webkit-transition:right 0.15s ease 0s; }
.right_col_btn { width:30px; height:40px; position:fixed; top:80px; right:0px; background-color:#000001; color:#ffffff; z-index:50; cursor:pointer; transition:right 0.15s ease 0s; -o-transition:right 0.15s ease 0s; -ms-transition:right 0.15s ease 0s; -moz-transition:right 0.15s ease 0s; -webkit-transition:right 0.15s ease 0s; }
.right_col_btn .arrow_left { display:block; }
.right_col_btn .arrow_right { display:none; }

.right_col_check:checked~.feed_right { right:0px; }
.right_col_check:checked { right:400px; }
.right_col_check:checked~.right_col_btn { right:400px; }
.right_col_check:checked~.right_col_btn .arrow_left { display:none; }
.right_col_check:checked~.right_col_btn .arrow_right { display:block; }

}

@media (max-width:480px) {
.content-body .feed_right { right:calc(-100vw + 40px); width:calc(100vw - 40px); max-width:calc(100vw - 40px); }
.right_col_check:checked { right:calc(100vw - 40px); }
.right_col_check:checked~.right_col_btn { right:calc(100vw - 40px); }
}

@media (max-width:400px) {
#event_list .nav-link { padding: 0.61rem 0.6rem; font-size: 0.8rem; }
}

/* price plan */
.plan_title.basic { color: #58f3a7; }
.plan_title.pro { color: #ea5455; }
.plan_title.premium { color: #000001; }
.plan_price_block { min-height:180px; }
.plan_price { font-size:40px; }
.plan { font-size:16px; }
.plan_content { width:240px; margin:auto; }

.plan_include { color: #58f3a7; }
.plan_exclude { color: #ea5455; }

/* dashboard */
.table-responsive.dashboard { min-height:inherit!important; }

.workout_img img { height:70px; width:auto; }

.product_items { display:table; }
.product_row { display:table-row; border-bottom:1px solid #ebe9f1; }
.product_row div { display:table-cell; border-bottom:1px solid #ebe9f1; }
.product_row div img { width:70px; height:auto; }

/*.product_items { width:100%; display:flex; flex-wrap: wrap; }
.product_row { display: flex; flex-wrap: wrap; position:relative; height:71px; }
.product_row div { height:70px; display: inline-block; }
.product_row div.prod_image { order: 1; width:70px; position: absolute; top: 0px; left: 0px; }
.product_row div.prod_title { order: 2; width:100%; min-height: 36px; padding-left: 80px!important; padding-top: 14px!important; padding-bottom: 0px!important; }*/


/* affiliate */

.event_title_two_lines { min-width:150px!important; }
.event_title_two_lines span { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }


/* 20231207 upload file basic */
.custom-file { position: relative; display: inline-block; width: 100%; height:50px; margin-bottom: 0; }
.custom-file-input { position: relative; z-index: 2; width: 100%; height: 50px; margin: 0; overflow: hidden; opacity: 0; }
.custom-file-input:lang(en) ~ .custom-file-label::after { content:"Browse"; }
.custom-file-label { position:absolute; top:0; right:0; left:0; z-index:1; height:50px!important; padding:0.6rem 1rem; overflow: hidden; font-weight: 400; line-height:32px; color: #6e6b7b; background-color:#fff; border:1px solid #d8d6de; border-radius:0px; }
.form-group label.custom-file-label { margin-bottom: 0px; }
.custom-file-label::after { position: absolute; top:0; right:0; bottom:0; z-index:3; display:block; height:50px; line-height:32px; padding:0.6rem 1rem; color:#6e6b7b; content:"Browse"; background-color:white; border-left:inherit; border-radius:0px; }


/* photographer info */

.profile_pic { position:absolute; bottom:-40px; left:20px; width:30%; height:auto; border:3px solid #ffffff; max-width:80px; height:auto; }
.profile_name { max-width:60%; text-align:right; float:right; }

.album .profile_pic { bottom:inherit; left:inherit; right:20px; top:20px; width:80px; }

/* album */

#event_date.form-control[readonly] {
  background-color: #ffffff;
  opacity: 1;
}
#link_event_block .form-control[readonly] { /* 20240206 */
  background-color: #ffffff;
  opacity: 1;
}
#registration_date.form-control[readonly] {
  background-color: #ffffff;
  opacity: 1;
}
input[name='event_date'].form-control[readonly] {
  background-color: #ffffff;
  opacity: 1;
}
.top_layer { z-index: 10000; }

.album_title_bg { position:absolute; top:0px; left:0px; width:100%; height:100%; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0) 60%); }
.album_title_content { position:absolute; bottom:0px; left:0px; }
.album_title { color:#ffffff; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; }
.album.open .album_title_bg { background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.3) 100%); }
.album.open .album_title_content { max-height: 100%; height:auto; overflow-y: auto; }
.album.open .album_title_content .album_title { color:#ffffff; text-overflow:initial; display:block; overflow:auto; }
.album_expand { position:absolute; bottom:1rem; right:1rem; z-index:20; display:block; }
.album_collapse { position:absolute; bottom:1rem; right:1rem; z-index:20; display:block; }



/* 20240107 */

.ad_card { aspect-ratio: 300/300; width:100%; }

.ad_card_320x50 { aspect-ratio: 320/50; width:100%; max-width:320px;}

/*
.exif_info .row {
  width: 50% !important;
  display: inline-flex;
}
.exif_info .col.attr_name.font-weight-bold.mb-25 {
  text-align: right;
}

.dropdown-menu .exif_info .col.attr_name.font-weight-bold.mb-25 {
  text-align: left;
}

.dropdown-menu .exif_info .row {
  width: 100% !important;
  display: flex;
}
*/

.icon_bg{
  height: 43px !important;
}

@media (max-width: 767.9px) {
  .exif_info .row {
    width: 100% !important;
  }
  .exif_info .col.attr_name.font-weight-bold.mb-25 {
    text-align: left;
  }
}
/* end 20240107 */

/* photo info style for right column / dropdown */
.right_photo_info .photographer_link { display: flex!important; align-items:center; }
.right_photo_info .photographer_link img { margin-right:0.5rem; }
.right_photo_info .statistic_info { display: flex; }
.right_photo_info .statistic_info div { margin-right:1rem; }
.right_photo_info .update_info br { display:none; }
.dropdown .photographer_link { display: flex!important; align-items:center; }
.dropdown .photographer_link img { margin-right:0.5rem; }
.dropdown .statistic_info { display: flex; }
.dropdown .statistic_info div { margin-right:1rem; }
.dropdown .update_info br { display:none; }
.dropdown #btn_show_more { display:none; }


#photo_list div.action_delete, #photo_list div.action_view { /*border:1px solid transparent;*/ position: relative; display: inline-block; overflow: hidden; vertical-align: middle; }
#photo_list > div > img { height:150px; width:auto; -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); flex-shrink: 0; }

/* image grid add rollover effect */
/* photo list for album edit */
#photo_list .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; }
#photo_list .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; }
#photo_list .photo_item.action_view { cursor:pointer; }
#photo_list .photo_item.action_delete { cursor:pointer; }
#photo_list .photo_item.action_delete:after { font-family:feather; content: "\e8db"; }
#photo_list .photo_item:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
#photo_list .photo_item:hover:before { background-color:rgba(0, 0, 0, 0.4); }
#photo_list .photo_item:hover:after { opacity:1; }
#photo_list div.loading-overlay.small .spinner-border { height: 40px; width: 40px; }
#photo_list div.loading-overlay.small.inside.show { z-index: 1;}
#photo_list div.loading-overlay { /*aspect-ratio:4/3;*/ }

/* photo list for album view */
#photo_list.view_album .photo_item { position:relative; }
#photo_list.view_album .photo_item:before { display:none; }
#photo_list.view_album .photo_item:after { display:none; }
#photo_list.view_album .photo_item:hover img { -webkit-transform:none; transform:none; }
#photo_list.view_album .photo_item:hover:before { display:none; }
#photo_list.view_album .photo_item:hover:after { display:none; }

#photo_list .ad_card { aspect-ratio:auto; width:inherit; }
#photo_list .ad_card img { height:349px; width:auto; opacity:0; }
#photo_list .album img.photoimg { height:300px; width:auto; flex-shrink: 0; }

/* photo nav arrow */
#photo_list .photo_item .left_arrow:before { display:block; content:""; position:absolute; width:100%; height:100%; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); opacity:0; -webkit-transition:opacity 0.3s ease 0s; -o-transition:opacity 0.3s ease 0s; transition:opacity 0.3s ease 0s; z-index:10; }
#photo_list .photo_item .left_arrow:after { font-family:feather; font-size:10vh; color:#ffffff; width:10vh; height:10vh; line-height:100px; position:absolute; margin-top:-50px; left:0px; 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; }
#photo_list .photo_item .right_arrow:before { display:block; content:""; position:absolute; width:100%; height:100%; background: linear-gradient(270deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); opacity:0; -webkit-transition:opacity 0.3s ease 0s; -o-transition:opacity 0.3s ease 0s; transition:opacity 0.3s ease 0s; z-index:10; }
#photo_list .photo_item .right_arrow:after { font-family:feather; font-size:10vh; color:#ffffff; width:10vh; height:10vh; line-height:100px; position:absolute; margin-top:-50px; right:0px; 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; }
#photo_list .photo_item .left_arrow { cursor:pointer; }
#photo_list .photo_item .right_arrow { cursor:pointer; }
#photo_list .photo_item .left_arrow:after { font-family:feather; content: "\e843"; }
#photo_list .photo_item .right_arrow:after { font-family:feather; content: "\e844"; }
#photo_list .photo_item .left_arrow:hover:before { opacity:1; }
#photo_list .photo_item .left_arrow:hover:after { opacity:0.7; }
#photo_list .photo_item .right_arrow:hover:before { opacity:1; }
#photo_list .photo_item .right_arrow:hover:after { opacity:0.7; }

/* photo thumbnail list */
#photo_thumbnail_list div.action_delete, #photo_thumbnail_list div.action_view { /*border:1px solid transparent;*/ position: relative; display: inline-block; overflow: hidden; vertical-align: middle; }
#photo_thumbnail_list > div > img { height:150px; width:auto; -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); flex-shrink: 0; }

#photo_thumbnail_list .thumbnail_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; }
#photo_thumbnail_list .thumbnail_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; }
#photo_thumbnail_list .thumbnail_item.action_view { cursor:pointer; }
#photo_thumbnail_list .thumbnail_item.action_delete { cursor:pointer; }
#photo_thumbnail_list .thumbnail_item.action_delete:after { font-family:feather; content: "\e8db"; }
#photo_thumbnail_list .thumbnail_item:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
#photo_thumbnail_list .thumbnail_item:hover:before { background-color:rgba(0, 0, 0, 0.4); }
#photo_thumbnail_list .thumbnail_item:hover:after { opacity:1; }
#photo_thumbnail_list div.loading-overlay.small .spinner-border { height: 40px; width: 40px; }
#photo_thumbnail_list div.loading-overlay.small.inside.show { z-index: 1;}
#photo_thumbnail_list div.loading-overlay { /*aspect-ratio:4/3;*/ }

#photo_thumbnail_list .thumbnail_item { border:3px solid transparent; }
#photo_thumbnail_list .thumbnail_item.active { border:3px solid #27bb73; }
#photo_thumbnail_list.view_album .thumbnail_item { position:relative; }
#photo_thumbnail_list.view_album .thumbnail_item:before { display:none; }
#photo_thumbnail_list.view_album .thumbnail_item:after { display:none; }
#photo_thumbnail_list.view_album .thumbnail_item:hover img { -webkit-transform:none; transform:none; }
#photo_thumbnail_list.view_album .thumbnail_item:hover:before { display:none; }
#photo_thumbnail_list.view_album .thumbnail_item:hover:after { display:none; }

#photo_thumbnail_list .ad_card { aspect-ratio:auto; width:inherit; }
#photo_thumbnail_list .ad_card img { height:349px; width:auto; opacity:0; }
#photo_thumbnail_list .album img.photoimg { height:300px; width:auto; flex-shrink: 0; }

/*.event_card .card-footer { position:relative; }*/
.btn_like, .btn_follow, .btn_save, .btn_share { /*width:50px; height:100%; border-radius:0px; background-color:#ffffff; border-left:1px solid #dae1e7; position:absolute; bottom:0px; right:0px;*/ cursor:pointer; }
.btn_like.active svg { color:#ea5455; fill:#ea5455; }
.btn_follow.active svg { color:#27bb73; fill:#27bb73; }
.btn_save.active svg { color:#27bb73; fill:#27bb73; }

/*.like_card .event_like, .like_card .event_follow { width:36px; height:100%; border-radius:0px; background-color:#ffffff; border-left:1px solid #dae1e7; position:absolute; bottom:0px; right:0px; }*/


.fa.fa-sort-amount-desc:after { content: "\f161"!important; font-family: "FontAwesome"!important; color: #27bb73; }
.fa.fa-sort-amount-asc:after { content: "\f160"!important; font-family: "FontAwesome"!important; color: #27bb73; }

.photo_info { /*position:absolute; top:10px; left:10px;*/ }
.photo_info .dropdown-toggle svg { color: #27bb73; width: 22px; height: 22px; }
.photo_info .dropdown-menu { padding:0px; border-radius:0px; }
.photo_info .dropdown-toggle::before { width:0px!important; height:0px!important; content:none;}
.photo_info .dropdown-toggle::after { width:0px!important; height:0px!important; content:none;}
.photo_info .dropdown-menu { /*background: rgba(0,0,0,0.3);*/ }
.photo_info .profile_pic { width:50px; height:50px; position:static; border:0px; }
.ngo_logo { width:80px; height:80px; position:static; border:0px; }

.pagination .page-item.pagenum.disabled .page-link { color: #000000; }
@media (max-width: 767.9px) {
  html body.public-site .content .form_footer .content-wrapper { overflow-x:initial; }
}



.dropdown.photo_info .dropdown-menu { min-width:300px!important; }
.form_footer .Photo_EXIF .dropdown-menu { min-width:270px!important; max-height:400px!important; overflow-y:auto; }


#event_table .table th, #event_table .table td { border-top: 1px solid #ebe9f1; padding:5px 10px;}

/* shopping cart */
/* cart summary */
#modal_cart.modal-slide-in .modal-dialog { height:100%;}
#modal_cart.modal-slide-in .modal-dialog .modal-body { min-height: calc(100% - 60px - 79px); padding-bottom:20px!important;}
#modal_cart.modal-slide-in .modal-footer { position:sticky; width:100%; bottom:0px; left:0px; z-index: 100; }
#modal_cart.modal-slide-in .modal-dialog .modal-content { overflow: hidden!important; }
@media (min-width: 576px) {
  #modal_cart.modal-slide-in .modal-dialog.sidebar-lg { width:30vw!important; min-width:400px; max-width:400px;}
}
.btn_cart { overflow:visible; padding:12px;}
.btn_cart img { height:16px; width:auto; }

.btn_cart.animate { animation: animateCart .3s ease-in-out forwards; }
.btn_cart.badge.animate { animation: animateCart .3s ease-in-out forwards; }

.btn_addtocart { position:relative; overflow:visible; z-index:100; }
.cart-item {
  position:absolute;
  top:0px;
  left:50%;
  margin-left:-12px;
  opacity:0;
  display:block;
  line-height:24px;
  height:24px;
  width:24px;
  font-size:12px;
  font-weight:600;
  background:#2bd156;
  color:white;
  border-radius:20px;
  text-align:center;
  z-index:50000;
}

/*.cart-item:before {
  content:'1';
  display:block;
  line-height:24px;
  height:24px;
  width:24px;
  font-size:12px;
  font-weight:600;
  background:#2bd156;
  color:white;
  border-radius:20px;
  text-align:center;
  z-index:50000;
}*/
.btn_addtocart.sendtocart {
  .cart-item {
    display:inline-block;
    opacity:1;
    /*animation: xAxis 0.5s forwards cubic-bezier(1.000,0.440,0.840,0.165);*/
    animation: moveUp 0.5s alternate forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
    /*&:before {
      animation: yAxis 0.5s alternate forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }*/
  }
}

@keyframes animateCart {
  25% {
    /*transform:translateX(6px)*/
    transform:scale(1.2);
  }
  50% {
    /*transform:translateX(-4px);*/
    transform:scale(1.4);
  }
  75% {
    /*transform:translateX(2px);*/
    transform:scale(1.2);
  }
  100% {
    /*transform:translateX(0);*/
    transform:scale(1);
  }
}

@keyframes moveUp {
  50% {
    transform: translateY(calc(-50px));
    opacity: 1;
  }
  100% {
    transform: translateY(calc(-150px));
    opacity: 0;
  }
}

@keyframes xAxis {
  100% {
    transform: translateX(calc(50vw - 100px));
    opacity: 0;
  }
}

@keyframes yAxis {
  100% {
    transform: translateY(calc(-50vh + 100px));
    opacity: 0;
  }
}

.cart_photo_list div.action_delete, .cart_photo_list.action_view { /*border:1px solid transparent;*/ position: relative; display: inline-block; overflow: hidden; vertical-align: middle; }
.cart_photo_list > div > img { height:150px; width:auto; -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); flex-shrink: 0; }

/* image grid add rollover effect */
/* photo list for cart photos */
.cart_photo_list .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; }
.cart_photo_list .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; }
.cart_photo_list .photo_item.action_view { cursor:pointer; }
.cart_photo_list .photo_item.action_delete { cursor:pointer; }
.cart_photo_list .photo_item.action_delete:after { font-family:feather; content: "\e8db"; }
.cart_photo_list .photo_item:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
.cart_photo_list .photo_item:hover:before { background-color:rgba(0, 0, 0, 0.4); }
.cart_photo_list .photo_item:hover:after { opacity:1; }
.cart_photo_list div.loading-overlay.small .spinner-border { height: 40px; width: 40px; }
.cart_photo_list div.loading-overlay.small.inside.show { z-index: 1;}
.cart_photo_list div.loading-overlay { /*aspect-ratio:4/3;*/ }

.checkout_item { width:calc(100% - 52px);}

/* photo list for checkout photos */
.checkout_photo_list div.action_delete, .checkout_photo_list.action_view { /*border:1px solid transparent;*/ position: relative; display: inline-block; overflow: hidden; vertical-align: middle; }
.checkout_photo_list .photo_item img { height:150px; width:auto; -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); flex-shrink: 0; }
.checkout_photo_list .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; }
.checkout_photo_list .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; }
.checkout_photo_list .photo_item.action_view { cursor:pointer; }
.checkout_photo_list .photo_item.action_delete { cursor:pointer; }
.checkout_photo_list .photo_item.action_delete:after { font-family:feather; content: "\e8db"; }
.checkout_photo_list .photo_item:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
.checkout_photo_list .photo_item:hover:before { background-color:rgba(0, 0, 0, 0.4); }
.checkout_photo_list .photo_item:hover:after { opacity:1; }
.checkout_photo_list div.loading-overlay.small .spinner-border { height: 40px; width: 40px; }
.checkout_photo_list div.loading-overlay.small.inside.show { z-index: 1;}
.checkout_photo_list div.loading-overlay { /*aspect-ratio:4/3;*/ }

.item_block .photo_info a { padding:10px; }

#checkoutForm.content .content-wrapper { min-height: calc(100vh - 326px - 80px); }
#checkoutForm.content .form_footer .content-wrapper { min-height:initial; }

#checkout_table .table th, #checkout_table .table td { border-top: 1px solid #ebe9f1; padding:10px 12px;}
#earning_table .table th { border-top: 0px; padding:15px 15px;}
#earning_table .table td { border-top: 1px solid #ebe9f1; padding:15px 15px;}
#earning_table .table tfoot th { border-top: 1px solid #ebe9f1; padding:15px 15px;}


body.swal2-height-auto { height: inherit !important; max-height: 100%; } /* fixed bottom footer sticky when swal is on */


@media (max-width:767.9px) {
  html body.public-site.event-filter .content .content-wrapper { overflow-x:initial; }
}

@media (max-width:575.9px) {
  #search_panel.sticktotop { position: sticky; width: calc(100% + 6vw); margin-left: -3vw; padding-left:3vw; padding-right:3vw; }
  /*html body.public-site.event-filter .content .content-wrapper { overflow-x:initial; }
  .horizontal-menu .header-navbar.navbar-fixed { position: fixed; }*/
}


.table tbody tr.event_label th { background-color: #eeeeee; border-top:0px solid #ebe9f1; border-bottom:0px solid #ebe9f1; }
.table thead tr.event_group th { border-top:1px solid #ebe9f1; border-bottom:0px solid #ebe9f1; }
.table thead:first-child tr.event_group th { border-top:0px solid #ebe9f1; border-bottom:0px solid #ebe9f1; }

.dtfc-fixed-left { position:sticky; left:0px; }
.dtfc-fixed-right { position:sticky; right:0px; }

#event_list .table-responsive { min-height:inherit; }
#event_list table.dataTable.no_shadow { border-spacing: 0 0px; }

.step_title .event_name { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden; }
.step_title .event_label { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden; }
.step_title .album_name { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden; }
.step_title .album_label { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden; }
.step_title .vr { border-left: 1px solid #ebe9f1; width:1px; height:40px; }

.checkout_title h4 { line-height:16px; }


@media (max-width:400px) {
.pagination .page-item.pagenum.disabled .page-link { color: #000000; padding:0px; font-size:14px!important;}
.pagination .page-item .page-link { padding: 0rem 0.5rem; }
.page-item .page-link { min-width: 1rem; }
.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 { /*font-size: 0px;*/ }
.pagination .page-item.first a, .pagination .page-item.previous a, .pagination .page-item.next a, .pagination .page-item.last a { width:26px; }
}



.print_photo_list .photo_item {
  aspect-ratio: 1 / 1;
  width: 100%;
  background-color: #eeeeee;
  align-items: center;
  text-align: center;
  border-radius: 0px;
  display: flex;
  overflow: hidden;
}

.print_photo_list .photo_item img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.print_photo_list .ticket_checkbox { position:absolute; top:10px; left:10px; }
.print_photo_list .ticket_checkbox label { margin:0px; padding:0px; }
.print_photo_list .ticket_checkbox input[type="checkbox"]:before { background-color:#ffffff; }
.print_photo_list .ticket_checkbox input[type="checkbox"]:checked:before { border: 1px solid #000000; background-color: #000000; }

.popover { border-radius: 0px; }
.popover-header { border-radius: 0px; }
.popover .popover-body { border-radius: 0px; }