/* From: https://www.browserstack.com/guide/create-browser-specific-css */
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
selector { 
/* property:value; */
}
}}
/* Test website on real Safari 11+ */

input { display: none; }                /* hide radio buttons */
input + label { display: inline-block } /* show labels in line */
input ~ .tab { display: none }          /* hide contents *//* show contents only for selected tab */
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2,
#tab3:checked ~ .tab.content3,
#tab4:checked ~ .tab.content4,
#tab5:checked ~ .tab.content5 { display: block; font-size:  max(10px, min(3vw, 20px));}
input + label {             /* box with rounded corner */
  border: 1px solid #999;
  background: #EEE;
  padding: 4px 12px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
}
input:checked + label {     /* white background for selected tab */
  background: #FFF;
  border-bottom: 1px solid transparent;
  font-size: max(8px, min(5vw, 25px));
}
input ~ .tab {          /* grey line between tab and contents */
  border-top: 1px solid #999;
  padding: 12px;
  font-size: max(6px, min(5vw, 10px));
}


/* https://stackoverflow.com/questions/23984629/how-to-set-min-font-size-in-css*/
.myImage {
    width: max(200px, min(30vw, 500px));
}
.tabImage {
    width: max(200px, min(30vw, 250px));
}


table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 15px;
}

/* class for triggering sorting of table when clicking on header */
.th_sortable {
    /*cursor: url(click-to-sort_thumbnail.png), nw-resize;*/
    cursor: ns-resize;

}

.center {
text-align: center;
}

a {
    color: rgb(0, 0, 120);
    text-decoration: none;
}

a:hover {
    color:#00A0C6; 
    text-decoration:none; 
    cursor:pointer;  
}

.select_league_table_buttons {
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 4%;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: black;
    background-color: yellow;
    border: none;
    border-radius: 15px;
    box-shadow: 0 2px #999;
}

.row_of_league_table_buttons {
    white-space:nowrap;
}

.up_down_arrow_in_league_table {
    font-size:xx-large;
    color:Gray;
    font-family:'Times New Roman',sans-serif;
}

body {
    /* font-family: 'Times New Roman', sans-serif; */
    font-family: 'Ubuntu', sans-serif;
}


#head_to_head{
}

#head_to_head_table{
    border: 1px solid black;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    /* -moz-border-radius: 19px; */
    overflow: hidden;
    text-align: center;
    margin: 3%;
    box-shadow: 2px 2px lightgray;
    background-color:rgb(250,250,250);
}

.head_to_head_result_user{
    font-size: x-large;
    padding-left: 3vw;
    padding-right: 3vw;
}
.head_to_head_result_wins{
    font-size: xx-large;
    border: 1px solid black;
    border-radius: 5px;
    padding: 1vw 1vw;
    background-color: white;
}
.head_to_head_result_colon{
    font-size: xx-large;
    padding-left: 3vw;
    padding-right: 3vw;
}
.head_to_head_result_sub_info{
    font-size: large;
    padding-left: 3vw;
    padding-right: 3vw;
}
.head_to_head_select_button{
    border: 1px solid black;
    font-size: small;
    cursor: pointer;
    padding: 1vw;
    color: black;
    background-color: lightyellow;
    border-radius: 5px;
    padding: 1vw 1vw;
    margin: 2vw;
    box-shadow: 2px 2px lightgray;

}
.head_to_head_action_button{
    text-align: center;
    border: 1px solid black;
    display: block;
    font-size: small;
    cursor: pointer;
    padding: 1vw;
    color: black;
    background-color: yellow;
    border-radius: 5px;
    padding: 1vw 1vw;
    margin: 2vw;
    box-shadow: 2px 2px lightgray;

}
#head_to_head_hide_results_button{
    display: none;
    float: right;
    margin-right: 5px;
    margin-top: 5px;
}