/**
 * Own basic CSS-File for the whole site
 */

html {
    font-size: calc(0.6em + 0.6vw)
}

tr > td > input {
    width: 100%;
}

.redBackImage {
    max-height: 32px;
}

.rightButtonLine{
    float: right;
}

.icon {
    max-height: 32px;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table
{
    padding-top: 10px;
    table-layout: auto;
    width: 100%;
}

.table
{
    padding-top: 10px;
    table-layout: auto;
    width: 100%;
}

.table-live-games
{
    padding-top: 10px;
    table-layout: fixed;
    width: 100%;
}

.col-id {
    width: 2%;
    white-space: nowrap;
    text-align: center;
}

/**
 * Division Tables
 */
.openRounds{
    text-align: center;
    color: red;
}
.openRoundsGuest{
    text-align: center;
    color: darkgoldenrod;
}
.openRounds > p{
    font-size: calc(0.5em + 0.4vw);
    margin-bottom: 0px;
}

.divisionPlayersTable table tbody tr td {
    font-size: calc(0.5em + 0.4vw)
}


/**
 * Own basic CSS-File for the whole site
 */

tr > td > a {
    width: 100%;
}

.icon{
    width: 50px;
    padding-left: 10px;
}

.insideDiv{
    padding: 5px;
}

.card{
    min-height: 170px;
    margin-bottom: 20px;
}

.messageTextbox{
    height: 500px;
}

.row-success{
    background-color:#9FF781 !important;
}
.row-warning{
    background-color:#f7eb81 !important;
}
.row-error{
    background-color:#ff6961 !important;
}

/**
 * Tabs
 */
.tabs { display: flex; border-bottom: 2px solid #ccc; }
.tab {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 5px;
    border-radius: 6px 6px 0 0;
    background: #f5f5f5;
}
.tab.active {
    background: white;
    font-weight: bold;
    border-bottom: 2px solid white;
}
.tabcontent {
    border: 1px solid #ccc;
    padding: 20px;
    background: white;
    border-radius: 0 6px 6px 6px;
}

th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #eee; }

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 5.9s;
    animation-name: fade;
    animation-duration: 5.9s;
}


@-webkit-keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

/* On smaller screens, decrease text size
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}*/

/* Slideshow container */
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}


.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 5.9s;
    animation-name: fade;
    animation-duration: 5.9s;
}


@-webkit-keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

/* On smaller screens, decrease text size
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}*/