/* body and other overall modifiers */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* Login page */

.login {
    /* background-color: #0055a4; */
    position: relative;
    top: 0px;
    padding-top: 400px;
    margin: auto;
    width: 100%;
    padding-left: auto;
    color: white;
    height: calc(100vh - 400px);
    background-repeat:  no-repeat;
    background-position-x: center;
    background-position-y: 150px;
    background-image: url("/assets/goodyear_white.png");
    background-size: 500px auto;
}

.loginContent {
    width: 50%;
    margin: 0 auto;
    padding: 15px 50px;
    /* background-color: white; */
    border-radius: 25px;
}

.loginContent h1{
    text-align: center;
    font-size: 1.2em;
    text-transform: uppercase;
    font-style: italic;
}

.loginContent h2{
    text-align: center;
    font-size: 0.9em;
    /* font-variant-caps: all-petite-caps; */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 100;
}

.loginContent h3{
    text-align: center;
    font-size: 0.9em;
    /* font-variant-caps: all-petite-caps; */
    /* letter-spacing: 2px; */
    font-weight: 100;
    margin-top: 35px;
}

.loginContent input{
    width: 350px;
    margin: 10px auto;
    display: block;
}

.loginContent button{
    width: 150px;
    margin: 0 auto;
    display: block;
}

/* Styling the top menu bar */

.menuBar {
    background-color: #0055a4;
    color: white;
    top: 0px;
    position: fixed;
    width: 100%;
    margin: 0; 
    text-transform: uppercase;
    font-size: 15px;
    padding: 11px 20px;
    background-repeat: no-repeat;
    background-position: 20px 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.menuBar a {
    color: white;
    text-decoration: none;
}

.menuBar a:hover {
    text-decoration: underline;
}

.nav-link {
    padding: 9px 30px;
    float: left;
}

.menuBar img {
    padding: 0px 20px;
    float: left;
}

.menuBar P {
    float: left;
    margin: 0 25px;
}

#navText {
    padding: 9px 30px;
    float: left;
    font-weight: 600;
}


#adminHeader {
    padding: 9px 75px;
    float: left;
    font-weight: 600;
    letter-spacing: 2px;
    font-style: italic;
}

#eventSelector{
    float: left;
}

#carSelector{
    float: left;
}

/* div for the main content under the menu bar */


#plots {
    display: grid;
    grid-template-columns: 50% 50%;
}


.mainContentContainer {
    margin: 70px 10px;
    background-color: white;
    display: block
}

/* Session notes */

#debriefrows .row {
    display: grid;
    grid-template-columns: 900px auto;
    margin: 5px 0;
}

/* Weather */
#weathertable{
    /* z-index: -1; */
    padding-top: 15px;
    float: left;
    position: relative;
    width: 600px;
    left: 50%;
    margin-left: -300px;
}

.export{
    margin: 5px;
}

#weathertable table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 600px;
    /* margin: 50px 0 30px -300px; 
    position: absolute;
    left: 50%; */
    
}

#weathertable th {
    background-color: lightgray;
    text-align: center;
}

#weathertable td {
    text-align: center;
}

.weatherPlots{
    width: 50%;
    float: left;
}

/* .dash-table-container .previous-next-container{
    text-align: center;
    padding-top: 15px;
} */

/* Tire wear page */

#setDropdown {
    margin: 10px;
    padding: 10px;
    background-color: lightgrey;
    border-radius: 10px;
    width: fit-content;
}

#setDropdown P {
    display: inline;
    float: left
}

#tyre_wear {
    float: left;
    width: 60%;
    margin-left: 20px;
    display: block;
}

#detailTable {
    float: left;
    margin-left: 45px;
    margin-bottom: 35px;
    width: 35%;
    display: block;
}

#html_table td {
    text-align: center;
    border: 1px solid lightgrey;
    padding: 3px;
}

#html_table table {
    border-spacing: 0;
    border-collapse: collapse;
}

#html_table th {
    padding: 3px;
    background-color: lightgray;
    border: 1px solid darkgray;
}



/* tyre spec css colours*/

.fittingsheetbarcode{
    background-color: Grey;
    color: LightGrey
    }
    
.fittingsheetnotes{
    background-color: LightGrey;
  }
#rows{
    border-collapse: collapse;
    font-size: 14px;
    /* margin:1px */
}

#rows th,td{
    border:1px solid black;
    /* margin: 1px; */
    text-align: center;
}

#rows tr:nth-child(4n),
#rows tr:nth-child(4n+1) {
    background-color: lightgray;
}

#debrieftable {
    border-collapse: collapse;
    margin: 5px;
    width: 100%;
    height: 100%
}

/* #debrieftable table ,
#debrieftableNotes table {
    height: 100%;
} */

#debrieftable th, 
#debrieftable td, 
#debrieftableNotes th, 
#debrieftableNotes td  {
    border:1px solid black;
    border-collapse: collapse;
}

#debrieftable th,
#debrieftableNotes th {
    height: 40px;
    background-color: lightgray;
}

#debrieftableNotes {
    border-collapse: collapse;
    margin: 5px 5px 5px 10px;
    width: 100%;
    height: 100%;
}


#carSelector {
    margin: 0 5px;
    display: inline-block;
    color: black;
    width: 250px;
}

.taskbar_title {
    text-align: center;
    margin: 0px 5px;
    display: block;
    }

#eventSelector {
    margin: 0 5px;
    display: inline-block;
    color: black;
    width: 250px;
}




#wear_per_stint_table td.max {
    color:crimson
}
    
    
.max {
color:red
}    

/* runsheet */

.tooltip{

    color: darkgray;
    font-size: 10pt;
}

.tooltip .tooltiptext{
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    font-style: italic;
    z-index:2;
}

.tooltip:hover .tooltiptext{
    visibility: visible;
}

/* .Tabs-container{
    
} */

.Tabs {
    padding: 0px;
    border-bottom: 1px solid lightgray;
    /* height: 35px; */
}

.Tab {
    line-height: 0px;
    /* padding: 0px;
    border-top: 1px solid transparent;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    background-color: #f9f9f9; */

}

.Tab--selected {
    /* padding: 0px; */
    /* border-top: 3px solid #e36209; */
    /* line-height: 35px; */
    font-weight: bold;
    /* border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey; */

}


.runSheetPlots{
    width: 45vw;
    float: left;
}

#table table {
    font-family: Arial, Helvetica, sans-serif;
    overflow-wrap: break-word;
}

details summary{
    text-align: center;
    padding: 10px 5px;
    background-color: #F0F0F0;
    margin: 0px;
    border-radius: 7px;
}

details{
    /* padding: 5px 10px; */
    margin: 15px 10px;
    border-style: solid;
    border-color:lightgray;
    border-radius:10px;
}

/* Overlord */

/* details summary{
    text-align: center;
    padding: 10px 5px;
    background-color: #F0F0F0;
    margin: 0px;
    border-radius: 10px;
} */

/* details{ */
    /* padding: 5px 10px; */
    /* margin: 15px 10px;
} */

#overlordTSETable details summary{
    text-align: center;
    padding: 10px 5px;
    background-color: #F0F0F0;
    margin: 0px;
    border-radius: 10px;
}

#overlordTSETable details{
    /* padding: 5px 10px; */
    margin: 15px 10px;
}

#adminLogout {
    padding: 9px 50px;
    float: right;
    /* font-weight: 600; */
}

/* Fitting sheet */

#tireSets{
    border-collapse: collapse;
    font-size: 14px;
    /* margin:1px */
    width: 80%
}

#tireSets th,td{
    border:1px solid black;
    /* margin: 1px; */
    text-align: center;
}

#tireSets tr:nth-child(4n),
#tireSets tr:nth-child(4n+1) {
    background-color: lightgray;
}

/* Tire Wear styling */

#setselector {
    margin: 0px 30px;
    color: black;
    width: 750px;
}

.wearoverviewdropdown{
    margin: 10px auto 10px 35px;
    color: black;
    width: 40%;
    float: left;
}

#tireOverviewCompare {
    width: 60%;
    display: block;
    float: left;
}

#barplot_voluwear {
    display: block;
    float: left;
    width: 40%;
}

#wearreview {
    width: 100%;
    border-spacing: 0;
    margin: 20px 0;
}

#wearreview table{
    border-collapse: collapse;
}


#voluwear_table {
    margin: 0px;
}

#voluwear_table th {
    padding: 3px;
    background-color: lightgray;
    border: 1px solid darkgray;
}

#voluwear_table table {
    margin: 0 auto;
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
}

#voluwear_table td {
    text-align: center;
    border: 1px solid lightgrey;
    padding: 5px;
}

#peakwear_table {
    margin:0;
}

#peakwear_table th {
    padding: 3px;
    background-color: lightgray;
    border: 1px solid darkgray;
}

#peakwear_table table {
    margin: 0 auto;
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
}

#peakwear_table td {
    text-align: center;
    border: 1px solid lightgrey;
    padding: 5px;
}

#theo_table {
    margin:0;
}

#theo_table th {
    padding: 3px;
    background-color: lightgray;
    border: 1px solid darkgray;
}

#theo_table table {
    margin: 0 auto;
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
}

#theo_table td {
    text-align: center;
    border: 1px solid lightgrey;
    padding: 5px;
}

#balance_table {
    margin: 0px;
}

#balance_table table {
    margin: 0 auto;
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
}

#balance_table td {
    text-align: center;
    border: 1px solid lightgrey;
    padding: 5px 25px;

}

#balance_table th {
    padding: 3px;
    background-color: lightgray;
    border: 1px solid darkgray;
}

#weartable {
    margin: 30px;
    height: 175px;
    width: 60%;
}

#weartable table {
    margin: 0;
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
}

#weartable td {
    text-align: center;
    border: 1px solid lightgrey;
    padding: 5px 25px;

}

#weartable th {
    padding: 3px;
    background-color: lightgray;
    border: 1px solid darkgray;
}

.InitWearVal {
    background-color: Grey;
    color: LightGrey
}

/* css for tyre wear overview */

.wearCorners{
    text-align: center;
    margin: 0px;
    padding:6px;
    font-weight: bold;
    font-style: italic;
    color: white;
    background: lightslategray
}

.volwear{
    background-color: #cbf078;
    border: 1px solid black;
    border-collapse: collapse;
}

.wear_stats{
    background-color: #f8f398;
    border: 1px solid black;
}

#wearreview{
    font-size: 14px;
    border-collapse: collapse;
}

#wearreview th,td{
    border: 1px solid black;
    border-collapse: collapse;
    /* margin: 0px; */
}

.balance{
    background-color: #f1b963;
    border: 1px solid black;
    border-collapse: collapse;
}

.weight{
    background-color: #e46161;
    }

.wearTabs-container{
    width: 450px;

}

.wearTabs {
    padding: 0px;
    border-bottom: 1px solid lightgray;
    /* height: 35px; */
}

.wearTab {
    line-height: 0px;
    /* padding: 0px;
    border-top: 1px solid transparent;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    background-color: #f9f9f9; */

}

.wearTab--selected {
    /* padding: 0px; */
    /* border-top: 3px solid #e36209; */
    /* line-height: 35px; */
    font-weight: bold;
    /* border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey; */

}

/*  ?? */


.SubMenu {
    padding: 7px 0px;
    margin-right: 0px;
    margin-left: auto;
    font-style: oblique;
    color: white;
    font-family: Arial, Helvetica, sans-serif;

}

.menuOptions:active {
    padding: 7px 10px;
    color: yellow;
}