/*
.OuterShellHeight {
    height: 100vh;
    height: calc(var(--vh,1vh) * 100);

}
*/

.MainSectionHeight {
    min-height: 88vh;  /* was 58 */
    min-height: calc(var(--vh,1vh) * 88);
}
.FooterHeight {
    height: 5vh;
    height: calc(var(--vh,1vh) * 5);
}

.HomePageInstructions {
    max-height: 35vh;
    max-height: calc(var(--vh,1vh) * 35);
    width: 95%;
    margin: auto;
}


/*  Top Banner */
.HeaderGrid {
    display: grid;
    padding-top: calc(var(--vh,1vh) * 1);
    height: calc(var(--vh,1vh) * 7);

    grid-template-rows: 100%;
    grid-template-columns: 10% 15% 50% 15% 10%;   /*  10% 15% 10% 15% 50%;  */
}
.HeaderGrid_R1C1 {
    grid-row:1;
    grid-column: 1;
    justify-content: right;
}


.HeaderGrid_R1C2 {
    grid-row:1;
    grid-column: 2;
    justify-content: left;
    margin-left: 5px;
}
.HeaderGrid_R1C3 {
    grid-row:1;
    grid-column: 3;

    justify-content: left;
}
.HeaderGrid_R1C4 {
    grid-row:1;
    grid-column: 4;
    justify-content: right;
}
.HeaderGrid_R1C5 {
    grid-row:1;
    grid-column: 5;
    justify-content: right;
    margin-right: 0px;
}


.HeaderGrid_R1C5 img {
    border-radius: 50%;
}

[class^="HeaderGrid_"] {
    display:grid;
    padding: 0 0 0 0 ; /* padding around inside of grid  */
    font-size: 15px;
    color: #333;
    border-style: solid;
    border-width: 0px;
    border-color: blue;

}

@media (max-width: 800px) {
    .HeaderGrid div:nth-child(2){
        visibility: hidden;
    }

    .HeaderGrid {
        grid-template-columns: 20% 0 60% 0 20%;
    }

    .HeaderGrid_R1C1 {
        justify-content: left;
        margin-left: 5px;
    }
    .HeaderGrid_R1C5 {
        margin-right: 5px;
    }
}
@media (min-width :801px) {
    .HeaderGrid {
        grid-template-columns: 10% 15% 50% 15% 10%;
    }


    .HeaderGrid_R1C5 {
          justify-content: left;

    }
}


.PracticeImg {
    object-fit: cover; max-width:100px;  max-height: 100%;

    border-style: solid;
    border-width: 0px;
    border-color: green;
}
.TelephoneImg {
    object-fit: cover;
    width:40px;
    max-width: calc(var(--vh,1vh) * 6);
    margin-left: auto;

    border-style: solid;
    border-width: 0px;
    border-color: red;

}

.PracticeAnchor {
    max-width:100px;  max-height: 95%;  overflow: hidden;

    text-align: center;

    border-style: solid;
    border-width: 0px;
    border-color: green;
}








/*  Find Patient */


[class^="LocatePatientGrid_"] {
    display:grid;
    padding: 0 0 0 0 ; /* padding around inside of grid  */
    font-size: 15px;
    color: #333;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
 /*   background-color: #f9f2ea  */

}

.LocatePatientGrid {
    display: grid;
    max-width: inherit;
    padding: 0px 0px 0px 0px;
    justify-content: center;

    grid-template-rows: 45px 45px 45px 100px 80px;
    grid-template-columns: 230px;  /*230 */
}


.LocatePatientGrid_R1C1 {
    grid-row:1;
    grid-column: 1;
    justify-content: left;
    text-align: left;
}
.LocatePatientGrid_R2C1 {
    grid-row:2;
    grid-column: 1;
    justify-content: left;
    text-align: left;
}
.LocatePatientGrid_R3C1 {
    grid-row:3;
    grid-column: 1;
    justify-content: left;
    text-align: left;
}

.LocatePatientGrid_R4C1 {
    grid-row:4;
    grid-column: 1;
    justify-content: left;
    text-align: left;
}
.LocatePatientGrid_R5C1 {
    grid-row:5;
    grid-column: 1;
    justify-content: center;
    margin-top: 20px;
}



/*  Enter Pin */


[class^="PinGrid_"] {
    display:grid;
    padding: 0 0 0 0 ; /* padding around inside of grid  */
    font-size: 15px;
    color: #333;
    align-content: center;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
/*    background-color: #f9f2ea;  */

}

.PinGrid {
    display: grid;
    max-width: inherit;
    padding: 0px 0px 0px 0px;
    justify-content: center;

    grid-template-rows: 40px 45px 70px 135px;
    grid-template-columns: 210px;
}
.PinGrid_R1C1 {
    grid-row:1;
    grid-column: 1;
    justify-content: center;

    margin-right: 5px;

}
.PinGrid_R2C1 {
    grid-row:2;
    grid-column: 1;
    justify-content: center;
    margin-left: 5px;
    margin-top:10px;
}
.PinGrid_R3C1 {
    grid-row:3;
    grid-column: 1;
    justify-content: center;
    margin-top:10px;

}
.PinGrid_R4C1 {
    grid-row:4;
    grid-column: 1;
    justify-content: center;
    text-align: center;
    color: darkred;
}






/*  New Patient */


[class^="NewPatientGrid_"] {
    display:grid;
    padding: 0 0 0 0 ; /* padding around inside of grid  */
    font-size: 15px;
    color: #333;
    align-content: center;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
 /*   background-color: #faf6f2;  */

}

.NewPatientGrid {
    display: grid;
    max-width: inherit;
    padding: 0px 0px 0px 0px;
    justify-content: center;

    grid-template-rows: 45px 45px 45px 45px 80px 30px ;
    grid-template-columns: 260px;
}
.NewPatientGrid_R1C1 {
    grid-row:1;
    grid-column: 1;
    justify-content: left;
    text-align: left;
}

.NewPatientGrid_R2C1 {
    grid-row:2;
    grid-column: 1;
    justify-content: left;
    text-align: left;
}

.NewPatientGrid_R3C1 {
    grid-row:3;
    grid-column: 1;
    justify-content: left;
    text-align: left;
}
.NewPatientGrid_R4C1 {
    grid-row:4;
    grid-column: 1;
    justify-content: center;
}
.NewPatientGrid_R5C1 {
    grid-row:5;
    grid-column: 1;
    justify-content: center;
}
.NewPatientGrid_R6C1 {
    grid-row:6;
    grid-column: 1;
    justify-content: center;
}







/*  Choose type of patient and search date */
.AppOptionsGrid {
    display: grid;
    max-width: inherit;
    padding: 0px 0px 0px 0px;
    justify-content: center;

    grid-template-rows: 40px 90px 90px 45px 90px;
    grid-template-columns: 45% 45%;
}
.AppOptionsGrid_R1C1 {
    grid-row:1;
    grid-column: 1;
    justify-content: right;
    text-align: right;
    margin-right: 5px;
}
.AppOptionsGrid_R1C2 {
    grid-row:1;
    grid-column: 2;
    justify-content: left;
    margin-left: 5px;
}

.AppOptionsGrid_R2C1 {
    grid-row:2;
    grid-column: 1/span 2;
    text-align: center;
    justify-content: center;

}

.AppOptionsGrid_R3C1 {
    grid-row:3;
    grid-column: 1/span 2;
    text-align: center;
    justify-content: center;

}
.AppOptionsGrid_R4C1 {
    grid-row:4;
    grid-column: 1;
    justify-content: right;
    text-align: right;
    margin-right: 5px;
}
.AppOptionsGrid_R4C2 {
    grid-row:4;
    grid-column: 2;
    justify-content: left;
    margin-left: 5px;
}
.AppOptionsGrid_R5C1 {
    grid-row:5;
    grid-column: 1/span 2;
    text-align: center;
    justify-content: center;
}


[class^="AppOptionsGrid_"] {
    display:grid;
    padding: 0 0 0 0 ; /* padding around inside of grid  */
    font-size: 15px;
    color: #333;
    align-content: center;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
 /*   background-color: #f9f2ea;  */

}



/* Filter pop screen */
.FilterOptionsGrid {
    display: grid;
    max-width: inherit;
    padding: 0px 0px 0px 0px;
    justify-content: center;

    grid-template-rows: 35px 35px 35px 35px 35px 35px 100px;
    grid-template-columns: 40% 40% ;
}
.FilterOptionsGrid_R1C1 {
    grid-row:1;
    grid-column: 1;
    justify-content: right;
    text-align: right;
}
.FilterOptionsGrid_R1C2 {
    grid-row:1;
    grid-column: 2;
    justify-content: left;
    margin-left: 15px;
}
.FilterOptionsGrid_R2C1 {
    grid-row:2;
    grid-column: 1;
    justify-content: right;
    text-align: right;
}
.FilterOptionsGrid_R2C2 {
    grid-row:2;
    grid-column: 2;
    justify-content: left;
    margin-left: 15px;
}.FilterOptionsGrid_R3C1 {
     grid-row:3;
     grid-column: 1;
     justify-content: right;
     text-align: right;
 }
.FilterOptionsGrid_R3C2 {
    grid-row:3;
    grid-column: 2;
    justify-content: left;
    margin-left: 15px;
}.FilterOptionsGrid_R4C1 {
     grid-row:4;
     grid-column: 1;
     justify-content: right;
     text-align: right;
 }
.FilterOptionsGrid_R4C2 {
    grid-row:4;
    grid-column: 2;
    justify-content: left;
    margin-left: 15px;
}.FilterOptionsGrid_R5C1 {
     grid-row:5;
     grid-column: 1;
     justify-content: right;
     text-align: right;
 }
.FilterOptionsGrid_R5C2 {
    grid-row:5;
    grid-column: 2;
    justify-content: left;
    margin-left: 15px;
}.FilterOptionsGrid_R6C1 {
     grid-row:6;
     grid-column: 1;
     justify-content: right;
     text-align: right;
 }
.FilterOptionsGrid_R6C2 {
    grid-row:6;
    grid-column: 2;
    justify-content: left;
    margin-left: 15px;
}
.FilterOptionsGrid_R7C1 {
    grid-row:7;
    grid-column: 1/span 2;
    justify-content: center;
    text-align: center;
}

[class^="FilterOptionsGrid_"] {
    display:grid;
    padding: 0 0 0 0 ;
    font-size: 15px;
    color: #333;
    align-content: center;
    border-style: solid;
    border-width: 0px;
    border-color: blue;


}












.ShadowBox {
 /*   background-color: #f9f2ea;  */
    border: 1px solid;
    border-radius: 25px;
    padding: 10px;
    border-color: lightgrey;
    box-shadow: 3px 3px 5px #888888;

    max-width:350px;

    width: 80vw;


   /* min-width:270px;  */


}
.ShadowBox_Homepage {
/*    background-color: #f9f2ea;    */
    border: 1px solid;
    border-radius: 25px;
    padding: 10px;
    border-color: lightgrey;
    box-shadow: 3px 3px 5px #888888;

    max-width:350px;

    width: 60vw;
    height: 28vh;
    min-height: 220px;
}

/*
.OptionsInstructions {
    background-color: #faf6f2;
    height: 20vh;
    height: calc(var(--vh,1vh) * 20);

}  */







/* Select Appointment */

.AppsScrollBox {
    height:45vh;
}

.BookAppGrid {  /*  this is the background square containing one row for the list and the second for the back button*/
    display: grid;
    max-width: inherit;
    padding: 0px 0px 0px 0px;
    justify-content: center;

    grid-template-rows: 45vh 10vh;
    grid-template-columns: 99%;
}
@media (max-width: 800px) {
    .AppsScrollBox {
        height:40vh;
    }
    .BookAppGrid {
        grid-template-rows: 40vh 8vh;
    }
}


.BookAppGrid_R1C1 {
    grid-row:1;
    grid-column: 1;
    justify-content: right;
    text-align: right;
    margin-right: 5px;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
}
.BookAppGrid_R2C1 {
    grid-row:2;
    grid-column: 1;
    justify-content: left;
    text-align: left;
    margin-right: 5px;
    margin-top: 10px;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
}


.ShadowBoxBookApp {
    border-radius: 15px;
    border: 1px solid;
    padding: 5px;
    border-color: darkgrey;
    box-shadow: 3px 3px 5px #888888;
    width: 90vw;
    max-width:500px;
}


.AppScrollGrid {
    display: grid;
    max-width: inherit;
    padding: 0px 0px 0px 0px;
    justify-content: center;

    grid-template-rows: 27px 25px 50px;
  /*  grid-template-rows: 27px 27px 55px;  */

    grid-template-columns: 35% 35% 10% 10%;


    border-style: solid;
    border-width: 0px;
    border-color: black;
}

.AppScrollGrid_R1C1 {
    grid-row:1;
    grid-column: 1;

}
.AppScrollGrid_R1C2 {
    grid-row:1;
    grid-column: 2;

}
.AppScrollGrid_R2C1 {
    grid-row:2;
    grid-column: 1/span 2;

}
.AppScrollGrid_R2C2 {
    grid-row:2;
    grid-column: 3/span 2;
}




[class^="AppScrollGrid_"] {
    justify-content: left;
    text-align: left;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
    margin-right: 5px;
}

.AppScrollGrid_R3C1 {
    grid-row:3;
    grid-column: 1/span 4;
    justify-content: center;
    text-align: center;
    padding-top: 5px;
}




/* Create a custom checkbox */
.checktickbox {
    height: 25px;
    width: 25px;
    background-color: #eceae7;
}

.AppTypeDes {
    border-style: solid;
    border-width: 1px;
    border-color: darkgrey;
    padding: 1px;
    border-radius: 5%;
    text-align: center;
    margin-bottom: 5px;
}

a:link {
    color: black;
}

.WebsiteWidth {
    max-width: 1000px;

    margin: auto;
}
.reCaptchaBox {
    border-style: solid;
    border-width: 1px;
    border-color: black;

    margin : auto;

}




.field_td
{

    border-style: solid;
    border-width: 1px;
    border-color: blue;

    padding: 0;

}
.field_tr
{
    padding: 0;
    border-spacing: 0;

}
.tableborder
{
    border-style: solid;
    border-width: 1px;
    border-color: red;
    padding: 1px;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.drawrectangleborder
{
    border-style: solid;
    border-width: 1px;
    border-color: black;
    margin : 0 auto;
    padding: 5px;


}

.invisible {
    visibility: hidden;
}
.visible {
    visibility: visible;
}


.HideInstructions {
     visibility: hidden;
     height: 0;
 }
.ShowInstructions {
    visibility: visible;
    min-height:120px;
}
.HideInstructions2 {
    visibility: hidden;
    height: 0;
}
.ShowInstructions2 {
    visibility: visible;
    height: 18vh;
    height: calc(var(--vh,1vh) * 18);
}
.HideInstructionsRegistration {
    visibility: hidden;
    height: 0;
}
.ShowInstructionsRegistration {
    visibility: visible;
    min-height: 120px;
}

.CalendarSize {
    width: 100%;
 /*   height: 30vh;  */
    height:240px;
}

@media (min-width: 801px) {
    .ShowInstructions {
        height: 12vh;
        height: calc(var(--vh,1vh) * 12);
    }
    .CalendarSize {
  /*      height: 25vh;  */
    }
}




@font-face {
    font-family: Instructions-Title;
    src: url('Merriweather-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Instructions;
    src: url('Merriweather-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: ShadowBox-font;
    src: url('Merriweather-BoldItalic.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Booking-complete;
    src: url('Merriweather-Light.ttf');
    font-weight: normal;
    font-style: normal;

}

.Instructions-Title  {
    font-family: Instructions-Title;
    font-size:12pt;
    line-height:150%;
    text-align: center;
}
@media (max-width :400px) {
    .Instructions-Title {
        font-size: 10pt
    }


}

.Instructions  {
    font-family: Instructions;
    font-size:14pt;
    line-height:150%;
    max-width: 75%;
    text-align: center;
    margin:0 auto;
}


.ShadowBox-font {
    font-family: ShadowBox-font;
    font-size:11pt;
    line-height:100%;
}

.Booking-complete  {
    font-family: Instructions;
    font-size:14pt;
    line-height:130%;
}



@media (max-width: 800px) {
    .Instructions {
        font-size: 13pt;
        max-width: 90%;
    }
}
@media (max-width: 350px) {
    .Instructions {
        font-size: 11pt;
        max-width: 90%;
    }
}



.input-height
{
    height: 15px;

}


.CAP
{
    text-transform:capitalize;
}
.LOW  {
    text-transform:lowercase;
}

.UPP {
    text-transform:uppercase;
}

.underline {
    text-decoration: underline;
}



.CursorHand {
    cursor: pointer;
}

#ListFieldWrapper td {
    border: 1px #DDD solid; padding: 2px;
}


.SelectedLineInList td {
 /*   background-color: cornflowerblue;  */
    border-style: solid;
    border-width: 2px;
    border-color: #599bb3;

}






textarea {
    resize: none;
}
/*
.dropdownlist
{
    font-size:12pt;
    height: 30px;
    width: 85%;


}
*/

.selectOptionsPage {
    margin-top: 8px;
    width: 75vw;
    max-width: 100%;
    padding-left: 10px;
    font-size: 14px;
    line-height: 1;

    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 5px;
    height: 34px;
    color:black;

    background: url("../Graphics/Arrow5.png") no-repeat right #eceae7;
    -webkit-appearance: none;
    background-position-x: 98%     /*254px;  */
}


.selectFilterScreen {
    margin-top: 0px;
    width: 80%;
    padding-left: 10px;
    font-size: 16px;
    line-height: 1;

    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 5px;
    height: 34px;
    background: url("../Graphics/Arrow5.png") no-repeat right #eceae7;

    -webkit-appearance: none;
    background-position-x: 95%;
}

.BigButton {
    box-shadow: 0px 6px 12px -7px #276873;
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    background-color:#599bb3;
    border-radius:13px;
    border:1px solid #29668f;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:18px;
    font-weight:bold;
    padding:7px 17px;
    text-decoration:none;
}

.BigButton:hover {
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    background-color:#408c99;
}
.BigButton:active {
    position:relative;
    top:1px;
}
.BigButton:disabled {
    background-color: red;
}


.SmallButton {
    background-color: #d6c6b6;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    border: 1px solid #080400;
    display: inline-block;
    cursor: pointer;
    color: #0f010f;
    font-family: Arial;
    font-size: 13px;
    padding: 6px 22px;
    text-decoration: none;
    max-height: 29px;
}

.SmallButton:active {
     position:relative;
     top:1px;
 }


.FilterButton {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:3px 44px;
    text-decoration:none;
    max-height: 34px;
 }

.ContinueButton {
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    background-color:#599bb3;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:3px 26px;
    text-decoration:none;
    max-height:34px;
}
.ContinueButton:hover {
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    background-color:#408c99;
}
.ContinueButton:active {
    position:relative;
    top:1px;
}
.ContinueButton:disabled {
    color: lightgray;
    background-color: lightgray;
}

.SelectAppButton {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:3.5vw;
    padding:1px 50px;
    text-decoration:none;

}

@media (min-width :601px) {
    .SelectAppButton {
        font-size: 15px;
    }
}


.input-field {
    color:#3c3c3c;
    font-family: Helvetica, Arial, sans-serif;
    font-weight:400;
    font-size: 18px;
    border-radius: 0;
    line-height: 22px;
    background-color: #fbfbfb;
    padding: 13px 13px 13px 13px;
    margin-bottom: 10px;
    width:225px;
    box-sizing: border-box;
    border: 1px solid lightgray;  /*rgba(0,0,0,0);  */
}
.input-field-newpat {
    width:255px;
}

.input-field-short {
    color:#3c3c3c;
    font-family: Helvetica, Arial, sans-serif;
    font-weight:400;
    font-size: 18px;
    border-radius: 0;
    line-height: 22px;
    background-color: #fbfbfb;
    padding: 13px 13px 13px 13px;
    margin-bottom: 10px;
    width:100%;
    box-sizing: border-box;
    border: 1px solid lightgray;  /*rgba(0,0,0,0);  */
}

/*  Spinning circle positioning when loading appointments */

.fa {
    margin-left: -12px;
    margin-right: 8px;
}