/* 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 */
.concept .bg-primary {
background-color: #aae7ff !important;
}
#logo { width:200px; }
.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: #ffffff; }
.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; }
.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.png) no-repeat;*/ /*height:62px; width:140px; background-size: contain; background-position:center;*/ /*margin:0px auto;*/ }
*{ scroll-behavior: smooth; }
.brand-logo img { width:auto; height:62px; min-width:100px!important; max-width:250px!important; margin-right: 10px; padding:10px 10px 10px 20px; }
.card { border-radius: 20px; }
.card-header { border-radius: 20px 20px 0px 0px; }
.card-header:last-child { border-radius: 20px; }
.card.event_card { background-color:transparent; box-shadow:none; }
.card.event_card .card-body { background-color:transparent; }
.card_top_image img { border-radius: 5px; /*border-top-left-radius: 20px; border-top-right-radius: 20px;*/ }
.card.event_card .badge { margin-top:5px; }
.alert { border-radius:20px; }
/* 20240116 **/
hr {
border-top: 1px solid #dcdae1;
}
/* sub-color */
.text-primary { color: #2f286d!important; }
.subcolor_magenta { color: #ed217c!important; } /* magenta */
.subcolor_red { color: #dd4d66!important; } /* red */
.subcolor_pink { color: #f27fb2!important; } /* pink */
.subcolor_orange { color: #ef3d36!important; } /* orange */
.subcolor_peach { color: #dc4e65!important; } /* peach */
.subcolor_yellow { color: #f3bb45!important; } /* yellow */
.subcolor_green_light { color: #b1c947!important; } /* brighter green */
.subcolor_green { color: #4bb955!important; } /* green */
.subcolor_green_dark { color: #009390!important; } /* lake green */
.subcolor_blue_light { color: #2ec5f3!important; } /* lighter blue */
.subcolor_blue { color: #00aeef!important; } /* sky blue */
.subcolor_magenta_fill { color: #ed217c!important; fill: #ed217c!important; } /* magenta */
.subcolor_red_fill { color: #dd4d66!important; fill: #dd4d66!important; } /* red */
.subcolor_pink_fill { color: #f27fb2!important; fill: #f27fb2!important; } /* pink */
.subcolor_orange_fill { color: #ef3d36!important; fill: #ef3d36!important; } /* orange */
.subcolor_peach_fill { color: #dc4e65!important; fill: #dc4e65!important; } /* peach */
.subcolor_yellow_fill { color: #f3bb45!important; fill: #f3bb45!important; } /* yellow */
.subcolor_green_light_fill { color: #b1c947!important; fill: #b1c947!important; } /* brighter green */
.subcolor_green_fill { color: #4bb955!important; fill: #4bb955!important; } /* green */
.subcolor_green_dark_fill { color: #009390!important; fill: #009390!important; } /* lake green */
.subcolor_blue_light_fill { color: #2ec5f3!important; fill: #2ec5f3!important; } /* lighter blue */
.subcolor_blue_fill { color: #00aeef!important; fill: #00aeef!important; } /* sky blue */
.bg-primary { background-color: #2f286d!important; }
.bg-subcolor_magenta { background-color: #ed217c!important; } /* magenta */
.bg-subcolor_red { background-color: #dd4d66!important; } /* red */
.bg-subcolor_pink { background-color: #f27fb2!important; } /* pink */
.bg-subcolor_orange { background-color: #ef3d36!important; } /* orange */
.bg-subcolor_peach { background-color: #dc4e65!important; } /* peach */
.bg-subcolor_yellow { background-color: #f3bb45!important; } /* yellow */
.bg-subcolor_green_light { background-color: #b1c947!important; } /* brighter green */
.bg-subcolor_green { background-color: #4bb955!important; } /* green */
.bg-subcolor_green_dark { background-color: #009390!important; } /* lake green */
.bg-subcolor_blue_light { background-color: #2ec5f3!important; } /* lighter blue */
.bg-subcolor_blue { background-color: #00aeef!important; } /* sky blue */
.bg-grey { background-color: #cccccc; }
.cat_header h5 {
font-size: 1.2rem;
padding: 5px;
}
/* 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:#2f286d
}**/
/* 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(47, 40, 109, 0.12);
border-radius: 0px;
border-right: 5px solid #2f286d;
}
.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: #2f286d !important;
transition: 0.2s;
}
.event_details .btn_notification {
color:#ffffff; margin:auto; background:#2f286d!important; position:absolute; top:0px; right:40px; height:100%; padding:12px; border-right:1px solid #ffffff;
width:40px;
}
.event_details .btn_notification:hover{
background: #2f286d !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: #2f286d !important;
transition: 0.2s;
}
.event_details .btn_close {
color:#ffffff; margin:auto; background:#2f286d!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,');
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,');
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: #2f286d;
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: #2f286d!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:#2f286d!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: #ffffff; border:0px;}
.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:20px; 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:8px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:hover { color:#2f286d; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:active { color:#2f286d; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user .dropdown-menu .dropdown-item:focus { color:#2f286d; 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:20px; 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:#2f286d; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item:active { color:#2f286d; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item:focus { color:#2f286d; background-color:#eeeeee; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-divider { margin: 0px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item:first-child { border-top-left-radius:20px; border-top-right-radius:20px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language .dropdown-menu .dropdown-item:last-child { border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
#menu { height:62px; background-color:#ffffff; }
/*#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 13px; font-size:14px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-language { padding: 0px; }
.header-navbar .navbar-container ul.navbar-nav li.dropdown-user { padding:0px 0px 0px 0px!important; }
.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-header { min-width: 160px; }
}
@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: #2f286d; font-size:16px; }
#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:50px; display:inline-block; height:62px; color:#2f286d; position: relative; top:0px; left:160px; text-align: center; color: #2f286d; }
/* 20220310 */
/*#menuToggle:before { content:"1"; text-indent:-9999px; display:inline-block; width:28px; height:28px; color:#2f286d; position: relative; top:16px; left:72px; background-image: url("data:image/svg+xml,"); 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:50px; height: 62px; position: absolute; top:0px; left:160px; 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 15px!important; /*margin-top: 10px !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: #2f286d!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; }
.no-left-menu.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container {
margin-left: 0; display:flex; align-items:center;
}
@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; display:flex; align-items:inherit;
}
}
@media (max-width: 767.98px) {
.main-menu { transform: translate3d(-260px, 0, 0); }
.no-left-menu.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container {
margin-left: 0; display:flex; align-items:flex-start; /*padding: 0px 10px;*/
}
.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: #ffffff;
width: inherit;
position: fixed;
height: 62px;
display: inline-block;
top: 0px;
left: 0px;
}
a.sm-logo img { width:auto; height:62px; min-width:100px!important; max-width:250px!important; margin-right: 10px; padding:10px 10px 10px 20px!important; }
/* 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:#2f286d!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; padding:10px; border-radius:20px;}
.table_actions .dropdown-menu .dropdown-item { padding: 0.75rem 1rem; border-radius:30px; }
.table_actions .dropdown-menu .dropdown-item:hover { color:#2f286d; background-color:#eeeeee; }
.table_actions .dropdown-menu .dropdown-item:active { color:#2f286d; background-color:#eeeeee; }
.table_actions .dropdown-menu .dropdown-item:active:hover { color:#ffffff; background-color:#2ec5f3; }
.table_actions .dropdown-menu .dropdown-item:focus { color:#2f286d; background-color:#eeeeee; }
.table_actions .dropdown-menu .dropdown-item.active { color:#ffffff; background-color:#00aeef; }
.table_actions .dropdown-menu .dropdown-item.active:hover { color:#ffffff; background-color:#2ec5f3; }
.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:#2f286d; width:22px; height:22px; }
.table_actions .dropdown-toggle::after { content:''; display:none; }
.action_col svg { color: #2f286d; width: 22px; height: 22px; }
.action_col .feather:before { font-size: 20px; }
/* 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;}*/
/* activity action dropdown */
.activity_actions .dropdown-menu { padding:0px; border-radius:0px; animation-duration: 0.3s; animation-fill-mode: both; animation-name: fadeIn; /*left: -30px!important;*/ z-index:100; padding:10px; border-radius:20px;}
.activity_actions .dropdown-menu .dropdown-item { padding: 0.75rem 1rem; border-radius:30px; }
.activity_actions .dropdown-menu .dropdown-item:hover { color:#2f286d; background-color:#eeeeee; }
.activity_actions .dropdown-menu .dropdown-item:active { color:#2f286d; background-color:#eeeeee; }
.activity_actions .dropdown-menu .dropdown-item:active:hover { color:#2f286d; background-color:#eeeeee; }
.activity_actions .dropdown-menu .dropdown-item:focus { color:#2f286d; background-color:#eeeeee; }
.activity_actions .dropdown-menu .dropdown-item.active { color:#2f286d; background-color:#eeeeee; }
.activity_actions .dropdown-menu .dropdown-item.active:hover { color:#2f286d; background-color:#eeeeee; }
.activity_actions .dropdown-menu .dropdown-divider { margin: 0px; }
.activity_actions .dropdown-toggle { height:100%; width:100%; }
.activity_actions .dropdown-toggle svg { color:#2f286d; width:22px; height:22px; }
.activity_actions .dropdown-toggle::after { content:''; display:none; }
/* card action dropdown */
/*.card_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; }*/
.card_actions .dropdown-menu { position: relative; float: none; transform: none; border-radius: 0px; right: inherit; top: inherit; box-shadow: none; padding:10px; border-radius:20px; }
.card_actions .dropdown-menu .dropdown-item { padding: 0.75rem 1rem; border-radius:30px; padding-left: 3.6em;
text-indent: -2.8em;
white-space: wrap !important;}
.card_actions .dropdown-menu .dropdown-item:hover { color:#2f286d; background-color:#eeeeee; }
/*.card_actions .dropdown-menu .dropdown-item:active { color:#2f286d; background-color:#eeeeee; }
.card_actions .dropdown-menu .dropdown-item:active:hover { color:#ffffff; background-color:#2ec5f3; }
.card_actions .dropdown-menu .dropdown-item.active { color:#ffffff; background-color:#00aeef; }
.card_actions .dropdown-menu .dropdown-item.active:hover { color:#ffffff; background-color:#2ec5f3; }
*/
.card_actions .dropdown-menu .dropdown-item:active { color:#2f286d; background-color:#eeeeee; }
.card_actions .dropdown-menu .dropdown-item:active:hover { color:#2f286d; background-color:#eeeeee; }
.card_actions .dropdown-menu .dropdown-item.active { color:#2f286d; background-color:#eeeeee; }
.card_actions .dropdown-menu .dropdown-item.active:hover { color:#2f286d; background-color:#eeeeee; }
.card_actions .dropdown-menu .dropdown-item:focus { color:#2f286d; background-color:#eeeeee; }
.card_actions .dropdown-menu .dropdown-divider { margin: 0px; }
.card_actions .dropdown-toggle { height:100%; width:100%; }
.card_actions .dropdown-toggle svg { color:#2f286d; width:22px; height:22px; }
.card_actions .dropdown-toggle::after { content:''; display:none; }
.action_col svg { color: #2f286d; 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; }
table.dataTable td, table.dataTable th { padding: 8px 10px; vertical-align: middle; height:30px; }
.table th, .table td { padding: 5px 5px; vertical-align: top; /*border-top: 0px solid #ebe9f1;*/ }
.table thead th, .table tfoot th { font-size:inherit; letter-spacing:inherit; }
.table thead th { /*vertical-align: bottom;*/ border-bottom: 0px solid #ebe9f1; height:45px; }
/*.image_col { width: 100px; padding:0px!important; }
.action_col { white-space: nowrap; width:auto; }*/
table.dataTable td.image_col img { height:70px; width:auto; }
table.dataTable td.image_col { width: 100px; padding:0px!important; }
table.dataTable th.drag_col, table.dataTable td.drag_col { white-space: nowrap; width:10px; padding-left:20px!important; padding-right:20px!important; }
table.dataTable th.action_col, table.dataTable td.action_col { white-space: nowrap; width:10px; }
table.dataTable th.avatar_col, table.dataTable td.avatar_col { white-space: nowrap; width:10px; padding:0px!important; }
/*.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; }*/
table.dataTable thead th, table.dataTable thead td { padding:8px 10px!important; background-color: rgba(11, 155, 251, 0.1)!important; padding-top:15px!important; padding-bottom:15px!important; }
/* fixed column */
table.dataTable thead th.dtfc-fixed-left { /*background-color: rgba(11, 155, 251, 0.1)!important;*/ background-color:#e6f5ff!important; z-index:1!important; }
table.dataTable thead th.dtfc-fixed-right { /*background-color: rgba(11, 155, 251, 0.1)!important;*/ background-color:#e6f5ff!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; }
/* 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:#d0ecff!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:"\f883"; }
table.dataTable thead .sorting_desc:before { content:""; }
table.dataTable thead .sorting_asc:after { content:"\f160"!important; font-family:"FontAwesome"!important; color:#0070c0; background-image:none; padding-left:5px;}
table.dataTable thead .sorting_desc:after { content:"\f161"!important; font-family:"FontAwesome"!important; color:#0070c0; background-image:none; padding-left:5px;}
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th { border-top:0; box-sizing:border-box; }
.table>thead>tr>th:first-child { padding-left:20px!important;}
.table>tbody>tr>td:first-child { padding-left:20px!important;}
.table>thead>tr>th:last-child { padding-right:20px!important;}
.table>tbody>tr>td:last-child { padding-right:20px!important;}
table.dataTable td { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
table.dataTable td { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
table.dataTable tbody tr:hover td { background-color: #f9f9f9!important; }
table.dataTable tbody tr:hover td { background-color: #f9f9f9!important; }
table.dataTable tbody tr td.sorting_1 { background-color:#FAFAFA; }
table.dataTable tbody tr:hover td.sorting_1 { background-color:#f5f5f5; }
table.dataTable tbody tr.selected { background-color: #e9f7e9!important; color: #222222!important; box-shadow: 0 0 0px 0 #ffffff!important; border-radius: 0px!important; }
table.dataTable tbody tr.selected td.sorting_1 { background-color:#ddf3dd; }
table.dataTable tbody tr.selected:hover { background-color: #d1efd1!important; }
table.dataTable tbody tr.selected:hover td.sorting_1 { background-color:#d1efd1; }
table.dataTable tbody tr.selected a, table.dataTable tbody th.selected a, table.dataTable tbody td.selected a { color: #309bd4; }
table.dataTable td.td_field { padding-top:5px; padding-bottom:5px; }
/*table.dataTable>thead .sorting:before, table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:before, table.dataTable>thead .sorting_desc_disabled:after { position:static; display: inline; }*/
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 { position:static; display: inline; }
/* sorting in fixed column */
table.dataTable thead .sorting_asc.dtfc-fixed-left, table.dataTable thead .sorting_desc.dtfc-fixed-left { background-color:#d0ecff!important; }
table.dataTable tbody tr td.sorting_1.dtfc-fixed-left { background-color:#FAFAFA!important; z-index:1; }
table.dataTable tbody tr:hover td.sorting_1.dtfc-fixed-left { background-color:#f5f5f5!important; }
table.dataTable thead .sorting_asc.dtfc-fixed-right, table.dataTable thead .sorting_desc.dtfc-fixed-right { background-color:#d0ecff!important; }
table.dataTable tbody tr td.sorting_1.dtfc-fixed-right { background-color:#FAFAFA!important; }
table.dataTable tbody tr:hover td.sorting_1.dtfc-fixed-right { background-color:#f5f5f5!important; }
table.dataTable tbody tr.dim td { background: #efffef !important; }
table.dataTable tbody tr.dim td.sorting_1 { background: #efffef !important; }
table.dataTable tbody tr.dim:hover td { background: #efffef !important; }
table.dataTable tbody tr.dim:hover td.sorting_1 { background: #efffef !important; }
.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: #2f286d; border-color: #2f286d; -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: 2rem; border-bottom-right-radius: 2rem; }
.pagination .page-item:first-child:not(.prev-item) .page-link { border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; }
.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: #2f286d; }
/*.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,"); 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,"); 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,"); 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,"); 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; }*/
table.empty.dataTable td { border-top:0px; cursor:default; }
table.empty.dataTable tr:hover { background-color: #ffffff; }
table.empty.dataTable tbody tr:hover td.dtfc-fixed-left { background-color: #ffffff !important; }
/* 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: 20px; }
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:#2f286d; 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:#2f286d; 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 { width:140px!important; }
.input-group.stepper .form-control { padding:0px; width:60px; flex:none; text-align:center; }
.input-group.stepper .input-group-prepend .btn { padding:0px; width:40px; }
.input-group.stepper .input-group-append .btn { padding:0px; width:40px; }*/
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: 20px;
border-bottom-right-radius: 20px;
}
.input-group { border-radius: 20px;}
.input-group > .input-group-prepend { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.input-group > .input-group-prepend > .input-group-text { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.input-group > .input-group-append > .input-group-text { border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.input-group.mobile_search input { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.input-group > .input-group-append > button { border-top-right-radius: 20px; border-bottom-right-radius: 20px; border: 0px; }
.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:#2f286d !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: #2f286d !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:#2f286d; 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: #2f286d !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: #2f286d !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:#2f286d!important; border-color:#2f286d!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:#2f286d!important; background-color:#2f286d !important; border:1px solid #2f286d;*/ border-width:1px; /*color: #fff !important;*/ }
/*.btn-primary:focus, .btn-primary:active, .btn-primary.active { color: #fff; background-color:#2f286d !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 #2f286d !important; background-color: transparent; color: #2f286d; }
.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: #2f286d !important; }
.btn-success:focus, .btn-info:active, .btn-info.active { color: #2f286d; 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:#2f286d; 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:#2f286d; /*box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);*/ }
.search_field .btn-search-icon { color:#2f286d; 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; }
.badge{
font-size:1rem;
font-weight: 300;
}
/* 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,');
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:#2f286d; }
.dropzone.single_image .upload_container div { font-size:24px; line-height:30px; padding-top:20px; }
.dropzone.single_image .upload_container div.remarks { font-weight:normal; font-size:13px; line-height:20px; padding-top:10px; }
.dropzone.single_image .upload_container img.icon_upload{ width:86px; height:86px; }
.dropzone.single_image .dz-image img { width:100%; height:auto; max-width:inherit; }
.dropzone.single_image .dz-image video { width:100%!important; height:auto!important; max-width:inherit; max-height: 514px; display: inherit; z-index:50; margin: 0px auto; }
.dropzone.single_image .dz-preview { position: relative; min-height:200px!important; margin: 0px; padding: 0px; border: 0px; box-shadow: none; display:block; }
.dropzone.single_image .dz-success { min-height:inherit!important; }
.dropzone.single_image .dz-processing { /*in-height:inherit!important;*/ min-height:200px!important; }
.dropzone.single_image .dz-complete { min-height:inherit!important; }
.dropzone.single_image .dz-image-preview { min-height:inherit!important; }
.dropzone.single_image .dz-preview .dz-progress { opacity:1; text-indent:-9999px; position:absolute; width:100%; height:100%; min-height:100%; top:0px; left:0px; background-color:rgba(0,0,0, 0.5); }
.dropzone.single_image .dz-preview .dz-progress { opacity:0; }
.dropzone.single_image .dz-preview.dz-processing .dz-progress { opacity:1; }
.dropzone.single_image .dz-preview.dz-success .dz-progress { opacity:0; }
/*.dropzone.single_image .dz-preview .dz-progress .dz-loading { opacity:1; text-indent:0; position:absolute; width:100%; height:100%; min-height:200px; top:50%; margin-top:-30px; left:0px; background-color:rgba(0,0,0, 0.5); }*/
.dropzone.single_image .dz-preview.dz-success .dz-progress {
opacity:0; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; margin:0px; border-radius:0px; }
.dropzone.single_image .dz-preview .dz-upload-info { opacity:0; }
.dropzone.single_image .dz-preview.dz-image-preview .dz-upload-info { opacity:1 ; display:block; width:70%; height:60px; margin:-30px auto; top:50%; position:absolute; left:15%; }
.dropzone.single_image .dz-preview.dz-file-preview .dz-upload-info { opacity:1 ; display:block; width:70%; height:60px; margin:-30px auto; top:50%; position:absolute; left:15%; }
.dropzone.single_image .dz-preview .dz-image { /*opacity:0;*/ }
.dropzone.single_image .dz-preview.dz-success .dz-image { opacity:1; border-radius:0rem; width:100%; height:auto; }
.dropzone.single_image .dz-upload { display:block; width:100%; background-color:rgba(255,255,255, 0.3); height:20px; bottom:0px; position:absolute; left:0px; border-radius:10px; overflow: hidden; }
.dropzone.single_image .dz-upload-bar { display:block; width:100%; background-color:rgba(255,255,255, 0.7); height:20px; bottom:0px; position:absolute; left:0px; border-radius:0px; }
.dropzone.single_image .dz-upload-text { text-indent:0px; display:block; position:absolute; top:0px; left:0px; color:#cccccc; font-size:24px; width:100%; height:30px; line-height:30px; text-align:center; }
.dropzone.single_image .dropzone-choose { opacity:0; position:absolute; width:60px; height:60px; margin:0px; background-color:rgba(0,0,0, 0.5); background-image: none; border: 0px; margin: 0px; cursor: pointer; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; top: 50%!important; left: calc(50% - 100px)!important; /* top:10px; right:80px; */ margin-top:-30px!important; z-index:1; }
.dropzone.single_image .dz-preview.dz-success:hover .dropzone-choose { opacity: 0.8; }
.dropzone.single_image .dz-preview.dz-success:hover .dropzone-choose:hover { opacity: 1; }
.dropzone.single_image .dropzone-choose:before { content:"1"; text-indent:-9999px; display:inline-block; width:40px; height:40px; position: absolute; margin-top: -20px; top: 50%; left: 50%; margin-left: -20px; background-image: url("data:image/svg+xml,"); 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,"); 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,"); 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,"); background-size:100% auto; filter: invert(100%) sepia(100%) saturate(1%) hue-rotate( 46deg) brightness(105%) contrast(101%); opacity:0.7; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -ms-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in; }
.dropzone.multiple_images .dz-remove:hover:before { opacity:1; }
.dropzone.multiple_images .dz-remove:after { content: ""; display:none; }
.dropzone.multiple_images .dropzone-choose { width:20%; height:80px; float:left; border:2px solid #ffffff; }
.dropzone_height_sync { height: calc(100% - 62px); }
/* 20231214 photo album adjust */
#album_images.dropzone.multiple_images { display: flex; flex-wrap: wrap; }
#album_images.dropzone.multiple_images .dz-preview { /*flex: 0 0 20%;*/ height:inherit; }
#album_images.dropzone.multiple_images .dz-preview .dz-progress { opacity:0; }
#album_images.dropzone.multiple_images .dz-preview .dz-success-mark { opacity:0; position: absolute; bottom: 0px; right: 0px; border-top: 60px solid transparent; border-right: 60px solid #2f286d; }
#album_images.dropzone.multiple_images .dz-preview .dz-success-mark .icon-check { position: absolute; bottom: 16px; right: -42px; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing .dz-progress { opacity:1; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-progress { opacity:0; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-success-mark { opacity:1; }
#album_images.dropzone.multiple_images .dz-preview .dz-remove { display:none; }
#album_images.dropzone.multiple_images .dz-preview.dz-image-preview .dz-remove { display:block; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing .dz-remove { display:none; }
#album_images.dropzone.multiple_images .dz-preview.dz-processing.dz-complete .dz-remove { display:none; }
#album_images.dropzone.multiple_images .dz-preview:hover .dz-remove { opacity:0.8; }
#album_images.dropzone.multiple_images .dz-preview:hover .dz-remove:hover { opacity: 1; }
#album_images.dropzone.multiple_images .dz-preview .convert-overlay.show { opacity: 1; visibility: visible; z-index: 10; }
/*#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }
#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }
#album_images.dropzone.multiple_images .dz-preview { flex: 0 0 20%; }*/
/* dropzone audio preview */
.dropzone.single_image .dz-audio { position:absolute; width:100%; height:54px; margin-top:-27px; top:50%; border: 0px; }
.dropzone .dz-audio audio { width:90%; display:block; margin:auto; }
audio::-webkit-media-controls-panel { }
audio::-webkit-media-controls-mute-button { }
audio::-webkit-media-controls-play-button { }
audio::-webkit-media-controls-timeline-container { }
audio::-webkit-media-controls-current-time-display { /*display: none;*/}
audio::-webkit-media-controls-time-remaining-display { display: none; }
audio::-webkit-media-controls-timeline { }
audio::-webkit-media-controls-volume-slider-container { }
audio::-webkit-media-controls-volume-slider { }
audio::-webkit-media-controls-seek-back-button { }
audio::-webkit-media-controls-seek-forward-button { }
audio::-webkit-media-controls-fullscreen-button { }
audio::-webkit-media-controls-rewind-button { }
audio::-webkit-media-controls-return-to-realtime-button { }
audio::-webkit-media-controls-toggle-closed-captions-button { }
/* modal */
.modal.show { display:flex!important; padding:0px; }
.modal .modal-dialog { transform: none; margin:auto; width:95vw; }
.modal .modal-content { border-radius: 20px; overflow: hidden; }
.modal .modal-header { border-radius:0px; position:relative; }
.modal .modal-header .close { padding: 0.2rem 0.62rem; box-shadow: 0 0px 0px 0 rgb(34 41 47 / 0%); border-radius:0px; background-color:transparent; opacity: 1; transition: all 0.23s ease 0.1s; position:absolute; transform:none; top:24px; right:24px; }
.modal .modal-header .modal-title { line-height:40px; font-weight:bold; }
.modal .modal-footer { border-radius:0px; }
.modal .modal-header .close:hover, .modal .modal-header .close:focus, .modal .modal-header .close:active { transform: translate(0px, 0px); }
/* set all to scrollable modal */
.modal { overflow-y:hidden; }
.modal .modal-body { max-height:calc(100vh - 160px); overflow-y:auto; }
.modal { min-width:320px; z-index:5800; }
.modal.modal-slide-in { /*margin-top:62px;*/ margin-top:0px; }
.modal-slide-in .modal-dialog .modal-content { position:relative; }
.modal-slide-in .modal-dialog { /*margin-top:62px;*/ margin-top:0px; }
.modal-slide-in .modal-dialog { width:100%; min-width:320px; }
.modal-header { height:62px; }
.modal-slide-in .close { top:26px; right:20px; }
.modal-slide-in .modal-dialog .modal-body { padding:20px; padding-bottom:100px; margin:0px 0px 0px 0px; overflow-y:auto!important; }
.modal.modal-slide-in .modal-title { line-height: 40px; }
.modal.modal-slide-in .modal_button { position:fixed; bottom:0px; left:0px; z-index: 100; }
.modal.modal-slide-in#modal_add .modal_button { display:none; }
.modal.modal-slide-in#modal_edit .modal_button { display:none; }
@media (min-width: 576px) {
.modal-slide-in .modal-dialog.sidebar-lg { width:400px!important; }
}
/* summernote */
.note-editor.card { box-shadow:none; border-radius:0px; }
.note-editor .note-toolbar { display:block; }
.note-editor.note-frame .note-status-output { display:none; }
.note-editor .btn { padding:10px 15px; }
.note-editor .dropdown-toggle::after { display:none; }
.note-editor .dropdown-toggle .note-icon-caret:before { margin-left:0px; }
.note-editor .panel-heading.note-toolbar .dropdown-menu { margin-top:0px; border-radius: 0px; }
.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu { padding:10px; width: max-content; }
.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu > li:hover { background-color:#f0f0f0; }
.note-editor .panel-heading.note-toolbar .note-style .dropdown-menu > li { padding:8px 10px; }
.note-editor .panel-heading.note-toolbar .note-style p { margin:0px; }
.note-editor .modal.show { display:flex!important; padding:0px!important; }
.note-editor .modal.show .modal-dialog { transform: none; margin:auto; width:95vw; }
.note-editor .modal .modal-content { border-radius:0px; }
.note-editor .modal .modal-header { border-radius:0px; position:relative; }
.note-editor .modal .modal-header .close { padding: 0.2rem 0.62rem; box-shadow: 0 0px 0px 0 rgb(34 41 47 / 0%); border-radius:0px; background-color:transparent; opacity: 1; transition: all 0.23s ease 0.1s; position:absolute; transform:none; top:24px; right:24px; }
.note-editor .modal .modal-header .modal-title { line-height:40px; font-weight:bold; }
.note-editor .modal .modal-footer { border-radius:0px; }
.note-editor .modal .form-check { position:relative; line-height:22px; padding-top:10px; padding-bottom:10px; padding-left:0px; }
.note-editor .modal .form-check label { position:relative; cursor:pointer; padding-left:32px; }
.note-editor .modal .form-check input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; padding: 0px 30px 0px 0px; border-radius:0px; text-align: center; margin:0px; position: absolute; left: 0px; }
.note-editor .modal .form-check input[type="checkbox"]:before { content:" "; display:block; border:1px solid #cccccc; width:24px; height:24px; position:absolute; top:0px; left:0px; }
.note-editor .modal .form-check input[type="checkbox"]:after { content:" "; display:block; width:16px; height:16px; position:absolute; top:4px; left:4px; display:inline-block; background-image:none; background-size:100% auto; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.note-editor .modal .form-check input[type="checkbox"]:checked:before { border:1px solid #000000; background-color:#000000; }
.note-editor .modal .form-check input[type="checkbox"]:checked:after { background-image: url("data:image/svg+xml,"); }
.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 input[type="checkbox"] { 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: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.button_choice label input[type="checkbox"]:checked ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
#booking_payment .button_choice label input[type="radio"]:checked ~ span { border-color: #2f286d; border-radius:0px; border: 3px solid #2f286d; }
#booking_payment .button_choice label input[type="checkbox"]:checked ~ span { border-color: #2f286d; border-radius:0px; border: 3px solid #2f286d; }
#booking_payment .button_choice label span:hover { background-color: #e6e6e6; border-color: #adadad; }
.button_choice label input[type="radio"]:checked:focus ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.button_choice label input[type="checkbox"]:checked:focus ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
#booking_payment .button_choice label input[type="radio"]:checked:focus ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
#booking_payment .button_choice label input[type="checkbox"]:checked:focus ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.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;}
/* checkbox button */
label.checkbox_button input[type="checkbox"] { position:absolute; left:-9999px; }
label.checkbox_button span { display:block; 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; }
label.checkbox_button input[type="checkbox"]:checked ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.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: #2f286d !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:#2f286d; border-color:#2f286d; }
#attendee_form .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
#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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#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,"); }
.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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.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,"); }
/* 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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#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,"); }
/* 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 #2f286d;}
#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:#2f286d; border-color:#2f286d; }
#attendee_info_append .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
#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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#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,"); }
/* 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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#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,"); }
/* 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 #2f286d;}
#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:#2f286d; border-color:#2f286d; }
#extra_form .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
#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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#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,"); }
/* 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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#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,"); }
/* 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 #2f286d;}
#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:#2f286d; border-color:#2f286d; }
#extra_info_append .form-group .controls label.btn input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
#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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#extra_info_append .form-group .controls div.radio label input[type="radio"]:checked:after { background-image: url("data:image/svg+xml,"); }
/* 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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
#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,"); }
/* 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 #2f286d;}
#extra_info_append .form-group.error .controls textarea { border-color: #EA5455; }
/* 20231207 add style for extra information form end */
/* check box and radio button */
.myCheck { display:inline-block; max-width:100%; margin-bottom:5px; font-weight:normal; cursor:pointer; }
.myCheck input { display:none; }
.myCheck span.details_input:before { color:#76ce76; font:normal 24px/1 FontAwesome; content:"\f10C"; width:24px; height:24px; line-height:24px; position:relative; top:3px; }
.myCheck input:checked + span.details_input:before { content:"\f058"; }
.myCheck_x input:checked + span.details_input:before { content:"\f057"; }
.myCheck.minus span.details_input:before { content:"\f056"; }
.check_col .myCheck { margin-bottom:0px; }
.check_col .myCheck span.details_input:before { top:0px; }
.check_col label.myCheck, .multiple_function_row label.myCheck { font-size: 0.85rem; padding-left: 0rem; }
.myCheck input:disabled ~ span:before { color:#cccccc; cursor:default; }
.check_col .selected { position:fixed; top:-100px; left:-100px; }
/* 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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); 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,"); }
/* 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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.custom-radio .custom-control-label:checked:after { background-image: url("data:image/svg+xml,")!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,")!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,"); }
.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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); 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,"); }
.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,"); }
.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,"); }
.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% - 395px); }
@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% - 477px); }
}
@media (max-width: 575.98px) {
html body.public-site .content .content-wrapper { padding: 30px 3vw; margin: 0 auto; overflow-x:hidden; }
html body.public-site { /*overflow-x: hidden;*/ }
/*html body.public-site .content { min-height:inherit; }*/
html body.public-site .content { min-height: calc(100% - 733px); }
}
html body.public-site .content .content-wrapper.bg-white { max-width: inherit; }
html body.public-site .content .content-wrapper.bg-white .content-body { max-width: 1360px; margin: 0 auto; }
/* 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: 0px 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: 0px 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(47, 40, 109, 0.12); border-left: 0px solid #2f286d; }
.dropdown-user .dropdown-menu .dropdown-item:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
/* pulldown top menu */
#main-menu-navigation li { position: relative; display: block!important; transition-duration: 0.5s; padding: 0px; }
#main-menu-navigation li a:link { display: inline-block; width: 100%; height: 100%; line-height: 24px; transition: all 0.5s ease; }
#main-menu-navigation li:hover { cursor: pointer; }
#main-menu-navigation li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; top: 62px; left: 0; display: none; background: #ffffff; min-width: 100%; list-style-type: none; margin: 0px; padding: 0px; }
#main-menu-navigation li:hover>ul, ul#main-menu-navigation li ul:hover { visibility: visible; opacity: 1; display: block; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
#main-menu-navigation li ul li { height: inherit; color: #000000; clear: both; min-width: 100%; border-top: 0px; border-bottom: 0px; margin: 0px; text-align: left; }
#main-menu-navigation li ul li:last-child { /*border-bottom: 1px solid #eaeaea;*/ margin-bottom:10px; }
#main-menu-navigation li ul li a { padding: 8px 12px; border-left: 5px solid transparent!important; border-top: 0px!important; border-bottom: 0px!important; transition: all 0.5s ease; }
#main-menu-navigation li ul li a { color: #000000!important; text-align: left; }
#main-menu-navigation li ul li.active a { background-color:#eeeeee; }
#main-menu-navigation li ul li:hover a { border-top: 0px!important; background-color:#eeeeee; /*border-left: 5px solid #1a9431!important;*/ }
#menuToggle #main-menu-navigation input { display: none; }
@media handheld, screen and (max-width: 1024px) {
#menu .nav-link { /*height:50px!important; line-height:50px!important;*/ padding: 0px 12px!important; }
#menuToggle input:checked~ul { transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none; }
#main-menu-navigation li { border-top: 0px solid transparent; border-bottom: 0px solid transparent; }
#main-menu-navigation li ul { position: relative; top: 0px; left: 0px; width: 100%; }
#main-menu-navigation li { height: auto; padding: 0px; margin-bottom: 0px; }
#main-menu-navigation li a { display: block; width: 100%; padding: 10px 12px 10px 16px!important; }
#main-menu-navigation li a:link { line-height: inherit; border-top: 0px; border-left: 5px solid transparent; }
#main-menu-navigation li ul li { padding: 0px; }
#main-menu-navigation li ul li a { padding: 8px 12px 8px 34px!important; }
#main-menu-navigation li:hover>ul, ul#main-menu-navigation li ul:hover { visibility: hidden; opacity: 0; display: none; }
#menuToggle #main-menu-navigation input { display: block; width: 100%; height:50px; position: absolute; top: 0px; left: 0px; margin: 0px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }
#menuToggle #main-menu-navigation input:checked~ul { visibility: visible; opacity: 1; display: block; }
}
/* 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; }
}
/* banner */
.banner_inner { position: relative; height: 20vw; min-height: 120px; max-height: 290px; width: 100%; min-width: 320px; overflow: hidden; display: flex !important; justify-content: center; align-items: center; background-repeat: repeat-x; background-color: #2f286d; background-position: right 65%; background-size: cover; }
.banner_inner .inner_frame { overflow: hidden !important; }
.banner_inner.activity { background-image: url(../../app-assets/images/banner/HAA_0235.jpg); background-position: center 45%; }
.banner_inner.activity_details .inner_frame { background-image: url(../../app-assets/images/banner.png); background-position: center; background-size: cover; }
.banner_inner .inner_frame { position: absolute; height: 100%; width: 100%; max-width: 1200px; margin: 0px auto; }
.banner_inner img { height: 100%; width: 100%; }
.banner_inner .page_title { font-size: 78px; line-height: 80px; text-align: center; width: 100%; text-shadow: 0 0 23px rgb(0 0 0 / 54%); font-weight: bold; color: white !important; }
.banner_inner .activity_title { text-align: center; color: white !important; width:100%; text-shadow: 0 0 23px rgb(0 0 0 / 54%); }
.banner_inner .activity_title .activity_cat { font-size:30px; text-shadow: 0 0 23px rgb(0 0 0 / 54%);}
.banner_inner .activity_title .activity_name { font-size:72px; font-weight: bold; text-shadow: 0 0 23px rgb(0 0 0 / 54%);}
@media (max-width:1200px) {
.banner_inner .activity_title .activity_cat { font-size:2.08vw; }
.banner_inner .activity_title .activity_name { font-size:5vw; }
}
@media (max-width:568px) {
.banner_inner .activity_title .activity_cat { font-size:14px; }
.banner_inner .activity_title .activity_name { font-size:26px; }
}
@media (max-width:768px) {
.banner_inner.activity_details .inner_frame { background-position: left; background-size:125%;}
.banner_inner .activity_title { text-align: right; color: white !important; }
}
@media handheld, screen and (max-width: 1280px) {
.banner_inner .page_title { font-size: 60px; /*width:50%;*/ }
}
@media handheld, screen and (max-width: 768px) {
.banner_inner .page_title { font-size: 40px; /*line-height: 42px; width:inherit; left: 30px;*/ }
}
@media handheld, screen and (max-width: 597px) {
.banner_inner .page_title { font-size: 36px; text-align:right; /*line-height: 30px; max-width:80%; left: 20px; bottom: 20px;*/ }
}
/* event */
.event_card:hover { transform: scale3d(1.05, 1.05, 1.05); }
.event_card .card-body { position:relative; }
.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; font-size:1rem; 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; border-radius: 20px; }
.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: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.category_group label input[type="checkbox"]:checked:focus ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.category_group.blue label input[type="checkbox"]:checked ~ span > i { background-color: #00aeef; }
.category_group.blue label input[type="checkbox"]:checked:focus ~ span > i { background-color: #00aeef; }
.category_group.red label input[type="checkbox"]:checked ~ span > i { background-color: #dd4d66; }
.category_group.red label input[type="checkbox"]:checked:focus ~ span > i { background-color: #dd4d66; }
.category_group.green label input[type="checkbox"]:checked ~ span > i { background-color: #4bb955; }
.category_group.green label input[type="checkbox"]:checked:focus ~ span > i { background-color: #4bb955; }
.category_group.orange label input[type="checkbox"]:checked ~ span > i { background-color: #ef3d36 ; }
.category_group.orange label input[type="checkbox"]:checked:focus ~ span > i { background-color: #ef3d36 ; }
.category_group.yellow label input[type="checkbox"]:checked ~ span > i { background-color: #f3bb45; }
.category_group.yellow label input[type="checkbox"]:checked:focus ~ span > i { background-color: #f3bb45; }
.category_group label input[type="radio"] { position:absolute; left:-9999px; }
.category_group label input[type="radio"]:checked ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.category_group label input[type="radio"]:checked:focus ~ span { color: #ffffff; background-color:#2f286d; border-color:#2f286d; }
.category_group label input[type="radio"]:checked ~ span > i { background-color: #00aeef; }
.category_group label input[type="radio"]:checked:focus ~ span > i { background-color: #00aeef; }
.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: #2f286d; 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:#2f286d; fill:#2f286d; }
.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:#2f286d; min-width:320px; width:100%; margin-left:auto; margin-right:auto; color:#464646; 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; background: url(../../app-assets/images/logo/logo_in_white_frame.png) no-repeat; height:80px; width:240px; max-width:90%; background-size: contain; /*background-position:center;*/ margin:0px auto; }
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: #2f286d; }*/
@media (max-width: 767.9px) {
footer.footer_wrapper .footer { padding: 30px 4vw; }
}
@media (max-width: 575.9px) {
footer .brand-logo { background-position: center; }
}
.scroll-top { position: fixed; bottom: 5%; right: 30px; display: none; z-index:6000; /*border-radius: 50% !important;*/ width: 53px; height: 53px; }
/* 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:#2f286d!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:#2f286d!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; }
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color:#2f286d; }
.explore_title { font-size:4rem; font-weight: bold; }
@media (max-width:1199.9px) {
.explore_title { font-size:3.6rem; }
}
@media (max-width:991.9px) {
.explore_title { font-size:3rem; }
}
@media (max-width:767.9px) {
.explore_title { font-size:2.8rem; }
}
@media (max-width:575.9px) {
}
/* related activity swiper */
.related_activities.swiper-container { padding-top:10px; padding-bottom:50px; }
.related_activities.swiper-container .activity_pagination { position:static; bottom:0px; margin:0px; }
.related_activities .swiper-pagination-bullet { width: 16px; height: 16px; margin:0px 5px; }
.activity_swiper_control { margin-top:20px; height:50px; }
.activity_prev { position:static; top:0px; bottom:0px; margin:0px; }
.activity_prev:after { color:#2f286d; content: "\e843"; font-family: feather!important; background-image:none; font-size:40px; }
.activity_next { position:static; top:0px; bottom:0px; margin:0px; }
.activity_next:after { color:#2f286d; content: "\e844"; font-family: feather!important; background-image:none; font-size:40px; }
/* latest news swiper */
.news_image { aspect-ratio: 1/1; width:100%; background-color:#cccccc; align-items:center; text-align:center; border-radius:5px; display:flex; overflow:hidden; }
.news_image img { max-width:100%; max-height:100%; width:100%; height:100%; display: block; object-fit:contain; }
.latest_news.swiper-container { padding-top:10px; padding-bottom:50px; }
.latest_news.swiper-container .latest_news_pagination { position:static; bottom:0px; margin:0px; }
.latest_news .swiper-pagination-bullet { width: 16px; height: 16px; margin:0px 5px; }
.latest_news_swiper_control { margin-top:20px; height:50px; border-radius: 5px; display:flex; }
.latest_news_prev { position:static; top:0px; bottom:0px; margin:0px; }
.latest_news_prev:after { color:#2f286d; content: "\e843"; font-family: feather!important; background-image:none; font-size:40px; }
.latest_news_next { position:static; top:0px; bottom:0px; margin:0px; }
.latest_news_next:after { color:#2f286d; content: "\e844"; font-family: feather!important; background-image:none; font-size:40px; }
/* img swiper */
.imgslider.swiper-container { padding-top:5px; padding-bottom:10px; }
.imgslider.swiper-container .imgslider_pagination { position:static; bottom:0px; margin:0px; }
.imgslider .swiper-pagination-bullet { width: 16px; height: 16px; margin:0px 5px; }
.imgslider_swiper_control { margin-top:5px; height:50px; }
.imgslider_prev { position:static; top:0px; bottom:0px; margin:0px; }
.imgslider_prev:after { color:#2f286d; content: "\e843"; font-family: feather!important; background-image:none; font-size:40px; }
.imgslider_next { position:static; top:0px; bottom:0px; margin:0px; }
.imgslider_next:after { color:#2f286d; content: "\e844"; font-family: feather!important; background-image:none; font-size:40px; }
@media only screen and (max-width: 768px) {
.swiper-button-prev:after { height:inherit; width:inherit; }
}
/* preview swiper */
.previewslider.swiper-container { padding-top:5px; padding-bottom:10px; }
.previewslider.swiper-container .previewslider_pagination { position:static; bottom:0px; margin:0px; }
.previewslider .swiper-pagination-bullet { width: 16px; height: 16px; margin:0px 5px; }
.previewslider_swiper_control { margin-top:5px; height:50px; }
.previewslider_prev { position:static; top:0px; bottom:0px; margin:0px; }
.previewslider_prev:after { color:#2f286d; content: "\e843"; font-family: feather!important; background-image:none; font-size:40px; }
.previewslider_next { position:static; top:0px; bottom:0px; margin:0px; }
.previewslider_next:after { color:#2f286d; content: "\e844"; font-family: feather!important; background-image:none; font-size:40px; }
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #2f286d;
}
@media only screen and (max-width: 768px) {
.swiper-button-prev:after { height:inherit; width:inherit; }
}
/*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: #2f286d; border-color: #2f286d; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #2f286d; }
.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; }
.form-control.date_filter[readonly] {
background-color: #ffffff;
}
/* 20231227 replace and add code start */
/* code field */
div#code_fields input { border-width: 1px !important; border-color: 2f286d; font-weight: 900; }
.form-control:focus:valid, .form-control:focus.is-valid { box-shadow: none !important; background: #fcfcf2; }
/* step label */
.step_ribbon { padding: 4px 10px; width: 30px; height: 30px; background: #2f286d; left: 0px; color: #ffffff; 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 #2f286d; right:-15px; top:0px; }
.ribbon-2:before { content:""; position:absolute; height:0; width:0; border-bottom:8px solid #14455b; border-left:8px solid transparent; top:-8px; }*/
.step_title .feather-chevron-right{
height:30px !important;
}
/* 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:#2f286d!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: #2f286d !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(14%) sepia(31%) saturate(4166%) hue-rotate(232deg) brightness(93%) contrast(94%); }
.social-share:hover img { filter: invert(63%) sepia(74%) saturate(5417%) hue-rotate(166deg) brightness(105%) contrast(101%); }
/* 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:#2f286d; background-color:#eeeeee; }
.event_language .dropdown-menu .dropdown-item:active { color:#2f286d; background-color:#eeeeee; }
.event_language .dropdown-menu .dropdown-item:focus { color:#2f286d; 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:#2f286d; 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:#2f286d; 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; }
.mobile_search .form-control { border: 1px solid #2f286d; }
.mobile_search .btn { padding:inherit; }
.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:#2f286d; }
.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:#2f286d; 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: #2f286d !important; transition: 0.2s; }
.feed_delete:hover { color: #2f286d !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 */
.imgs-grid { max-width: 900px; }
.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: #2f286d!important; background: rgb(47,40,109); color: #ffffff !important; }
.btn-secondary:hover{ border-color: #2f286d!important; background: rgb(47,40,109); color: #ffffff !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; }
.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:#2f286d; 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: #2f286d; }
.plan_title.pro { color: #ea5455; }
.plan_title.premium { color: #2f286d; }
.plan_price_block { min-height:180px; }
.plan_price { font-size:40px; }
.plan { font-size:16px; }
.plan_content { width:240px; margin:auto; }
.plan_include { color: #2f286d; }
.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; }
.step_title .icon { height:42px; width:42px; border-radius:21px; /*border-top-right-radius:21px; border-bottom-right-radius:21px; padding-right:16px!important;*/ }
@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; }
}
.bottom_cow img { width:35%; position:absolute; right:0px; bottom:-1px; z-index:0; }
@media (max-width: 767.9px) {
.bottom_cow { text-align: right; margin-top:-30px; }
.bottom_cow img { width:75%; max-width:420px; position:relative; right:0px; bottom:-1px; z-index:0; }
}
.video_frame_4_3 { aspect-ratio: 640 / 480; background-color:#000000; }
.video_frame_16_9 { aspect-ratio: 16 / 9; background-color:#000000; }
/* activity content style - need to apply to cms */
/* font size */
.activity_content, .activity_content p, .activity_content div, .activity_content span, .activity_content li { font-size: 18px; line-height:32px; color:#5e5873; font-family: 'Montserrat', '\5FAE\8EDF\6B63\9ED1\9AD4', 'Microsoft JhengHei', Helvetica, Arial, sans-serif; } /* 20240902 change this style */
.card_actions .dropdown-menu { font-size:16px; }
.activity_actions .dropdown-menu { font-size:16px; }
.activity_content br { margin-bottom:10px; }
.activity_content .card-body h2 { font-size:26px; font-weight:bold; margin-top:4px; margin-bottom: 10px; color:#5e5873; }
.activity_content .card-body h3 { font-size:22px; font-weight:bold; margin-top:4px; margin-bottom: 8px; color:#5e5873; }
.activity_content .card-body h4 { font-size:18px; font-weight:bold; margin-top:4px; margin-bottom: 6px; color:#5e5873; }
.activity_content .card-body h5 { font-size:16px; font-weight:bold; margin-top:4px; margin-bottom: 6px; color:#5e5873; }
.activity_content .card-body h6 { font-size:14px; font-weight:bold; margin-top:4px; margin-bottom: 6px; color:#5e5873; }
.activity_content hr { margin-top: 2rem; margin-bottom: 2rem; }
/* card and header */
/*.activity_content .card .card-header .heading-elements { background-color:#ffffff; z-index:1; }
.activity_content .card.collapsable .card-header .heading-elements a[data-action='collapse'].rotate i, .card .card-header .heading-elements a[data-action='collapse'].rotate svg { position: relative; top: 3px; left: 5px; }
.activity_content .card.collapsable .card-header:after { content:""; display:inline-block; position: absolute; top:30px; left:5%; height:0px; width:90%; border-bottom: 5px dotted #2ec5f3; }*/
.activity_content .card-body { padding:10px 70px 20px 70px!important; }
@media (max-width:1440px) {
.activity_content .card-body { padding:1.4vw 5vw!important; }
}
.activity_content .card .card-header .heading-elements, .card .card-header .heading-elements-toggle { position: relative; top: inherit; right: inherit; cursor: pointer; padding-right: 30px !important; }
.activity_content .card .heading-elements a[data-action='collapse'].rotate i, .card .card-header .heading-elements a[data-action='collapse'].rotate svg { position: relative; top: 3px; left: 5px; }
.activity_content section.card { border-bottom: 1px solid #eeeeee; border-radius: 20px 20px 0px 0px; }
.activity_content section.card:last-child { border-bottom:0px; }
div[aria-expanded='false'] .heading-elements:after { transform: rotate(-180deg); top:-2px; right: 5px; }
div[data-toggle='collapse'] { position:relative; }
div[data-toggle='collapse'] .heading-elements:after { position: absolute; top:7px; right: 5px; /*content: "\e842";*/ content: "\e845"; font-family: 'feather' !important; color: #2f286d !important; width: 21px; font-size: 22px; height: 15px; line-height: 15px; transition: all 300ms linear 0s; }
#mobile_submenu.sticktotop { position:sticky; top:23px; right:0px; z-index:100; }
/* 20241017 activity image and slider image size */
.activity_content img[width='100%'] { width:70%!important; height:auto!important; }
.activity_content img[style='width: 100%;'] { width:70%!important; height:auto!important; }
.activity_content .swiper-container img[width='100%'] { width:100%!important; height:auto!important; }
.activity_content .swiper-container img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_content .swiper-container { width:70%!important; margin-left:0px; margin-right:inherit; }
@media (max-width:1200px) {
.activity_content img[width='100%'] { width:80%!important; height:auto!important; }
.activity_content img[style='width: 100%;'] { width:80%!important; height:auto!important; }
.activity_content .swiper-container img[width='100%'] { width:100%!important; height:auto!important; }
.activity_content .swiper-container img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_content .swiper-container { width:80%!important; }
}
@media (max-width:1000px) {
.activity_content img[width='100%'] { width:100%!important; height:auto!important; }
.activity_content img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_content .swiper-container img[width='100%'] { width:100%!important; height:auto!important; }
.activity_content .swiper-container img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_content .swiper-container { width:100%!important; }
}
/* card bg */
/*.cow_bg_box { position:relative; }
.cow_bg_box.left { padding-left:25%; }
.cow_bg_box.right { padding-right:25%; }
.cow_bg_box.left:after { content: ""; display: inline-block; position: absolute; left:3%; top: -30px; height:calc(100% + 60px); width:25%; z-index: 100; background-size:contain; background-repeat: no-repeat; background-position: right top; }
.cow_bg_box.right:after { content: ""; display: inline-block; position: absolute; right:5%; top: -30px; height:calc(100% + 60px); width:25%; z-index: 100; background-size:contain; background-repeat: no-repeat; background-position: right top; }
.cow_with_box:after { background-image: url(../../app-assets/images/cow/COWEY_04.png); }
.cow_with_flower:after { background-image: url(../../app-assets/images/cow/COWEY_26.png); }
.cow_with_telescope:after { background-image: url(../../app-assets/images/cow/COWEY_139.png); }
.cow_with_note:after { background-image: url(../../app-assets/images/cow/COWEY_56.png); }
.cow_bg_box.left.cow_with_box:after { transform: scale(-1,1); }
.cow_bg_box.left.cow_with_flower:after { transform: scale(-1,1); }
.cow_bg_box.left.cow_with_telescope:after { transform: scale(-1,1); }
.cow_bg_box.left.cow_with_note:after { transform: scale(-1,1); }*/
/* list base setting */
.activity_content ul.custom_style { list-style:none; padding-left:0px; }
.activity_content ul.custom_style > li { counter-increment: list_counter; }
.activity_content ol.custom_style { list-style: none; padding-left:0px; }
.activity_content ol.custom_style > li { counter-increment: list_counter; }
/* list objects */
.activity_content ul.pencil { counter-reset: list_counter; }
.activity_content ul.pencil > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_content ul.pencil > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:2px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_pencil.png); background-size: 30px 30px; background-repeat: no-repeat; }
.activity_content ul.apple { counter-reset: list_counter; }
.activity_content ul.apple > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_content ul.apple > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:2px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_apple.png); background-size: 30px 30px; background-repeat: no-repeat; }
.activity_content ul.bulb { counter-reset: list_counter; }
.activity_content ul.bulb > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_content ul.bulb > li::before { content:""; display: inline-block; height: 34px; width:34px; position: absolute; top:0px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_bulb.png); background-size: 34px 34px; background-repeat: no-repeat; }
.activity_content ul.book { counter-reset: list_counter; }
.activity_content ul.book > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_content ul.book > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:5px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_book.png); background-size: 30px 30px; background-repeat: no-repeat; }
/* list shape */
.activity_content ul.gear { counter-reset: list_counter; }
.activity_content ul.gear > li { margin-left:40px; position:relative; padding-top:3px; padding-bottom:11px; }
.activity_content ul.gear > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:3px; left:-40px; background-size: 30px 30px; background-repeat: no-repeat; }
.activity_content ul.gear.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_blue.png); }
.activity_content ul.gear.red > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_red.png); }
.activity_content ul.gear.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_yellow.png); }
.activity_content ul.gear.green > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_green.png); }
.activity_content ul.puzzle { counter-reset: list_counter; }
.activity_content ul.puzzle > li { margin-left:40px; position:relative; padding-top:3px; padding-bottom:11px; }
.activity_content ul.puzzle > li::before { content:""; display: inline-block; height:26px; width:26px; position: absolute; top:4px; left:-40px; background-size: 26px 26px; background-repeat: no-repeat; }
.activity_content ul.puzzle.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_blue.png); }
.activity_content ul.puzzle.red > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_red.png); }
.activity_content ul.puzzle.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_yellow.png); }
.activity_content ul.puzzle.green > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_green.png); }
/* number list */
.activity_content ol.steps { counter-reset: list_counter; }
.activity_content ol.steps > li { margin-left:45px; position:relative; padding-top:4px; padding-bottom:12px; }
.activity_content ol.steps > li::before { content:counter(list_counter); display: inline-block; height:34px; width:34px; line-height:34px; position: absolute; top:2px; left:-45px; color:#ffffff; font-size:20px; font-weight:700; border-radius:50px; text-align:center; }
.activity_content ol.steps.blue > li::before { background-color:#2ec5f3; }
.activity_content ol.steps.red > li::before { background-color:#ef3d36; }
.activity_content ol.steps.yellow > li::before { background-color:#f3bb45; }
.activity_content ol.steps.green > li::before { background-color:#4bb955; }
/* number list shape */
.activity_content ol.puzzle { counter-reset: list_counter;}
.activity_content ol.puzzle > li { margin-left:60px; position:relative; padding-top:10px; padding-bottom:20px; }
.activity_content ol.puzzle > li::before { content:counter(list_counter); display: inline-block; height: 50px; width: 50px; position: absolute; top:0px; left:-60px; margin-right:10px; color:#ffffff; font-size:20px; font-weight:700; text-align:center; line-height:48px; background-size: 50px auto; background-repeat: no-repeat;}
.activity_content ol.puzzle.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_blue.png); }
.activity_content ol.puzzle.red > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_red.png); }
.activity_content ol.puzzle.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_yellow.png); }
.activity_content ol.puzzle.green > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_green.png); }
.activity_content ol.gear { counter-reset: list_counter;}
.activity_content ol.gear > li { margin-left:60px; position:relative; padding-top:10px; padding-bottom:20px; }
.activity_content ol.gear > li::before { content:counter(list_counter); display: inline-block; height: 50px; width: 50px; position: absolute; top:0px; left:-60px; margin-right:10px; color:#ffffff; font-size:20px; font-weight:700; text-align:center; line-height:50px; background-size: 50px auto; background-repeat: no-repeat;}
.activity_content ol.gear.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_blue_num.png); }
.activity_content ol.gear.red > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_red_num.png); }
.activity_content ol.gear.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_yellow_num.png); }
.activity_content ol.gear.green > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_green_num.png); }
/* related activities in content area */
.activity_content .related_activities .card-body { padding:1rem !important; }
.activity_content .related_activities .card-body h4 { margin-bottom: 0.5rem; }
.activity_content .related_activities .card-body .badge { font-size: 1rem!important; color:#ffffff!important; line-height:1!important; }
.activity_content .related_activities .card-body .view_count { font-size:13px!important; }
.activity_content .related_activities .card-body .statistic_info div { line-height:1.45!important; }
.activity_content .related_activities .card-body .statistic_info span { line-height:1.45!important; }
/* rating and comments */
/* font size */
.rating_content, .rating_content p, .rating_content div, .rating_content span, .rating_content li, .rating_content textarea { font-size:16px; line-height:28px; }
.rating_content .rating_stars span { line-height:1.5; }
/* card and header */
.rating_content .card-body { padding:10px 70px 20px 70px!important; }
@media (max-width:1440px) {
.rating_content .card-body { padding:1.4vw 5vw!important; }
}
.rating_content .card .heading-elements a[data-action='collapse'].rotate i, .card .card-header .heading-elements a[data-action='collapse'].rotate svg { position: relative; top: 3px; left: 5px; }
.rating_content section.card { border-bottom: 1px solid #eeeeee; border-radius: 20px 20px 0px 0px; }
.rating_content section.card:last-child { border-bottom:0px; }
#activity_list_pagination { z-index: 100; position: relative; }
/* 20240721 remove this */
/*textarea[name='reply_msg'] { border-top-left-radius:20px; border-bottom-left-radius:20px; }*/
#explore .content-body { position:relative; overflow:visible; z-index:2; }
#explore .cow_image { position:absolute; left:10%; bottom:-5vw; width:80%; }
#explore .cow_image img { width:100%; height:auto; }
@media (min-width: 576px) {
#modal_video .modal-dialog { max-width: 1000px; }
}
.card_actions .dropdown-menu { position:relative; }
.card_actions .dropdown-menu .scroll_mark { position:absolute; right:45px; top:23px; width:0; height: 0; /*border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 12px solid #2f286d;*/ transition: all 300ms linear 0s; }
.card_actions .dropdown-menu .scroll_mark:before { content: "\e843"; color:#2f286d; font-family: feather !important; speak: none; font-size:26px; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; }
#mobile_submenu .dropdown-menu .scroll_mark { position:absolute; right:45px; top:21px; width:0; height: 0; /*border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 12px solid #2f286d;*/ transition: all 300ms linear 0s; }
#mobile_submenu .dropdown-menu .scroll_mark:before { content: "\e843"; color:#2f286d; font-family: feather !important; speak: none; font-size:26px; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; }
#mobile_submenu .dropdown-menu .dropdown-item { padding-right:40px; }
.swal2-popup { border-radius: 25px!important; }
.swal2-actions button { border-radius: 50rem !important; }
/* 20231207 upload file basic */
.custom-image { position: relative; display: inline-block; width: 100%; min-height:50px; margin-bottom: 0; }
/*.custom-image-input { position: relative; z-index: 2; width: 100%; height: 50px; margin: 0; overflow: hidden; opacity: 0; }
.custom-image-input:lang(en) ~ .custom-file-label::after { content:"Add image"; }*/
.custom-image-label { position:static; top:0; right:0; bottom:0; z-index:3; line-height:32px; padding:0.6rem 1rem; color:#6e6b7b; content:"Browse"; background-color:white; border-radius:0px; margin:0px; border-left:1px solid #d8d6de; cursor:pointer; text-wrap:nowrap; display:flex; order:2; }
.form-group label.custom-image-label { margin-bottom:0px; }
.custom-image-input_multiple { position:absolute; z-index:-1; }
.custom-image-box { position:static; top:0; right:0; left:0; z-index:1; min-height:50px!important; max-height:auto!important; height:auto!important; padding:0px; overflow: hidden; font-weight: 400; line-height:32px; color: #6e6b7b; background-color:#fff; border:1px solid #d8d6de; border-radius:0px; display:flex; flex-wrap:nowrap; justify-content:space-between; order:1; flex: 1 1 100%; }
.custom-image-preview { padding:6px 4px 4px 6px; display:flex; flex-wrap:wrap; }
.custom-image-preview .photo_item { position:relative; overflow:hidden; margin-right:2px; margin-bottom:2px; cursor:pointer; }
.custom-image-preview .photo_item:before { display:block; content:""; position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0); -webkit-transition:background-color 0.15s ease 0s; -o-transition:background-color 0.15s ease 0s; transition:background-color 0.15s ease 0s; z-index:10; }
.custom-image-preview .photo_item:after { font-family:feather; font-size:24px; color:#ffffff; content:"\e8bd"; width:24px; height:24px; line-height:24px; position:absolute; margin-left:-12px; margin-top:-12px; left:50%; top:50%; opacity:0; -webkit-transition:opacity 0.3s ease 0s; -o-transition:opacity 0.3s ease 0s; transition:opacity 0.3s ease 0s; z-index:200; }
.custom-image-preview .photo_item.action_view { cursor:pointer; }
.custom-image-preview .photo_item.action_delete { cursor:pointer; }
.custom-image-preview .photo_item.action_delete:after { font-family:feather; content: "\e8db"; }
.custom-image-preview .photo_item:hover img { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1); }
.custom-image-preview .photo_item:hover:before { background-color:rgba(0, 0, 0, 0.4); }
.custom-image-preview .photo_item:hover:after { opacity:1; }
.custom-image-preview img { height:100px; width:auto; cursor:pointer; }
/*
.custom-image-preview img: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,"); 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; }
.custom-image-preview img:hover:before { opacity:1; }
.custom-image-preview img:after { content: ""; display:none; }
*/
/* photo list */
/* journey */
/*#journey_print_button { max-width:1100px; margin:auto; }*/
#journey_print_button { max-width:600px; margin:auto; }
#journey_print_button .btn_pdf { /*position:fixed; bottom:30px; right:30px; z-index:100;*/ }
.journey_content .apexcharts-legend { display:none; }
/*#journey_print { max-width:1100px; margin:auto; }*/
#journey_print { max-width:600px; margin:auto; }
.journey_content { position:relative; font-size:1.8vw; line-height:2.4vw; color:#000000; font-family:Arial, Helvetica, sans-serif; }
.journey_content p, .journey_content div { font-size:1.8vw; line-height:2.4vw; color:#000000; font-family:Arial, Helvetica, sans-serif; }
.journey_content p { margin-bottom:1vw; }
.journey_student_name_en { position: absolute; top: 78.5%; right: 10%; width: 50%; height: 6%; font-size: 3vw!important; text-align: center; color: #000000; font-weight: bold; /*transform: rotate(-1deg);*/ z-index: 1; }
.journey_student_name { position: absolute; top: 74.5%; right: 10%; width: 50%; height: 8%; font-size: 6vw!important; text-align: center; color: #000000; font-weight: bold; /*transform: rotate(-1deg);*/ z-index: 2; }
.journey_duration { position: absolute; top: 83%; left: 11%; width: 25%; height:3%; font-size:2.2vw!important; text-align: center; color: #000000; font-weight: bold; /*transform: rotate(-1deg);*/ z-index: 3; font-family:Arial, Helvetica, sans-serif; }
.journey_cow { float:right; width:33%; height:auto; z-index:2; }
.journey_summary_hr { margin-top:1.5vw; margin-bottom:1.5vw; }
.journey_chart { position:relative; width:100%; margin-top:3vw; margin-bottom:3vw; }
.chart_yaxis { z-index:1; position:absolute; top:0px; height:100%; width:15%; border-right:solid 1px #e0e0e0; }
.chart_yaxis span { position:absolute; right:-0.4vw; bottom:-2.5vw; }
.chart_vertical_grid_group { z-index:2; display:flex; position:absolute; top:0px; left:15%; height:100%; width:85%; }
.chart_vertical_grid { position:relative; height:100%; width:20%; border-right:solid 1px #e0e0e0; }
.chart_vertical_grid span { position:absolute; right:-0.4vw; bottom:-2.5vw; }
.chart_body { z-index:3; position:relative; top:0px; left:0px; }
.chart_row { display:flex; }
.chart_yaxis_label { width:15%; padding:0.5vw 0vw; }
.chart_bar_area { width:85%; }
.chart_bar { width:100%; height:0vw; margin-top:0.6vw; border-top-style:solid; border-top-width:1.5vw; }
.journey_concept_1.chart_bar { border-top-color:#dc4e65; }
.journey_concept_2.chart_bar { border-top-color:#ef3d36; }
.journey_concept_3.chart_bar { border-top-color:#f3bb45; }
.journey_concept_4.chart_bar { border-top-color:#b1c947; }
.journey_concept_5.chart_bar { border-top-color:#4bb955; }
.journey_concept_6.chart_bar { border-top-color:#009390; }
.journey_concept_7.chart_bar { border-top-color:#2ec5f3; }
.journey_concept_8.chart_bar { border-top-color:#00aeef; }
.journey_concept_9.chart_bar { border-top-color:#2f286d; }
.journey_activity_header { margin-bottom:3vw!important; }
.journey_activity_label { position:relative; width: 24%; }
.journey_activity_label_text { position: absolute; top: 20%; left: 22%; font-size:2.5vw!important; line-height:3vw!important; margin-bottom:1vw; font-weight:600; transform: rotate(-5deg);}
.journey_activity_label_number { position: absolute; top:5%; left:105%; font-size:7vw!important; line-height:8vw!important; margin-bottom:0vw; font-weight:900; -webkit-text-fill-color: white; -webkit-text-stroke-color: #000000; -webkit-text-stroke-width: 0.4vw; transform: rotate(-5deg);}
.journey_activity_time_finished { text-align: right; font-weight:600; }
.journey_activity_time_finished_title { margin-bottom: 0vw!important; }
.journey_activity_time_finished_date { font-weight:900; font-size:2.6vw!important; line-height:3.6vw!important; }
.journey_activity_chapter { margin-bottom:3vw!important; }
.journey_activity_big_idea { position:relative; width:16%; margin-right:2vw!important; }
.journey_activity_big_idea_text { position: absolute; top:10%; left:12%; font-size:1.6vw!important; line-height:2vw!important; margin-bottom:0vw; font-weight:600;}
.journey_activity_big_idea_title { font-size:1.6vw!important; line-height:2vw!important; font-weight:600; }
.journey_activity_big_idea_chevron { height: 4vw !important; width: 4vw !important; color:#000000; }
.journey_activity_objective { margin-bottom:3vw!important; }
.journey_activity_objective_header { margin-bottom:1vw!important; }
.journey_activity_objective_icon { width:8%; margin-right:1vw!important; }
.journey_activity_objective_label_text { font-size:2.6vw!important; line-height:3.6vw!important; margin-bottom:0vw!important; font-weight:600; }
.journey_activity_objective_content { margin-left:8%;}
.journey_content .custom_style { line-height:2.6vw!important; }
.journey_content .custom_style li { margin-bottom:1vw!important; }
.journey_activity_learning { margin-bottom:3vw!important; }
.journey_activity_learning_header { margin-bottom:1vw!important; }
.journey_activity_learning_icon { width:8%; margin-right:1vw!important; }
.journey_activity_learning_label_text { font-size:2.6vw!important; line-height:3.6vw!important; margin-bottom:0vw!important; font-weight:600; }
.journey_activity_learning_photo_list { margin-left:9.5%;}
.journey_activity_sharing { margin-bottom:3vw!important; }
.journey_activity_sharing_header { margin-bottom:1vw!important; }
.journey_activity_sharing_icon { width:8%; margin-right:1vw!important; }
.journey_activity_sharing_label_text { font-size:2.6vw!important; line-height:3.6vw!important; margin-bottom:0vw!important; font-weight:600; }
.journey_activity_sharing_content { margin-left:9.5%;}
.journey_activity_sharing_content svg.font-medium-5 { height: 2.2vw !important; width: 2.2vw !important; margin-right:0.5vw; }
.journey_activity_sharing_content .rating_student { margin-bottom:2vw!important; }
.journey_activity_sharing_content .statistic_info { margin-bottom:1vw!important; }
.journey_activity_sharing_content .parent_name { font-size:2vw!important; line-height:2.2vw!important; margin-right:1vw; }
.journey_activity_sharing_content .msg_time { font-size:1.6vw!important; line-height:2.6vw!important; margin-bottom:0vw!important; margin-right:1vw; }
.journey_activity_sharing_content .rating_avg svg.font-medium-2 { height: 2vw !important; width: 2vw !important; margin-right:0.5vw; }
.journey_activity_sharing_content .msg_content { margin-top:1vw!important; margin-bottom:2vw!important; }
.journey_activity_sharing_content .rating_teacher { margin-bottom:2vw!important; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height: 2vw !important; width: 2vw !important; margin-right:0.5vw; }
.journey_activity_sharing_content .teacher_name { font-size:2vw!important; line-height:2.2vw!important; margin-right:1vw; }
.journey_activity_sharing_content .reply_time { font-size:1.6vw!important; line-height:2.6vw!important; margin-bottom:0vw!important; margin-right:1vw; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height: 2vw !important; width: 2vw !important; margin-right:0.5vw; }
.journey_activity_sharing_content .reply_content { margin-top:1vw!important; margin-bottom:2vw!important; }
.journey_content .parent_name { margin-bottom:0vw!important; }
.journey_content .photo_list div { margin-bottom:0vw!important; }
.journey_content .imgs-grid { max-width: 1500px; }
/* maxsize : calculate max font-size = 12 * vw font size */
/*@media (min-width:1200px) {
.journey_content { font-size:21.6px; line-height:28.8px; }
.journey_content p, .journey_content div { font-size:21.6px; line-height:28.8px; }
.journey_content p { margin-bottom:12px; }
.journey_student_name_en { font-size: 36px!important; }
.journey_student_name { font-size: 72px!important; }
.journey_duration { font-size:26.4px!important; }
.journey_summary_hr { margin-top:18px; margin-bottom:18px; }
.journey_chart { margin-top:36px; margin-bottom:36px; }
.chart_yaxis span { right:-4.8px; bottom:-30px; }
.chart_vertical_grid span { right:-4.8px; bottom:-30px; }
.chart_yaxis_label { padding:6px 0px; }
.chart_bar { margin-top:7.2px; border-top-width:18px; }
.journey_activity_header { margin-bottom:36px; }
.journey_activity_label_text { font-size:30px!important; line-height:36px!important; margin-bottom:12px; }
.journey_activity_label_number { font-size:84px!important; line-height:96px!important; -webkit-text-stroke-width: 4.8px; }
.journey_activity_time_finished_date { font-size:31.2px!important; line-height:43.2px!important; }
.journey_activity_chapter { margin-bottom:36px!important; }
.journey_activity_big_idea { margin-right:24px!important; }
.journey_activity_big_idea_text { font-size:19.2px!important; line-height:24px!important; }
.journey_activity_big_idea_title { font-size:19.2px!important; line-height:24px!important; }
.journey_activity_big_idea_chevron { height:48px !important; width:48px !important; }
.journey_activity_objective { margin-bottom:36px!important; }
.journey_activity_objective_header { margin-bottom:12px!important; }
.journey_activity_objective_icon { margin-right:12px!important; }
.journey_activity_objective_label_text { font-size:31.2px!important; line-height:43.2px!important; }
.journey_content .custom_style { line-height:31.2px!important; }
.journey_content .custom_style li { margin-bottom:12px!important; }
.journey_activity_learning { margin-bottom:36px!important; }
.journey_activity_learning_header { margin-bottom:12px!important; }
.journey_activity_learning_icon { margin-right:12px!important; }
.journey_activity_learning_label_text { font-size:31.2px!important; line-height:43.2px!important; }
.journey_activity_sharing { margin-bottom:36px!important; }
.journey_activity_sharing_header { margin-bottom:12px!important; }
.journey_activity_sharing_icon { margin-right:12px!important; }
.journey_activity_sharing_label_text { font-size:31.2px!important; line-height:43.2px!important; }
.journey_activity_sharing_content svg.font-medium-5 { height:26.4px !important; width:26.4px !important; margin-right:6px; }
.journey_activity_sharing_content .rating_student { margin-bottom:24px!important; }
.journey_activity_sharing_content .statistic_info { margin-bottom:12px!important; }
.journey_activity_sharing_content .parent_name { font-size:24px!important; line-height:26.4px!important; margin-right:12px; }
.journey_activity_sharing_content .msg_time { font-size:19.2px!important; line-height:31.2px!important; margin-bottom:0px!important; margin-right:12px; }
.journey_activity_sharing_content .rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
.journey_activity_sharing_content .msg_content { margin-top:12px!important; margin-bottom:24px!important; }
.journey_activity_sharing_content .rating_teacher { margin-bottom:24px!important; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
.journey_activity_sharing_content .teacher_name { font-size:24px!important; line-height:26.4px!important; margin-right:12px; }
.journey_activity_sharing_content .reply_time { font-size:19.2px!important; line-height:31.2px!important; margin-bottom:0px!important; margin-right:12px; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
.journey_activity_sharing_content .reply_content { margin-top:12px!important; margin-bottom:24px!important; }
}
*/
@media (min-width:600px) { /* maxsize : calculate max font-size = 12 * vw font size */
.journey_content { font-size:10.8px; line-height:14.4px; }
.journey_content p, .journey_content div { font-size:10.8px; line-height:14.4px; }
.journey_content p { margin-bottom:6px; }
.journey_student_name_en { font-size: 18px!important; }
.journey_student_name { font-size: 36px!important; }
.journey_duration { font-size:13.2px!important; }
.journey_summary_hr { margin-top:9px; margin-bottom:9px; }
.journey_chart { margin-top:18px; margin-bottom:18px; }
.chart_yaxis span { right:-2.4px; bottom:-15px; }
.chart_vertical_grid span { right:-2.4px; bottom:-15px; }
.chart_yaxis_label { padding:3px 0px; }
.chart_bar { margin-top:3.6px; border-top-width:9px; }
.journey_activity_header { margin-bottom:18px; }
.journey_activity_label_text { font-size:15px!important; line-height:18px!important; margin-bottom:6px; }
.journey_activity_label_number { font-size:42px!important; line-height:48px!important; -webkit-text-stroke-width: 2.4px; }
.journey_activity_time_finished_date { font-size:15.6px!important; line-height:21.6px!important; }
.journey_activity_chapter { margin-bottom:18px!important; }
.journey_activity_big_idea { margin-right:12px!important; }
.journey_activity_big_idea_text { font-size:9.6px!important; line-height:12px!important; }
.journey_activity_big_idea_title { font-size:9.6px!important; line-height:12px!important; }
.journey_activity_big_idea_chevron { height:24px !important; width:24px !important; }
.journey_activity_objective { margin-bottom:18px!important; }
.journey_activity_objective_header { margin-bottom:6px!important; }
.journey_activity_objective_icon { margin-right:6px!important; }
.journey_activity_objective_label_text { font-size:15.6px!important; line-height:21.6px!important; }
.journey_content .custom_style { line-height:15.6px!important; }
.journey_content .custom_style li { margin-bottom:6px!important; }
.journey_activity_learning { margin-bottom:18px!important; }
.journey_activity_learning_header { margin-bottom:6px!important; }
.journey_activity_learning_icon { margin-right:6px!important; }
.journey_activity_learning_label_text { font-size:15.6px!important; line-height:21.6px!important; }
.journey_activity_sharing { margin-bottom:18px!important; }
.journey_activity_sharing_header { margin-bottom:6px!important; }
.journey_activity_sharing_icon { margin-right:6px!important; }
.journey_activity_sharing_label_text { font-size:15.6px!important; line-height:21.6px!important; }
.journey_activity_sharing_content svg.font-medium-5 { height:13.2px !important; width:13.2px !important; margin-right:3px; }
.journey_activity_sharing_content .rating_student { margin-bottom:12px!important; }
.journey_activity_sharing_content .statistic_info { margin-bottom:6px!important; }
.journey_activity_sharing_content .parent_name { font-size:12px!important; line-height:13.2px!important; margin-right:6px; }
.journey_activity_sharing_content .msg_time { font-size:9.6px!important; line-height:15.6px!important; margin-bottom:0px!important; margin-right:6px; }
.journey_activity_sharing_content .rating_avg svg.font-medium-2 { height:12px !important; width:12px !important; margin-right:3px; }
.journey_activity_sharing_content .msg_content { margin-top:6px!important; margin-bottom:12px!important; }
.journey_activity_sharing_content .rating_teacher { margin-bottom:12px!important; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:12px !important; width:12px !important; margin-right:3px; }
.journey_activity_sharing_content .teacher_name { font-size:12px!important; line-height:13.2px!important; margin-right:6px; }
.journey_activity_sharing_content .reply_time { font-size:9.6px!important; line-height:15.6px!important; margin-bottom:0px!important; margin-right:6px; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:12px !important; width:12px !important; margin-right:3px; }
.journey_activity_sharing_content .reply_content { margin-top:6px!important; margin-bottom:12px!important; }
}
/* pdf */
/*#journey_pdf .row:not(.mb-3) { font-size:21px!important; }
#journey_pdf .row.mb-3 p.font-medium-3 { line-height:1.5rem!important; margin-bottom:1rem; }
#journey_pdf .row:not(.mb-3) p { line-height:2.25rem!important; margin-bottom:1.5rem; }
#journey_pdf p.remarks { font-size:21px!important; }
#journey_pdf .font-medium-1 { font-size:1.65rem!important; }
#journey_pdf h4 { font-size:1.929rem!important; margin-bottom:0.75rem!important; }
#journey_pdf hr { margin-top:1.5rem; margin-bottom:1.5rem; }
#journey_pdf svg { display:none; }
#journey_pdf { position:absolute; top:0px; left:-9999px; width:100%; height:auto; background-color:#ffffff; padding:60px; transform-origin:0 0; z-index:1000; }
#journey_pdf.pdf { position:absolute; left:9999px; width:1100px; transform: scale(2); }
#journey_pdf .no_print { display:none!important; }
#journey_pdf .order_info { display:block!important; flex: 0 0 320px; background-color:#ffffff!important; }
#journey_pdf .order_info .row .col:nth-child(1) { flex: 0 0 33.33333%!important; max-width: 33.33333%!important; }
#journey_pdf .order_info .row .col:nth-child(2) { flex: 0 0 66.66667%!important; max-width: 66.66667%!important; }
*/
/* A4 = 2480 pixels x 3508 pixels (print resolution) 595 pixels x 842 pixels (screen resolution) */
#journey_pdf { display:block; position:fixed; top:0px; left:9999px; /*width:1200px;*/ height:max-content; background-color:#ffffff; padding:0px; /*transform-origin:0 0;*/ z-index:1000; /*transform: scale(2);*/ }
/*#journey_pdf { left:9999px; width:1100px; transform: scale(2); }*/
#journey_pdf section { padding:0px; background-color:#ffffff; }
#journey_pdf.pdf { display:block; position:absolute; left:0px; width:1200px; /*transform: scale(2);*/ z-index:-1; }
body.pdf { overflow:hidden; }
html.pdf { overflow:hidden; }
#journey_pdf .photo_list { background-color:#ffffff; }
#journey_pdf.pdf.showpreview { left:0px!important; }
body.pdf.showpreview { overflow:auto!important; }
html.pdf.showpreview { overflow:auto!important; }
#total_upload_progress { position:absolute; width:100%; bottom:0px; left:0px; z-index:10000; }
#total_upload_progress .progress-bar { -webkit-transition:all 1s ease-out; -o-transition:all 1s ease-out; transition:all 1s ease-out;}
/* pdf style */
html, body { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; }
/*#journey_cover { page-break-after: always; }
#journey_summary { page-break-after: always; }*/
#journey_pdf #journey_cover { width:1200px; height:1697px!important; background-color: #ffffff; margin-bottom:0px!important; border-radius:0px; box-shadow:none; border:0px; padding:2rem!important; }
#journey_pdf #journey_summary { width:1200px; height:1697px!important; background-color: #ffffff; margin-bottom:0px!important; border-radius:0px; box-shadow:none; border:0px; padding:6rem !important; }
#journey_pdf .activity_section { width:1200px; /*height:1697px!important;*/ background-color: #ffffff; padding-bottom:30px!important; margin-bottom:0px!important; border-radius:0px; box-shadow:none; border:0px; padding:6rem !important; font-size: 16px; }
/*#journey_pdf .activity_section { height:3000px!important; background-color: #cccccc; padding-bottom:30px!important; margin-bottom:0px!important; }
#journey_pdf .activity_section.splitpage { margin-bottom:200px!important; }*/
#journey_pdf #journey_cover .journey_content { width:1148px!important; height:1624px!important; }
#journey_pdf #journey_cover .journey_content img { display:block!important; z-index:0!important; position:absolute!important; top:0px!important; left:0px!important; }
#journey_pdf #journey_summary .journey_content img { display:block!important; z-index:1!important;}
#journey_pdf div, #journey_pdf p, #journey_pdf img { visibility: visible; opacity: 1; line-height: 1.6em;}
#journey_pdf .image-wrap img { transform:none!important; }
#journey_pdf .photo_list { background-color: #ffffff; }
#journey_pdf .label_number_img { position: absolute; top:8%; left:106%; width: max-content; }
#journey_pdf .label_number_img img { height:86px; width:auto; }
#journey_pdf .label_number_img img:nth-child(2) { position: relative; top:-5px;}
#journey_pdf .label_number_img img:nth-child(3) { position: relative; top:-10px;}
#journey_pdf .label_number_img img:nth-child(4) { position: relative; top:-15px;}
#journey_pdf .journey_content { font-size:21.6px; line-height:28.8px; }
#journey_pdf .journey_content p, #journey_pdf .journey_content div { font-size:21.6px; line-height:28.8px; }
#journey_pdf .journey_content p { margin-bottom:12px; }
#journey_pdf .journey_student_name_en { font-size: 36px!important; }
#journey_pdf .journey_student_name { font-size: 52px!important; }
#journey_pdf .journey_duration { font-size:26.4px!important; }
#journey_pdf .journey_summary_hr { margin-top:18px; margin-bottom:18px; }
#journey_pdf .journey_chart { margin-top:36px; margin-bottom:36px; }
#journey_pdf .chart_yaxis span { right:-4.8px; bottom:-30px; }
#journey_pdf .chart_vertical_grid span { right:-4.8px; bottom:-30px; }
#journey_pdf .chart_yaxis_label { padding:6px 0px; }
#journey_pdf .chart_bar { margin-top:3.12px; border-top-width:18px; }
#journey_pdf .journey_activity_header { margin-bottom:36px!important; }
#journey_pdf .journey_activity_label_text { font-size:30px!important; line-height:36px!important; margin-bottom:12px; }
#journey_pdf .journey_activity_label_number { font-size:84px!important; line-height:96px!important; -webkit-text-stroke-width: 4.8px; }
#journey_pdf .journey_activity_time_finished_date { font-size:31.2px!important; line-height:43.2px!important; }
#journey_pdf .journey_activity_chapter { margin-bottom:36px!important; }
#journey_pdf .journey_activity_big_idea { margin-right:24px!important; }
#journey_pdf .journey_activity_big_idea_text { font-size:19.2px!important; line-height:24px!important; }
#journey_pdf .journey_activity_big_idea_title { font-size:19.2px!important; line-height:24px!important; }
#journey_pdf .journey_activity_big_idea_chevron { height:48px !important; width:48px !important; }
#journey_pdf .journey_activity_objective { margin-bottom:36px!important; }
#journey_pdf .journey_activity_objective_header { margin-bottom:12px!important; }
#journey_pdf .journey_activity_objective_icon { margin-right:12px!important; }
#journey_pdf .journey_activity_objective_label_text { font-size:31.2px!important; line-height:43.2px!important; }
#journey_pdf .journey_content .custom_style { line-height:31.2px!important; }
#journey_pdf .journey_content .custom_style li { margin-bottom:12px!important; }
#journey_pdf .journey_activity_learning { margin-bottom:36px!important; }
#journey_pdf .journey_activity_learning_header { margin-bottom:12px!important; }
#journey_pdf .journey_activity_learning_icon { margin-right:12px!important; }
#journey_pdf .journey_activity_learning_label_text { font-size:31.2px!important; line-height:43.2px!important; }
#journey_pdf .journey_activity_sharing { margin-bottom:36px!important; }
#journey_pdf .journey_activity_sharing_header { margin-bottom:12px!important; }
#journey_pdf .journey_activity_sharing_icon { margin-right:12px!important; }
#journey_pdf .journey_activity_sharing_label_text { font-size:31.2px!important; line-height:43.2px!important; }
#journey_pdf .journey_activity_sharing_content .rating_star { height:22px !important; width:auto !important; margin-right:6px!important; }
/*#journey_pdf .journey_activity_sharing_content .icon-star.font-medium-5 { font-size:26.4px!important; height:26.4px !important; width:26.4px !important; margin-right:6px!important; }
#journey_pdf .journey_activity_sharing_content .icon-star.font-medium-5.subcolor_yellow_fill { text-shadow: #f3bb45 -10px 0 0px; }
#journey_pdf .journey_activity_sharing_content svg.font-medium-5 { height:26.4px !important; width:26.4px !important; margin-right:6px; }*/
#journey_pdf .journey_activity_sharing_content .rating_student { margin-bottom:24px!important; }
#journey_pdf .journey_activity_sharing_content .statistic_info { margin-bottom:12px!important; }
#journey_pdf .journey_activity_sharing_content .parent_name { font-size:24px!important; line-height:26.4px!important; margin-right:12px; }
#journey_pdf .journey_activity_sharing_content .msg_time { font-size:19.2px!important; line-height:31.2px!important; margin-bottom:0px!important; margin-right:12px; }
#journey_pdf .journey_activity_sharing_content .rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
#journey_pdf .journey_activity_sharing_content .msg_content { margin-top:12px!important; margin-bottom:24px!important; }
#journey_pdf .journey_activity_sharing_content .rating_teacher { margin-bottom:24px!important; }
#journey_pdf .journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
#journey_pdf .journey_activity_sharing_content .teacher_name { font-size:24px!important; line-height:26.4px!important; margin-right:12px; }
#journey_pdf .journey_activity_sharing_content .reply_time { font-size:19.2px!important; line-height:31.2px!important; margin-bottom:0px!important; margin-right:12px; }
#journey_pdf .journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
#journey_pdf .journey_activity_sharing_content .reply_content { margin-top:12px!important; margin-bottom:24px!important; }
/* print style 2 */
@media print {
body, html, body html, html body { overflow:visible; }
nav { display:none; }
.banner_inner { display:none!important; }
html body.public-site .content .content-wrapper { width: 100%; max-width:inherit; padding:0px; margin:0px; }
footer { display:none; }
.btn_pdf { display:none;}
#journey_cover { aspect-ratio: 1 / 1.42; /*height:1800px;*/ border:0px solid #000000;}
#journey_summary { aspect-ratio: 1 / 1.42; /*height:1800px;*/ border:0px solid #000000; }
#journet_summary .journey_content { margin:auto; }
#summary_chart { width:100%!important; }
#summary_chart .apexcharts-canvas { width:100%!important; }
#summary_chart .apexcharts-canvas svg { width:100%!important; }
/* same as the max font size */
.journey_content { font-size:21.6px; line-height:28.8px; }
.journey_content p, .journey_content div { font-size:21.6px; line-height:28.8px; }
.journey_content p { margin-bottom:12px; }
.journey_student_name_en { font-size: 36px!important; }
.journey_student_name { font-size: 72px!important; }
.journey_duration { font-size:26.4px!important; }
.journey_summary_hr { margin-top:18px; margin-bottom:18px; }
.journey_chart { margin-top:36px; margin-bottom:36px; }
.chart_yaxis span { right:-4.8px; bottom:-30px; }
.chart_vertical_grid span { right:-4.8px; bottom:-30px; }
.chart_yaxis_label { padding:6px 0px; }
.chart_bar { margin-top:7.2px; border-top-width:18px; }
.journey_activity_header { margin-bottom:36px; }
.journey_activity_label_text { font-size:30px!important; line-height:36px!important; margin-bottom:12px; }
.journey_activity_label_number { font-size:84px!important; line-height:96px!important; }
.journey_activity_time_finished_date { font-size:31.2px!important; line-height:43.2px!important; }
.journey_activity_chapter { margin-bottom:36px!important; }
.journey_activity_big_idea { margin-right:24px!important; }
.journey_activity_big_idea_text { font-size:19.2px!important; line-height:24px!important; }
.journey_activity_big_idea_title { font-size:19.2px!important; line-height:24px!important; }
.journey_activity_big_idea_chevron { height:48px !important; width:48px !important; }
.journey_activity_objective { margin-bottom:36px!important; }
.journey_activity_objective_header { margin-bottom:12px!important; }
.journey_activity_objective_icon { margin-right:12px!important; }
.journey_activity_objective_label_text { font-size:31.2px!important; line-height:43.2px!important; }
.journey_content .custom_style { line-height:31.2px!important; }
.journey_content .custom_style li { margin-bottom:12px!important; }
.journey_activity_learning { margin-bottom:36px!important; }
.journey_activity_learning_header { margin-bottom:12px!important; }
.journey_activity_learning_icon { margin-right:12px!important; }
.journey_activity_learning_label_text { font-size:31.2px!important; line-height:43.2px!important; }
.journey_activity_sharing { margin-bottom:36px!important; }
.journey_activity_sharing_header { margin-bottom:12px!important; }
.journey_activity_sharing_icon { margin-right:12px!important; }
.journey_activity_sharing_label_text { font-size:31.2px!important; line-height:43.2px!important; }
.journey_activity_sharing_content svg.font-medium-5 { height:26.4px !important; width:26.4px !important; margin-right:6px; }
.journey_activity_sharing_content .rating_student { margin-bottom:24px!important; }
.journey_activity_sharing_content .statistic_info { margin-bottom:12px!important; }
.journey_activity_sharing_content .parent_name { font-size:24px!important; line-height:26.4px!important; margin-right:12px; }
.journey_activity_sharing_content .msg_time { font-size:19.2px!important; line-height:31.2px!important; margin-bottom:0px!important; margin-right:12px; }
.journey_activity_sharing_content .rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
.journey_activity_sharing_content .msg_content { margin-top:12px!important; margin-bottom:24px!important; }
.journey_activity_sharing_content .rating_teacher { margin-bottom:24px!important; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
.journey_activity_sharing_content .teacher_name { font-size:24px!important; line-height:26.4px!important; margin-right:12px; }
.journey_activity_sharing_content .reply_time { font-size:19.2px!important; line-height:31.2px!important; margin-bottom:0px!important; margin-right:12px; }
.journey_activity_sharing_content .reply_rating_avg svg.font-medium-2 { height:24px !important; width:24px !important; margin-right:6px; }
.journey_activity_sharing_content .reply_content { margin-top:12px!important; margin-bottom:24px!important; }
}
.imgs-grid.imgs-grid-1 .imgs-grid-image .image-wrap img { max-width:400px!important; }
#journey_print .imgs-grid.imgs-grid-1 .imgs-grid-image .image-wrap img { max-width:180px!important; }
#journey_pdf .imgs-grid.imgs-grid-1 .imgs-grid-image .image-wrap img { max-width: 360px !important; }
#journey_pdf .single_photo { display: block !important; }
#journey_pdf .single_photo img { max-width: 360px !important; }
#output_msg { padding:10px; width:200px; word-break:break-all; }
#output_msg br { content: " " !important; display: block; height: 8px; }
/*.html2canvas-container { visibility:visible!important; overflow: auto!important; top:0px!important; left:0px!important; position: absolute; opacity:1!important;
}*/
/* summernote */
.note-editor.note-airframe .note-status-output, .note-editor.note-frame .note-status-output { display: none; }
.note-editor.note-airframe .note-editing-area, .note-editor.note-frame .note-editing-area { background-color: #ffffff; }
.note-modal .modal-dialog { box-shadow:none; }
.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 h4, .note-editor h5, .note-editor h6 { margin-top:0px; margin-bottom:0px; }
.note-editor .modal { z-index:6500!important; }
.note-editor .modal.show { display:flex!important; padding:0px!important; }
.note-editor .modal.show .modal-dialog { transform: none; margin:auto; width:95vw; max-width:480px; }
/* 20241009 add these 2 lines*/
.note-modal.show .modal-dialog { transform: none; margin:auto; width:95vw; max-width:480px; }
.note-modal .note-group-image-url { display:none; }
.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 .modal-footer .note-btn-primary { border-radius:0px!important; }
.note-editor .modal .checkbox { position:relative; line-height:22px; padding-top:10px; padding-bottom:10px; padding-left:0px; }
.note-editor .modal .checkbox label { position:relative; cursor:pointer; padding-left:32px; }
.note-editor .modal .checkbox 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 .checkbox input[type="checkbox"]:before { content:" "; display:block; border:1px solid #D9D9D9; background-color:#ffffff; width:24px; height:24px; position:absolute; top:0px; left:0px; }
.note-editor .modal .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(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.note-editor .modal .checkbox input[type="checkbox"]:checked:before { background-color:#2f286d; }
.note-editor .modal .checkbox input[type="checkbox"]:checked:after { background-image: url("data:image/svg+xml,"); }
.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; }
/* 20241009 revise this */
.note-form-group .note-image-input { text-indent: -9999px; display: block; color: #5F5F5F; border: 1px solid #D9D9D9; border-radius:0px; display: block; width: 100%; height: calc(1.25em + 1.4rem + 1px); padding: 0.7rem 0.7rem; font-size: 0.96rem; font-weight: 400; line-height: 1.25; background-color: #FFFFFF; background-clip: padding-box; -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -webkit-box-shadow:none; box-shadow:none; }
.note-editor .form-control { color: #5F5F5F; border: 1px solid #D9D9D9; border-radius:0px; display: block; width: 100%; height: calc(1.25em + 1.4rem + 1px); padding: 0.7rem 0.7rem; font-size: 0.96rem; font-weight: 400; line-height: 1.25; background-color: #FFFFFF; background-clip: padding-box; -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -webkit-box-shadow:none; box-shadow:none; }
.note-editor .form-control:focus { border-color:#2f286d; color:#000000; outline: 0; -webkit-box-shadow:none; box-shadow:none; }
.note-editor.note-frame.card { margin-bottom:0px; }
.note-editor.note-frame.card.fullscreen { margin-bottom:0px; z-index: 8000; }
/* editor */
.note-editor.note-frame { border: 1px solid #ddd; }
/*.note-editor.note-frame .note-editing-area .note-editable { min-height: 200px; }*/
.note-editor .dropdown-toggle::after { content: ""!important; }
.panel-default>.panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; padding:0px 5px 5px 5px; }
.note-editor .modal-header .close { position: absolute; right: 0px; }
.note-popover {display:none; }
/* 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% - 62px - 69px); max-height:inherit; padding: 0px!important; overflow-y:hidden; }
#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; }
#modal_crop.modal.fade .modal-dialog {
-webkit-transform: none!important;
-ms-transform: none!important;
transform: none!important;
-webkit-transition: none!important;
-moz-transition: none!important;
-o-transition: none!important;
transition: none!important;
}
#modal_crop .modal-header .close { margin-top:-1rem; }
/* style for editor */
/* font size */
.activity_summernote .note-editable, .activity_summernote .note-editable p, .activity_summernote .note-editable div, .activity_summernote .note-editable span, .activity_summernote .note-editable li { font-size: 18px; line-height:32px; color:#5e5873; font-family: 'Montserrat', '\5FAE\8EDF\6B63\9ED1\9AD4', 'Microsoft JhengHei', Helvetica, Arial, sans-serif; } /* 20240902 change this style */
.activity_summernote .note-editable h3 { margin-top:0; line-height:1.2; };
.activity_summernote .note-editor h2 { font-size:26px; font-weight:bold; margin-top:4px; margin-bottom: 10px; color:#5e5873; line-height: 1.2; }
.activity_summernote .note-editor h3 { font-size:22px; font-weight:bold; margin-top:4px; margin-bottom: 8px; color:#5e5873; line-height: 1.2; }
.activity_summernote .note-editor h4 { font-size:18px; font-weight:bold; margin-top:4px; margin-bottom: 6px; color:#5e5873; line-height: 1.2; }
.activity_summernote .note-editor h5 { font-size:16px; font-weight:bold; margin-top:4px; margin-bottom: 6px; color:#5e5873; line-height: 1.2; }
.activity_summernote .note-editor h6 { font-size:14px; font-weight:bold; margin-top:4px; margin-bottom: 6px; color:#5e5873; line-height: 1.2; }
.note-editor h1, .note-editor h2, .note-editor h3, .note-editor h4, .note-editor h5, .note-editor h6, .note-editor .h1, .note-editor .h2, .note-editor .h3, .note-editor .h4, .note-editor .h5, .note-editor .h6 { font-weight:bold; margin-top:4px; margin-bottom: 10px; line-height: 1.2; color:#5e5873; }
.note-editor h1, .note-editor .h1 { font-size:30px; }
.note-editor h2, .note-editor .h2 { font-size:26px; }
.note-editor h3, .note-editor .h3 { font-size:22px; }
.note-editor h4, .note-editor .h4 { font-size:18px; }
.note-editor h5, .note-editor .h5 { font-size:16px; }
.note-editor h6, .note-editor .h6 { font-size:14px; }
.activity_summernote hr { margin-top: 2rem; margin-bottom: 2rem; }
.note-editor .btn-default { color: #333333; background-color: #ffffff; border-color: #cccccc!important; }
.note-editor .btn-group [class*='btn-']:not([class*='btn-outline-']):not([class*='btn-flat-']):not([class*='btn-gradient-']):not([class*='btn-relief-']) { border-left-color: #cccccc!important; border-right-color: #cccccc!important; }
/* card and header */
/*
.activity_summernote .note-editable { padding:10px 70px 20px 70px!important; }
@media (max-width:1440px) {
.activity_summernote .note-editable { padding:1.4vw 5vw!important; }
}
*/
.activity_summernote .note-editable img[width='100%'] { width:70%!important; height:auto!important; }
.activity_summernote .note-editable img[style='width: 100%;'] { width:70%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container img[width='100%'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container { width:70%!important; margin-left:0px; margin-right:inherit; }
@media (max-width:1200px) {
.activity_summernote .note-editable img[width='100%'] { width:80%!important; height:auto!important; }
.activity_summernote .note-editable img[style='width: 100%;'] { width:80%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container img[width='100%'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container { width:80%!important; }
}
@media (max-width:1000px) {
.activity_summernote .note-editable img[width='100%'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container img[width='100%'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container img[style='width: 100%;'] { width:100%!important; height:auto!important; }
.activity_summernote .note-editable .swiper-container { width:100%!important; }
}
/* list base setting */
.activity_summernote .note-editable ul.custom_style { list-style:none; padding-left:0px; }
.activity_summernote .note-editable ul.custom_style > li { counter-increment: list_counter; }
.activity_summernote .note-editable ol.custom_style { list-style: none; padding-left:0px; }
.activity_summernote .note-editable ol.custom_style > li { counter-increment: list_counter; }
/* list objects */
.activity_summernote .note-editable ul.pencil { counter-reset: list_counter; }
.activity_summernote .note-editable ul.pencil > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_summernote .note-editable ul.pencil > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:2px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_pencil.png); background-size: 30px 30px; background-repeat: no-repeat; }
.activity_summernote .note-editable ul.apple { counter-reset: list_counter; }
.activity_summernote .note-editable ul.apple > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_summernote .note-editable ul.apple > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:2px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_apple.png); background-size: 30px 30px; background-repeat: no-repeat; }
.activity_summernote .note-editable ul.bulb { counter-reset: list_counter; }
.activity_summernote .note-editable ul.bulb > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_summernote .note-editable ul.bulb > li::before { content:""; display: inline-block; height: 34px; width:34px; position: absolute; top:0px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_bulb.png); background-size: 34px 34px; background-repeat: no-repeat; }
.activity_summernote .note-editable ul.book { counter-reset: list_counter; }
.activity_summernote .note-editable ul.book > li { margin-left:40px; position:relative; padding-top:5px; padding-bottom:13px; }
.activity_summernote .note-editable ul.book > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:5px; left:-40px; background-image: url(../../app-assets/images/activities/list_style_book.png); background-size: 30px 30px; background-repeat: no-repeat; }
/* list shape */
.activity_summernote .note-editable ul.gear { counter-reset: list_counter; }
.activity_summernote .note-editable ul.gear > li { margin-left:40px; position:relative; padding-top:3px; padding-bottom:11px; }
.activity_summernote .note-editable ul.gear > li::before { content:""; display: inline-block; height: 30px; width:30px; position: absolute; top:3px; left:-40px; background-size: 30px 30px; background-repeat: no-repeat; }
.activity_summernote .note-editable ul.gear.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_blue.png); }
.activity_summernote .note-editable ul.gear.red > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_red.png); }
.activity_summernote .note-editable ul.gear.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_yellow.png); }
.activity_summernote .note-editable ul.gear.green > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_green.png); }
.activity_summernote .note-editable ul.puzzle { counter-reset: list_counter; }
.activity_summernote .note-editable ul.puzzle > li { margin-left:40px; position:relative; padding-top:3px; padding-bottom:11px; }
.activity_summernote .note-editable ul.puzzle > li::before { content:""; display: inline-block; height:26px; width:26px; position: absolute; top:4px; left:-40px; background-size: 26px 26px; background-repeat: no-repeat; }
.activity_summernote .note-editable ul.puzzle.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_blue.png); }
.activity_summernote .note-editable ul.puzzle.red > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_red.png); }
.activity_summernote .note-editable ul.puzzle.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_yellow.png); }
.activity_summernote .note-editable ul.puzzle.green > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_green.png); }
/* number list */
.activity_summernote .note-editable ol.steps { counter-reset: list_counter; }
.activity_summernote .note-editable ol.steps > li { margin-left:45px; position:relative; padding-top:4px; padding-bottom:12px; }
.activity_summernote .note-editable ol.steps > li::before { content:counter(list_counter); display: inline-block; height:34px; width:34px; line-height:34px; position: absolute; top:2px; left:-45px; color:#ffffff; font-size:20px; font-weight:700; border-radius:50px; text-align:center; }
.activity_summernote .note-editable ol.steps.blue > li::before { background-color:#2ec5f3; }
.activity_summernote .note-editable ol.steps.red > li::before { background-color:#ef3d36; }
.activity_summernote .note-editable ol.steps.yellow > li::before { background-color:#f3bb45; }
.activity_summernote .note-editable ol.steps.green > li::before { background-color:#4bb955; }
/* number list shape */
.activity_summernote .note-editable ol.puzzle { counter-reset: list_counter;}
.activity_summernote .note-editable ol.puzzle > li { margin-left:60px; position:relative; padding-top:10px; padding-bottom:20px; }
.activity_summernote .note-editable ol.puzzle > li::before { content:counter(list_counter); display: inline-block; height: 50px; width: 50px; position: absolute; top:0px; left:-60px; margin-right:10px; color:#ffffff; font-size:20px; font-weight:700; text-align:center; line-height:48px; background-size: 50px auto; background-repeat: no-repeat;}
.activity_summernote .note-editable ol.puzzle.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_blue.png); }
.activity_summernote .note-editable ol.puzzle.red > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_red.png); }
.activity_summernote .note-editable ol.puzzle.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_yellow.png); }
.activity_summernote .note-editable ol.puzzle.green > li::before { background-image: url(../../app-assets/images/activities/list_style_puzzle_green.png); }
.activity_summernote .note-editable ol.gear { counter-reset: list_counter;}
.activity_summernote .note-editable ol.gear > li { margin-left:60px; position:relative; padding-top:10px; padding-bottom:20px; }
.activity_summernote .note-editable ol.gear > li::before { content:counter(list_counter); display: inline-block; height: 50px; width: 50px; position: absolute; top:0px; left:-60px; margin-right:10px; color:#ffffff; font-size:20px; font-weight:700; text-align:center; line-height:50px; background-size: 50px auto; background-repeat: no-repeat;}
.activity_summernote .note-editable ol.gear.blue > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_blue_num.png); }
.activity_summernote .note-editable ol.gear.red > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_red_num.png); }
.activity_summernote .note-editable ol.gear.yellow > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_yellow_num.png); }
.activity_summernote .note-editable ol.gear.green > li::before { background-image: url(../../app-assets/images/activities/list_style_gear_green_num.png); }
/* template form */
/* 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,"); }
.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(61%) sepia(12%) saturate(2237%) hue-rotate(77deg) brightness(92%) contrast(87%); cursor:pointer; }
.ticket_checkbox input[type="checkbox"]:checked:after { background-image: url("data:image/svg+xml,"); }
.ticket_checkbox span {line-height:1.2;}
/* radio buttons */
#attendee_form .form-group .controls > div { display:flex; }
.radio_btn label { padding:0px; /*padding-right:8px;*/ width:100%; display:flex; height:50px; margin:0px; }
.radio_btn label input[type="radio"] { position:absolute; left:-9999px; }
.radio_btn label span { display: flex; align-items: center; font-size: 1rem; font-weight: 400; line-height: 1.45; height:100%; width:100%; padding: 0.7rem 0.7rem; 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; }
.radio_btn label span:hover { background-color: #e6e6e6; /*border-color: #adadad;*/ }
.radio_btn label input[type="radio"]:checked ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
.radio_btn label input[type="radio"]:checked:focus ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
.radio_btn label .input-group-prepend { height:50px; }
.radio_btn label .input-group-prepend span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
/*.radio_btn label span:hover { border-color: #EA5455; }
.radio_btn label span { border-color: #EA5455; }*/
/* checkbox buttons */
#attendee_form .form-group .controls > div { display:flex; }
.radio_btn label { padding:0px; /*padding-right:8px;*/ width:100%; display:flex; height:50px; margin:0px; }
.radio_btn label input[type="checkbox"] { position:absolute; left:-9999px; }
.radio_btn label span { display: flex; align-items: center; font-size: 1rem; font-weight: 400; line-height: 1.45; height:100%; width:100%; padding: 0.7rem 0.7rem; 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; }
.radio_btn label span:hover { background-color: #e6e6e6; /*border-color: #adadad;*/ }
.radio_btn label input[type="checkbox"]:checked ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
.radio_btn label input[type="checkbox"]:checked:focus ~ span { color: #fff; background-color:#2f286d; border-color:#2f286d; }
.radio_btn label .input-group-prepend { height:50px; }
.radio_btn label .input-group-prepend span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
/*.radio_btn label span:hover { border-color: #EA5455; }
.radio_btn label span { border-color: #EA5455; }*/
/* 20260122 adjust for long chapter title */
@media handheld, screen and (max-width: 1024px) {
#menu li { white-space: wrap; }
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a { height:auto; line-height:inherit; padding: 20px 12px 20px 35px!important; border-left:0px; }
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a span.bullet { position:absolute; left:15px; top:23px; }
}
#mobile_submenu .dropdown-menu { width:250px; }
#mobile_submenu .dropdown-menu.show { transform: none !important; top: inherit !important; left: inherit !important; bottom: 25px; right: -15px; }
#mobile_submenu .dropdown-item { padding-left: 3.6em; text-indent: -2.8em; white-space: wrap !important; }
#journey_pdf .photo_gallery.adjustwidth { width:101%!important; }
span.badge.rounded-pill.px-50.ml-50 {
display: inline;
}
.badge.rounded-pill.px-50.ml-50 {
display: inline;
}