/* -------  module club  -------  */
.club-green  {color:#fff!important;background-color:#4CAF50!important}
.club-orange {color:#fff!important;background-color:rgb(255,165,0);!important}
.club-red    {color:#fff!important;background-color:#f44336!important}

.club-ok     {color:#fff!important;background-color:#4CAF50!important}
.club-delete {color:#fff!important;background-color:#f44336!important}
.club-cancel {color:#000!important;background-color:#9e9e9e!important}

/* ----------  Group  ----------  */
.club-head {text-align: left;}
.club-head h2 {font-size: 1.2em; }
.club-head p {font-size: 1.0em; }

/* ----------  Member ----------  */
.club-member {margin-bottom:20px;}
.club-member td {
	font-size: 1.0em;
	text-align: left;
}

.club-member ul {
	margin: 0 0 6px 0 ! important;
	padding: 0 0 0 0 ! important;
	list-style-type: none;
}


.club-member ul li {
	list-style-type: none;
	padding: 0 0 6px 26px;
	margin: 0 0 0 0;
	background-repeat: no-repeat;
	background-position: 0px 3px;

}
.club-name {font-size: 1.4em; margin:0;}
.club-capa {font-size: 1.0em; margin:4px 0; color: #666666;}
.club-desc { font-size: 1.0em;	margin:6px 0;}

.club-mail {font-size: 1.0em; 	background-image: url(mail.gif);}	
.club-phone { font-size: 1.0em; background-image: url(phone.gif); }
.club-extra1 {font-size: 1.0em; background-image: url(talk.gif); }
.club-extra2 {font-size: 1.0em; background-image: url(time.gif); }

.club-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.club-modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.club-close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.club-close:hover,
.club-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.club-alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.club-alert.success{background-color: #04AA6D;}
.club-alert.info {background-color: #2196F3;}
.club-alert.warning {background-color: #ff9800;}

.club-button {
    border:none;
    display:inline-block;
    padding:8px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    font-weight: normal;
    color:#000;
    background-color:#ccc;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

a.club-button {
    text-decoration:none!important;
    font-weight: normal!important;
}

.club-button:disabled {
    cursor:not-allowed;
    opacity:0.3
}
.club-button:hover {
    color:#fff!important;
    background-color:#666!important
}

.club-input {
    width: 100%;
    margin: 8px 0;
    box-sizing: border-box;
}

.club-quarter, .club-half, .club-threequarter, .club-fifth, .club-third, .club-full {
  box-sizing: border-box;
  float: left;
  padding: 10px;
}

.club-quarter {
    width: 25%;
}

.club-half {
    width: 50%;
}

.club-threequarter {
    width: 75%;
}

.club-third {
    width: 33.33%;
}

.club-full {
    width: 100%;
}

.club-fifth {
    width: 20%;
}

/* Clear floats after the columns */
.club-row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .club-quarter, .club-half, .club-threequarter, .club-fifth, .club-third, .club-full {
    width: 100%;
  }
}


.club-cell-row {
    width: 100%;
}

.club-cell-row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="club-cell-"] {
  float: left;
  padding: 15px;
}

.club-cell-menu {width: 12.5%;}
.club-cell-1 {width: 8.33%;}
.club-cell-2 {width: 16.66%;}
.club-cell-3 {width: 25%;}
.club-cell-4 {width: 33.33%;}
.club-cell-5 {width: 41.66%;}
.club-cell-6 {width: 50%;}
.club-cell-7 {width: 58.33%;}
.club-cell-8 {width: 66.66%;}
.club-cell-9 {width: 75%;}
.club-cell-10 {width: 83.33%;}
.club-cell-11 {width: 91.66%;}
.club-cell-12 {width: 100%;}

@media screen and (max-width: 900px) {
    [class*="club-cell-"] {
	width: 100%;
  }
}


.clubnav {
  overflow: hidden;
  background-color: blue !important;
}

.clubnav a {
  float: left;
  display: block;
  color: white;
  background-color: blue !important;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.clubnav a:hover {
  background-color: #ddd;
  color: black;
}

.clubnav a.active {
  background-color: #04AA6D;
  color: white;
}

.clubnav .club-icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .clubnav a {display: none;}
  .clubnav a.club-icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .clubnav.responsive {position: relative;}

  .clubnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .clubnav.responsive .club-icon {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
  }
}