﻿/* CSS Styles specific to the FNP application */

/* Formatting for help text (shown below a field) */
.guidanceText {
    font-size: smaller;
    margin-top: -10px;
}

/* Address Elements don't have bottom margin */
address {
    margin-bottom: 0px !important;
}

/* Field suffices have a fixed width to aid alignment */
.activeFieldSuffix {
    display: inline-block;
    width: 24px;
}

/* Field suffices have a fixed width to aid alignment */
.activeFieldWideSuffix {
    display: inline-block;
    width: 54px;
    font-size: 0.9em;
}

/* Used for the "(dd/mm/yyyy)" suffix */
.activeFieldDateSuffix {
    display: inline-block;
    font-size: 0.9em;
}

/* Used for the "(24 hour clock)" suffix */
.activeFieldTimeSuffix {
    display: inline-block;
    font-size: 0.9em;
}

/* used when rendering HR elements within a form */
.hr-inline {
    margin-top: 0px !important;
}

/* used when rendering buttons in toolbar include margin for nicer stacking */
.btn-toolbar .btn {
    margin-bottom: 6px !important;
}

/* Pre-release of TurasUi.Css */
.btn-wide {
    margin: 0;
    width: 100%;
    padding: 15px;
    font-size: 16px;
}


/* colour change for text */
.alert.alert-page {
    margin: -18px -18px 18px -18px;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
    padding-left: 18px;
    padding-right: 18px
}

.alert > ul li:first-child {
    margin-top: 2px;
}

.alert > ul li:last-child {
    margin-bottom: 10px;
}

/* lose margin from right aligned button */
.alert .notificationMessageDismiss {
    margin-right: 0px;
}

/* To present form fields closer together */
.form-group-list .form-group {
    margin-bottom: 0
}

/* To present form fields closer together */
.form-group-pair .form-group {
    margin-bottom: 8px;
}

/* Infant title */
form .infantDetailsTitle {
    font-size: 18px;
    font-weight: 700;
}

.remove-infant {
    margin-top: 34px !important;
}

/* Pregnancy Details title */
form .pregnancyDetailsTitle {
    margin-top: 10px !important;
}

.remove-pregnancy {
    margin-top: 4px !important;
}

/* Attendances Details title */
form .attendanceDetailsTitle {
    margin-top: 10px !important;
}

.remove-attendance {
    margin-top: 4px !important;
}

/* Align single checkboxes with label */
.checkbox-container {
    padding-top: 6px;
}


/* Postcode fields are made uppercase */
input[type="text"].isPostcode {
    text-transform: uppercase;
    width: 41.66666667%
}

/* From UI Style Revisions for Landing page panels                                          */
/* Revised style name to avoid additional padding on other buttons - like "Action" on grids */
.panel-body .btn-landingblock { /* MD Added 23 05 18 */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Form Title (within panel) */
.form-title {
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

/* For some extended suffix text, no background */
.input-group-addon.no-background {
    background: #fff !important;
    border: none;
}

/* Additional padding where panel body has no heading */
.no-panel-heading {
    padding-top: 20px;
}

/* Active breadcrumb element now matches colour of active second level navigation element */
.breadcrumb > .active {
    color: #1d1d1d !important;
}

/* MVC Validation Summary - 
   make the validation summary error title ("Please correct the errors and try again") slightly smaller than default.  */
.validation-summary-errors span {
    font-size: 18px;
    padding-bottom: 8px
}

/* Social Care Intervention Cells */
.intervention-active {
    font-weight: bold;
}

.intervention-not-active {
    font-weight: normal;
    color: #999999;
}
.drugUsageHeader {
    padding-top: 10px;
    padding-bottom: 40px;
    font-size: 18px;
}

.drugUsageBody {
    padding-bottom: 10px;
    border-bottom: 2px solid #f4f4f4;
}

/*----------------------------------------------------------------------
           Tables
------------------------------------------------------------------------*/
/* reduce margin/padding for ULs in TDs */
td ul {
    margin: 0;
    padding-left: 12px;
}

/* used when rendering button in Table Cell */
td .btn {
    margin-right: 0px !important;
}

/* formatting for cells with numeric values */
.table-primary .numeric-cell {
    text-align: right;
}

/* formatting for cells which end a group */
.table-primary .separator-cell {
    border-bottom: 2px solid #787e87;
}

/* formatting for total cells*/
.table-primary .total-cell {
    font-weight: bold;
    border-top: 2px solid #787e87;
    border-bottom: 2px solid #787e87;
}

/* formatting for cells which have no value */
.table-primary .unused-cell {
    background: #eee !important
}

/* cells / row with no colour applied */
.table-primary .uncoloured {
    background: #fff !important;
    border-color: #f9f9f9
}

/*----------------------------------------------------------------------
           SURVEY Tables
------------------------------------------------------------------------*/


/* Where there is an embedded question in a survey drop the padding */
.survey-table-container .col-md-3 {
    padding-left: 0 !important;
}

/* For the moment the labels in the survey tables are plain text */
.survey-table-container .control-label {
    font-weight: normal;
}


/*----------------------------------------------------------------------
           Phase Summary and Tables
------------------------------------------------------------------------*/

.phaseSummary {
    padding: 0;
}

    .phaseSummary h2 {
        margin: 30px 0 15px 0;
    }

/* These are used to style entries on the Scheduled Forms Summary table */
.phaseCell {
    color: white;
}

    .phaseCell img {
        height: 24px;
        width: 24px;
        margin-right: 10px;
    }

.pregnancyPhase {
    background-color: #CC0066 !important;
    color: white;
    border-left: 2px #CC0066 solid !important;
    border-bottom: 2px #b30059 solid !important; /* 5% Darker */
    /* 
        Although a background image would work for normal layout, it fails for stacked layout (when the table width is reduced)
        Instead the image is an element within the cell itself.
    */
    /*background-image: url(../images/phases/pregnancy.png);
    text-indent: 34px;
    padding-left: 10px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-origin: content-box;*/
}

.infancyPhase {
    background-color: #0F8899 !important;
    color: white;
    border-left: 2px #0F8899 solid !important;
    border-bottom: 2px #0d7382 solid !important; /* 5% Darker */
}

.toddlerhoodPhase {
    background-color: #265B91 !important;
    color: white;
    border-left: 2px #265B91 solid !important;
    border-bottom: 2px #214e7d solid !important; /* 5% Darker */
}

/* This is used rarely and it gets shown without an associated icon */
.postToddlerhoodPhase {
    background-color: #6B7C99 !important;
    color: white;
    border-left: 2px #6B7C99 solid !important;
    border-bottom: 2px #60708B solid !important; /* 5% Darker */
}

.pregnancyPhaseSummary {
    background-color: #CC0066 !important;
    color: white;
}

.infancyPhaseSummary {
    background-color: #0F8899 !important;
    color: white;
}

.toddlerhoodPhaseSummary {
    background-color: #265B91 !important;
    color: white;
}

.quickPhaseFilterContainer {
    margin-bottom: 6px;
}

    .quickPhaseFilterContainer .form-check-input:first-child {
        margin-left: 14px;
    }

    .quickPhaseFilterContainer .form-check-input {
    }

    .quickPhaseFilterContainer .form-check-label {
        margin-left: 4px;
        margin-right: 16px;
    }

/*----------------------------------------------------------------------
           Dropdown Menu
------------------------------------------------------------------------*/

/* Increase font-size on drop downs - like "Actions" menus */
.fnp-dropdown {
    font-size: 14px !important;
}

.dropdown-menu li {
    border: none;
    padding: 0;
}

.dropdown-menu > li > a {
    padding: 15px 30px;
}

/* fixes issue with our drop down action menu, where the css from bootstrap causes the last dropdown in a grid screen
    to be hidden under the parent UI element.
    see https://dev.azure.com/nestechnology/NES%20Digital/_boards/board/t/FNP%20England/Stories/?workitem=11492
*/
@media (max-width: 767px) {
    /*.table-responsive {
        overflow-y: inherit !important;
        overflow-x: inherit !important;
    }*/

    /* 
        https://dev.azure.com/nestechnology/NES%20Technology/_boards/board/t/FNP%20combined/Stories/?workitem=35155
    */
    .dropdown-menu > li > a {
        position: relative;
        z-index: 2000 !important;
    }
}

/*----------------------------------------------------------------------
           Default Browser Style Changes
------------------------------------------------------------------------*/

/* No spinners on number fields */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* No spinners on number fields */
input[type=number] {
    -moz-appearance: textfield;
}

/*----------------------------------------------------------------------
           DataTables
------------------------------------------------------------------------*/

.panel .pagination {
    float: right;
}

/* Where a Pagination button is disabled, we hide it */
.pagination > .disabled {
    display: none;
}

/*  additional table-caption style - similar to .panel-title */
.dataTables_wrapper .table-caption {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 24px;
    font-weight: normal;
}

/* DataTables_paginate (page controls) - rendered by the library as a DIV, override this to inline */
.dataTables_paginate {
    display: inline;
    margin-left: 1.25em;
    padding-left: 1em;
    border-left: 1px solid #d6d6d6;
}

/* DataTables_length (page size) - rendered by the library as a DIV, override this to inline */
.dataTables_length {
    display: inline;
}

/* DataTables_filter (filter box) - increase size to fill container */
.dataTables_filter {
    width: 100%
}

/*----------------------------------------------------------------------
            Infant's ASQ Summary
------------------------------------------------------------------------*/

.asqCellNoScore {
    border-left-style: none;
}

.asqCellAssessment {
    border-left-color: red !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

.asqCellMonitor {
    border-left-color: orange !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

.asqCellOnSchedule {
    border-left-color: green !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
}

.chartlegend .asqOnSchedule {
    background-color: green;
}

.chartlegend .asqMonitor {
    background-color: orange;
}

.chartlegend .asqAssessment {
    background-color: red;
}

/*----------------------------------------------------------------------
            Chartlist Classes
------------------------------------------------------------------------*/

.chartlist {
    margin: 0;
    padding: 0;
}

    .chartlist li {
        position: relative;
        display: block;
        border-bottom: 1px solid #fff;
    }

        .chartlist li .chartlabel {
            display: block;
            padding: 0.4em 4.5em 0.4em 0.5em;
            width: 20%;
            position: relative;
            font-weight: bold;
            font-size: 0.85em;
            color: #333;
            z-index: 100;
            border-right: 1px solid #CCC;
        }

    .chartlist .count {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        padding-top: 0.3em;
        padding-right: 0.3em;
        padding-bottom: 3.0em;
        text-align: right;
        color: #333;
        background: #fff;
        font-size: 0.9em;
        font-weight: bold;
        line-height: 1.2em;
        width: 10%;
        z-index: 100;
    }

    .chartlist .index {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        text-indent: -9999px;
        overflow: hidden;
        line-height: 2em;
        width: 80%;
    }

    .chartlist .axis {
        background: #fff;
        text-align: right;
        padding-top: 4px;
        border-right: 1px solid #CCC;
    }

    .chartlist .blank {
        background: #eee;
    }

    .chartlist .range {
        background: #00a94f;
        border-top: 0.25em solid #eee;
        border-bottom: 0.25em solid #eee;
        border-right: 1px solid #fff;
    }

    .chartlist .actual {
        background: #333;
        border-top: 0.1em solid #eee;
        border-bottom: 0.1em solid #eee;
        border-right: 1px solid #fff;
    }

/* basic positioning */
.chartlegend {
    list-style: none;
}

    .chartlegend li {
        float: right;
        margin-left: 14px;
    }

    .chartlegend span {
        border: 1px solid #ccc;
        float: left;
        width: 12px;
        height: 12px;
        margin: 4px 3px 2px 2px;
    }

    .chartlegend .range {
        background-color: #00a94f;
    }

    .chartlegend .actual {
        background-color: #333;
        height: 18px;
        width: 8px;
        margin-top: 1px;
        margin-right: 4px;
    }


.chartActualHeading {
    font-size: small;
    margin-right: 2px;
    float: right;
}

.chartcontainer {
    border: 1px solid #CCC;
    padding: 1em;
    margin-bottom: 1.75em;
}

    .chartcontainer > h4 {
        margin-top: 2px;
        margin-left: 0px;
        margin-bottom: 2px;
    }


/* ==========================================================================
        Client Details Styles
========================================================================== */

h4.fnp-statusReport {
    font-size: 16px;
    margin-bottom: 15px;
}

.fnp-nurse-team {
    margin-top: 14px;
    margin-left: 24px;
}

.fnp-activeClientIndicator {
    color: green;
}

.fnp-activeDisengagedClientIndicator {
    color: orange;
}

.fnp-graduatedClientIndicator {
    color: black;
}

.fnp-leaverTransferredClientIndicator {
    color: green;
}

.fnp-leaverAttritionClientIndicator {
    color: red;
}

.fnp-formlisting {
    background: white;
    border-top: 0;
    border-bottom: 2px solid #f4f4f4;
    text-align: left;
    width: 100%;
}

.fnp-formlisting .btn {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.fnp-formlisting .dueInfo {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.fnp-formlisting .overdueByInfo {
    color: red;
    font-weight: bolder;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.fnp-formlisting .dueInInfo {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.fnp-infants {
}

.fnp-infants ul {
    padding: 0 26px;
    line-height: 26px;
}

.fnp-infants p {
    margin-bottom: 6px;
}

.fnp-infants .row div:nth-child(even) {
    border-left: 2px solid #f0f2f7;
}

.fnp-infants .row div {
    margin-bottom: 20px;
}


/* ==========================================================================
        FNP Actions Button Styles
========================================================================== */

.btn-fnp {
    background: white;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 12px 15px 12px 15px;
    border-top: 0;
    border-bottom: 2px solid #f4f4f4;
    text-align: left;
    width: 100%;
}

a.btn.btn-link.btn-fnp {
    border-bottom: 2px solid #f4f4f4;
    color: #0556ac;
}


.btn-fnp-blue {
    border: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: #0556AD;
    border-bottom: 2px solid white;
    color: white;
    text-align: left;
    width: 100%;
}

.btn-fnp-blue:hover {
    border-bottom: 2px solid white;
}


/* Turas FNP Specific Styles  */

.fnp-detailsSection {
    border: 2px solid #dfdfdf;
    padding: 40px 20px;
}

.nurseList h2 {
    margin: 30px 0 15px 0;
}

.team-client-reassign h5 {
    padding: 0;
    margin: 0 0 15px 0;
}

.team-client-reassign {
    margin-bottom: 20px;
}

/* -- FNP List Styles -- */

.nurseList li {
    list-style: none;
    margin: 0;
    border-bottom: 2px solid #dfdfdf;
    padding: 10px;
}

.nurseList ul {
    border-top: 2px solid #dfdfdf;
    padding: 0;
}


/* -- Turas FNP Styles - September 11th -- */

.caseload-secondary-info-cell {
    border-style: none solid solid solid !important;
    border-width: 1px !important;
    border-color: #c2c2c2 !important;
    background-color: #f5f5f5 !important;
    font-size: 1.3em;
    font-weight: bold;
}

.caseload-secondary-heading-cell {
    border-style: solid solid none solid !important;
    border-width: 1px !important;
    border-color: #c2c2c2 !important;
    background-color: #f5f5f5 !important;
    font-size: 1.0em;
}

h4.fnp-statusReport {
    font-size: 16px;
    margin-bottom: 15px;
}

.fnp-nurse-team {
    margin-top: 14px;
    margin-left: 24px;
}

/* -- Media Query -- */
@media only screen and (max-width: 600px) {
    .formMargin-50 {
        margin: 0;
    }

    .nurseList {
        padding: 20px 0;
    }
}

.copyright {
    font-size: 15px;
    font-style: italic;
    border-bottom: none !important;
}
/*----------------------------------------------------------------------
                Help Desk Button  
------------------------------------------------------------------------*/
.helpdesktab {
    position: fixed;
    top: 380px;
    background: #00ad00;
    width: 30px;
    height: 140px;
    z-index: 1000;
    right: 0;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .helpdesktab {
        width: 60px;
    }

    i.fa.fa-question-circle {
        margin-left: 23px;
    }
}

/* Helpdesk Modal - mandatory field marker - red asterisk. */
label.field-wrapper {
    display: block;
}

label.required-field::after {
    content: "*";
    color: red;
}

i.fa.fa-question-circle {
    color: #fff;
    margin-left: 7px;
    margin-top: 14px;
    font-size: 17px;
    /*for rotating the image*/
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

i.menu-icon.fa.fa-question-circle.text-info {
    /*for rotating the image*/
    /* Safari */
    -webkit-transform: rotate(0deg);
    /* Firefox */
    -moz-transform: rotate(0deg);
    /* IE */
    -ms-transform: rotate(0deg);
    /* Opera */
    -o-transform: rotate(0deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}

.helpdeskcontent {
    font-size: 14px;
    margin-top: 60px;
    font-family: Helvetica;
    font-weight: 500;
}

    .helpdeskcontent p {
        color: #fff;
        /*for rotating the text*/
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

/*When it goes to Mobile and Small Tablet remove Helpdesk and Usersnap Tab*/

@media (max-width:767px) {

    div#us_report_button {
        display: block;
    }

    .helpdesktab {
        display: block;
    }
}

