.teetimebox {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.teetimebox .row {
    background: #999999;
}

.teetimebox .row.header {
    flex: 0 1 auto;
    border-top: 2px solid white;
}

.teetimebox .row.topheader {
    flex: 0 1 auto;
}

.teetimebox .row.content {
    flex: 1 1 auto;
    width:100%;
}

.teetimebox .row.footer {
    flex: 0 1 40px;
}

.teetimebox-container {
    display: contents;
}

.HeaderImage {
    width: 36pt;
    height: 36pt;
}

.SignupSheetHeader {
    text-align: center;
    vertical-align: middle;
    background-color: blue;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: white;
    width: 100%;
    height: 42pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.SignupSheetHeaderNote {
    text-align: justify;
    vertical-align: middle;
    background-color: lightblue;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    width: 100%;
    height: auto;
    border: 2px solid black;
    border-collapse: collapse;
}

.SignupSheetBody {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bolder;
    color: black;
    background-color: white;
    width: 100%;
    height: 20pt;
    border: 2px solid black;
    border-collapse: collapse;
}



.TeeTimeTable {
    border: 2px solid black;
    background-color: white;
}
.TeeTimeSheetMainHeaderLeft {
    text-align: center;
    vertical-align: middle;
    color: black;
    width: 20%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}
.TeeTimeSheetMainHeaderCenter {
    text-align: center;
    vertical-align: middle;
    background-color: lightgray;
    font-family: Arial;
    font-size: 13pt;
    font-weight: bolder;
    color: black;
    padding: 4pt;
    width: 60%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}
.TeeTimeSheetMainHeaderRight {
    text-align: center;
    vertical-align: middle;
    color: black;
    width: 20%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}
.TeeTimeSheetHeaderLeft {
    text-align: center;
    vertical-align: middle;
    background-color: lightgray;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    width: 20%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSheetHeaderCenter {
    text-align: center;
    vertical-align: middle;
    background-color: lightgray;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    width: 60%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSheetHeaderRight {
    text-align: center;
    vertical-align: middle;
    background-color: lightgray;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    width: 20%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSheetHeaderNote, .TeeTimeSheetHeaderNoteAlert {
    text-align: center;
    vertical-align: middle;
    background-color: lightblue;
    font-family: Arial;
    font-weight: bold;
    width: 100%;
    height: auto;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSheetHeaderNote {
    font-size: 11pt;
    color: black;
}

.TeeTimeSheetHeaderNoteAlert {
    font-size: 11pt;
    color: red;
}


.TeeTimeHeaderLeft {
    text-align: center;
    vertical-align: middle;
    background-color: blue;
    font-family: Arial;
    font-size: 13pt;
    font-weight: bold;
    color: white;
    width: 20%;
    height: 18pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeHeaderCenter {
    text-align: center;
    vertical-align: middle;
    background-color: blue;
    font-family: Arial;
    font-size: 13pt;
    color: white;
    width: 60%;
    height: 18pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeHeaderRight {
    text-align: center;
    vertical-align: middle;
    background-color: blue;
    font-family: Arial;
    font-size: 11pt;
    color: white;
    width: 20%;
    height: 18pt;
    min-height: 18pt;
    border: 2px solid black;
    border-collapse: collapse;
}


.TeeTimeLeft {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bolder;
    color: black;
    width: 20%;
    height: 18pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeCenter {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bolder;
    color: black;
    width: 60%;
    height: 18pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeRight {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bolder;
    color: black;
    width: 20%;
    height: 18pt;
    border: 2px solid black;
    border-collapse: collapse;
}
.GenderImage {
    width: 18pt;
    height: 18pt;
}
.teeAssignment {
    border: 0;
}

.waitlisted {
    background-color: white;
    border: 1px solid black;
    border-radius: 3px;
    color: black;
}

.parked {
    background-color: white;
    border: 1px solid black;
    border-radius: 3px;
    color: black;
}

.out {
    background-color: white;
    border: 1px solid black;
    border-radius: 3px;
    color: black;
}

.teeAssignment:hover, .seedable:hover {
    cursor: pointer;
}

.seedable {
    border: 2px solid black;
    border-collapse: collapse;
}
.seedzone {
    border: 2px solid black;
    border-collapse: collapse;
}
.waitzone {
    border: 2px solid black;
    border-collapse: collapse;
    width: 100%;
    height: calc((85vh/3) - 16% - 40px);
    text-align: center;
    background-color: lightgoldenrodyellow;
    border-radius: 4px;
    padding: 3px 3px 3px 12px;
    overflow-y: auto;
}
.parkzone {
    border: 2px solid black;
    border-collapse: collapse;
    width: 100%;
    height: calc((85vh/3) - 16% - 40px);
    text-align: center;
    background-color: lightgreen;
    border-radius: 4px;
    padding: 3px 3px 3px 12px;
    overflow-y: auto;
}

.outzone {
    border: 2px solid black;
    border-collapse: collapse;
    width: 100%;
    height: calc((85vh/3) - 16% - 40px);
    text-align: center;
    background-color: lightslategrey;
    border-radius: 4px;
    padding: 3px 3px 3px 12px;
    overflow-y: auto;
}

.TeeTimeSingleSheetMainHeaderLeft {
    text-align: center;
    vertical-align: middle;
    color: black;
    width: 12%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSingleSheetMainHeaderCenter {
    text-align: center;
    vertical-align: middle;
    background-color: lightgray;
    font-family: Arial;
    font-size: 14pt;
    font-weight: bolder;
    color: black;
    padding: 4pt;
    width: 76%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSingleSheetMainHeaderRight {
    text-align: center;
    vertical-align: middle;
    color: black;
    width: 12%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSingleSheetHeaderLeft {
    text-align: left;
    vertical-align: middle;
    background-color: lightgray;
    font-family: Arial;
    font-size: 11pt;
    font-weight: bold;
    color: black;
    width: 50%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSingleSheetHeaderRight {
    text-align: right;
    vertical-align: middle;
    background-color: lightgray;
    font-family: Arial;
    font-size: 11pt;
    font-weight: bold;
    color: black;
    width: 50%;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSingleSheetHeaderNote, .TeeTimeSingleSheetHeaderNoteAlert {
    text-align: center;
    vertical-align: middle;
    background-color: lightblue;
    font-family: Arial;
    font-weight: bold;
    width: 100%;
    height: auto;
    border: 2px solid lightgray;
    border-collapse: collapse;
}

.TeeTimeSingleSheetHeaderNote {
    font-size: 11pt;
    color: black;
}

.TeeTimeSingleSheetHeaderNoteAlert {
    font-size: 11pt;
    color: red;
}


.TeeTimeSingleHeaderLeft {
    text-align: center;
    vertical-align: middle;
    background-color: blue;
    font-family: Arial;
    font-size: 11pt;
    font-weight: bold;
    color: white;
    width: 12%;
    height: 16pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeSingleHeaderCenter {
    text-align: center;
    vertical-align: middle;
    background-color: blue;
    font-family: Arial;
    font-size: 11pt;
    color: white;
    width: 26%;
    height: 16pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeSingleHeaderRight {
    text-align: center;
    vertical-align: middle;
    background-color: blue;
    font-family: Arial;
    font-size: 11pt;
    color: white;
    width: 12%;
    height: 16pt;
    border: 2px solid black;
    border-collapse: collapse;
}


.TeeTimeSingleLeft {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bolder;
    color: black;
    width: 12%;
    height: 14pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeSingleCenter {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bolder;
    color: black;
    width: 26%;
    height: 14pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.TeeTimeSingleRight {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bolder;
    color: black;
    width: 12%;
    height: 14pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.GenderSingleImage {
    width: 12pt;
    height: 12pt;
}

.SingleNextPlayDateMainHeader {
    width: 100%;
    border: 2px solid lightgray;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
    background-color: darkgreen;
    font-family: Arial;
    font-size: 12pt;
    font-weight: bold;
    color: white;
    height: 16pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.SingleNextPlayDateLeft {
    vertical-align: middle;
    text-align: left;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bolder;
    color: black;
    width: 75%;
    height: 14pt;
    border: 2px solid black;
    border-collapse: collapse;
}

.SingleNextPlayDateRight {
    text-align: center;
    vertical-align: middle;
    text-align: center;
    vertical-align: middle;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bolder;
    color: black;
    width: 25%;
    height: 14pt;
    border: 2px solid black;
    border-collapse: collapse;
}