/* Empty. Add your own CSS if you like */

.popup-vertical-buttons button
{
    min-width: 100%;
    margin-bottom: 5px;
}
.popup-vertical-buttons .popup-buttons
{
    display: block;
}
.popup-vertical-buttons .popup-sub-title
{
    font-size: 15px;
}

.scroll {
    height: 100%;
}

.popover .scroll-content{
	overflow: visible!important;}

ion-popover-view .scroll-content{
	overflow: visible!important;}

ion-popover-view.fit {
  height: auto !important;
  width: auto !important;
}

ion-popover-view.fit ion-content {
  position: relative !important;
}

.platform-android ion-popover-view.fit {
  margin-top: 10px !important;
}

ion-popover-view.fit ion-header-bar,
ion-popover-view.fit ion-footer-bar {
	position: relative !important;
}

ion-popover-view.popover .has-header {
	top: 0 !important;
}

ion-popover-view.popover .has-footer {
	bottom: 0 !important;
}

.image-modal {
    width: 100% !important;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
}
 
.transparent {
    background: transparent !important;
}
 .image {
    width: 100%;
    height: 600px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center, center;
}
.fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}
 
.slider {
    width: 100%;
    height: 100%;
}
.swiper-slide img{
    margin: auto;
    display: block;
}  
ion-slide {
    background-color: white;
}
.slider-image-frame-size{
    height: 220px; 
    width:100%;    
    margin: 0 auto;
    max-width: 680px;
}
.centerme {
    margin: 0 auto;
    width: 100%;
    height:100%;
}
div.qrcode_div img {
    margin:auto;
}
.fullscreen-player {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: none;
    position: fixed;
    right: 0;
    top: 0;
}

.message-selected {
    background-color: lightgray;
}

.centeredImage
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    
.post-type-icon {        
    font-size: 64px;
    text-align: center;
    display: block;
    min-width:64px;
}
 
    
.imageView .has-no-header{top:0px !important}
.imageView .has-no-footer{bottom:0px !important}
.imageView .close-btn{font-weight:900;border:2px solid;position:absolute;right:5px;border-radius:5px}
.imageView .headerView{background-image:none;background-color: #387EF5;}
.imageView .gallery-slide-view{width:98%;background-color:transparent}
.imageView .image-subtitle{color:white;position:absolute;bottom:0px;left:10px;width:95%;height:15%;z-index:100}
.imageView .listContainer{width:100%;height:100%;background-color:black}
.imageView .hideAll{display:none}
.imageView img{display:block;width:100%;height:auto}
.imageView .scroll-view{position:absolute;width:100%;height:100%}
.imageView .scroll-view .scroll
{min-height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-moz-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}


.badminton-header {
    width:100%;
    height: 35px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 14px;
}

.badminton-header .link {
    padding-top: 2px;
    cursor: pointer;
}

.badminton-header .selected {
    /*
    background-color: #387ef5;
    color: #fff;
    border-radius: 4px;
    */
}

.badminton-header .link span {
    padding-left: 5px;
    padding-right: 1px;
    padding-bottom: 2px;
    border-bottom: 1px dotted #ddd;
}
.badminton-header .selected span {
    padding-left: 7px;
    padding-right: 7px;
    border-bottom: 2px solid #387ef5;
}


.my-google-map-container { 
    position: absolute;
    top: 0;
    bottom: 48px;
    right: 0;
    left: 0;
}
.my-google-map-container-modal { 
    position: absolute;
    top: 0;
    bottom: 0px;
    right: 0;
    left: 0;
}

.angular-google-map-container { 
height:100%; 
width:100%; 
position:absolute; 
}
/*
.angular-google-map-container { 
    position: absolute;
    top: 0;
    bottom: 36px;
    right: 0;
    left: 0;
}
*/
.marker-labels {
  width: 160px;
  padding: 10px;  
  background: #fff;
  border-radius: 5px;
}
.slidingTabs{
    overflow-x: hidden!important;
    overflow-y: hidden!important;
}
.slidingTabs ul {
    background-color: #d42424;
}
.slidingTabs ul li {
    font-size: 14px;
    font-weight: bold;
}

.tournamentSlidingTabs{
    height: 28px!important;
    padding: 0!important;
}
.tournamentSlidingTabs ul {
    background-color: white;
    height: 28px!important;
}
.tournamentSlidingTabs ul li {
    color: gray;
    height: 28px;
    line-height: 26px;
}
.tournamentSlidingTabs ul li.tab-active {
    color: black;
}
.tournamentSlidingTabs .tab-indicator-wrapper .tab-indicator {
    height: 100%;
    background-color: #387ef5;
}


.item-thumbnail-left, .item-thumbnail-left .item-content {
    min-height: 80px;
}
.item-thumbnail-left > img:first-child, .item-thumbnail-left .item-image, .item-thumbnail-left .item-content > img:first-child, .item-thumbnail-left .item-content .item-image {
    height: auto;
}

.pre-item {
    white-space: pre;
}

.bar-bwf {
    background-color: #d42424;
}
.bwf-color{
    color: #d42424;
}
 .button.button-bwf {
    border-color: transparent;
    background-color: #d42424;
    color: #fff; }
    .button.button-bwf:hover {
      color: #fff;
      text-decoration: none; }
    .button.button-bwf.active, .button.button-bwf.activated {
      background-color: #0c60ee; }
    .button.button-bwf.button-clear {
      border-color: transparent;
      background: none;
      box-shadow: none;
      color: #d42424; }
    .button.button-bwf.button-icon {
      border-color: transparent;
      background: none; }
    .button.button-bwf.button-outline {
      border-color: #d42424;
      background: transparent;
      color: #d42424; }
      .button.button-bwf.button-outline.active, .button.button-bwf.button-outline.activated {
        background-color: #d42424;
        box-shadow: none;
        color: #fff; 
      }

.bar .title {
    color: white;
}
.white {
    color: white;
}
.button-clear.button-clear {
    color: white; 
}











/* General
==================================*/
h1 {
    color: #fff;
    text-shadow: 0 1px 0px #000;
    font-size: 42px;
}


/* Utilities
==================================*/
.title-bordered {
    border-top: solid 2px #bbb;
    padding-top: 30px;
}

p {
    color: #555;
    margin: 0 0 25px;
}

.scroll {
    height: 100%;
}


/* Menu
==================================*/
.menu .bar.bar-header.expanded {
    transition: all .5s ease-in-out;
}

.menu-open .bar.bar-header.expanded {
    background-color: #222;
}

.menu h2 {
    bottom: 0;
    font-size: 18px;
    left: 16px;
    position: absolute;
}

.menu .avatar {
    height: 88px;
    width: 88px;
}

.menu.menu-left * {
    font-weight: bold;
}

.menu-open .ion-navicon {
    transform: rotate(-360deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.menu-open .ion-navicon:before {
    content: "\f2ca";
}


/* Login
==================================*/
.app-icon {
    background-color: #fff;
    background: url('../img/crown.jpg') center;
    background-size: cover;
    border-radius: 50%;
    height: 125px;
    margin: 0 auto;
    width: 125px;
}

.social-login {
    position: fixed;
    bottom: 0;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.item-title{
    overflow: visible;
    white-space: normal;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

 .bx-caption {
    position: absolute;
    top: 0;
    height: 40px;
    left: 0;
    background: rgba(80,80,80,.40);
    width: 100%;
}
 .bx-caption span {
    color: #fff;
    display: block;
    font-family: Arial;
    font-size: .80em;
    padding: 10px;
}

.tournament-tabs ul {
    background-color: lightblue;
    color: black;
}
.tournament-tabs ul li {
    font-size: 12px;
    padding: 0 6px 20px 6px
}

.ionic_datepicker_popup .today {
  border: 1px solid #387ef5;
}
.ionic_datepicker_popup .selected_date {
  background-color: #387ef5;
}
.ionic_datepicker_popup .popup-head {
  background-color: #387ef5;
}
.ionic_datepicker_popup .popup-body .selected_date_full {
  background-color: #387ef5;
}
.ionic_datepicker_popup .popup-body .month_select, .ionic_datepicker_popup .popup-body .year_select {
  border-bottom: 1px solid #387ef5;
}
.ionic_datepicker_popup .popup-body .month_select:after, .ionic_datepicker_popup .popup-body .year_select:after {
  color: #387ef5;
}

.ionic_datepicker_popup .popup-body .button-clear {
  color: #387ef5;
}

.ionic_datepicker_popup .popup-buttons button {
  background-color: #387ef5;
}

.ionic_timepicker_popup .heading {
  background-color: #387ef5;
}
.ionic_timepicker_popup .button_set, .ionic_timepicker_popup .button_close {
  background-color: #387ef5;
}

.cancelled{
    text-decoration: line-through;
}

.comment-top{
    display: flex;
    position: absolute; 
    right: 10px
}
.fullscreen-button{
    display: none;
    position: absolute; 
    right: 8px;    
}

.view-reservation-history-button{
    position: absolute; 
    right:8px; 
}

.mybadminton-play-button{
    position: absolute;top: 2px;right: 5px;font-size:30px;z-index:100;color: white;
}

.avatar-small {
    width: 48px!important;
    height: 48px!important;
    border-radius: 50%;
}
.avatar-medium {
    width: 64px!important;
    height: 64px!important;
    border-radius: 50%;
}
.avatar-big {
    width: 80!important;
    height: 80!important;
    border-radius: 50%;
}
.hide-badzine {
    height: 350px;
    overflow: hidden;
}

.platform-ios.platform-cordova:not(.fullscreen)  .slidingTabs ul li {
    padding: 18px 6px 12px 6px;
}

.platform-ios.platform-cordova:not(.fullscreen)  .slidingTabs ul {
    height: 64px;
}
.platform-ios.platform-cordova:not(.fullscreen)  .slidingTabs {
    height: 64px;
}
/*
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader){
    height: 64px;
}
.platform-ios.platform-cordova:not(.fullscreen)  .bar .title {
    height: 23px;
    line-height: 24px;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader{
    top:48px;
}

.platform-ios.platform-cordova:not(.fullscreen) .button.back-button.buttons.button-clear.header-item{
    margin-top: 10px;
}
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader)  .button{
    margin-top: 10px;
}
.platform-ios.platform-cordova:not(.fullscreen) .comment-top {
    margin-top: 0px!important;
}
*/
.platform-ios.platform-cordova:not(.fullscreen)  .mybadminton-play-button{
    top: 20px;font-size:28px;
}
.platform-ios.platform-cordova:not(.fullscreen)  .events-header{
    margin-top: 0px!important;
}
.platform-ios.platform-cordova:not(.fullscreen) .tournamentSlidingTabs ul li {
    line-height: 1px;
}

.platform-ios.platform-cordova:not(.fullscreen) .slidingTabs ul li .ink {
    display:none;
}

.platform-ios.platform-cordova:not(.fullscreen) .slidingTabs ul li .ink.animate {
    display:none;
}
/*.platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
    top:88px;
}
*/
.shop-header{
    display: none;
}
.platform-ios.platform-cordova:not(.fullscreen) .shop-header{
    height: 21px;
    width: 100%;
    display: block;
}
/*.platform-ios.platform-cordova:not(.fullscreen) .has-shop-header{
    margin-top: 20px;
}
*/
.match_item {
    padding: 2px 16px;
    border: 0;
    border-bottom: 1px solid #ddd;
    margin-top: 1px;
}
    .game_group_result {
       width: 100%;
    }
    .photo-slide-left-right {
        display: none!important;
    }
@media (min-width: 680px) {
    .photo-slide-left-right {
        display: block;
    }
    .fullscreen-button{
        display: flex;
    }
    .view-reservation-history-button{        
        right:44px; 
    }
    
    .full-modal {
      top: 0px !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
    }
    .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) > * {
      margin-top: 20px;
    }
    .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) {
      height: 64px;
    }
    .platform-ios.platform-cordova .modal-wrapper .modal .bar-subheader {
      top: 88px;
    }
    .swiper-slide img{
        margin: auto;
        display: block;
   }  
    .game_result {
       display: flex;
       flex-wrap: wrap;
    }
    .game_group_result {
        width: 300px;
        border-right: 1px solid #ddd;
        margin-right: 1px;
        padding-right: 1px;
    }
    .match_item {
        padding: 2px 16px;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        margin-top: 1px;
    }
}

/**
 * css for photo/album
 */

.thumbnail-container {
    padding: 2px;    
    display: flex; 
    flex-direction: row ; 
    flex-wrap: wrap; 
}

.thumbnail-image {
    padding: 1px; 
    width: 100%; 
    height: 100%; 
    max-width:100%;
    max-height: 120px;
}

.thumbnail-item {
    width: 150px; 
    height: auto; 
    position: relative;
}
.albums-item {
    width: 80px; 
    height: auto; 
}
.albums-image {
    padding: 2px ;
    width: 100%; 
}
.members-item {
    width: 40px; 
    height: auto; 
}
.members-image {
    padding: 2px ;
    width: 100%; 
    border-radius: 50%;
}


#comments_likes .item-input-wrapper {
    background-color: #fff;
    height: auto;    
}

/* Small screens */
@media all and (max-width: 500px) {
    .thumbnail-item {
        width: 33.3%; 
        height: auto; 
    }
    .thumbnail-item2 {
        width: 50%!important; 
    }
    .albums-item {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 20%;
        -moz-box-flex: 0;
        -moz-flex: 0 0 20%;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .members-item {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 20%;
        -moz-box-flex: 0;
        -moz-flex: 0 0 20%;
        -ms-flex: 0 0 20%;
        flex: 0 0 14%;
        max-width: 14%;
    }
}
.uploading-bar {
    background-color:#5498E1; 
}
.uploading-bar-error {
    background-color: #e42112; 
}


/***** group *****/
.item-group {
    padding-left: 84px;
    padding-top:    6px;
    padding-bottom: 6px;
    min-height: 74px;    
}
.item-group img.item-group-avatar {
    width: 64px; height: 64px;
    max-width: 64px; max-height: 64px;
    top: 6px;
    left:10px
}

.item-group .badge {
    left: 54px;
    right: auto;
}

.item-group .title {
    padding-right:40px;
}

.item-group .lastmessage, .item-group .upcomingevent {
    padding-right:22px;
    font-size: 90%;
}

.item-group .timestamp {
    float: right;
    position: absolute;
    top: 5px;
    right: 12px;
    font-size: 75%;
    color: #999;
}

.item-group .timestamp {
    top: 18px;
}

.item-group .ion-chevron-right {
    top: 8px;
}

input.title-bar-search {
    position:absolute;
    right:70px;
    min-width: 180px;
    padding: 0 10px;
    border-radius: 4px;
}

img.avatar-64 {
    width: 64px; height: 64px;
}

img.avatar-40 {
    width: 40px; height: 40px;
}

img.avatar-30 {
    width: 30px; height: 30px;
}

.inline-flex { display: inline-flex; }

.padding {	padding: 4px 10px; }

.padding-10 { padding: 10px; }
.padding-20 { padding: 20px; }
.padding-30 { padding: 30px; }
.padding-40 { padding: 40px; }

.padding-h10 { padding: 0 10px; }
.padding-v10 { padding: 10px 0; }

.padding-h {
    padding: 0 12px;
}

.padding-v {
    padding: 12px 0;
}
.match-winner{
    background-color: lightgreen;
}
.score-input{
    font-size:20px!important; 
    border-bottom: lightgray solid 1px!important; 
    padding-right: 0; 
    width: 80px; 
    margin: 0 auto ;
    text-align: center;
}
.my-item-input{
    border-bottom: lightgray solid 1px!important; 
    padding-right: 0; 
    margin: 0 auto ;
    text-align: center;
}
.row {
    margin: 0;
}
.share-button{
    top: -10px;
    position: absolute;
    right: 0;
}
.share-button-top{
}

.checkbox input[type="checkbox"] {
    margin-left: 0;
}
.iframe-wrapper iframe{
  width: 100%;
  height: 100%;
}


/*** left side menu ***/

#leftmenu #profile {
    padding-bottom: 30px;
    padding-left: 30px;
}

#leftmenu #profile h1 {
    font-size: 137.5%;
    font-weight: normal;
}

#leftmenu a.item-content {
    line-height: 30px;
    padding-left: 30px;
    cursor: pointer;
    background-color: transparent;
}

#leftmenu a.item-content:hover {
    background-color: #eeeeee;
    color: #d42424;
}

#leftmenu .selected, #leftmenu .selected a.item-content:hover {
    background: url('../img/hblue.png');
    background-repeat: repeat-y;
    background-size: 12px auto;
    color: #d42424;
}

#leftmenu i.icon {
    float: left;
    font-size: 30px;
    width: 30px;
    margin-right: 10px;
}
.hide-in-big-screen{
    display: block;
}
.show-in-big-screen{
    display: none;
}
@media print{
    .hide-in-big-screen{
        display: none!important;
    }
    .show-in-big-screen{
        display: block!important;
    }
}
@media (min-width: 1024px) {
    .hide-in-big-screen{
        display: none!important;
    }
    .show-in-big-screen{
        display: block!important;
    }
}

@media (min-width: 768px) {
    .tabs {
      display: none;
    }
}
.menu-tabs-container{
    display: block;
}
.menu-tabs{
    display: flex;
}

.mybadminton-webframe {
    max-width: 1320px;
    margin: 0 auto;    
}
@media (min-width: 768px) {
    .mybadminton-webframe {
        border-left: 1px lightgray solid;
        border-right: 1px lightgray solid;
    }
}



/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}

.slidingTabs ul li {
    padding: 0 10px 20px 10px;
}

#player-comment {
    position: relative;
    padding: 6px 0 0 10px
}
#player-comment a{
    color:#d42424;
    min-height: 16px;
    line-height: 16px;
}

.modal-backdrop{
    background-color: initial;
}

.line_br{
    border-bottom: 1px solid lightgray;
    border-right: 1px solid lightgray;
    vertical-align: bottom;
}

.line_b{
    border-bottom: 1px solid lightgray;
    vertical-align: bottom;
}
.line_r{
    border-right: 1px solid lightgray;
    vertical-align: top;
}
.text_align_top{
    vertical-align: top;
}

.timeslot-line{
    background-color: azure;
}

.rate-selection .item-content{
    padding: 10px 54px 10px 10px !important;
}
.rate-selection .radio-icon{
    padding-top: 6px!important;
}

.payment-form .field{
    width: 100%;
    text-align: left;
    border-bottom: lightgray 1px sold;
    padding: 2px 0 4px 0;
}
.payment-form .error{
    padding: 10px;
    color:red;
}

.popover .popover-menu-item:last-child{
    margin-bottom: -20px!important;
}
.popover .popover-menu-item:first-child{
    margin-top: -20px!important;
}
.editing_draw_mode {
    background-color: rgba(211,211,211,0.75) 
}
.winner-class {
    background-color: antiquewhite;
}
.for-printing-only {
    display: none;
}
@media print {
    .for-printing-only	{  
        display: block;
    }
}