/* All custom CSS here for Portfolio*/

/* Mark D: 'BS 3 overwrites'
           Portfolio is using an old BS 3 version will discuss upgrading 
           If BS 3 gets updated the following items can be removed: */
caption {
    text-align: left;
}

/* END BS 3 overwrites*/

/* Mark D: The table captions are in the wrong place. To do: will move the captions once all pages visited */
.table-caption {
    font-size: 20px;
    margin: 45px 0 10px;
    color: #1d1d1d;
    padding: 0;
}

/* Adam S: Updated table-captions to remove margin from first shown on page */
.table-primary:first-child .table-caption,
.table:first-child .table-caption {
    margin-top: 0px
}


/* Mark D: Some alerts not using sg structure so use this if not in use.  To do: will update all alerts.*/
.alert:not(.alert-success):not(.alert-warning):not(.alert-danger)
{   border: 5px solid #0098EA;
    background: #FFF;
    color: #1d1d1d;
}

/* Mark D: Some alerts have form static groups in them see workitem=18822.*/
.alert .form-group {
    display: block;
}

/* Mark D: There are some forms in alerts.  So the requiredFieldMarker is getting pushed down a line
    A UX reviw should remove these from alert boxes.
*/

.alert span.requiredFieldMarker, .alert span.conditionallyRequiredFieldMarker{
    display: unset;
}

/* Mark D: This is to fix the lable menu being black, it needs to be moved in to the style guide, currently it is in style guide specifc css*/
/* Styles for menu text beside hamburger icon - AS. 03/06/21 */
    .navbar-header span {
        color: white;
        margin: 0;
        position: absolute;
        right: 50px;
        top: 6px;
        font-size: 20px;
    }


/* Mark D:  Portfolio uses a sticky header */

.my-sticky-element.stuck {
    position: fixed;
    top: 0;
    max-width: 1200px;
    display: block;
}

.my-sticky-element {
    background: #F2f2f2;
    color: #1d1d1d;
    padding: 0px;
    max-width: 1000px;
    width: 100%;
    z-index: 1000;
    display: none;
}

.my-sticky-element-always-show {
    display: block !important;
}

/* Mark D: SBForAdd is a button on /Forms/Relationships/Summary that looks like it is the only button using
    RenderSubmitButton heper.  
*/
#SBForAdd {
    margin-top:0px;
}

.nav-tabs > li > a span.label {
    padding: 5px 10px !important;
    border-left:0px;
}

/* Mark D: Overwriting Turas Active tab style as Portfolio has tabs over multiple lines */

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border:0px !important;
}

/* Adam S: Resize select all checkbox on tables */
.selectAllCheckContainer input {
    width: initial;
    height: initial;
}

/* Mark D: .mobileInnerTable class is beign used on _activeTabMatrix  
   on the trainee /Forms/TeamAssessmentOfBehaviour/Summary 
   This is hiding table headers on desktop and showing on mobile
   The form is done differently from all other forms.
*/
.mobileInnerTable {
    display: none;
}

/* Mark D:  A lot of the h4 in forms are not surrounded by the form-group col-md-12 div which
    gives the H4 a margin bottom of 15px;
    To save going through adding all these manauly, the follwoing css should give the same styling;
*/
form.panel > div.panel-body > h4:not(div.panel-body >  div.form-group >  div.col-md-12 h4)
{
    margin-bottom:20px;
}
form div.panel-body > h4:not(div.panel-body >  div.form-group >  div.col-md-12 h4)
{
    margin-bottom:20px;
}
/* Mark D: As above some of the h4s have a custom class instead of the style guide divs. */
h4.tabSummaryCategoryHeading {
    margin-bottom:20px !important;
}

/* Mark D:  Back buttons are on every page and don't follow style guide. A css class to add the font awsome back arrow. */
.with-back-arrow::before {
    font-family: FontAwesome;
    content: "\f104";
    margin-right: 5px;
}


@media (max-width: 639px) {
    .mobileInnerTable {
        padding: 0 .6em 0 0;
        width: 32%;
        display: inline-block;
        font-weight: 600;
    }
}
/* ---- */


/* Adam S: Helps user tell that table row is clickable */
tr.clickableRow:hover {
    color: #2681d7;
    border-color: #d5d5d5;
    border-bottom-color: #bcbcbc;
    background-color: #eaeaea !important;
    background-image: -webkit-linear-gradient(top, #efefef 0%, #eaeaea 100%) !important;
    background-image: linear-gradient(to bottom, #efefef 0%, #eaeaea 100%) !important;
    background-repeat: repeat-x;
    cursor: pointer;
}



/* Mark D: Table saw is used and should be moved in to a different css file. 
   To do: Will look at other apps to see how done */

/*! Tablesaw - v2.0.1 - 2015-10-09
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2015 Filament Group; Licensed MIT */

table.tablesaw {
    empty-cells: show;
    max-width: 100%;
    width: 100%;
}

.tablesaw {
    border-collapse: collapse;
    width: 100%;
}

    /* Structure */


    .tablesaw th,
    .tablesaw td {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: .5em .7em;
    }

    .tablesaw thead tr:first-child th {
        padding-top: .9em;
        padding-bottom: .7em;
    }

/* Table rows have a gray bottom stroke by default */

.tablesaw-stack tbody tr {
    border-bottom: 1px solid #dfdfdf;
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
    display: none;
}

/* Stuart W. */
td.studentNurseCurriculum label {
    font-weight: normal;
}

td.studentNurseCurriculum label input {
    margin-right: 1em;
}

/* Mobile first styles: Begin with the stacked presentation at narrow widths */

@media only all {
    /* Show the table cells as a block level element */

    .tablesaw-stack td,
    .tablesaw-stack th {
        text-align: left;
        display: block;
    }

    .tablesaw-stack tr {
        clear: both;
        display: table-row;
    }



    /* Make the label elements a percentage width */

    .tablesaw-stack td .tablesaw-cell-label,
    .tablesaw-stack th .tablesaw-cell-label {
        display: block;
        padding: 0 0 0 0;
        width: 50%;
        display: inline-block;
        white-space: normal;
    }

    /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */

    .tablesaw-stack th .tablesaw-cell-label-top,
    .tablesaw-stack td .tablesaw-cell-label-top {
        display: block;
        padding: .4em 0;
        margin: .4em 0;
    }

    .tablesaw-cell-label {
        display: block;
    }

    /* Avoid double strokes when stacked */

    .tablesaw-stack tbody th.group {
        margin-top: -1px;
    }

    /* Avoid double strokes when stacked */

    .tablesaw-stack th.group b.tablesaw-cell-label {
        display: none !important;
    }
}

@media (max-width: 39.9375em) {
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: none;
    }

    .tablesaw-stack tbody td,
    .tablesaw-stack tbody th {
        clear: left;
        float: left;
        width: 100%;
    }

    .tablesaw-cell-label {
        vertical-align: top;
    }

    .tablesaw-cell-content {
        width: 50%;
        display: inline-block;
        white-space: normal;
    }

    .tablesaw-stack td:empty,
    .tablesaw-stack th:empty {
        display: none;
    }
}

/*Styling for end of placement reports*/
.newInidivdualRow {
    padding-bottom: 10px;
}

/*Styling for Form R Posts table row*/
.newformRegistrationPostRow {
    padding-bottom: 0px;
}

.priorityAreaDetails, .agreedActionDetails {
    clear: both;
}

/* Media query to show as a standard table at 560px (35em x 16px) or wider */

@media (min-width: 40em) {
    .tablesaw-stack tr {
        display: table-row;
    }

    /* Show the table header rows */

    .tablesaw-stack td,
    .tablesaw-stack th,
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: table-cell;
        margin: 0;
    }

        /* Hide the labels in each cell */

        .tablesaw-stack td .tablesaw-cell-label,
        .tablesaw-stack th .tablesaw-cell-label {
            display: none !important;
        }
}


@media (min-width: 40em) {
    .tablesaw-stack tr {
        display: table-row;
    }

    /* Show the table header rows */

    .tablesaw-stack td,
    .tablesaw-stack th,
    .tablesaw-stack thead td,
    .tablesaw-stack thead th {
        display: table-cell;
        margin: 0;
    }

        /* Hide the labels in each cell */

        .tablesaw-stack td .tablesaw-cell-label,
        .tablesaw-stack th .tablesaw-cell-label {
            display: none !important;
        }
}

/*----------------------------------------------------------------------
                             Chartlist Classes
------------------------------------------------------------------------*/

.chartlist {
    margin: 0;
    padding: 0;
}

    .chartlist li {
        position: relative;
        display: block;
        border-bottom: 1px solid #EEE;
    }

        .chartlist li .chartlabel {
            display: block;
            padding: 0.4em 4.5em 0.4em 0.5em;
            position: relative;
            font-weight: bold;
            color: #333;
            z-index: 2;
        }

    .chartlist .count {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 0.3em;
        margin-right: 0.3em;
        margin-bottom: 0;
        text-align: right;
        color: #333;
        font-weight: bold;
        font-size: 0.875em;
        line-height: 2em;
        z-index: 2;
    }

    .chartlist .index {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        text-indent: -9999px;
        overflow: hidden;
        line-height: 2em;
        opacity: 0.75;
    }

    .chartlist .severity0 {
        background: #b0b0b0;
    }

    .chartlist .severity1 {
        background: #5cb85c;
    }

    .chartlist .severity2 {
        background: #ec971f;
    }

    .chartlist .severity3 {
        background: #d9534f;
    }

#requirements .panel-group-field-help .panel {
    border: 5px solid #0098EA;
}

#requirements .panel-group-field-help .panel-heading {
    padding-bottom: 0px;
}

    #requirements .panel-group-field-help .panel i {
        color: #0098EA;
    }

/*----------------------------------------------------------------------
                             Notifications
------------------------------------------------------------------------*/
a.dismissnotification {
    cursor: pointer;
}

.alert a.btn {
    text-decoration: none;
}

.btn .pt-1 {
    padding-top: 2px !important;
}

.btn .pb-1 {
    padding-bottom: 2px !important;
}

.btn.py-1 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.btn .pt-2 {
    padding-top: 4px !important;
}

.btn .pb-2 {
    padding-bottom: 4px !important;
}

.btn .py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.btn .pt-3 {
    padding-top: 9px !important;
}

.btn .pb-3 {
    padding-bottom: 9px !important;
}

.btn .py-3 {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.btn .pl-1 {
    padding-top: 6px !important;
}

.btn .pr-1 {
    padding-bottom: 6px !important;
}

.btn .px-1 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.btn .pl-2 {
    padding-top: 12px !important;
}

.btn .pr-2 {
    padding-bottom: 12px !important;
}

.btn .px-2 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.btn .pl-3 {
    padding-top: 25px !important;
}

.btn .pr-3 {
    padding-bottom: 25px !important;
}

.btn .px-3 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}