/* Tablets */
@media only screen and (min-width: 740px)
{



    h2
    {
/*        margin-bottom: 5px !important;*/
    }

    .scorePanel {
/*
        max-width: 900px;
        padding-left: 5%;
        padding-right: 5%;
*/
/*        margin: auto;*/
/*        width: 100%;*/
/*        padding-bottom: 0px;*/
    }
    .BottomPanel {
        max-width: 900px;
        padding-left: 5%;
        padding-right: 5%;
        margin: auto;
        margin-top: 115px;

    }
    .footer {
        max-width: 900px;
        padding-left: 5%;
        padding-right: 5%;
        margin: auto;
    }
    #patientTitle, #ieSectionTitle{cursor: auto;}
    .hideTools
    {
        display: none;
    }

    .toolChoices
    {
        border-radius: 4px;
    }
    .ToolPanel
    {
        margin-bottom: -50px;
    }

    .logo {
        margin-right: 10px;
    }
    .scorePanel {
        border-radius: 4px;
    }
    .scorePanelSection {
        margin-bottom: 0px;
    }
    
    
    
    
    
    
    .tools {
        margin-left: 60px;
    }
    .toolBtn {

        padding-left: 10px;
        padding-right: 10px;
    }

    
    
    
    .productName {
        grid-row: 1;
        grid-column: 1 /span 3;
        font-family: var(--font-family);

        font-weight: bold;
        align-self: center;
        justify-self: center;
        color: rgba(0,0,0,0.8);
        text-align: center;
        color: rgba(255,255,255,0.9);
    }
    
    .tools {
        grid-area: menu;
        justify-self:start;
        margin-left: 60px;
        margin-right: 0px;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .segmented-control__Label {
    background: #eee;
    }

    
    
    
    .hamburgerMenu {
        display: flex;
    }
    .kebabMenu {
        display: none;
    }
    
    
    .SectionTitle {
        padding-left: 0px;
    }
    
    

    #panelChoice
    {
        font-size: 18px;
        margin-right: 10px;
        margin-left: 10px;
        background: rgba(1, 1, 1, 0.07);
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }
    .segmented-control__Input:checked + #panelChoice
    {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
         
    }
    .segmented-control__Input:hover:not(:checked) + #panelChoice
    {
        color: black;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        background: rgba(255,255,255,0.5);
            
    }
    .selectorWithLogo
    {
        justify-content: flex-start;
        flex-direction: row;
    }
    .selectorIcon
    {
        height: 1.5em;
        width: 1.5em;
        padding-right: 5px;
    }
    .reqInfoIcon
    {   
        background-size: 1.5em 1.5em;
        padding-right: 10px;
    }
    .dataIcon
    {
        background-size: 1.5em 1.5em;
        padding-right: 10px;
    }
    .resultsIcon
    {
        background-size: 1.5em 1.5em;
        padding-right: 10px;
    }
    .plotIcon
    {
        background-size: 1.5em 1.5em;
        padding-right: 10px;
    }
    .baselineIcon
    {
        background-size: 1.5em 1.5em;
        padding-right: 10px;
    }
    .ieIcon
    {
        background-size: 1.5em 1.5em;
        padding-right: 10px;
    }
     .importsIcon
    {
        background-size: 1.5em 1.5em;
        padding-right: 10px;
    }
        

    .patientLeftPicker
    {
        padding-top: 0px;
    }
    
    
    .tools {
        grid-template-areas: "save load clearButton";
    }
    
    
    .baselineSubmitBtn{
    text-align: center;
    font-family: var(--font-family);
    color: white;
    background-color: rgba(71, 170, 181, 1);
    box-shadow: 4px 0 1px -1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding-top: 16px;
    padding-right: 60px;
    padding-left: 60px;
    padding-bottom: 16px; 
    grid-row-start: 3;
    grid-column-start: 2;
    cursor: pointer;
    
}
    .baselineSubmitBtn a {
    text-align: center;
    color: white;
    font-family: var(--font-family);
    font-size: 16px;
    justify-self: left;
    align-self: center;
   
    
}
    .exitHomeBtn{
    cursor: pointer;
    text-align: center;
    font-family: var(--font-family);
    background-color: rgba(71, 170, 181, 1);
    box-shadow: 4px 0 1px -1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    margin-top: 0px;
    padding-top: 1px;
    padding-right: 60px;
    padding-left: 60px;
    padding-bottom: 1px; 
    grid-row-start: 3;
    grid-column-start: 1;
    padding-left:0;
    padding-right:0;
    width: 100%;
  
    }
    
    .exitHomeBtn a{
    display:block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: var(--font-family);
    font-size: 16px;
    height: 70%;
    padding-top: 15px;
    }
    
    .exitBaselineBtn{
    display: block;
    cursor: pointer;
    font-family: var(--font-family);
    text-align: center;
    color: white;
    background-color: rgba(71, 170, 181, 1);
    box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    margin-top: 45px;
    grid-column-start: 1;
        
    }

    .exitBaselineBtn a{
    display:block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: var(--font-family);
    font-size: 16px;
    padding-top: 20px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 20px;
    }
    
    .exitBaselineBtn2{
        display: none;
    }
    .exitBaselineBtn2 a{
        display: none;
    }
    
     .inputSubmitBtn{
        font-family: var(--font-family);
        text-align: center;
        color: white;
        cursor: pointer;
        background-color: rgba(71, 170, 181, 1);
        box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        padding-top: 10px;
        padding-right: 60px;
        padding-left: 60px;
        padding-bottom: 20px;
        margin-bottom: 10px
    }
    
    .inputSubmitBtn a{
    display:block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: var(--font-family);
    font-size: 16px;
    height: 100%;
    padding-top: 11px;
    }
    
    .resultSubmitBtn{
    text-align: center;
    font-family: var(--font-family);
    color: white;
    background-color: rgba(71, 170, 181, 1);
    box-shadow: 3px 0 1px -1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    margin-left: 29%;
    width: 5%;
    margin-bottom: 10px;
    padding-right: 160px;
    padding-left: 170px;
    padding-top: 20px;
    padding-bottom: 20px;
    }
    
    .resultSubmitBtn a{
    display:block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: var(--font-family);
    font-size: 16px;
    }
    
    
    .inputBackBtn{
    text-align: center;
    font-family: var(--font-family);
    color: white;
    background-color: rgba(71, 170, 181, 1);
    box-shadow: 3px 0 1px -1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    margin-left: 29%;
    width: 5%;
    padding-right: 160px;
    padding-left: 170px;
    padding-top: 20px;
    padding-bottom: 20px;
    }
    
    .inputBackBtn a{
    text-decoration: none;
    color: white;
    font-family: var(--font-family);
    font-size: 16px;
    }
    
    
.BottomPanel
    {
        display: grid;
        grid-template-areas:
        "Selectors"
        "SelectedPanel";

        grid-gap: 0px;
        border-radius: 4px;

        margin-bottom: 0px;
    }

    #dataDropdown, #resultsDropdown, #plotDropdown, #plotClicker, #dataClicker, #resultsClicker, #ieDropdown, #ieClicker
    {
        display: none;
    }

    .Selectors
    {
        background: none;
        position: relative;
        top: auto;
    }

    .Settings
    {
/*
        grid-template-columns: 1fr 3fr;
        grid-template-areas:
            "patient active"
            "baseline active"
            "GFR active"
            "UO active";
*/
        border-radius: 4px;
        padding-top: 40px;

/*
        padding-top: 20px;
        padding-bottom: 20px;
*/

/*        grid-gap: 0px;*/

    }
    
    .Baseline, .DataEntry, .Results, .IE
    {
        border-radius: 4px;
    }
    #patientClicker
    {
        cursor: auto;
    }
    .data, .results, .plot
    {
        border-radius: 4px;
    }
    .subPanel
    {
        grid-gap: 0px;
        border-radius: 0px;
        border: none;
        border-top: 1px solid rgba(1, 1, 1, 0.2);
        border-right: 1px solid rgba(1, 1, 1, 0.2);
        border-bottom: 1px solid rgba(1, 1, 1, 0.2);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    
    .importPanel
    {
            display: grid;
            grid-row-gap: 20px;
            grid-template-columns: 1fr ;
            margin: 29px;
            justify-items: center;
            margin-right: 100px;
            margin-left: 100px;
            padding: 20px;
            border-radius: 4px;
            border: 1px solid rgba(1, 1, 1, 0.25);
        }   
    
.importfieldForm
{
    opacity: .9;
    font-family: var(--font-family);
    font-size: var(--body-font-size);
    justify-self: center;
    align-self: center;
    padding-bottom: 2px;
    text-decoration: none;
}
    
hr{
    width: 220%;
    margin-left: -3.7%;
     margin-top: 0px;
    margin-bottom: 10px;
    
}
    
.patientForm
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
/*    grid-row-gap: 20px;*/
    
}
    
.patientField
{
    opacity: 0.5;
    font-family: var(--font-family);
    font-size: var(--body-font-size);
    justify-self: left;
    align-self: center;
    
    padding-bottom: 2px;
}

    /*
.addPatientField
{
    opacity: 0.5;
    font-family: var(--font-family);
    font-size: var(--body-font-size);
    justify-self: left;
    align-self: center;
    margin-bottom: 40px;
    padding-top: 65px;
    margin-left: 50px
}*/

.loadfield{
    
    opacity: 0.5;
    font-family: var(--font-family);
    font-size: 20px;
    justify-self: left;
    align-self: center;
     margin-bottom: 0px;
    
    }
    
.sexfield{
    opacity: 0.5;
    font-family: var(--font-family);
    font-size: var(--body-font-size);
    justify-self: left;
    align-self: center;
    margin-top: 98px;
        
    }
    
.racefield{
    opacity: 0.5;
    font-family: var(--font-family);
    font-size: var(--body-font-size);
    justify-self: left;
    align-self: center;
    margin-top: 0px;  
    
    }
    
div#mybutton {

    /* IMPORTANT STUFF */
    overflow: hidden;
    position: relative;
    cursor:   pointer;   

    /* SOME CUSTOM STYLING */
    width:  200px;
    padding: 10px; 
    text-align: center;
    font-weight: bold
    opacity: 0.5;
    font-family: var(--font-family);
    font-size: var(--body-font-size);
    background: white;
    border: 1px solid rgba(1, 1, 1, 0.25);
    cursor: pointer;
    border-radius: 4px;

    color: rgba(1, 1, 1, 0.75);

    -webkit-tap-highlight-color: rgba(0,0,0,0); /*No flash when tap*/
    -webkit-tap-highlight-color: transparent;

    box-shadow: var(--box-shadow);

}

div#mybutton:hover {
        background: rgba(71, 170, 181, 1);
        color: white;
        box-shadow: var(--box-shadow);
}




 .roundBtn {
    display:block;
     cursor: pointer;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid white;
    margin-bottom: 2px;
    margin-right: 3%;
    float: left;
    margin-bottom: 10px;
    margin-left: 00px;
   
}

.addPatientContent
{
    font-size: 34px;
    align-self: center;
    opacity: 0.5;
}

.patientPicker
{
    display: grid;
    -webkit-tap-highlight-color: transparent;
    
    padding-top: 20px;
    padding-bottom: 15px;
    
}

.PatienttwoPicker
{   
    grid-template-columns: 1fr 1fr;
}

.threePicker
{
    grid-template-columns: 1fr 1fr 1fr;
}

    
    
    #patientChoice
    {
        border-top: 1px solid rgba(1, 1, 1, 0.2);
        border-top-left-radius: 4px;
    }
    #UO_infoChoice
    {
        border-bottom-left-radius: 4px;
    }
    .settingsTitle
    {
        display: none;
    }
    .dropdown
    {
        display: none;
    }
    .indicatorCircle
    {
        margin-top: 10px;
        height: 15px;
        width: 15px;
        justify-self: start;
        align-self: top;
        grid-row: 1;
        grid-column: 1;
        background-color: rgba(255, 1, 1, 0.3);
        border-radius: 50%;
        margin-left: 10px;
    }
    .indicatorCircle_On
    {
        background-color: rgba(1, 160, 51, 0.5);
    }
    .panelIndicator
    {
        display: none;
    }
        
   

    .baselineForm
    {
/*        padding: 30px;*/
/*
        padding-left: 40px;
        padding-right: 40px;
*/
        padding-top: 40px;

        display: grid;
        grid-column: 1fr 1fr;
        grid-template-areas:
        "cathTime baselineSCr"
        "GFR baselineSCr";
        
        grid-column-gap: 20px;
/*        grid-row-gap: 0px;*/
/*        grid-row-gap: 10px;*/
        }
    
    #cathTimeForm
    {
        grid-area: cathTime;
        justify-self:top;
    }
    #GFRForm
    {
        grid-area: GFR;
        justify-self:top;
        align-self: top;
    }
    #BaselineSCrForm
    {
        grid-area: baselineSCr;
/*        justify-self: top;*/
        align-self: stretch;
    }

    .baselineField
    {
        padding-top: 0px;
    }
    .subBaselineForm
    {
        padding-bottom: 0px;
    }

    
/*
    .DataEntryForm
    {   
        padding: 20px;
        padding-top: 15px;
        padding-bottom: 20px;

    }
*/

    .dataRow
    {
        margin-bottom: 5px;
    }
    .dataForm
    {
        margin-top: -10px;
        margin-bottom: 5px;
        border-radius: 4px;

/*
        border: 1px solid rgba(1, 1, 1, 0.25);
        margin-left: 20px;
        margin-right: 20px;
        padding-right: 0px;
*/
    }
    .dataInputRow
    {
        margin-right: 20px;
/*
        grid-template-columns: 4fr 2fr 2fr 1fr;
        grid-template-areas:
            "date UO SCr RRT"
            "dateLabel UOLabel SCrLabel RRTLabel";
*/
/*        border: none;*/

/*        padding-top: 5px;*/
/*
        padding-bottom: 0px;
        padding-right: 0px;
        padding-left: 0px;
*/
        margin-bottom: 10px;
    }
    .DataScores {
        padding-top: 20px;
    }
    .dataEntry
    {
        min-height: 2.375rem;
    }
    .DataTop
    {
/*
        padding: 40px;
        padding-top: 30px;
*/
    }
    .theX
    {
        padding-top: 20px;
        padding-left: 20px;
    }
    .addRow
    {
        margin-top: 30px;
        top: 40px;
    }
    .dataStageDivide {
        display: none;
    }


/*
    .resultsForm
    {
        display: grid !important;
    }
*/
    .results
    {
        margin-right: 5%;
        margin-left: 5%;
    }
    .plotForm
    {
        height: 275px;
        width: 80%;
    }

    .iePanel
    {
        padding: 0px;
        margin: 0px;
        border-radius: 0px;
        border: none;
        align-content: space-between;
    }
    .firstIEPanel
    {
        border-right: 1px solid rgba(1, 1, 1, 0.25);
        padding-right: 30px;
    }
    .importExportForm
    {
        grid-template-columns: 1fr 1fr;
        padding-left: 20px;
        padding-right: 20px;
    }
    .buttonPanel
    {
        grid-template-columns: 1fr 1fr 1fr;
    }

}