@charset "utf-8";
/*----------------------------------------
  Created by Becky Tai 2022
----------------------------------------*/
html[lang=zh-tw] body {font-family: "Arial", "Helvetica", "微軟正黑體", "Microsoft JhengHei", "sans-serif";}
html[lang=zh-cn] body {font-family: "Arial", "Helvetica", "微軟雅黑體", "Microsoft YaHei", "sans-serif";}
html[lang=ja] body {font-family: "Arial", "Helvetica", "メイリオ", "Meiryo", "sans-serif"}
html[lang=ko] body {font-family: "Arial", "Helvetica", "맑은 고딕", "Malgun Gothic", " sans-serif"}


h1{font-size: 38px!important; color: #000!important;}
h2{font-size: 30px!important; color: #000!important;font-weight: bold;}
h3{font-size: 24px!important; color: #000!important;font-weight: bold;}
h4{font-size: 18px!important; color: #000!important;font-weight: bold;}
h5{font-size: 16px!important; color: #000!important;font-weight: bold;}
p{color: #333;}
a{color: #004280;}
a:hover{text-decoration: underline;}
.min-w-60{min-width: 60px;}

/*footer at the bottom setting*/

body {height:100%; }
#ableclub-website {display: flex; flex-direction: column; height:100%;  min-height: 100vh;}
#ableclub-content-area {flex-grow: 1;}
/**/
  @media all and (-ms-high-contrast:none)
     {
     #ableclub-website { height:100%; } /* IE10 */
     *::-ms-backdrop, #ableclub-website { height:100%; } /* IE11 */
     }
/*for modal open*/
body.modal-open{padding-right: 0!important;}
/*----------------------------------------
  Header
----------------------------------------*/
#ableclub-header{
	border-bottom: #ccc 1px solid;
	background: #fff;
}
#ableclub-header .header-logo{
	float: left;
	width: 227px;
	height: 60px;
	margin: 12px 0 18px 0;
}
#ableclub-header .header-logo a,
.ableclub-popup .header-logo a{
	float: left;
	width: 227px;
	height: 100%;
	text-indent: -9999px;
	background-image: url(css-img/img-header-logo-able-club.svg);
    background-image: url(css-img/img-header-logo-able-club.png)\9;
    background-repeat: no-repeat;
    background-position: left top;
	background-size: contain;
	
}
.header-sticky.sticky-top{
	z-index: 2020;
}
/*for page without submenu tool bar */
#ableclub-top-area.single-sticky{
	display: contents;
}
/*----------------
       POPUP
------------------*/

.ableclub-popup.modal{
	z-index: 10000!important;
}
.modal-backdrop{
	z-index: 2020!important;
}

.ableclub-popup .header-logo{
	width: 227px;
	height: 60px;
}
.ableclub-popup .modal-header,
.ableclub-popup .modal-body,
.ableclub-popup .modal-footer{
	padding: 1rem 1.5rem ;
}
.ableclub-popup .modal-content{
	border-radius: 0!important;
}
#myable-content-inner .ableclub-popup .modal-content .card-header{
    border-bottom: #ddd 1px solid;
}
.ableclub-popup .modal-title{
	font-size: 18px;
	font-weight: bold;
}
.ableclub-popup .popup-login .modal-title{
	font-size: 30px;
	margin-bottom: 10px;
}
.ableclub-popup .btn-outline-primary,
.ableclub-popup .btn-outline-primary.active {
    border-color: #004280;
    color: #004280;
    background-color: #fff;
}

.ableclub-popup .btn-primary {
    border-color: #004280;
    background-color: #004280;
    opacity: 0.85;
}
.ableclub-popup .btn-primary:hover {
    opacity: 1;
}

.ableclub-popup .modal-footer.row{
	margin-left: 0px;
	margin-right: 0px;
}
.ableclub-popup .modal-footer .col{
	padding-left: 5px;
	padding-right: 5px;
}
.ableclub-popup .btn-link a{
	float: right;
}
.ableclub-popup .btn-link a{
	color: #004280;
}

.ableclub-popup .popup-birthday{
	
	padding:0;

	
}
.ableclub-popup .popup-birthday img{
	width: 100%;
	
}
.ableclub-popup .popup-birthday .modal-text{
	position: absolute;
	top: 55%;
	text-align: center;
	width: 100%;
	
}
.ableclub-popup .popup-birthday .modal-text p{
	color: #F39800;
	font-size: 24px;
	font-weight: bold;
}

/*-------------*/


#ableclub-header .header-nav{
	padding-top: 35px;
	
}
#ableclub-header .header-nav a:link,
#ableclub-header .header-nav a{
	color: #004280!important;
	font-size: 16px;	
}

#ableclub-header .header-nav i{
	margin-right: 5px;
	font-size: 18px;

}
#ableclub-header .header-nav .nav-item .user-log{
	display: none;
}
#ableclub-header .header-nav .nav-item.item-points{
	margin-left: 10px;
	
}
#ableclub-header .header-nav .nav-item.item-points a{
	color: #F39800!important;
}
#ableclub-header .header-nav .nav-item.item-search > a::before,
#ableclub-header .header-nav .nav-item.item-site a.dropdown-toggle::before{
	content: "|";
	margin-left: 15px;
	margin-right: 15px;
	color: #ccc;
}
#ableclub-header .header-nav .dropdown-menu{
	z-index: 2020;
}
#ableclub-header .header-nav .dropdown-toggle::after{
	display: none;
}
/*----------------------------------------
  Search Bar
----------------------------------------*/
.ableclub-searchbar{
	position: relative;
	z-index: 2010;
	margin: 0;
}
.ableclub-searchbar .col{
	background: #ddd;
	position: absolute;
	z-index: 2010;
	padding: 0;
}
.ableclub-searchbar .searchbar-inner{
	padding: 20px;
}
.ableclub-searchbar .input-group .form-control,
.ableclub-searchbar .input-group .btn-outline-secondary{
	border-color: #004280;
	color: #004280;
}
.ableclub-searchbar .input-group button{
	background: #fff;
}

.ableclub-searchbar .input-group .btn-outline-secondary:hover{
	color: #fff;
	background-color: #004280;
}

.ableclub-searchbar .input-group .btn-clear{
	border-left: none;
	border-color: #004280;
}
/*----------------------------------------
  User Bar
----------------------------------------*/
#ableclub-userbar{
	background: #ddd;
	padding: 10px 0;
	font-weight: bold;
	display: none;
}
#ableclub-userbar i{
	margin-left: 10px;
	font-size: 20px;
	vertical-align: middle;
}
#ableclub-userbar a:link,
#ableclub-userbar a{
	color: #F39800;
}
/*----------------------------------------
  Main KV Banner (Homepage)
----------------------------------------*/
#ableclub-mainbanner::after{
	content: "";
	height: 28px;
	background: #eee;
	display: block;
}

#ableclub-mainbanner .carousel-item .img-wrapper{
	height: 240px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
#ableclub-mainbanner .carousel-item.cursor-pointer .img-wrapper{
    cursor: pointer;
}

#ableclub-mainbanner.container-fluid{
	padding-left: 0;
	padding-right: 0;
}
#ableclub-mainbanner .carousel-control-next, #ableclub-mainbanner .carousel-control-prev{
	width: auto;
}
#ableclub-mainbanner .carousel-control-next{
	right: 1%;
}
#ableclub-mainbanner .carousel-control-prev{
	left: 1%;
}

#ableclub-mainbanner .carousel-control-prev-icon{
	background-image: url(css-img/angle-left-regular-2.svg);
	
}

#ableclub-mainbanner .carousel-control-next-icon{
	background-image: url(css-img/angle-right-regular-2.svg);
	
}
#ableclub-mainbanner .carousel-control-next-icon, #ableclub-mainbanner .carousel-control-prev-icon{
	width: 30px;
	height: 60px;
	color: #fff;
	opacity: 0.4;
}

#ableclub-mainbanner .carousel-indicators{
	bottom: -43px;
}
#ableclub-mainbanner .carousel-indicators li{
	height: 6px;
	background-color: #ccc;
	opacity: 1;
}
#ableclub-mainbanner .carousel-indicators .active{
	background-color: #f28d00;
}
/*----------------------------------------
  Main Menu  (Homepage)
----------------------------------------*/
#ableclub-mainmenu{
	padding-top: 20px;
}
#ableclub-mainmenu .mainmenu-item{
	margin: 5px 0 10px 0;
	padding: 0 5px;
}
#ableclub-mainmenu .mainmenu-item a:link,
#ableclub-mainmenu .mainmenu-item a{
	color: #4d4d4d!important;
}
#ableclub-mainmenu .mainmenu-item h3{
	font-size: 24px;
	font-weight: bold;
	padding: 10px 0;	
}
#ableclub-mainmenu .mainmenu-item .item-img{
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 108px;
	max-height: 108px;
	border-radius: 999em;
	margin: 0 auto;
	background-color: #dae4ee;
}

#ableclub-mainmenu .mainmenu-item a:hover .item-img{
	background-color: #bfd0e0;
}

/*----------------------------------------
  Service Center  (Homepage)
----------------------------------------*/
#ableclub-service{
	padding-top: 20px;
	padding-bottom: 20px;
}

#ableclub-service .col{
	padding-left: 10px;
	padding-right: 10px;
	margin: 10px 0;
}
#ableclub-service .service-inner{
	padding-top: 20px;
}

#ableclub-service .service-item{
	background: #f2f2f2;
	border: none;
	border-radius: 5px;
}
#ableclub-service .service-item a:link,
#ableclub-service .service-item a{
	color: #4d4d4d!important;
	padding: 5%;
	display: block;
	border-radius: 5px;
	
	
}
#ableclub-service .service-item a:hover{
	text-decoration:none;
	background: #e5e5e5;
}
#ableclub-service .service-item a:hover .item-txt{
	color: #004280!important;
	text-decoration: underline!important;	
}
#ableclub-service .service-item .item-img{
	width: 25%;
	display: inline-block;
	text-align: right;
}
#ableclub-service .service-item .item-img img{
	width: 80px;
}
#ableclub-service .service-item .item-txt{
	width: 65%;
	display: inline-block;
	vertical-align: middle;
}

/*----------------------------------------
  List Group (Homepage)
----------------------------------------*/
#ableclub-list{
	padding-top: 20px ;
}
#ableclub-list .col{
	padding-left: 10px;
	padding-right: 10px;
}
#ableclub-list .bg-secondary{
	background-color: #ccc!important;
}
#ableclub-list a:link,
#ableclub-list a{
	text-decoration: none;
	color: #004280;
}

#ableclub-list .list-group-item{
	padding: 10px 15px;
	border-bottom-style: dashed;
	border-bottom-width: 2px;
	
}

#ableclub-list .list-group-item:last-child,
#ableclub-list .list-group-item.bg-secondary{
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
#ableclub-list .list-group-item i{
	font-size: 18px;
	margin-right: 5px;
}
#ableclub-list .list-more a:link{
	font-size: 14px;
}
#ableclub-list .list-more i{
	margin-left: 5px;
	font-size: 14px;
	
}
#ableclub-list .list-group-item a{
	height: 1.6em;
	display:block;
	overflow: hidden;
}
#ableclub-list .list-group-item-action:focus, .list-group-item-action:hover{
	background: #f2f2f2;
}

/*----------------------------------------
  List Group (Search Results)
----------------------------------------*/
#ableclub-list .search-results .list-group-item a{
    display: inline-block;
    overflow: visible;
    width: 83%;
    padding-right: 2%;
}

#ableclub-list .search-results .list-group-item .item-state{
    float: right;
    width: 15%;
    text-align: right;
}
#ableclub-list .search-results .list-group-item .badge{
    background-color: #ffeccc;
    color: #666;
    font-size: 16px;
    font-weight: normal;
}

#ableclub-list .search-results.col{
    padding-left: 15px;
    padding-right: 15px;
}

#ableclub-list .search-results .list-group-item .badge.badge-light{
    background-color: #f2f2f2;
}

@media screen and (max-width: 576px){
#ableclub-list .search-results .list-group-item a{width: 75%;}
#ableclub-list .search-results .list-group-item .item-state{width: 23%;}
}



/*----------------------------------------
  Article (Homepage)
----------------------------------------*/
.ableclub-article{
	padding-top: 20px ;
	padding-bottom: 20px;
}
.ableclub-article .col{
	padding-left: 10px;
	padding-right: 10px;
}

.ableclub-article .card{ 
	margin-bottom: 20px;
}

.ableclub-article p{
	font-size: 16px;
}

.ableclub-article .card > a,
.ableclub-article .card > a:link {
    text-decoration: none;
    color: #000;
}

.ableclub-article .card:hover{
	box-shadow: 0px 10px 8px -5px rgba(0,0,0,.15);
}


.ableclub-article .card-text{
	line-height: 1.5em;
	height: 6em;
	overflow: hidden;
	margin-top: 10px;
}
.ableclub-article .article-txt{
	margin-left: 20px;
}

.ableclub-article .card-title{
	line-height: 1.3em;
    max-height:  2.6em;
    overflow: hidden;
	margin-bottom: 0;
}
.ableclub-article .article-img{
	width: 100%;
	height: 0;
    padding-bottom: 56%;
    overflow: hidden;
    background-color: #f2f2f2;
}
.ableclub-article .article-more a:link,
.ableclub-article .article-more a,
.ableclub-article .article-more{
	color: #004280;
}
.ableclub-article .article-more i{
	margin-left: 5px;
	font-size: 14px;
	
}


/*Article List (for inner page)*/
.ableclub-article.article-list-wrapper{
	padding-top: 10px;
	
}






/*----------------------------------------
  Footer
----------------------------------------*/

#ableclub-footer{
	background: #ddd;
	padding: 30px 0;
}
#ableclub-footer .media-btn{
	text-align: right;
}
#ableclub-footer .media-btn button{
	margin:0px 0 0 10px;
}
#ableclub-footer .media-btn button i{
	margin-right: 5px;
	font-size: 30px;
	vertical-align: middle;
}
#ableclub-footer .media-btn .btn-line{
	border-color: #00c200;
	color: #00c200;
}
#ableclub-footer .media-btn .btn-line:hover{
	background-color: #efe;
	color: #00c200;
}
#ableclub-footer .media-btn .btn-fb{
	border-color: #006cb8;
	color: #006cb8;
}
#ableclub-footer .media-btn .btn-fb:hover{
	background-color: #eaf6ff;
	color: #006cb8;
}


/*------------------------------------------------------
  Breadcrumb
--------------------------------------------------------*/
#ableclub-breadcrumb .breadcrumb{
	background-color: transparent;
	
}
#ableclub-breadcrumb .breadcrumb a{
	color: #004280;
}

/*------------------------------------------------------
 Page Title & Filter Menu
--------------------------------------------------------*/
#ableclub-pagetitle h1{
	float: left;
}

#ableclub-filter-menu{
	float: right;
	margin-top: 5px;
}
#ableclub-filter-menu .form-group.sub-action-state{
	/*margin-right: 15px;*/
}
#ableclub-filter-menu .form-group.sub-action-search{
	width: 25%;
	min-width: 260px;
}
#ableclub-filter-menu .form-group.sub-action-state .btn-outline-primary:hover,
#ableclub-filter-menu .form-group.sub-action-state .btn-outline-primary.active,
#ableclub-filter-menu .form-group.sub-action-state .btn-outline-primary.dropdown-toggle{
	background-color: #fff;
}
#ableclub-filter-menu .form-group.sub-action-search .btn-outline-secondary:hover{
	color: #fff;
	background-color: #004280;
	
}

#ableclub-filter-menu .btn-outline-primary,
#ableclub-filter-menu .btn-outline-secondary,
#ableclub-filter-menu .form-control{
	border-color: #004280;
	color: #004280;
}

#ableclub-filter-menu .input-group-append{
	z-index: 0;
}




@media screen and (max-width: 768px){
	/*#ableclub-pagetitle h1, #ableclub-filter-menu{
	float: none;
	clear: both;
}*/

}
@media screen and (max-width: 576px){
	#ableclub-filter-menu .form-group.sub-action-state{
	/*margin-right: 15px;*/	
}
	#ableclub-filter-menu .form-group.sub-action-state .btn{
		padding: 0.25rem 0.5rem;
	}
	#ableclub-filter-menu{
		margin-top: 0;
	}
	#ableclub-filter-menu .form-group.sub-action-search{
	width: calc(100% - 170px);
	min-width:auto;
}
	#ableclub-filter-menu .form-group{
		margin-bottom: 0;
	}
}
/*------------------------------------------------------
 Filter Group Tag
--------------------------------------------------------*/
.ableclub-filtergroup{
    padding-top: 10px;
}
.filtergroup-inner h4{
    float: left;
    width: 11%;
    margin-right: 1%;
    padding-top: 10px;
}
.filtergroup-inner .filter-tag{
    float: left;
    width: 88%;
}
.filtergroup-inner .filter-tag ul{
    margin-bottom: 0;
    padding-left: 0;
}
.filtergroup-inner .filter-tag li{
    display: inline-block;
    list-style: none;
    margin: 5px 2px;
}

#ableclub-website .filtergroup-inner .filter-tag a{
    padding: 6px 12px;
    color: #666;
    font-size: 16px;
    background-color: #f2f2f2;
    border: none;
    font-weight: bold;
    opacity: 1;
}

#ableclub-website .filtergroup-inner .filter-tag .active,
#ableclub-website .filtergroup-inner .filter-tag a.active,
#ableclub-website .filtergroup-inner .filter-tag a.active:hover,
#ableclub-website .filtergroup-inner .filter-tag .btn-primary:hover{
    background: #F39800;
    color: #fff!important;
    text-decoration: none;
}
@media screen and (max-width: 768px){
.filtergroup-inner h4{width: 18%; margin-right: 1%;}
.filtergroup-inner .filter-tag{width: 81%;}
}
@media screen and (max-width: 576px){
.filtergroup-inner{margin-bottom: 10px;}
.filtergroup-inner h4{ float: none; width: 100%; margin-bottom: 0;}
.filtergroup-inner .filter-tag{ float: none;width: 100%;}
}
/*------------------------------------------------------
 Inner Page Nav
--------------------------------------------------------*/

#ableclub-nav-wrapper {
    background: #f2f2f2;
	position: relative;
	border-bottom: #ccc 1px solid;

}
.ableclub-nav-inner {
    padding: 0 10px;
	position: relative;
	
}

/*-------------------------------*/

.ableclub-nav{
	font-size: 0;
	padding: 0 190px 0 0;
	margin: 0 ;
	list-style: none;
	
	/*-------------------*/
	display: flex;
	overflow-x: auto;
    -webkit-overflow-scrolling: touch ;
}

.ableclub-nav > li{
	display: inline-block;
	font-size: 0;
	padding: 20px 0;
}

.ableclub-nav > li > a {
    padding: 0 15px;
    display: block;
    color: #666;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
	font-weight: bold;
	white-space:nowrap;
	border-right: #ccc 1px solid;
	border-left: #ccc 1px solid;
	line-height: 1em;
	margin: 0 -1px 0 0;
}

.ableclub-nav > li > a:hover{
	text-decoration: underline;
}

.ableclub-nav .submenu-item{
	display: none;
}


/*Scrollbar style------------*/
.ableclub-nav::-webkit-scrollbar{
	height: 15px;
	/* width of the entire scrollbar */
	display: none;
}
/*For IE*/
.ableclub-nav{
	-ms-overflow-style: none;
    overflow: auto;
}

.ableclub-nav::-webkit-scrollbar-track {
  background:#f2f2f2;        /* color of the tracking area */
}

.ableclub-nav::-webkit-scrollbar-thumb {
  background-color: #ccc;    /* color of the scroll thumb */
  border-radius: 10px;       /* roundness of the scroll thumb */
  border: 5px solid #f2f2f2;  /* creates padding around scroll thumb */
}
/*----------------------------*/
#ableclub-nav-wrapper .ableclub-nav-btn{
	position: absolute;
	right: 132px;
	top: 0;
	padding: 15px 15px 15px 25px;
	z-index: 890;
	background: linear-gradient(180deg, rgba(242, 242, 242, 1)85%, rgba(255, 255, 255, 0)100%);
	background: -moz-linear-gradient(180deg, rgba(242, 242, 242, 1)85%, rgba(255, 255, 255, 0)100%);
	background: -webkit-linear-gradient(180deg, rgba(242, 242, 242, 1)85%, rgba(255, 255, 255, 0)100%);
	background: -o-linear-gradient(180deg, rgba(242, 242, 242, 1)85%, rgba(255, 255, 255, 0)100%);
}
#ableclub-nav-wrapper .ableclub-nav-btn i{
	font-size: 24px;
	margin: 0 6px;
}
#ableclub-nav-wrapper .ableclub-nav-btn a:link,
#ableclub-nav-wrapper .ableclub-nav-btn a{
	color: #004280;
	opacity: 0.85;
}
#ableclub-nav-wrapper .ableclub-nav-btn a:hover{
	opacity: 1;
}



/*-------------------*/
/* Other Item Of Right side*/

#ableclub-nav-wrapper .ableclub-nav-submenu{
	position:absolute;
	right: 0;
	top: 0;
	z-index: 1021;
	padding: 15px 10px;
	border-left: #ccc 1px solid;
	background: #f2f2f2;
	
}

#ableclub-nav-wrapper .ableclub-nav-submenu a,
#ableclub-nav-wrapper .ableclub-nav-submenu a:link{
	font-size: 18px;
	font-weight: bold;
	color: #336899;	
}

#ableclub-nav-wrapper .ableclub-nav-submenu a:hover{
	/*text-decoration: none;*/
}
#ableclub-nav-wrapper .dropdown-toggle{
	padding: 5px 10px;
	/*border-radius: 5px;
	background: #dae7f2;*/
}
#ableclub-nav-wrapper .dropdown-toggle:hover{
	/*background: #bfd0e0;*/
}
#ableclub-nav-wrapper .dropdown-item:focus, #ableclub-nav-wrapper .dropdown-item:hover{
	background: #ddd;
}
#ableclub-nav-wrapper .dropdown-toggle::after{
	display: none;
}

@media screen and (max-width: 768px){
	#ableclub-nav-wrapper .ableclub-nav-submenu{
	display: none;
}
	.ableclub-nav .submenu-item{
		display: block;
	}
	#ableclub-website #ableclub-nav-wrapper .ableclub-nav-btn{
		display: none!important;
	}
	.ableclub-nav{
		padding: 0 70px 0 0;
	}
}






/*------------------------------------------------------
 Mobile Nav
--------------------------------------------------------*/
.ableclub-navmobile-inner{
	display: none;
}
.ableclub-navmobile-inner .navmobile-btn{
	position: absolute;
	background-color: #f2f2f2;
	height: 57px;
	z-index: 2000;
	top:0;
	right: 0;
	font-size: 26px;
	padding: 10px 0;
	box-shadow: -5px 0px 5px -3px rgba(0, 0, 0, 0.1);
}
.ableclub-navmobile-inner .navmobile-btn a{
	color: #004280;
	padding: 10px 20px;
}
.ableclub-navmobile-inner .navmobile-btn a[aria-expanded="true"] .fa-angle-down::before{
	    content: "\f106"!important;
}

.ableclub-navmobile-inner .navmobile-bg{
	position: absolute;
	background-color: #f2f2f2;
	height: 58px;
	z-index: -1;
	top: -58px;
	padding: 20px 0 0 15px;
}

.ableclub-navmobile-inner .collapse.show .navmobile-bg{
	z-index: 1090;
	transition:none!important;
	border-bottom: #ddd 1px solid;
}
.ableclub-navmobile-inner #collapse-search2{
	transition:none!important;
}
.ableclub-navmobile-inner .navmobile-panel{
	position: relative;
	margin: 0;
}

.ableclub-navmobile-inner .navmobile-panel .col{
	background-color: #f2f2f2;
	position: absolute;
	z-index: 1090;
	box-shadow: 0px 8px 5px -4px rgb(0 0 0 / 15%);
	padding: 0;
}
.ableclub-navmobile-inner .navmobile-panel .navmobile-list{
	height: calc(100vh - 178px);
	max-height: calc(100vh - 178px);
	overflow-y: scroll!important;
}
.ableclub-navmobile-inner .navmobile-panel .navmobile-list h4{
	margin-top: 30px;
	padding-left: 15px;
}
.ableclub-navmobile-inner .navmobile-panel .navmobile-list ul{
	padding: 15px;
	border-top: #ddd 1px solid;

}
.ableclub-navmobile-inner .navmobile-panel .navmobile-list ul:first-child{
	border: none;
}
.ableclub-navmobile-inner .navmobile-panel .navmobile-list li{
	margin-bottom: 5px;
	font-size: 16px;
	min-width: 23%;
	margin: 1% 0.5%;
	color: #004280!important;
	border:#004280 1px solid;
	display: inline-block;
	list-style: none;
	text-align: center;
	border-radius: .25rem;
}
.ableclub-navmobile-inner .navmobile-panel .navmobile-list li a{
	color: #004280!important;
	width: 100%;
	display: inline-block;
	padding: 6px;
}
.ableclub-navmobile-inner .navmobile-panel .navmobile-list li a:hover{
	background-color: #004280;
	color: #fff!important;
	text-decoration: none;
}
@media screen and (max-width: 768px){
	.ableclub-navmobile-inner{
		display: block;
	}
}

@media screen and (max-width: 576px){
	.ableclub-navmobile-inner .navmobile-panel .navmobile-list li{
	min-width: 48%;
	}
}

/*------------------------------------------------------
  Content Page - search no results
--------------------------------------------------------*/
#ableclub-content-area .no-results{
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center; 
	padding: 0px 0 50px 0;
	height: 100%;
}
#ableclub-content-area .no-results .no-results-text{
	padding: 50px 0 50px 0;
}

/*------------------------------------------------------
  Content Page - Card Group List
--------------------------------------------------------*/
.ableclub-cardgroup{
	padding-top: 20px;
	padding-bottom: 20px;
}
.ableclub-cardgroup .row{
	margin-left: -10px;
	margin-right: -10px;

}
.ableclub-cardgroup .col{
	padding-left: 10px;
	padding-right: 10px;	
}
.ableclub-cardgroup .card > a,
.ableclub-cardgroup .card > a:link{
	text-decoration: none;
	color: #000;
}
.ableclub-cardgroup .card:hover{
	box-shadow: 0px 10px 8px -5px rgba(0,0,0,.15);
}
.ableclub-cardgroup .card-title{
	line-height: 1.3em;
	height: 2.6em;
	overflow: hidden;
	margin-bottom: 0;
}
.ableclub-cardgroup h3.card-title{
	font-size: 18px!important;
	text-decoration: none;
	color: #000;
}


.ableclub-cardgroup .card-body,
.ableclub-cardgroup .card-footer{
	padding: 0.8rem;
}
.ableclub-cardgroup .card-body small{
	font-size: 14px;
	color: #666;
}
.ableclub-cardgroup .card-img{
	height: 0;
	padding-bottom: 32.6%;
	overflow: hidden;
	background-color: #f2f2f2;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
	
}

.ableclub-cardgroup .card-text{
	margin-top: 10px;
	margin-bottom: 0px;
	color: #666;
	
}
.ableclub-cardgroup .card-text p{
	margin-bottom: 0;
	color: #666;
}

.ableclub-cardgroup .card-text i{
	margin-right: 10px;
}
.ableclub-cardgroup .card-text .text-point{
	color: #F39800;
}
.ableclub-cardgroup .card-text .text-point span{
	font-size: 20px;
	margin-right: 10px;
}

.ableclub-cardgroup .card-footer{
	padding-top: 0;
    border-top: none;
    background-color: transparent;
    margin-top: 0;
}

.list-category .card-text .text-place{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}



/*-------------  Btn style  --------------*/


#ableclub-website .btn-primary{
	border-color: #004280;
	background-color: #004280;
	opacity: 0.85;
}
#ableclub-website .btn-primary:hover{
	opacity: 1;
}

#ableclub-website .btn-success{
	border-color: #67a222;
	background-color: #67a222;
	opacity: 1;
	pointer-events : none;
}
#ableclub-website .btn-success.status-cancel{
	pointer-events : auto;
}
#ableclub-website .btn-success:hover{
	background-color: #4a800d;
}
#ableclub-website .btn-warning{
	border-color: #F39800;
	background-color: #F39800;
	color: #fff;
	opacity: 1;
}
#ableclub-website .btn-warning:hover{
	background-color:#e57b03;
}

#ableclub-website .btn-info{
	border-color: #89aad9;
	background-color: #89aad9;
	opacity: 1;
	pointer-events : none;
}
#ableclub-website .btn-info:hover{
	background-color: #6087bf;
}
#ableclub-website .btn-outline-primary,
#ableclub-website .btn-outline-primary.active{
	border-color: #004280;
	color: #004280;
	background-color: #fff;
}
#ableclub-website .btn-outline-primary:hover{
	background-color: #004280;
	color: #fff;
	border-color: #004280;
}
#ableclub-website .btn-outline-primary.dropdown-toggle:hover{
	color: #004280;
}

#ableclub-website .btn-outline-primary.active i{
	font-weight: 900;
	opacity: 0.85;
	
}
#ableclub-website .btn-outline-danger,
#ableclub-website .btn-outline-danger.active{
	background-color: #fff;
}
#ableclub-website .btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

/*Card List Btn*/
#ableclub-website .card-btn,
#ableclub-website .card-btn a{
	width: 100%;
}
#ableclub-website .card-btn .btn-apply{
	width: calc(100% - 60px);
	margin-right: 5px;
	display: inline-block;
}
#ableclub-website .card-btn .btn-great{
	width: 50px;
	display: inline-block;
	text-align: right;
}
#ableclub-website .card-btn .btn-great i{
	font-size: 22px;
}

#ableclub-website .card-btn .btn-great a.btn-outline-primary:hover{
    color: #004280;
    background-color: #fff;
}

#ableclub-website .btn-disabled,
#ableclub-website .btn-primary.btn-disabled,
#ableclub-website .btn-success.btn-disabled,
#ableclub-website .btn-warning.btn-disabled,
#ableclub-website .btn-info.btn-disabled,
#ableclub-website .btn-outline-primary.btn-disabled,
#ableclub-website .btn-outline-secondary.btn-disabled{
	background-color: #ccc!important;
	border-color: #ccc!important;
	color: #212529!important;
	cursor: default!important;
}


/*Hover Style Only for PC*/
@media (hover: hover) {
  #ableclub-website .card-btn .btn-great a.btn-outline-primary:hover {
    background-color: #004280;
    color: #fff;
  }
}

#ableclub-website .card-btn .btn-cancel a{
	color: #004280;
	font-size: 14px;
}
#ableclub-website .card-btn .btn-cancel i{
	font-size: 16px;
	margin-left: 5px;
}



/*--------   pagination   -----------*/
.ableclub-pagination{
	text-align: center;
	padding-top: 15px;
}
.ableclub-pagination a{
	color: #004280;
}
.ableclub-pagination .pagination-inner{
	display: inline-block;
}
.ableclub-pagination .page-item.active .page-link{
	background-color: #999;
	border-color: #999;
}

/*------------------------------------------------------
  Content Page - Recommend List
--------------------------------------------------------*/
.list-recommend{
	padding:50px 0;
	background: #f2f2f2;
}

.list-recommend .carousel .carousel-item row{
	padding-left: 0;
	padding-right: 0;
}


.list-recommend .carousel-indicators{
	bottom: -40px;
}

.list-recommend .carousel-indicators li{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #004280;
	opacity:.3;
	margin-left: 5px;
	margin-right: 5px;
}
.list-recommend .carousel-indicators .active{
	opacity:1;
}

.list-recommend .card-text,
.list-recommend .card-btn{
	display: none;
}
.list-recommend .carousel-control-prev{
	left: -30px;
	width: auto;
}
.list-recommend .carousel-control-prev-icon{
	background-image: url(css-img/angle-left-regular-2.svg);
}
.list-recommend .carousel-control-next{
	right: -30px;
	width: auto;
}
.list-recommend .carousel-control-next-icon{
	background-image: url(css-img/angle-right-regular-2.svg);
}
.list-recommend .carousel-control-next-icon,
.list-recommend .carousel-control-prev-icon{
	width: 15px;
	height: 40px;
}
@media (max-width: 1200px){
	.list-recommend .carousel-control-next{
	right: 10px;
}
	.list-recommend .carousel-control-prev{
	left: 10px;
}

}
/*------------------------------------------------------
  Content Page - list vendor
--------------------------------------------------------*/
.list-vendor{
    padding: 50px 0;
    background: #edf5fc;
    border-bottom: #ccc 1px solid;
}
.ableclub-cardgroup.list-vendor .card-title {
    height: auto;
}
.ableclub-cardgroup.list-vendor .card-img {
    padding-bottom: 23.6%;
    border-bottom: 1px solid rgba(0,0,0,.125);
    background: #fff;
}
.ableclub-cardgroup.list-vendor .single-card .card-img {
    text-align: center;
    padding-bottom: 15.5%;
}
.ableclub-cardgroup.list-vendor .single-card .card-img img{
    width: 65%;
}

/*------------------------------------------------------
  Content Page - list Club Intro
--------------------------------------------------------*/
.list-club-intro{
    padding: 50px 0;
    background: #edf5fc;
    border-bottom: #ccc 1px solid;
}
.ableclub-cardgroup.list-club-intro .card-title {
    height: auto;
}
.ableclub-cardgroup.list-club-intro .card-img {
    padding-bottom: 50.6%;
    border-bottom: 1px solid rgba(0,0,0,.125);
    background: #fff;
}
.ableclub-cardgroup.list-club-intro .card .badge{
    background-color: #ffeccc;
    color: #666;
    font-size: 16px;
    margin-top: 5px;
}


/*------------------------------------------------------
  Event Detail Page
--------------------------------------------------------*/
#ableclub-event-info{
	background-color: #fff;
}

#ableclub-event-info .event-tag-inner .badge{
	padding: 6px 8px;
	margin-bottom: 6px;
	color: #666;
	font-size: 16px;
	font-weight: normal;
}
#ableclub-event-info .event-data,
#ableclub-event-info .event-badges{
	
}
#ableclub-event-info .event-tag-inner .badge-primary{
	background-color: #f2f2f2;	
}

#ableclub-event-info .event-tag-inner .badge-secondary{
	background-color: #ffeccc;
	color: #666;
}

#ableclub-event-info .card-text p{
	margin-bottom: 5px;
	color: #000;
	font-weight: bold;
}
#ableclub-event-info .card-text p span{
	margin-right: 5px;
	color: #666;
}
#ableclub-event-info .card-text i{
	margin-right: 5px;
	text-align: center;
	width: 20px;
	color: #666;
}

#ableclub-event-title{
	margin-bottom: 15px;
}

#ableclub-event-info .event-point-inner{
	margin-top: 10px;
	margin-bottom: 10px;
}
#ableclub-event-info .event-point-inner.row{
	margin-left: -10px;
	margin-right: -10px;
}
#ableclub-event-info .event-point-inner .col{
	padding-left: 10px;
	padding-right: 10px;
}
#ableclub-event-info .event-point-inner .card{
	border-color: #dae7f2;
	margin-top: 10px;
}
#ableclub-event-info .event-point-inner .table{
	margin-bottom: 0px;
}
#ableclub-event-info .event-point-inner .table th,
#ableclub-event-info .event-point-inner .table td{
	/*white-space: nowrap;*/ 
}
#ableclub-event-info .event-point-inner .table tr:first-child th,
#ableclub-event-info .event-point-inner .table tr:first-child td{
	border:none;
}
#ableclub-event-info .event-point-inner .table th{
	padding-left: 0;
	padding-right: 0;
	color: #666;
}
#ableclub-event-info .event-point-inner .card-header{
	padding: 6px 12px;
	font-size: 16px;
	background-color: #dae7f2;
	border-color: #dae7f2;
}
#ableclub-event-info .event-point-inner .card-body{
	padding:12px 12px 0 12px;
}
#ableclub-event-info .event-point-inner .card-body i{
	margin-right: 5px;
	font-size: 20px;
	color: #333;
}
#ableclub-event-info .event-point-inner .card-body p{
	line-height: 1.8em;
}
#ableclub-event-info .event-point-inner .card-body p span{
	margin-right: 10px;
	font-weight: bold;
	color: #666;
	display: inline-block;
	min-width: 20%;
}

/*------------------------------------------------
   Style For CKEditor & Template
--------------------------------------------------*/

/* For CKEditor width setting (Images) */
#ableclub-content-area .event-content-inner img{
	max-width: 100%!important;
	height: auto!important;
	margin-bottom: 20px;
	
}
#ableclub-content-area .event-content-inner{
	word-break: break-all!important;
	overflow: hidden;
}
/* For CKEditor width setting (Video) */
#ableclub-content-area .event-content-inner iframe{
	max-width: 100%;
}

#ableclub-content-area .event-content-inner table,
#ableclub-content-area .event-content-inner table tr td{
	max-width: 100%;
}

/* For Detail Template */
#ableclub-content-area .event-content-inner .activity-data-body{
	word-break: break-all;
}
#ableclub-content-area .event-content-inner .activity-data-title{
	font-weight: bold !important;
    padding:0;
}
#ableclub-content-area .event-content-inner .form-group{
	margin-bottom: 0.5rem;
}

#ableclub-content-area .event-content-inner .col-md-12 .upload-image label.w-75{
	flex: 0 0 12%!important;
}
@media (max-width: 768px){
#ableclub-content-area .event-content-inner .col-md-12 .upload-image label.w-75{
	flex: 0 0 25%!important;
}
}


/*------------------------------------------------------
  Apply Page
--------------------------------------------------------*/
#ableclub-apply-info{
	background: #f2f2f2;
	min-height: 500px;
	padding-top: 30px;
	padding-bottom: 50px;
}
#ableclub-apply-info .apply-form-inner{
	margin-bottom: 30px;
}
#ableclub-apply-info .apply-form-inner .card-body{
	padding-top: 0.75rem;
	padding-bottom: 0.25rem;
}

#ableclub-apply-info .apply-form-inner .form-control.form-inline{
	display: inline-block;
	width: 70px;
}
#ableclub-apply-info .apply-form-inner .table{
	margin-bottom: 0;
}
#ableclub-apply-info .apply-form-inner .table td,
#ableclub-apply-info .apply-form-inner .table th{
	vertical-align: middle;
	white-space:nowrap;

}
#ableclub-apply-info .apply-form-inner .table tr th.border-green{
	border-top: none;
	border-left: #67a222 5px solid;
	display:block;
	padding: 10px;
}
#ableclub-apply-info .apply-form-inner .table tr th.border-orange{
	border-left: #F39800 5px solid;
	display:block;
	padding: 10px;
}
#ableclub-apply-info .apply-form-inner .thead-light th{
	background-color: #ccc;
	border-color: #ccc;
	font-weight: bold;
	color: #000;
}


#ableclub-apply-info .text-warning{
	color: #F39800!important;
}
#ableclub-apply-info .apply-form-inner .card-header{
	padding-top: 10px;
	padding-bottom: 10px;
}
#ableclub-apply-info .apply-form-inner .card-header .form-check-input{
	margin-top: 0.5rem;
}
#ableclub-apply-info .apply-form-inner .card-header.border-green{
	background: #fff;
	border-bottom: #67a222 4px solid!important;
}
#ableclub-apply-info .apply-form-inner .card-header.border-orange{
	background: #fff;
	border-bottom: #F39800 4px solid!important;
}


#ableclub-apply-info .form-group{
	padding-left: 20px;
	margin-bottom: 20px;
}


#ableclub-apply-info i{
	margin-right: 5px;
}
#ableclub-apply-info h4 i{
	color: #666;
}


#ableclub-apply-info .apply-group{
	padding-left: 0;
}
#ableclub-apply-info .apply-group li{
	list-style: none;
	margin-bottom: 10px;
}
#ableclub-apply-info .apply-group span{
	display: inline-block!important;
	margin-right: 20px;
	
}
#ableclub-apply-info .apply-file .card{
	padding: 8px 10px;
	background: #f2f2f2;
	display: inline-block;
	width: 100%;
}

#ableclub-apply-info .apply-file{
	margin-top: 5px;
	margin-left: -10px;
	margin-right: -10px;
}
#ableclub-apply-info .apply-file .col{
	padding-left: 10px;
	padding-right: 10px;
}
#ableclub-apply-info .file-name{
	display: inline-block;
	width:calc(100% - 30px);
	overflow: hidden;
	vertical-align: middle;
	white-space:nowrap;
	text-overflow : ellipsis;
}
#ableclub-apply-info .file-name a{
	color: #004280;
}

#ableclub-apply-info .apply-file .btn-cancel{
	vertical-align: bottom;
	
}
#ableclub-apply-info .apply-file .btn-cancel a{
	color: #dc3545;
}

#ableclub-apply-info small{
	font-size: 14px;
	color: #666;
}
@media (max-width: 576px){
	#ableclub-apply-info small{ display: block;}
}

/*------ File Upload Btn ------*/

#ableclub-content-area input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

#ableclub-content-area label.file-upload {
    border: #004280 1px solid;
	border-radius: 0.25rem;
	background-color:#004280;
	color: #fff;
	padding: 5px 10px;
	opacity: 0.85;
}


#ableclub-content-area label.file-upload:hover {
   opacity: 1;
}

/* When the visually hidden child input has focus, style the parent. */
#ableclub-content-area label.file-upload:focus-within {
    opacity: 1;
}

/*--------------------------------*/

#ableclub-apply-info .apply-form-bottom .card{
	background: #ddd;
}
#ableclub-apply-info .total-point{
	font-size: 24px;
	font-weight: bold;
}
#ableclub-apply-info .total-point p{
	display: inline-block;
	margin-bottom: 0;
}
#ableclub-apply-info .total-point span{
	margin:0px 10px;
}

#ableclub-apply-info .total-btn{
	text-align: right;
}

@media (max-width: 767px){
	#ableclub-apply-info .total-point{ margin-bottom: 15px;}
	#ableclub-apply-info .total-btn{ text-align: left;}
}
@media (max-width: 576px){
	#ableclub-apply-info .total-point{ margin-bottom: 15px;}
	#ableclub-apply-info .total-btn a{ margin-bottom: 10px; width: 100%;}
}




















/*------------------------------------------------------
  Article Detail Page
--------------------------------------------------------*/

/* For CKEditor images width setting */
#ableclub-content-area .article-content-inner img{
	max-width: 100%!important;
	height: auto!important;
	margin-bottom: 20px;
}

#ableclub-article-title {
	padding-top: 10px;
}
#ableclub-article-title.container-xl{
	max-width: 820px!important;
}
#ableclub-article-title .article-date{
	color: #666;
}

#ableclub-content-area .article-content-inner.container-xl{
	max-width: 820px!important;
}
#ableclub-content-area .article-content-inner{
	padding-top: 10px;
	padding-bottom: 50px;
}

.ableclub-article-bottom{
	padding-bottom: 50px;
	text-align: right;
}

.ableclub-article-bottom.container-xl{
	max-width: 820px!important;
}


/*-------------------------
          TAB Menu
----------------------------*/
#ableclub-tab-wrapper .tab-nav-inner{
	background-color: #fff;
	margin-top: 20px;
	border-bottom: #ccc 4px solid;
}

#ableclub-tab-wrapper .tab-nav-inner .tab-nav-menu{
	position: relative;
	padding: 0 10px;
}

#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn{
	padding-left: 20px;
	
}
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn span{
	display: inline-block;
	position: absolute;
	
}
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn .btn-prev{
	left: -15px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
	background: -moz-linear-gradient(360deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
	background: -webkit-linear-gradient(360deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
	background: -o-linear-gradient(360deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
}
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn .btn-next{
	right: -15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
	background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
	background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
	background: -o-linear-gradient(180deg, rgba(255, 255, 255, 1)80%, rgba(255, 255, 255, 0)100%);
}
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn a,
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn a:link{
	color: #004280;
	opacity: 0.85;
}
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn a:hover{
	opacity: 1;
}
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn i{
	font-size: 28px;
	margin: 8px 10px 0 10px;
}

#ableclub-tab-wrapper .nav-pills .nav-link,
#ableclub-tab-wrapper .nav-pills .nav-link.active,
#ableclub-tab-wrapper .nav-pills .show>.nav-link{
	color: #666;
	background-color: #fff;
	padding-bottom: 0;
}

#ableclub-tab-wrapper .nav-pills .nav-link.active,
#ableclub-tab-wrapper .nav-pills .show>.nav-link{
	color: #004280;
	border-bottom: #004280 4px solid;
	border-radius: 0;
}


#ableclub-tab-wrapper .tab-content{
	padding-top: 20px;
	padding-bottom: 50px;
}


#ableclub-event-bottom{
	padding: 30px 0;
}
#ableclub-event-bottom .event-bottom-function ul{
	padding: 15px 0 0 0;
}
#ableclub-event-bottom .event-bottom-function ul li{
	display: inline-block;
	list-style: none;
	color: #004280;	
	margin-right: 30px;
	font-weight: bold;
}
#ableclub-event-bottom .event-bottom-function ul li:last-child{
	margin-right: 0;
}
#ableclub-event-bottom .event-bottom-function ul li a:hover{
	color: #004280;	
}
#ableclub-event-bottom .event-bottom-function ul li i{
	margin-right: 5px;
	font-size: 20px;
}
/*Popup List*/
.ableclub-popup .registration-user .modal-body{
	padding: 0;
    min-height: 300px;
}
.ableclub-popup .registration-user .modal-body table tr th{
	text-align: center;
	vertical-align: middle;
}
.ableclub-popup .registration-user .modal-body table tr td{
	text-align: center;
	vertical-align: middle;
}
.ableclub-popup .registration-user .modal-body table tr th.th-item-01{min-width: 60px; width: 60px;}
.ableclub-popup .registration-user .modal-body table tr th.th-item-02{min-width: 80px; width: 80px;}
.ableclub-popup .registration-user .modal-body table tr th.th-item-03{min-width: 150px; width: 150px;}
.ableclub-popup .registration-user .modal-body table tr th.th-item-04{min-width: 90px;width: 90px;}

.ableclub-popup .registration-user .modal-body .table tr>th:first-child,
.ableclub-popup .registration-user .modal-body .table tr>td:first-child {
    position: sticky;
    left: 0;
	background: #fff;
}

.ableclub-popup .registration-user .modal-body .table tr>th:nth-child(2),
.ableclub-popup .registration-user .modal-body .table tr>td:nth-child(2) {
    position: sticky;
    left: 60px;
	background: #fff;
}
.ableclub-popup .registration-user .modal-body .table-responsive{
    overflow-y: hidden;
}
.ableclub-popup .registration-user .modal-body .table {
    position: relative;
    overflow-y: hidden;
    left: 0!important;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
}
.ableclub-popup .registration-user .modal-footer{
	padding-top: 0;
	padding-bottom: 0;
	justify-content: center;
}
.ableclub-popup .registration-user .tool-bar{
	padding: 0.5rem 1.5rem;
	background: #f7f7f7;
	width: 100%;
	display: block;
}
.ableclub-popup .registration-user .tool-bar span{
	float: left;
    margin-top: 5px;
    display: inline-block;
}
.ableclub-popup .registration-user .tool-bar span:first-child{
	margin-right: 30px;
}
.ableclub-popup .registration-user .tool-bar span i{
	margin-right: 5px;
	font-size: 20px;
}
.ableclub-popup .registration-user .tool-bar .dropdown-sort{
	float: right;
}
#ableclub-website .ableclub-popup .registration-user .tool-bar .dropdown-sort .btn-outline-primary:hover,
#ableclub-website .ableclub-popup .registration-user .tool-bar .dropdown-sort .btn-outline-primary.active,
#ableclub-website .ableclub-popup .registration-user .tool-bar .dropdown-sort .btn-outline-primary.dropdown-toggle{
	background-color: #fff;
}
@media screen and (max-width: 768px){
.ableclub-popup .registration-user .modal-body .table tr>th:first-child::after,
.ableclub-popup .registration-user .modal-body .table tr>td:first-child::after,
.ableclub-popup .registration-user .modal-body .table tr>th:nth-child(2)::after,
.ableclub-popup .registration-user .modal-body .table tr>td:nth-child(2)::after{
    content: "";
    width: 10px;
    height: 110%;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    border-right: #ccc 1px solid;
    /* box-shadow: 4px 0px 4px -2px rgb(0 0 0 / 10%); */
}
}
@media screen and (max-width: 576px){
	.ableclub-popup .registration-user .tool-bar span:first-child{margin-right: 10px;}
	.ableclub-popup .registration-user .tool-bar span i{font-size: 16px;}
}
@media screen and (max-width: 375px){
	.ableclub-popup .registration-user .tool-bar span{float: none;  margin-bottom: 10px;}
	.ableclub-popup .registration-user .tool-bar .dropdown-sort{float: none; }
}
	
/*---   Scroll Setting of TAB   ---*/
#ableclub-tab-wrapper .nav{
	display: flex;
	overflow-x:auto;
    -webkit-overflow-scrolling: touch;
	flex-wrap: inherit!important;
	margin-bottom: -4px;
}


#ableclub-tab-wrapper .nav .nav-item a,
#ableclub-tab-wrapper .nav .nav-item{
	display: block;
    text-decoration: none;
    text-transform: uppercase;
	white-space: nowrap;
}

#ableclub-tab-wrapper .nav::-webkit-scrollbar{
	display: none;
}




@media (max-width: 1200px){
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn .btn-prev{
	left: 5px;
	top:-5px;
	padding-right: 10px;

}
#ableclub-tab-wrapper .tab-nav-inner .tab-nav-btn .btn-next{
	right: 5px;
	top:-5px;
	padding-left: 10px;
}
	#ableclub-tab-wrapper .tab-nav-inner .tab-nav-menu{
	padding: 0 30px;
}

}










/*------------------------------------------------------
--------------------------------------------------------
  Style Repair - My ABLE Page for original site 
--------------------------------------------------------
--------------------------------------------------------*/
#ableclub-myable {
    padding-left: 0;
    padding-right: 0;
    padding-top: 20px;
	margin-bottom: 30px;
}
li.applylist-year-select-web{
	margin-left: auto!important;
}
.applylist-year-select-web p, .applylist-year-select-mobile p{
	margin-bottom: 0!important;
}
.applylist-tab li a{
	padding: 10px 15px;
	display: inline-block!important;
}
.grouplist-tab{
	margin-bottom: 40px!important;
	padding-bottom: 10px!important;
}

.grouplist-tab li a{
	padding: 14px;
}

#ableclub-myable{
	position: relative;
}

#ableclub-myable .privacy-cont .personal .personal-tall input{
	display: inline-block;
	width: 90%;
	margin-right: 5px;
	
}
#ableclub-myable .privacy-cont .personal form label{
	margin-top: 5px;
}
/* ABLE Point Table For Mobile */
#ableclub-myable .applylist-bonus-mobile{
	overflow: scroll;
	margin-bottom: 30px;
}
#ableclub-myable .applylist-bonus-mobile table{
	margin-bottom: 0;
}

#ableclub-myable .myable-mobile-submenu{
	padding: 15px;
	margin-bottom: 50px;
	display: none;
}
#ableclub-myable .privacy-TitleCont .bootstrap-datetimepicker-widget{
	inset:38px 0 auto auto!important;
}

#ableclub-myable .activity-data-body{
	overflow: visible;
}
/*
#ableclub-myable .privacy-TitleCont{
	position: static;
}*/


@media (max-width: 575px){
#ableclub-myable .privacy-cont .personal form label {
    text-align: left!important;
}
}
@media (max-width: 400px){
#ableclub-myable .privacy-cont .personal form label {
    text-align: left!important;
}
}

@media (max-width: 979px){
#ableclub-myable .myable-mobile-submenu {
	display: block;
}
}


/*overwrite for Style*/

.privacy{
	border-right: 1px solid #D2D1D1;
	border-bottom: 1px solid #D2D1D1;
}
.privacy-title{
	color: #000!important;
}

.privacy-menu button{
	background: #eee!important;
	color: #000!important;
}
.privacy-menu button:hover{
	color: #000!important;
	background: #ddd!important;
}

.privacy-menu button.active,
.applylist-tab .active a{
	color: #ffffff!important;
    background: #004280!important;
}
.privacy-title-line{
	border-bottom: 5px solid #004280!important;
}
.activity-data-body .form-group{
	display: flex!important;
}
.input-group.TempusdominusDateTime,
.input-group.TempusdominusDateOnly{
	padding-right: 39px!important;
}
.input-group [data-toggle=datetimepicker]{
	position: absolute!important;
    right: 0!important;
    height: 100%!important;
}
.grouplist-tab li.active a,
.grouplist-tab li a:hover{
	border-bottom: 2px solid #F39800!important;
}
.activity-header-title{
	font-size: 18px!important;
	margin-left: 0!important;
}

.activity-location .activity-data-checkbox .checkbox-inline{
	width: 33%!important;
}

/*------------------------------------------------------
--------------------------------------------------------
  New Style - My ABLE 
--------------------------------------------------------
--------------------------------------------------------*/
#ableclub-website.bg-light{
	background-color: #f2f2f2!important;
}
#myable-content-inner .form-group i.fa-star-of-life{
    font-size: 12px;
    margin-left: 5px;
    color: #dc3545;
    vertical-align: top;
}
/*-----------------
  Main Layout
------------------*/
#ableclub-myable-wrapper{
	margin-bottom: 50px;
}
#ableclub-myable-wrapper .text-orange{
    color: #F39800;
}
#ableclub-myable-wrapper > .row{
	margin-left: 0;
}
#myable-mainmenu{
	background: #fff;
	padding: 0;
	border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}
#myable-mainmenu .list-group-item{
	border: none;
	font-weight: bold;
}
#myable-mainmenu .list-group-item:last-child{
	border-radius: 0;
}
#myable-mainmenu .list-group-item.active{
	background: #004280;
}


#myable-content-inner > .card,
#myable-content-inner form > .card{
	margin-bottom: 20px;
}
#myable-content-inner > .card:last-child{
	margin-bottom: 0px;
}

/*Mobile Menu*/
#myable-mainmenu-mobile .form-control{
	border-color: #004280;
	color: #004280;
}

#myable-mainmenu-mobile select option:focus {
  background-color: #004280;
}



/*-----------------
  YEAR Points
------------------*/
#myable-content-inner .year-points{
	
}
#myable-content-inner .year-points .user-name{
	float: left;
	width: 40%;
	font-size: 24px;
	font-weight: bold;
	margin-top: 10px;

}
#myable-content-inner .year-points .user-points{
	float: right;
	width: 60%;
	text-align: right;
	display: inline;
}
#myable-content-inner .year-points .user-points .user-points-01{
	color: #336899;
	margin-right: 10px;
	background: #ecf1f6;
	border-radius: 24px;
	padding: 6px 12px;
	vertical-align: middle;
    font-weight: bold;
}
#myable-content-inner .year-points .user-points .user-points-02{
	font-size: 38px;
	color: #F39800;
	vertical-align: middle;
	
}
#myable-content-inner .year-points .user-points .user-points-03{
	font-size: 24px;
	color: #F39800;
	vertical-align: middle;
	line-height: 1em;
}
#myable-content-inner .year-points .card-header{
	border-bottom: #004280 1px solid;
	padding:10px 50px 50px 50px;
	background:#c9d7e5 url("css-img/my-points-bg.jpg");
	background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#myable-content-inner .year-points .card-body{
	padding: 10px 50px 25px 50px;
	margin-top: -55px;
	
}
#myable-content-inner .year-points .card-body .row{
	margin-left: 0;
	margin-right: 0;
}
#myable-content-inner .year-points .card-body .subtotal{
	border: #004280 1px solid;
	padding: 10px;
	border-radius: 5px;
	background: #fff;
}
#myable-content-inner .year-points .card-body .subtotal .col::after{
	content: "";
	width: 1px;
	height: 60%;
	background: #004280;
	position: absolute;
    right: 0;
    top: 20%;
}
#myable-content-inner .year-points .card-body .subtotal .col:last-child::after{
	content: "";
	display: none;
}
#myable-content-inner .year-points .card-body .subtotal p{
	margin-bottom: 0;
	text-align: center;
	font-size: 24px;
}
#myable-content-inner .year-points .card-body .subtotal p.sub-title{
	color: #336899;
	font-size: 16px;
	font-weight: bold;
}

/*-----------------
  notes-list
------------------*/
#myable-content-inner .notes-list i{
	margin-right: 5px;
}
#myable-content-inner .notes-list .card-header{
	background: #fff;
}
#myable-content-inner .notes-list .card-body{
	padding-bottom: 5px;
}

/*-----------------
  table-block
------------------*/
#myable-content-inner .table-block .card-body{
	padding: 0;
}
#myable-content-inner .table-block .card-header{
	padding: .5rem 1.25rem;
	background: #fff;
}
#myable-content-inner .table-block .card-header h3{
	float: left;
	margin-top: 5px;
	margin-bottom: 0;
}
#myable-content-inner .table-block .form-inline{
	float: right;
}
/*Fixed First Column*/
#myable-content-inner .table-block .table{
	position: relative;
	overflow-y: hidden;	
	left: 0!important;
}
#myable-content-inner .table-block .table-responsive{
	position: relative;
	overflow-y: hidden;	
    border-bottom: 1px solid #dee2e6;
}
#myable-content-inner .table-block .table tr>th:first-child,
#myable-content-inner .table-block .table tr>td:first-child{
	position: sticky;
    left: 0;
}

#myable-content-inner .table-block .table td:first-child,
#myable-content-inner .table-block .table th:first-child{
	padding-left: 1.25rem;
}
#myable-content-inner .table-block .table td:last-child,
#myable-content-inner .table-block .table th:last-child{
	padding-right: 1.25rem;
}

#myable-content-inner thead{
	background: #ddd;
}
#myable-content-inner tr td{
	background: #fff;
	padding: 0.75rem 0.5rem;
	vertical-align: middle;
}

#myable-content-inner tr th{
	border-bottom: none;
	border-top: none;
	background: #ddd;
	padding: 0.75rem 0.35rem;
	
}
#myable-content-inner .table-block .dropdown-year .form-control{
	border-color: #004280;
	color: #004280;
}
#myable-content-inner .table-block #ableclub-tab-wrapper .tab-content{
	padding-top: 0;
	padding-bottom: 0;
}
#myable-content-inner .table-block #ableclub-tab-wrapper .tab-nav-inner{
	margin-top: 0;
	padding-top: 5px;
}
/*--------------
    use-list
----------------*/
#myable-content-inner .use-list .th-item-01{
	
}
#myable-content-inner .use-list .th-item-02{
	min-width: 250px;
}
#myable-content-inner .use-list .th-item-03{
	min-width: 100px;
}
#myable-content-inner .use-list .td-style-01{
	width: 130px;
	min-width: 130px;
}
#myable-content-inner .use-list .td-style-01 .event-name{
	display: none;
}

#myable-content-inner .use-list .td-style-03{text-align: right; color: red;}
#myable-content-inner .use-list .td-style-04{text-align: right; color: green;}
/*--------------
    message-list
----------------*/


#myable-content-inner .message-list .td-style-01{
	width: 130px;
	min-width: 130px;
}
#myable-content-inner .message-list .th-item-02{
	min-width: 110px;
}
#myable-content-inner .message-list .th-item-03{
	min-width: 250px;
}
#myable-content-inner .message-list .th-item-04{
	min-width: 110px;
    text-align: center;
}
#myable-content-inner .message-list .td-style-03{
    text-align: center;
}


/*--------------
    event-list
----------------*/
#myable-content-inner .event-list .th-item-01{
	min-width: 90px;
	text-align: right;
}
#myable-content-inner .event-list .th-item-02{
	min-width: 110px;	
	text-align: center;
}


/*-----*/
#myable-content-inner .event-list .td-style-01{
	width: 340px;
	min-width: 340px;
}
#myable-content-inner .event-list .td-style-01 span{
	display:block;
	float: right;
}
#myable-content-inner .event-list .td-style-01 span.btn-apply{
	width: 85px;
}
#myable-content-inner .event-list .td-style-01 span.event-name{
	width: calc(100% - 85px);
}


#myable-content-inner .event-list .td-style-02{text-align: right;}
#myable-content-inner .event-list .td-style-03{background: #f7f7f7; text-align: right;}
#myable-content-inner .event-list .td-style-04{background: #f0f0f0; text-align: right;}
#myable-content-inner .event-list .td-style-05{ text-align: center;}

#myable-content-inner .event-list .dropdown-year{
	position: absolute;
	top: 0.6rem;
	right: 1.25rem;;
}

/*----------------
    club-list
------------------*/
#myable-content-inner .event-list.event-club .dropdown-year{
    top: 0.4rem;
}
#myable-content-inner .card-header.tab-level-one{
    padding: 0;
}
#myable-content-inner .tab-level-one{
    margin-bottom: 20px;
}
#myable-content-inner .tab-level-one ul{
    padding: 0;
    margin:0;
    border-bottom: #ccc 4px solid;
    font-size: 0;
}
#myable-content-inner .tab-level-one li{
    list-style: none;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    
    
}
#myable-content-inner .tab-level-one li a{
    color: #000;
    padding: 8px 16px;
    border-bottom: #ccc 4px solid;
    display: inline-block;
    margin-bottom: -4px;
   
}
#myable-content-inner .tab-level-one li a:hover,
#myable-content-inner .tab-level-one li a.active,
#myable-content-inner .tab-level-one li a:active{
    text-decoration: none;
    border-bottom: #F39800 4px solid;
}

/*----------------
   favorite
------------------*/
#myable-content-inner .event-list.event-favorite .td-style-01 {
    width: 280px;
    min-width: 280px;
}



/*-----------------
  Dropdown Btn & Btn
------------------*/

#myable-content-inner .form-group .btn-outline-primary.dropdown-toggle{
	background-color: #fff!important;
}




@media screen and (max-width: 991px){
	#ableclub-myable-wrapper > .row{
		margin-left: -15px;
	}
}
@media screen and (max-width: 768px){
	#myable-content-inner .year-points .card-header{
	padding:10px 20px 50px 20px;
}
	#myable-content-inner .year-points .card-body{
	padding: 10px 20px 25px 20px;
}
#myable-content-inner .table-block .table tr>th:first-child::after,
#myable-content-inner .table-block .table tr>td:first-child::after{
	content: "";
    width: 10px;
    height: 110%;
    position: absolute;
    right: 0;
    top: 0;
	display: block;
	border-right: #ccc 1px solid;
	/*box-shadow: 4px 0px 4px -2px rgba(0,0,0,.1);*/
  }

}

@media screen and (max-width: 576px){
	#myable-content-inner .year-points .card-header{
	padding:10px 10px 50px 10px;
}
	#myable-content-inner .year-points .card-body{
	padding: 10px 10px 25px 10px;
}
	#myable-content-inner .year-points .card-body .subtotal{
		padding: 5px;
	}
	#myable-content-inner .year-points .card-body .subtotal .col{
		padding: 0;
	}	
	#myable-content-inner .year-points .user-points{
		
	}
	#myable-content-inner .year-points .user-name{
		font-size: 18px;
	}
	#myable-content-inner .year-points .user-points .user-points-01{}
	#myable-content-inner .year-points .user-points .user-points-02{font-size:30px; }
	#myable-content-inner .year-points .user-points .user-points-03{font-size:18px; }
	#myable-content-inner .year-points .card-body .subtotal p.sub-title{font-size:14px;}
	#myable-content-inner .year-points .card-body .subtotal p{font-size:18px; }
	#myable-content-inner .year-points .user-name{width: 30%;}
	#myable-content-inner .year-points .user-points{width: 70%;}

	
	#myable-content-inner .table-block .form-inline .form-group{
		margin-bottom: 0;
	}
	#myable-content-inner .event-list .th-item-01{display: none;}
	#myable-content-inner .event-list .td-style-01 span{clear: both;float: none;}
	#myable-content-inner .event-list .td-style-01 span.event-name{width: 100%;margin-bottom: 10px;}
    #myable-content-inner .event-list .td-style-01{width:auto;min-width: auto;}
    #myable-content-inner .event-list .td-style-02{display: none;}
    #myable-content-inner .event-list .td-style-03{display: none;}
    #myable-content-inner .event-list .td-style-04{display: none;}
	
	#myable-content-inner .event-list .dropdown-year{
	position: relative;
	top: 0;
	right: 0;
	background: #ddd;
    display: block;
    padding: 10px;
    height: 50px;
    border-bottom: #ccc 1px solid;
	}

	#myable-content-inner .use-list .td-style-01 .event-name{
	display: block;
}
	#myable-content-inner .use-list .th-item-02,
	#myable-content-inner .use-list .td-style-02{
	display: none;
}
	#myable-content-inner .use-list .td-style-01{width: auto;}
	
	
}

@media screen and (max-width: 375px){
	#myable-content-inner .year-points .card-body .subtotal .col:nth-child(2)::after{
		display: none;
	}
	#myable-content-inner .year-points .user-points,
	#myable-content-inner .year-points .user-name{
		clear: both;
		width: 100%;
		text-align: center;
	}
	#myable-content-inner .year-points .card-body .subtotal>* {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

}

/*---------------------
    Information form
-----------------------*/

#myable-content-inner .card-header{
	border-bottom: #ddd 4px solid;
	background: #fff;
}
#myable-content-inner .info-list .card-body a{
	color: #F39800;
}
#myable-content-inner .info-text,
#myable-content-inner .info-text-2{
	padding-top: 8px;
	display: inline-block;
}
#myable-content-inner .info-list .form-group label{
	font-weight: bold;
}

@media screen and (max-width: 576px){
#myable-content-inner .info-list .info-text{
	padding-top: 0px;
}

}

/*---------------------
    family Information
-----------------------*/

#myable-content-inner .info-list-family .card-body{
	padding: 0;
}
#myable-content-inner .info-list-family .card-header h3{
    float: left;
}
#myable-content-inner .info-list-family .card-header button{
    float: right;
}
#myable-content-inner .info-list-family .list-title{
	background: #ddd;
	padding: 0.6rem 1.25rem;
	font-weight: bold;
}
#myable-content-inner .info-list-family li:not(.list-title) .family-name{
	margin-top: 5px;
	
}
#myable-content-inner .info-list-family .family-name{
	float: left;
	width: 15%;
}
#myable-content-inner .info-list-family .family-mail{
	float: left;
	width:calc(100% - 33%);
}
#myable-content-inner .info-list-family .family-btn{
	float:right;
	width: 18%;
	text-align: right;	
}

#myable-content-inner .info-list-family .family-mail span:first-child{
	width:75%;
	display: inline-block;
}
#myable-content-inner .info-list-family .family-mail span:last-child{
	display: inline-block;
}


@media screen and (max-width: 768px){
#myable-content-inner .info-list-family .family-name{width: 15%;}
#myable-content-inner .info-list-family .family-mail{width:calc(100% - 40%);}
#myable-content-inner .info-list-family .family-btn{width: 25%;	}
}

@media screen and (max-width: 576px){
#myable-content-inner .info-list-family .list-title{display: none;}
#myable-content-inner .info-list-family .family-name{float: none; width: 100%;}
#myable-content-inner .info-list-family .family-mail{float: none;width:100%;}
#myable-content-inner .info-list-family .family-btn{width: 50%;margin-top: -30px;}
#myable-content-inner .info-list-family .family-mail span:first-child{
	width:100%;
	display: inline-block;
}
#myable-content-inner .info-list-family .family-mail span:last-child{
	display: inline-block;
	margin-top: 10px;
}
	
}


/*---------------------
     File Upload Btn Style
-----------------------*/
#myable-content-inner input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

#myable-content-inner label.file-upload {
    border: #004280 1px solid;
	border-radius: 0.25rem;
	background-color:#004280;
	color: #fff;
	padding: 5px 10px;
	opacity: 0.85;
}


#myable-content-inner label.file-upload:hover {
   opacity: 1;
}

/* When the visually hidden child input has focus, style the parent. */
#myable-content-inner label.file-upload:focus-within {
    opacity: 1;
}

#myable-content-inner .file-upload + small{
	font-size: 14px;
	color: #666;
}
@media (max-width: 576px){
	#myable-content-inner .file-upload + small{ display: block;}
}


/*---------------------
    Create Article
-----------------------*/
#myable-content-inner .create-article .th-item-01,
#myable-content-inner .create-article .th-item-02{
	min-width: 90px;
	
}
#myable-content-inner .create-article .th-item-03{
	min-width: 200px;
}
#myable-content-inner .create-article .th-item-04{
	min-width: 90px;
	text-align: center;
}

#myable-content-inner .create-article .td-style-01{
	width: 120px;
    min-width: 120px;
}
#myable-content-inner .create-article .td-style-04{
	background: #f7f7f7;
	text-align: center;
}

/*---------------------
    Create Event
-----------------------*/

#myable-content-inner .create-event-list .th-item-01{
	min-width: 90px;
	text-align: center;
}
#myable-content-inner .create-event-list .th-item-02{
	min-width: 110px;	
	text-align: center;
}
#myable-content-inner .create-event-list .th-item-03{
	min-width: 70px;
	text-align: center;
}
#myable-content-inner .create-event-list .th-item-05{
	min-width: 210px;	
	text-align: center;
}

/*-----*/
#myable-content-inner .create-event-list .td-style-01{
	width: 290px;
	min-width: 290px;
}

#myable-content-inner .create-event-list .td-style-02{text-align: center;}
#myable-content-inner .create-event-list .td-style-03{background: #f7f7f7; text-align: center;}
#myable-content-inner .create-event-list .td-style-04{background: #f0f0f0; text-align: center;}
#myable-content-inner .create-event-list .td-style-05{background: #f0f0f0; text-align: center;}

/*BTN*/
#myable-content-inner .create-event-list .td-style-01 span.btn-apply,
#myable-content-inner .create-event-list .td-style-01 span.btn-edit{
	display: inline-block;
	margin-right: 5px;
	
}

#myable-content-inner .create-event-list span.event-name{
	width: 100%;
	display: block;
}
#myable-content-inner .create-event-list span.state-text{
	display: block;
}
#myable-content-inner .table-block.create-event-list .table td:last-child,
#myable-content-inner .table-block.create-event-list .table th:last-child{
	padding-right:  inherit;
}

@media screen and (max-width: 576px){
#myable-content-inner .create-event-list .th-item-01,
#myable-content-inner .create-event-list .th-item-02,
#myable-content-inner .create-event-list .th-item-03{display: none;}
#myable-content-inner .create-event-list .td-style-01{width: auto;min-width: auto;}
#myable-content-inner .create-event-list .td-style-02{display: none;}
#myable-content-inner .create-event-list .td-style-03{display: none;}
}


/*--------------------------
 Create Event - Detail Page
----------------------------*/
/*-------CARD 01------------*/
#myable-content-inner .basic-form .list-group-horizontal{
	padding: 15px;
	border: #ccc 1px solid;
	margin: 0;
	height: 250px;
	overflow-y: scroll;
    align-content: flex-start;
}
#myable-content-inner .basic-form .list-group-horizontal .list-group-item{
	border: none;
	padding: 0 1.25rem;	
	float: left;
}
#myable-content-inner .basic-form .checkbox-group{
	margin-bottom: 20px;
}
#myable-content-inner .basic-form .checkbox-group h5{
	font-weight: normal;
	width: 17%;
	float: left;
}
@media screen and (max-width: 767px){
	#myable-content-inner .basic-form .checkbox-group h5{width: 22%;}
}
@media screen and (max-width: 575px){
	#myable-content-inner .basic-form .checkbox-group h5{float: none;width: 100%;}
}

/*-------------
 父子層
---------------*/
#myable-content-inner .basic-form .multi-level{
    border: #ccc 1px solid;
    padding: 15px 10px;
    border-radius: 0.25rem;
    height: 250px;
    overflow-y: scroll;
    align-content: flex-start;
}
#myable-content-inner .basic-form .multi-level .list-group-horizontal{
	border: none;
    height: auto;
    overflow: hidden;
}
#myable-content-inner .basic-form .multi-level .parent-item{
    font-weight: bold;
    padding: 5px 10px;
    background: #f2f2f2;
    padding-left: 35px;
    border-bottom: 1px #ddd solid;
}
#myable-content-inner .basic-form .multi-level .col{
    padding-left: 5px;
    padding-right: 5px;
}
#myable-content-inner .basic-form .multi-level ul{
    margin-left: 30px;
    padding-top: 5px;
}


/*-------CARD 02------------*/
#myable-content-inner .remarks-list .card-body{
	padding: 0;
    min-height: 50px;
}
#myable-content-inner .remarks-list .card-header h3{
	float: left;
}
#myable-content-inner .remarks-list .dropdown-qa{
	float: right;
}


@media screen and (max-width: 480px){
#myable-content-inner .remarks-list .card-header h3{float: none;display: block;}
#myable-content-inner .remarks-list .dropdown-qa{float: none; display: block; margin-top: 10px;}
}
#myable-content-inner .remarks-list .input-group-prepend span{
	background: #fff;
	padding: 5px 6px;
	border-radius: 4px 0 0 4px;
	border: #ced4da 1px solid;
	border-right-color:#fff;
	margin-right: -1px;
	z-index: 2;
}
#myable-content-inner .remarks-list .input-group-prepend button{
	padding: 0 6px;
	background: #eee;
}
#myable-content-inner .remarks-list .input-group-prepend button:hover{
	background: #ccc;
	border-color: #ccc;
}


#myable-content-inner .remarks-list .list-group-item{
	padding: 1.25rem;
}

#myable-content-inner .family-setting h5{
	font-weight: normal;
	width: 17%;
	float: left;
}
/*-------CARD 03------------*/
#myable-content-inner .family-setting .point-table{
	float: left;
	width: 83%;
}
#myable-content-inner .family-setting .point-table .table input[type="text"]{
	border: none;

}
#myable-content-inner .family-setting tr th{
	background: #f7f7f7;
	border: 1px solid #dee2e6;
	padding: 0.1rem 0.75rem;
	vertical-align: middle;
	font-weight: normal;
	width: 25%;
}

#myable-content-inner .family-setting tr td{
	padding: 0.1rem 0;
	vertical-align: middle;
}
@media screen and (max-width: 991px){
	#myable-content-inner .family-setting h5{width: 22%;}
	#myable-content-inner .family-setting .point-table{width: 78%;}
}
@media screen and (max-width: 767px){
	#myable-content-inner .family-setting h5{width: 26%;}
	#myable-content-inner .family-setting .point-table{width: 74%;}
}
@media screen and (max-width: 575px){
	#myable-content-inner .family-setting h5{float: none;width: 100%;}
	#myable-content-inner .family-setting .point-table{float: none;width: 100%;}
	#myable-content-inner .family-setting tr th{width: 33%;}
	
}





































/*--------------------------------------------
----------------------------------------------
      RWD Style
----------------------------------------------
---------------------------------------------*/
@media screen and (max-width: 1199px){
	#ableclub-mainbanner .carousel-item .img-wrapper{
	height: 0;
	padding-bottom: 20%;
}

/*---------------*/

	#ableclub-header .container-xl{
		padding: 0;
}
    #ableclub-footer .media-btn{
	text-align: left;
}
	#ableclub-footer .media-btn button{
	margin:10px 10px 0 0;
}

	
}

@media screen and (max-width: 767px){
	.ableclub-article .article-txt{
	margin-left: 0px;
	margin-top: 20px;
}
	
}

@media screen and (max-width: 768px){
	#ableclub-header .header-logo{ width:180px;margin: 15px 0 10px 0;}
	#ableclub-header .header-logo a{width:180px;}

	#ableclub-mainmenu .mainmenu-item .item-img{
	width: 80%;
	max-width: 90px;
	}

	#ableclub-header .header-nav{
		padding-top: 20px;
	}
	#ableclub-header .header-nav .nav-item .user-log{
		display: inherit;
	}
	
	#ableclub-header .header-nav .nav-item.item-points{
		display: none;
	}

	#ableclub-header .header-nav .nav-item span{
		display: block;
		text-align: center;
		padding: 0 10px;
	}
	#ableclub-header .header-nav .nav-item.item-user .user-name,
	#ableclub-header .header-nav .nav-item.item-user .user-name a{
		display: none;
	}
	#ableclub-header .header-nav i{
		font-size: 22px;
	}
	#ableclub-header .header-nav .nav-item.item-search > a::before,
	#ableclub-header .header-nav .nav-item.item-site a.dropdown-toggle::before{
		display: none;
     }
	#ableclub-userbar{
		display: block;
		border-bottom: #ccc 1px solid;
	}
	
	
	/*-------- Article List -----------*/
	
	.ableclub-article .card-text{
		height: 6em;
	}
	.ableclub-article.article-list-wrapper .card-body{
		padding: 0.8rem;
	}
	.ableclub-article.article-list-wrapper .article-txt{
	margin-left: 20px;
	margin-top: 0px;
}
	.ableclub-article.article-list-wrapper .card-text {
    height: 3em;
	margin-bottom: 0;
	margin-top: 0!important;
}
	
	.ableclub-article.article-list-wrapper .article-more{
		display: none;
	}
	
	
	
}
@media screen and (max-width: 576px){
    h1{font-size: 30px!important; }
    h2{font-size: 24px!important; font-weight: bold;}
    h3{font-size: 18px!important; font-weight: bold;}
	
	#ableclub-header .header-logo{ width:150px;margin: 15px 0 0px 0;}
	#ableclub-header .header-logo a{width:150px;}
	
	#ableclub-header .header-nav .nav-item span:last-child{display: none;}
	#ableclub-header .header-nav{padding-top: 25px;}
	#ableclub-header .header-nav i{font-size: 28px;}
	#ableclub-header .header-nav .nav-item span{padding: 0 8px;}

    #ableclub-mainbanner .carousel-item .img-wrapper {
    height: 0;
    padding-bottom: 33%;
}
	
	#ableclub-tab-wrapper .tab-nav-inner{
		margin-top: 0;
	}
	/*-------- Article List -----------*/
	.ableclub-article.article-list-wrapper{
		padding-top: 0;
	}
	.ableclub-article .card{
		margin-bottom: 10px;
		
	}
}

@media screen and (max-width: 375px){
	#ableclub-service .service-item .item-txt{ width:100%; text-align: center; }
	#ableclub-service .service-item .item-img{ width:100%; text-align: center; }
	#ableclub-mainmenu .mainmenu-item{
		flex: 33.33%;
		max-width: 33.33%;
	}
	#ableclub-header .header-nav i{font-size: 26px;}
	#ableclub-header .header-nav .nav-item span{padding: 0 6px;}
	
	.ableclub-article.article-list-wrapper .card-text{
		display: none;
	
}
}

/*------------------------------------------
  MyABLE - PointsCard Page (2025.11)
-------------------------------------------*/
.ableclub-PointsCard .card{
	border-color: #f39800;
	
}
.ableclub-PointsCard .card-title{
	background-color: #fcf3e3;
	padding: 10px;
	border-radius: .25rem;
}
.ableclub-PointsCard .text-date{
	margin-bottom: 0;
    color: #666;
	padding: 0 20px;
}
.ableclub-PointsCard .text-date i {
    margin-right: 10px;
}
.ableclub-PointsCard .card-footer{
	background-color: transparent;
	border-top: none;
}

.ableclub-PointsCard .PointsCard-inner{
	padding: 10px 20px;
	display: flex;
	flex-wrap: wrap;
	gap:10px 20px;
	justify-content: center;
	margin-bottom: 0;
}

.PointsCard-inner .Points-item{ 
  width: 54px;
  height: 54px;
  background-color: #fff; 
  border: 2px #ddd dashed;
  border-radius: 50%; 
  display: flex; 
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  position: relative;
}

.PointsCard-inner .Points-item .num{
	font-size: 29px;
	font-weight: bold;
	color: #ddd;
}

.PointsCard-inner .Points-item.collected::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: inline-block;
	background: #fcf3e3 url('css-img/point-collected.png') no-repeat center/cover;
}
.PointsCard-inner .Points-item.collected{
	border: 2px #fcf3e3 solid;
}

.PointsCard-inner .Points-item.collected.used::after{
	content: "\f058";
	font-family: "Font Awesome 6 Pro"; 
	position: absolute;
	color: #67a222;
	top: -7px;
	right: -4px;
	font-weight: bold;
	font-size: 22px;
	z-index: 2;	
}


.ableclub-PointsCard .card.disabled-card {
  filter: grayscale(100%);
  pointer-events: none; 
  border-color: #ccc;
}


.PointsCard-table.table-responsive table tr th,
.PointsCard-table.table-responsive table tr td{
	
}

.PointsCard-table.table-responsive table .th-item-01{
	min-width: 200px;
}
.PointsCard-table.table-responsive table .th-item-02{
	min-width: 100px;
}



/*------------------------------------------
  STYLE From Sally For Global station
-------------------------------------------*/
#ableclub-mainmenu .mainmenu-item.item03 .item-img {
    display: none;
}
#ableclub-mainmenu .mainmenu-item.item03 {
    margin-top: 20px;
    margin-bottom: 10px;
}
#ableclub-mainmenu .mainmenu-item.item03 h3 {
    background-color: #dae4ee;
    padding-top: 20px;
    padding-bottom: 20px;
}

/*------------------------------------------
  START loading animated
  Source : http://tobiasahlin.com/spinkit/
-------------------------------------------*/
.sk-three-bounce-relative, .sk-three-bounce-absolute {
	display: block;
}
.sk-three-bounce-relative.sk-open, .sk-three-bounce-absolute.sk-open {
	display: block;
}
/*Full Page Setting with overlay*/
.sk-three-bounce-absolute .sk-three-bounce {
	top: 50%;
	left: 50%;
	position: fixed;
	z-index: 5003;
	margin-left: -40px;
}
.sk-three-bounce-absolute::after {
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	top:0;
	left: 0;
	z-index: 5002;
	background: #fff;
	opacity: .7;
}

.sk-three-bounce-absolute.dark::after {
	background: #666;
}
/*--------*/

.sk-three-bounce {
	margin: 150px auto;
	width: 80px;
	text-align: center;
}
.sk-three-bounce .sk-child {
	width: 20px;
	height: 20px;
	background-color: #004280;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
	animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.sk-three-bounce .sk-bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
 @-webkit-keyframes sk-three-bounce {
 0%, 80%, 100% {
 -webkit-transform: scale(0);
 transform: scale(0);
}
 40% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
 @keyframes sk-three-bounce {
 0%, 80%, 100% {
 -webkit-transform: scale(0);
 transform: scale(0);
}
 40% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}