/*@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: #ad0000;
    }

    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: lightgrey;
    /* 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;
    margin-top: 10px;
}
#nameOrIdSearchForm:focus, .fButtonSearch:focus{
    outline: 0;
    border: 1px solid rgb(198, 0, 0);
    box-shadow: 0 0 3px rgb(250, 0, 0);
}



.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 heirarchy*/
.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);*/
    background-color: #ad0000;
}
.fRedButton{
    color: white;
}
.fRedButton:hover{
    background-color: rgb(250, 0, 0);
}
.fRedButton:hover{
    text-decoration: none;
}

.fBlueButton{
    background-color: #0C507A;
    color: white;
}
.fBlueButton:hover{
    background-color: #1278B8;
    text-decoration: none;
}

.fGreenButton{
    /*background-color: rgb(198, 0, 0);*/
    background-color: #00611B;
    color: white;
}
.fGreenButton:hover{
    background-color: #00AD31;
    text-decoration: none;
}



.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: 75px;
    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;
    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;
}


.red {
    color: red;
}
/*
#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 {
    text-align: center;
    margin: 0 auto;
}

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

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

/*The universal Navigation bar*/
.navigation {
    top: 0;
    z-index: 1030;
    right: 0;
    left: 0;
    position: fixed;
    min-height: 50px;
    background: #06263B;
    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;
    padding-top: 13px;
}
.navigationLogo  a{
    font-size: 1.3em;
}

.navigationLogo img {
    display: block;
    margin-right: auto;
    margin-top: -10px;
    width: 40px;
}

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

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

@media (max-width: 1100px) {
    .navigationItems li:first-child a {
        padding-left: 20px !important;
    }

    .navigationItems {
        width: 85% !important;
    }

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

@media (max-width: 991px) {

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


@media (max-width: 850px) {
    .navigationItems a {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 768px){
    /* 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: 767px) {
    .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;
    }


}

.navigationItems a {
    width: 100%;
    text-decoration: none;
    color: white;
    height: 100%;
    display: block;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 14px;
}

.navigationItems a:hover {
    color: yellow;
    text-decoration: underline;
}

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

.userStatus {
    float: right;
    color: lightyellow;
    margin: 14px 0 14px 0;
    width: 25%;
    text-align: right;
}

.reference{

    color: #ffffff;
    font-size: 18px;
    line-height: 12px;
}

.reference span{

    font-size: 14px;
    display: none;
    margin-left: 10px;
}

@media ( max-width: 767px ){

    .reference span{

        display: inline;
    }
}

.glyphicon-log-out {
    color: lightyellow;
}

.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: 80%;
    height: 44px;
    line-height: 44px;
    margin-top: 10px;
}

#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;
}


div.information-container {
    margin-top: 30px;
}
div.information-container h4 {
    color: #002a80;
    font-weight: bold;
    width:100%;
}
div.information-container h5 {
    font-weight: bold;
    margin-left: 5px;
    color: #428bca;
}

h2 {
    color: #002a80;
    border-bottom: 2px solid #3a87ad;
}

.savewarning {
    display: none;
    border: 1px solid orange;
    padding: 15px;
    margin-bottom: 15px;
}
#SaveWarning2 { margin-top: 15px; }
.savewarning i {
    color: orange;
}

span.history-detail {
    display: block;
    clear: left;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.row.error {
    border: 1px solid red;
    margin-bottom: 15px;
}

.row.warning {
    border: 1px solid orange;
    margin-bottom: 15px;
}

.row.success {
    border: 1px solid green;
    margin-bottom: 15px;
}

.header-row {
    font-weight: bold;
    border-bottom: 1px solid #06263B;
}

.announcements {
    border: 1px solid #06263B;
    padding: 30px;
    margin: 15px 15px 30px 15px;
}
.announcements h3 {
    color: #002a80;
    border-bottom: 2px solid #3a87ad;
}