.wrapper{
    overflow-x: hidden;
    max-width: 600px;
    height: 90vh;
}
body {background-color: #333;
    box-sizing: border-box;
    font-family: Helvetica;
    font-size: 20px;
    background-image: url("../images/handicapper_bg.jpg");
    background-repeat: repeat-y;
    background-size: 100%;
    max-width: 600px;
    margin:auto;
    padding: env(safe-area-inset-top) 0 0 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden;
}

h1 {color: black; }
h2 {color: black; width: 100%}
h3 {color: #0000CC;}
h5 {display: none}
p {font-size:20px; text-align: left}
span {background-color: rgba(0, 255, 255, 0.8); width: 100%;}

table {
    border-spacing:0;
    width: 100%;
}

th {background-color: rgba(0, 255, 255, 0.8);
    color: black;
/*    width: 100%;
    height: 100%;*/
    font-weight: bold;
    text-align: left;
    text-indent: 2px;
    white-space:nowrap;
    border:1px solid black;
    box-sizing:border-box;
    border-radius: 5px;
}

td {background-color: rgba(153, 255, 153, 0.8);
    color: black;
    font-weight: bold;
    border:1px solid black;
    text-indent: 2px;
    white-space:normal;
    box-sizing:border-box;
    border-radius: 5px;
    }

label {text-align: left;
/*    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 255, 255, 0.8);*/
    border-radius: 1px;
    }

input {background-color: transparent;
    color: black;
    font-weight: bold;
    font-size:20px;
    outline: none;
    outline-width: 0;
    border: 0;
    width: 100%;
    height: 100%;
    padding:0;
    text-align: left;
    vertical-align: middle;
    text-indent: 2px;

    }

input[type=checkbox] {
    outline: 2px;
    outline-width: 2px;
    border: 1px;
    width: 20px;
    height: 20px;
    padding:1px;
    vertical-align: middle;
    text-align:center;
}

select {font-weight: bold;
    color: black;
    font-size: 20px;
    background-color: rgba(255, 204, 102, 0.8);
    border-radius: 1px;
    width:100%;
    height: 100%;
    padding: 0px;
    border: none;
    box-sizing:border-box;
    text-indent: 0px;
    }

dialog {
    font-size: 20px;
    white-space:normal;
}

.grid_select{
    color: black;
    font-size: 20px;
    background-color: inherit;
    border-radius: 1px;
    width:100%;
    height: 100%;
    padding: 0px;
    border: none;
}
.title_icons{
    width:45px;
    height:45px;
    border-radius: 10px;
}

.title_icons_div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.loader_container{
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
  width: 150px;
  height: 150px;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
}

.hot_link{
    background-color:transparent;
    color: red;
    text-decoration-line: underline;
    white-space:normal;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.title_buttons {white-space:nowrap;}
.required {
    background-color: rgba(255, 204, 102, 0.8);
    border-spacing: 1px;
    text-indent: 0px;
}
.subheading {background-color: rgba(255, 255, 100, 0.8);
    color: rgba(0, 0, 255, 1.0);
    text-decoration-line: underline;
    white-space:normal;
}
.login_entry {width: 100%;}
.course_label {width: 100px; text-align: left; font-style: italic;}
.course_details {width: 100%; text-align: center}
.info {background-color: rgba(0, 255, 255, 0.8); border: 1px solid black; font-weight: bold;}
.space_row{height: 10px}
.tee_selector {width: 100%; height:100% }

.inIndex {background-color: fuchsia;}
.outIndex {background-color: rgba(166, 166, 166, 0.8);}
.rounds_label {padding-right: 1px; font-style: italic;}
.rounds_label_alt {}
.clear_cell {background-color: transparent; border:0px; border-spacing: 0px; border-collapse: collapse;}
.sub_table {background-color: transparent; border:0px; border-spacing: 0px;}
.center_me {text-align: center;}
.center_me_i {text-align: center;font-style: italic;}
.center_button {margin: 0 auto; display: block;}

.eclectic_left{text-align: left}
.eclectic_right{text-align: right}

#my_date{
    white-space:nowrap;
}
#user_name_hc{padding: 8px}
#add_rounds_form {padding: 0;}
#add_rounds_table table {border-collapse: collapse;border-spacing: 0px;}
#add_rounds_table td th {border-collapse: separate;}
#btn_grp_rounds {display: none}
/*#more {display: none}*/
#user_switcher{background-color: rgba(255, 100, 255, 0.5)}
#content{
    padding: 5px;
    /*height:100vh;*/
}
#myChart{
    background-color:rgba(200,200,200,0.8);
    border: 2px solid black;
    border-radius: 10px;
    }

.plot-container{border-radius: 10px;}
.svg-container{border-radius: 10px;}
.main-svg{border-radius: 10px;}

button {background-color: black;
 font-size: 20px;
 width: 200px;
 height: 40px;
 color: white;
 font-weight: bold;
 font-family: sans-serif;
 cursor: pointer;
 padding: 1px; /* Some padding */
 border-radius: 10px; /* Rounded corners */
}

.label_i {  background-color: rgba(0, 255, 255, 0.8);
  text-align: left;
  padding: 5px 5px;
  font-size: 20px;
  border-radius: 10px;
  border: 2px solid black;
  font-style: italic;
}

.label {  background-color: rgba(0, 255, 255, 0.8);
  text-align: left;
  padding: 5px 5px;
  font-size: 20px;
  border-radius: 10px;
  border: 2px solid black;
}

.hl_lab {  background-color: rgba(0, 255, 255, 0.8);
  text-align: center;
  padding: 5px 5px;
  font-size: 20px;
  border-radius: 10px;
  border: 2px solid black;
  font-style: italic;
}

.hl_info {  background-color: rgba(0, 255, 155, 0.8);
  text-align: center;
  padding: 5px 5px;
  font-size: 20px;
  border-radius: 10px;
  border: 2px solid black;
}

.entry {  background-color: rgba(255, 204, 102, 0.8);
  box-sizing: border-box;
  text-align: left;
  font-size: 20px;
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 2px solid black;
}

.grid-container {
    display: grid;
    width: 100%;
    box-sizing:border-box;
    margin-top: 5px;
    margin-bottom: 5px;

}

.sub_title{background-color: rgba(150, 255, 255, 0.8);
    text-align: center;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    border: 3px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
    margin:auto;
    margin-block-start: 20px;
    margin-block-end: 5px;
    box-sizing:border-box;
    }

.button {background-color: black;
    font-size: 20px;
    width: 100%;
    height: 100%;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
    padding: 10px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

.del_button {
    background-color: black;
    font-size: 15px;
    width: 60px;
    height: 20px;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
    padding: 1px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

.table_button{
    background-color: black;
    width: 100%;
    height: 100%;
    font-size: 15px;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
    padding: 1px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

.header_row {
    display: grid;
    background-color: rgba(255, 255, 100, 0.8);
    grid-template-columns: 10% 80% 10% ;
    justify-content: center;
    text-align: center;
    padding: 5px;
    font-size: 25px;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid black;
    place-items: center;
    position: sticky;
    top: 3px;
    margin: 3px;
}

.button_row {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: 32% 32% 32% ;
    text-align: center;
    padding: 5px;
    font-weight: bold;
    border-radius: 10px;
}

.view_rounds{
    font-size: 15px;
}

.important{
    background-color: rgba(255, 120, 120, 0.8);
}

.myFooter{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;

    background-color: #333;
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 10vh;
    margin-right: 0;
    margin-left: 0;
}

.myFooter a{
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    height: 10vh;
    width: 20%;
}

.nav{
    background-color: #333;
    font-size: 16px;
}

.init_page{
    background-color: #04AA6D;
}

.nav_space{
    padding-bottom: 10vh;
}

#course_filter{
    position: relative;
    overflow: auto;
    /*top: 0;*/
}

.icon-size{
    font-size: 3vh;
}

.nav-more{
    height: 7vh;
    vertical-align: middle;
}

.dropup-content {
    position: sticky;
    bottom: 10vh;
    right: 0;
    text-align: right;
    background-color: #333;
    width: 100%;
}
.dropup-content a{
    color: #f2f2f2;
    text-decoration: none;
    height: 8vh;
    width: 20%;
}

.video_container{
    display: grid;
    justify-content: center;
}

.qr{width:50vw; height:60vw}