/*@font-face {*/
/*font-family: "dejavu";*/
/*src: url("../fonts/DejaVuSansCondensed.ttf");*/
/*}*/

/* Feedback */

    /* Leave Feedback Link */

    div.leaveFeedback {
        text-align: center;
    }

    div.leaveFeedback a {
        color: #333;
        text-decoration: underline;
        color: rgb(198, 0, 0);
    }

    div.leaveFeedback a:hover { }

    /* Feedback Response (in home page view) */

    div#feedbackResponse {
        width: 80%;
        background: green;
        border: 4px solid darkgreen;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        margin: 0 auto;
        margin-bottom: 48px;
        display: none;
    }

/* End of Feedback*/

body {
    padding-top: 50px;
    background-color: #aaa296;
    /* Removed because of the insane amount of time required to load (especially on networks where the connection speed is iffy */
    /*font-family: dejavu;*/
    font-family: sans-serif;
}

hr {
    border-top: 1px solid black;
}

#nameOrIdSearchForm {
    border: 1px solid black;
    width: 200px;
    display: flex;
    float: right;
}


#nameOrIdSearchForm:focus, .fButtonSearch:focus{
    outline: 0;
    border: 1px solid rgb(198, 0, 0);
    box-shadow: 0 0 3px rgb(250, 0, 0);
}

.nameOrIdSearchButton {
    margin-left: 5px;
    float: left;
}

.nameOrIdSearchFormWrap {
    max-width: fit-content;
    display: flex;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.idSearchForm {
    margin-top: 10px;
    width: 100%;
}

.searchLabel {
    padding: 5px;
    margin-top: 6px;
    font-size: 25px;
}

.form-group-padding {
    padding-left: 5px;
}

.margin-top-zero {
    margin-top: 0;
}

.remove-padding {
    padding: 0 !important;
}

.width-100 {
    width: 100%;
}

.width-50 {
    width: 50%;
}

/* Bootstrap won't offset for xs columns, but i want to */
.col-xs-offset-4 {
    margin-left: 33%;
}

/* THE fEMR button hierarchy*/
.fButton{
    border-radius: 4px;
    border: 1px solid #3f3f3d;
    padding: 5px 12px;
}
.fOtherButton{
    background-color: #d3d3d3;
    width: 150px;
    color: #000000;
    text-align: center;
}
.fOtherButton:hover{
    background-color: #bdbdbd;
    text-decoration: none;
    color: #000000;
}
.fAdminButtonLeftTextAlign {
    text-align: left;
    padding-left:50px;
}
.fRedButton{
    background-color: rgb(198, 0, 0);
}
a.fRedButton{
    color: #000000;
}
.fRedButton:hover{
    background-color: rgb(250, 0, 0);
}
a.fRedButton:hover{
    text-decoration: none;
}
.fInlineButton button{
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #3f3f3d;
    padding: 5px 8px;
    cursor: pointer;
    float: right;
}
.fInlineButton:after{
    content: "";
    clear: both;
    display: table;
}
.fInlineButton button:not(:last-child) {
    border-right: none;
}
.fInlineButton button:hover {
    background-color: #bdbdbd;
}

.fLandingSearchButton{
    width: 100%;
    height: 38px;
    font-size: 18px;
}
.fSubmitButton{
    width: 150px;
}
.fGlobalSearchButton{
    width: 80px;
    height: 33px;
}
.fAdminButton{
    color: black;
}

/*yes and no button are separate because i'm done with css*/
.fYesButton{
    color: black;
    padding: 8px 25px 8px 25px;
    font-size: 20px;
}
.fNoButton{
    color: black;
    padding: 8px 30px 8px 30px;
    font-size: 20px;
}
.fYesButton:hover, .fNoButton:hover{
    text-decoration: none;
    color: black;
}

/*this isn't even a button*/
.fButtonSearch{
    width: 100%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 2%;
    /*font-size: 95%;*/
    font-size: 26px;
    color: #555;
    border-radius: 5px;
    text-align: center;
}

/* THE fEMR dropdown! */
.fOption {
    height: 33px;
    width: 175px;
}

/* THE fEMR textarea */
.fTextArea {
    width: 100%;
    height: 85px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/* THE fEMR select!*/
.fSelect{
    width: 100%;
    float: right;
    height: 33px;
}

/* THE fEMR input(text)! */
.fInput {
    border-radius: 5px;
    display: block;
    height: 33px;
    width: 175px;
    border: 1px solid #ccc;
    padding: 5px 10px 5px 10px;
    background-color: white;
    color: #555;
}


.fInput:focus {
    box-shadow: 0 0 5px #3f3f3d
}

/* THE fEMR input(checkbox) */
.fCheckbox {
    padding: 20px;
}

/* The following sections are used on both Medical and pharmacy */
#patientOverviewWrap {
    overflow: hidden;

    min-height: 125px;
}

#patientOverviewWrap img {
    float: left;
    border: 2px solid black;
    margin: -41px 5px 0 14px;

}

@media(max-width: 570px){
    #patientOverviewWrap img{
        margin: 0 0 14px 14px;
    }

}

#patientOverviewWrap h3 {
    text-align: center;
}

#patientOverViewInfoPhoto {
    margin-left: 120px; /*  if photo */
    padding-right: 10px;
    padding-bottom: 10px;
}

#patientOverViewInfo {
    text-align: center; /*  if no photo */
    padding: 10px;
}

#patientOverviewWrap span {
    padding: 4px 0px 10px;
}

#complaintWrap {
    margin-top: 15px;
    overflow: hidden;
    min-height: 150px;
}

#complaintInfo {
    padding: 70px 10px;
    text-align: center;
}

#complaintWrap span {
    padding: 4px;
}

#header h4 {
    font-weight: bold;
    float: left;
    padding-left: 46%;
}

#toggle {
    float: right;
}

#loading {
    margin-left: 10px;
    height: auto;
    max-width: 18px;
}

.red {
    color: rgb(198, 0, 0);
}
/*
#portraitWrap img{
display: block;

margin: 15px auto 0 15px;
border: 2px solid black;
}
#portraitWrap{
width: 15%;
height: 100%;
float: left;

}

#generalInfoWrap {
overflow: hidden;
text-align: center;
height: 100%;
width: 100%;

}
#generalInfoWrap img{
display: block;
border: 2px solid black;
margin: 10px 5px 0px 10px;
float: left;
}

#generalInfoWrapPicture{
widtH: 100%;
float: right;

} */

/* Main section wrapper*/
#mainWrap {
    margin-top: 15px;
    overflow: hidden;
    padding: 10px;
    height: 100%;
}

#searchContainer {
    text-align: center;
    margin-bottom: 8px;
}

/* Medical and Pharmacy landing pages */
.searchWrap {
    width: 300px;
    text-align: center;
    margin: 0 auto;
    height: calc(100vh - 215px);
}

.searchWrap p {
    font-size: 20px;
}

.searchTitle {
    margin-top: 70px;
}

/* fEMR's background with border */
.backgroundForWrap {
    border-radius: 10px;
    background-color: #e9e6e6;
    border: 3px solid #3f3f3d;
}

/*The universal Navigation bar*/
.navigation {
    top: 0;
    z-index: 1030;
    right: 0;
    left: 0;
    width: 100%; /* without this navbar extends past slightly */
    position: fixed;
    min-height: 60px;
    background: black;
    margin-bottom: 20px;
}

.navigationContainer {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    height: 50px;
}

.navigationLogo {
    width: 10%;
    height: 50px;
    float: left;
}

.navigationLogo img {
    display: block;
    margin-right: auto;
    margin-top: 17px;
}

.navigationItemsWrap {
    float: left;
    width: 90%;
    height: 50px;
}

.navigationItems {
    margin-bottom: 0;
    float: left;
    height: 50px;
    width: 75%;
    padding: 0;
}

@media (max-width: 992px) { /* 992 because of bootstraps defaults*/
    .navigationItems {
        width: 80% !important;
    }

    .navigationItems a {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .userStatus {
        width: 20% !important;
    }
}

@media (min-width: 800px){
    /* Since closing the menu via hamburger sets an inline display: none style via jQuery,
    this ensures the menu comes back if the screen widens*/
    .navigationItemsWrap{
        display: block !important;
    }
}
@media (max-width: 800px) {
    .navigationItems li:first-child a {
        padding-left: 10px !important;
    }
    .navigationItemsWrap {
        display: none;
        height: auto;
        width: 100%;
    }
    .navigationItems{
        overflow: hidden;
        height: auto;
        padding-bottom: 5px;
        width: 100% !important;
    }

    .navigationItems a{
        padding-bottom: 10px;
    }

    .navigationItems li {

        display: block !important;

    }

    .smallNavigationItemsWrap {
        display: block !important;
        width: 90%;
        overflow: hidden;
        height: 50px;
    }
    .userStatus{
        float: left !important;
        text-align: left !important;
        width: 100% !important;
        padding-left: 10px;
    }

    .reference span{
        display: none;
    }
}

.navigationItems a {
    width: 100%;
    text-decoration: none;
    color: grey;
    height: 100%;
    display: block;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 18px;
    font-size: 16px;
}

.navigationItems a:hover {
    color: rgb(198, 0, 0);
}

.navigationItems li {
    height: 100%;
    list-style: none;
    display: inline-block;
    position: relative;
}

.userStatus {
    float: right;
    color: grey;
    margin: 18px 0 14px 0;
    width: 25%;
    text-align: right;
    font-size: 16px;
}

.reference span{
    display: none;
}

.settings{
    width: 40px;
    height: 20px;
    color: grey;
    padding-left: 10px;
    padding-right: 10px;
}

.settings span{
    display: none;
}

.settings:hover {
    color: rgb(198, 0, 0);
    text-decoration: none;
}

.log-out {
    width: 40px;
    height: 20px;
}

.glyphicon-log-out {
    color: rgb(198, 0, 0);
}

.smallNavigationItemsWrap {
    display: none;
}




/*
The hamburger button
*/
.hamburger {
    border: 1px solid grey;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    display: block;
    height: 24px;
    padding: 3px 4px 3px;
    position: relative;
    width: 25px;
    float: right;
    margin-top: 13px;
    margin-right: 5px;
}
.hamburger div:first-child{
    margin-top: 2px;
}
.hamburger div {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 2px 2px 2px 2px;
    height: 2px;
    margin-top: 3px;
    width: 100%;
}



/* Generic Typeahead Styles */

input[style] {
    vertical-align: middle !important;
}

.twitter-typeahead{
    display:inline;
    width: 100%;
}

.twitter-typeahead input[type="text"]{

    background-color: #fff !important;
}

.twitter-typeahead .tt-hint {
    height: 44px;
    padding: 6px 9px;
    font-size: 14px;
    display: none;
}

.twitter-typeahead .hint-small {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.twitter-typeahead .hint-large {
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}

.tt-dropdown-menu {
    font-size: 16px;
    min-width: 160px;
    margin-top: 2px;
    padding: 5px;
    background-color: #fff;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    position: absolute; !important;

    max-height: 200px;
    overflow-y: auto;
}

.tt-suggestion {
    display: block;
    padding: 5px 10px;
    font-size: 0.9em;
    color: #2f2f2f;
}

.tt-suggestion:hover,
.tt-suggestion:active,
.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #9f9f9f;
}

.tt-suggestion.tt-cursor a {
    color: #fff;
}

.tt-suggestion p {
    margin: 0;
}

.tt-highlight{
    background-color: yellow;
}

/*errors from viewmodel form validation*/
.errors, .error dd{
    color: rgb(198, 0, 0);
}

.input .errors{
    display: block;
}

/* Custom Typeahead Styles for patient search on the homepage */

#patientSearchContainer{

    width: 100%;
    position: relative;
    text-align: left;
}

#patientSearchContainer span{

    width: 100%;
}

#patientSearchContainer input.patientSearch{
    width: 100%;
    height: 44px;
    line-height: 44px;
}

#patientSearchContainer .patientResult{

    overflow: hidden;
    border-bottom: 1px solid #9f9f9f;
    position: relative;
    display: block;
    height: 96px;
    color: #2f2f2f;
}

#patientSearchContainer .patientResult span{

    color: #2f2f2f;
}

#patientSearchContainer .patientResult:hover span,
#patientSearchContainer .patientResult.tt-cursor span{

    color: #000000;
}



#patientSearchContainer .patientResult a{

    display: block;
    text-decoration: none;
    /* right padding for image */
    padding: 8px 96px 8px 8px;

    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#patientSearchContainer .patientResult .name{

    display: block;
    clear: both;
    font-size: 1.1em;
}

#patientSearchContainer .patientResult .age{

    display: block;
    clear: both;
    margin-top: 3px;
    margin-left: 10px;
    font-size: 0.9em;
}

#patientSearchContainer  .patientResult .photo{

    position: absolute;
    right: 8px;
    top: 8px;
    width: 80px;
    height: 80px;
}

#patientSearchContainer .emptyMessage{

    text-align: center;
}

/* Custom Typeahead Styles for concept medication search on the inventory page*/
#conceptMedicationSearchContainer{
    /*width: 100%;*/
    /*position: relative;*/
    /*text-align: left;*/
}

#conceptMedicationSearchContainer input.conceptMedicationSearch{

    width: 75%;
    height: 44px;
    line-height: 44px;
    margin-top: 10px;
}



/** Prescription Fields **/

.prescription-grid{

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 5px;
}
.prescription-grid .prescription-field{

    margin-right: 5px;
}
.prescription-grid label.prescription-field{

    margin: 0;
}

.prescription-grid .prescriptionName{

    flex: 8;
}

.prescription-grid .prescriptionAdministration{

    flex: 3;
}

.prescription-grid .prescriptionAdministration select{

    height: 30px;
}

.prescription-grid .prescriptionAdministrationDays{

    flex: 2;
}

.prescription-grid .prescriptionAmount{

    flex: 2;
    margin-right: 0;
}

.jumbotron{
    height: calc(100vh - 175px);
}

.femrImage{
    margin-top: calc(100vh - 710px);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-height: 780px) {
    .femrImage {
        display: none !important;
    }
    .bottomButton {
        margin-bottom: calc(100vh - 600px)!important;
    }
}

@media (max-height: 560px){
    footer{
        display: none;
    }
    .jumbotron{
        height: calc(100vh - 80px);
    }
    .signInRegister {
        display: flex;
    }
}

.researchWrap {
    height: calc(100vh - 145px);
}

.footerTextRight {
    white-space: nowrap;
}