body {
  background-color : #F6F5F3;
  color: #333333 
}

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  -moz-use-text-color: #AAAAAA;
  border-color: #BBBBBB;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-top: 3px;
    padding: 20px 0;
    background-color: #FFA0A0;
    color: #333333;
    text-align: center;
}

a[id] {
    padding-top: 70px;
}

.w600 {
    max-width: 600px;
}

.ui-widget {
    font-size: 0.9em;
}

.form-wrapper {
    margin: 20px auto;
}
#recaptcha_area {
    margin: 10px auto;
}

.delete {
    position: relative;
    right: -21px;
    top: -2px;
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}
button.delete {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    cursor: pointer;
    padding: 0;
}

.wrapper-right-button {
    /*position: absolute;*/
    /*top: 17px;*/
    /*right: 10px;*/
    text-align: end;
}
.wrapper-right-button .btn {
    margin-bottom: 10px;
}
.button-area {
    position: relative;
    margin-bottom: 10px;
}
.button-area:after {
    display: block;
    content: "\0009";
    clear: both;
    /*height: 0;*/
    /*visibility: hidden;*/
}
.modal-title h4{
    padding: 10px;
    font-weight: bold;
}

.mytoplogo {
	clear: both;
	display: table;;
	background-color: #F6F5F3;
	width: 100%;
    color: #333333;
    margin-bottom: 3px;
}
/*.container-fluid {*/
/*    background-color: #000000;*/
/*    color: #F6F5F3;*/
/*    margin-bottom: 3px;*/
/*}*/
.form-login {
    margin: auto!important;
    float: none!important;
    padding: 0 20px;
    border: 2px solid #ec971f;
    border-radius: 10px;
}
.form-login {
    margin: auto!important;
    float: none!important;
    padding: 0 20px;
    border: 2px solid #ec971f;
    border-radius: 10px;
}
.text-center {
    text-align: center;
}
/*.navbar-nav, .navbar-nav > li > a:link, .navbar-nav > li > a:visited {*/
/*  background-color: #000000;*/
/*  color: #F6F5F3;*/
/*  text-decoration: none;*/
/*}*/
/*.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {*/
/*    background-color: #E7E7E7;*/
/*    color: #F6F5F3;*/
/*    text-decoration: none;*/
/*}*/
/*.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {*/
/*    background-color: #E7E7E7;*/
/*    color: #555555;*/
/*    text-decoration: none;*/
/*}*/
/*.navbar-default .navbar-nav > , .navbar-default .navbar-nav > a:hover, .navbar-default .navbar-nav > a:focus {*/
/*    background-color: #E7E7E7;*/
/*    color: #555555;*/
/*    text-decoration: none;*/
/*}*/
/*.navbar-nav, .navbar-nav .open > a, .navbar-nav .open > a:hover, .navbar-nav .open > a:focus {*/
/*    background-color: #428BCA;*/
/*    border-color: #F6F5F3;*/
/*    text-decoration: none;*/
/*}*/
/*.navbar-default {*/
/*    background-color: #000000;*/
/*    color: #F6F5F3;*/
/*    text-decoration: none;*/
/*}*/
/*.dropdown-menu, .dropdown-menu > li > a:link, .dropdown-menu > li > a:visited {*/
/*    background-color: #000000;*/
/*    color: #EAEAEA;*/
/*    text-decoration: none;    */
/*}*/
/*.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {*/
/*    background: #428BCA linear-gradient(to bottom, #428BCA 0px, #428BCA 100%) repeat-x;*/
/*}*/
/*.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {*/
/*    !*background-color: #428BCA;*!*/
/*    color: #F6F5F3;*/
/*    text-decoration: none;*/
/*}*/
/*#sidebar.col-md-2 {*/
/*  background-color: #d7d2cf;*/
/*}*/

li.csidebar {
	background-color: #F6F5F3;
}

.clear-all-style {
  clear:both;
}

.login-display{
  vertical-align: top;
  background-color: #D1D1D1;
  float:left;
  color: #000000;
  font-weight: bold;
  margin: 15px 15px 15px 15px;
  width: 100%;
}

.xyz {
    background-color: #FF00DD;
}

/* list data style */

.list-data {
    list-style: none;
    display: table;
    width: 100%;
}
.list-data>li {
    display: table-row;
    scroll-margin-top: 60px;
}
.list-data>li:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

.list-data .header {
    font-weight: bold;
}

.list-data .kode {
    width: 80px;
    padding: 10px;
    display: table-cell;
    border: 1px solid #ccc;
}
.list-data .data {
    position: relative;
    padding: 10px;
    display: table-cell;
    border: 1px solid #ccc;
}
.list-data .data p {
    margin-bottom: 3px;
    word-break: break-word;
}

@media screen and (max-width: 599px) {
    .list-data {
        display: flex;
        flex-direction: column;
    }
    ul.list-data {
        padding: 0;
    }
    .list-data .header {
        flex-grow: 1;
        width: 100%;
    }
    .list-data .header .kode {
        display: none;
    }
    .list-data .header .data {
        width: 100%;
        display: block;
    }
    .list-data li {
        display: flex;
        flex-direction: column;
    }
    .list-data li .kode {
        width: auto;
        text-align: center;
    }
}

.sasana-name {
    font-size: 20px;
    font-weight: bold;
}
.sasana-manager {
    font-size: 1.3em;
    font-weight: bold;
}
.sasana-name,
.sasana-manager {
    margin: 10px auto 0;
}
.sasana-phone {
    margin-bottom: 5px;
}

.sasana-profile {
    padding: 20px;
    margin: 20px;
    border: 2px solid #ccc;
}
.sasana-profile h2, .sasana-profile h3 {
    margin-top: 10px;
}
.sasana-profile:before {
    content: "CLUB";
    display: block;
    margin: -50px auto -10px;
    width: 160px;
    text-align: center;
    padding: 10px;
    font-size: 30px;
    font-weight: bold;
    background: #F6F5F3;
}
.hr-contact-person:before {
    content: "Contact Person";
    display: block;
    margin: -30px auto -10px;
    width: 200px;
    text-align: center;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
    background: #F6F5F3;
}

@keyframes pulse {
    0% {
        background-color: rgba(255,240,230, 0.7);
    }
    100% {
        background-color: rgba(220,255,230, 0.9);
    }
}

.daftar-atlit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
}
.daftar-atlit>li {
    border: 1px solid #ccc;
    border-top: none;
    display:flex;
    scroll-margin-top: 60px;
}
.daftar-atlit>li:target>* {
    animation: pulse 700ms 40 alternate;
    background-color: rgba(220,255,230, 0.7);
}
.daftar-atlit>li.header {
    padding-top: 0;
    margin-top: 0;
    height: 50px;
}
.daftar-atlit>li:first-child {
    border: 1px solid #ccc;
}
.daftar-atlit .atlit-kode {
    display: table-cell;
    width: 80px;
    padding: 10px;
    text-align: right;
    border-right: 1px solid #ccc;
}
.daftar-atlit .atlit-kode.sex0 {
    background: url("../image/women.png") top 10px left 5px no-repeat;
    background-size: contain;
}
.daftar-atlit .atlit-kode.sex1 {
    background: url("../image/men.png") top 10px left 5px no-repeat;
    background-size: contain;
}
.daftar-atlit .atlit-data {
    position: relative;
    display: table-cell;
    padding: 10px;
    flex: 1;
}

@media screen and (max-width: 599px) {
    .daftar-atlit>li {
        flex-direction: column;
    }
    .daftar-atlit .atlit-kode {
        width: auto;
        text-align: center;
        border-right: 0;
        display: block;
    }
}

.daftar-kompetisi {
    list-style: none;
    margin: 0;
    padding: 0;
}
.daftar-kompetisi>li {
    margin: 0 5px 10px;
    width: 45%;
    float: left;
}

.nama-kompetisi {
    font-weight: bold;
}

.team-member {
    position: relative;
    min-height: 200px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 10px;
    list-style: none;
}
.team-member:after {
    display: block;
    clear: both;
    content: "\0009";
    visibility: hidden;
    height: 0;
}

.daftar-regu {
    list-style: none;
    border: 1px solid #ccc;
    margin: 20px;
    padding-left: 0;
}
.daftar-regu>li {
    position: relative;
    border-top: 1px solid #ccc;
    padding: 0 20px 20px;
}
.daftar-regu>li:first-child {
    border-top: none;
}

.display-list {
    list-style: none;
    padding: 0;
}

.display-list > li {
    position: relative;
    padding: 1px 0 10px;
    border-bottom: 1px solid #ccc;
}
.display-list > li:first-child {
    border-top: 1px solid #ccc;
}

@media print {
    .noprint {
        display: none;
    }
}

.form-group-radio {
    position: relative;
    height: 40px;
    margin-bottom: 4px;
}
.form-group-radio .checkbox-inline {
}
.form-group-radio .checkbox-inline select{
    display: none;
}
.form-group-radio .checkbox-inline .radio-filler {
    position: absolute;
    border: 2px solid #ccc;
    background: #ddd;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    padding: 9px 10px;
}
.form-group-radio .checkbox-inline:hover .radio-filler {
    background: #ffc;
    border-color: #dd0;
}
.form-group-radio .checkbox-inline input[type=checkbox]:checked+.radio-filler,
.form-group-radio .checkbox-inline input[type=radio]:checked+.radio-filler {
    background: #cfc;
    border-color: #3d3;
}
.form-group-radio .checkbox-inline input[type=radio]:checked ~ select {
    display: block;
}

.form-group-radio select {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
}
.form-group-radio .checked + select {
    display: block;
}

.pilih-kompetisi-area {
    position: relative;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border: 3px dashed #00aeef;
    background: #d8e9f0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 24px 0;
    cursor: pointer;
    margin-bottom: 20px;
    display: table;
}
.pilih-kompetisi-area .caption {
    display: table-cell;
    vertical-align: middle;
}

.pilih-kompetisi-area.pilih {
    border-style: solid;
}
.pilih-kompetisi-area.pilih .pilihan-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccffcc;
    display: block;
    height: 100%;
    width: 100%;
}

.women .form-control {
    background: #f2dede;
}


/**
* 768
*/

@media screen and (max-width: 767px){
    h2 {
        font-size: 24px;
        font-weight: bold;
    }
    .form-group-radio {
        height: 80px;
    }
    .form-group-radio select {
        top: auto;
        bottom: 10px;
        left: 10px;
        right: 10px;
        margin: auto;
        box-sizing: border-box;
        width: 90%;
        height: 24px;
    }
    .daftar-atlit .atlit-kode {
        /*width: 30px;*/
    }
    .daftar-kompetisi>li {
        width: 100%;
    }
    .wrapper-right-button {
        position: relative;
        text-align: center;
    }
    .wrapper-right-button .btn {
        margin-bottom: 10px;
    }
    .atlit-data {
        text-align: center;
    }
    .pilih-kompetisi-area {
        padding: 12px 0;
    }
    .radio-filler {
        text-align: center;
    }
}

.btn-left {
    float: left;
    width: 45%;
}
.btn-right {
    float: right;
    width: 45%;
}

.nodistance {
  border : 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-collapse:separate; 
  border-spacing:0;
}

.women .male {
    display: none;
}

.men .female {
    display: none;
}

.daftar-jurus {
    list-style: none;
    padding: 0;
}
.daftar-jurus h3 {
    margin-top: 5px;
    margin-bottom: 5px;
}
.daftar-jurus .fr {
    float: right;
    margin-top: -23px;
}
.daftar-jurus>li {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
}

.fa-female {
    color: hotpink;
}
.fa-male {
    color: dodgerblue;
}
.atlit-data .fa-male,
.atlit-data .fa-female {
    font-size: 1.5em;
}
.jurus-atlit {
    list-style: none;
    padding: 0;
}
.jurus-atlit:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.jurus-atlit>li {
    display: block;
    width: 400px;
    float: left;
    border: 1px solid #ddd;
    padding: 10px 30px 10px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    font-size: 16px;
    height: 54px;
    line-height: 34px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-top: 5px;
}
.jurus-atlit>li>a {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
}
section {
    position: relative;
}

@media screen and (max-width: 640px) {
    .daftar-regu {
        margin-left: 0;
        margin-right: 0;
    }
    .jurus-atlit > li {
        width: 100%;

    }
    .wrapper-right-button {
        right: auto;
    }
    .jurus-atlit .wrapper-right-button {
        position: absolute;
        right: 10px;
    }
}

.group_button_list {
    list-style: none;
    padding: 0;
}
.group_button_list:after {
    clear: both;
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
}
.group_button_list>li {
    float: left;
}
.plug-datepicker {
    cursor: pointer!important;
}

.yt-container {
    border: 1px solid #888;
    background-color: #eee;
    padding: 5px;
    margin-top: 2px;
}
.yt-delete {
    position: relative;
    float: right;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    padding: 1px 2px;
    line-height: .7;
    font-weight: bold;
    font-size: 21px;
}
.yt-delete:after {
    content: "";
    display: block;
    clear: both;
}