/* History:
   28-05-2020 KR - Add navigation, cleanup 
   16-06-2020 KR - Fix icon borders in sitemenu
   17-06-2020 KR - user menu formatting, added useful bootstrap 4 utilities
*/
@import url("iq.css");
@import url("tab-options.css");
@import url("navigation.css");                              

/***************** General body styles *********************/

    html        {font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
    html, body  {height: 100%;}     /* Important - ensures the page is always full height, with footer stuck to botttom or at the end 
                                       of content if larger. Requires footer to be fixed height with matching padding on the .body-content */
    .body-content {
        background-color: #ffffff;
        box-shadow: 0px 0px 8px #cccccc;
        margin: 0 auto;
        min-height: 100%;
        position: relative;
        padding-bottom: 90px; /* Must match footer content */
    }
    body:not(.login) footer {
        position: absolute;
        bottom: 0;
        height: 90px; /* Must match body-content padding */
        width: 100%;
    }
    body        {background-color: #f3f8fe;}

    /*======== LOGIN BODY - simple flavour page - all white for login or where no-wings specified ========*/
    body.login, .body-content, .no-side-panels .body-content {background-color: #fff;}
    body.login .body-content, .no-side-panels .body-content  {box-shadow: none;}

    /*======== HEADER - FOR SITE TITLE AND HEADER MENU (USER MENU) ========*/
    body .body-content header {
        background-image: url("../../images/header.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b7dcf9; /* ensures continuation in longer pages */
        min-height: 30px;
    }
    /* target containers only to counteract padding */
    body .container header, body .container footer,
    body .container-fluid header, body .container-fluid footer {
        margin-left: -15px;
        margin-right: -15px;
    }
    /* Increased font size and added preferred .site-title class */
    body header .page-title, body header .site-title {
        color: #006194;
        font-size: 20px;
        font-weight: 500;
        margin: 4px 15px; /* margin to match container margins */
        text-align: left;
        display: inline-block;
    }
    /*======= TITLE BAR =======*/

    .container .title-bar, .container-fluid .title-bar {
        margin-left: -15px;
        margin-right: -15px;
    }
    /* When navbar in title-bar container, remove border and apply it to title-bar */
    .title-bar          {border-bottom: 1px solid #d6dee6;}
    .title-bar .navbar  {border: none;}

    /*======= FOOTER  ========*/

    /* top margin / background added to space from main content. */
    .body-content footer {
        padding: 20px;
        margin-top: 15px;
        border-top: solid 1px #ccc;
        font-size: 14px;
        background-color: white;
    }
    .body-content footer .copy          {float: left;}
    .body-content footer .version-info  {float: right;}

    /* Style smaller for mobile-first on responsive designs */
    .body-content.container footer, .body-content.container-fluid footer {
        font-size: 11px;
    }

    .body-content.container footer .version-info, .body-content.container-fluid footer .version-info {
        float: left;
    }
    /* On small or larger devices change sizes */
    @media (min-width: 768px) {
        .body-content.container footer, .body-content.container-fluid footer {
            font-size: 14px;
            line-height: 20px;
        }
        .body-content.container footer .version-info, .body-content.container-fluid footer .version-info {
            float: right;
        }
    }

/*********** HEADER MENU (USER MENU) ***********/

    /* New expanded header menu to provide easier access to user functions */

    .header-menu {
        margin: 0 7px;
        height: 30px;
        padding: 4px 0 2px 0;
        display: inline-block;
    }
    .header-menu .ifx-widget,
    .header-menu .user,
    .header-menu form,
    .header-menu .logout  {
        display: inline-block;
    }
    
    @media (min-width: 768px) {
        .header-menu {
            padding: 1px 0 2px 0;
        }
        .header-menu .btn:not(.select) {
            display: inline-block;
            background-color: transparent;
            border-color: transparent;
            color: #001F5b;
            height: 27px;
            padding: 3px 15px;
        }

        .header-menu .btn .badge  {
            background-color: white;
            color: #001F5b;
        }
    
        .header-menu .btn:hover,
        .header-menu .btn:active,
        .header-menu .open > .dropdown-toggle.btn  {
            background-color: #19b5FB;
            color: white;
        }
        .header-menu .btn.logout {
            border-radius: 4px;
        }
    }

    body .nav .user {
        float: right;
        padding: 2px 4px 0 0;
        margin-right: 4px;
    }

    .user .dropdown-menu .loginname {
      display: block;
      padding: 3px 20px;
      white-space: nowrap;
    }

    /* Send ifx-task-menu to expand to left */
    .header-menu .ifx-task-menu.dropdown-menu {
        left: unset;
        right: 0;
    }
    
    @media (max-width: 767px) {
        .header-menu .btn{
            padding: 1px 5px;
            font-size: 12px;
            line-height: 1.5;
            border-radius: 3px;
            color: #23527c;
            border-color: #a2b8cd;
        }
        .header-menu .ifx-task-status .badge,
        .header-menu .logout-icon {
            display: none;
        }        
        .header-menu .ifx-task-menu {
            font-size: 0.9em;
            min-width: 480px;
        }        
        .header-menu .btn.logout {
          border: none;
        }
        .header-menu .btn:hover,
        .header-menu .btn:active,
        .header-menu .open > .dropdown-toggle.btn  {
            color: #23527c;
            text-decoration: underline;
        }
    }
    
/*********** CONTEXT-TITLES - for page title *************************************/

/* Specifiers for preferred h2 tag and context-title class (h4 for compatibility) */
    .context-title h2, h2.page-title, h4.page-title {
        font-size: 19px;
        font-weight: 700;
        line-height: 24px;
        margin: 6px 15px 0px 15px;
        color: #3c648c;
        text-align: right;
        display: inline-block;
    }

    /* make absolute and position over the site-menu on small devices. 
       On larger devices make relative */
    .context-title {
        position: absolute;
        top: 30px; /* assumes 30px header */
        right: 0;
    }

    @media (min-width: 768px) {
        .context-title {
            position: inherit;
        }
    }

/********  STANDARD DEATH DETAILS BANNER ***************/
    /* Remove top border so that it sits as part of the identifiers strip */
    /* KR: can we remove? Prefer use of alerts */
    .patient-banner .death-banner .ifx-eventview, .patient-banner .death-banner .ifx-eventwrapper {
        border: 1px solid #ccc;
        border-top: none;
    }
    /* Basic styles for the no-content view when no active pages are available */
    /* KR: can we remove? Isn't this part of the components - would have the them at this point */
    .nocontent, .notfound, .forbidden, .offline, .firstrun {
        background: #f2f2f2;
    }
    .nocontent .container, .notfound .container, .forbidden .container, .offline .container, .firstrun .container {
        max-width: 500px;
        margin: 50px auto 0 auto;
        text-align: center;
        color: #989898;
        padding: 20px;
    }
    .firstrun .container {
        max-width: 800px;
    }
    .firstrun textarea {
        width: 100%;
        height: 300px;
        padding: 10px;
    }
    .nocontent .box1, .notfound .box1, .forbidden .box1, .offline .box1, .firstrun .box1 {
        padding: 0 25px;
        margin-bottom: 20px;
    }

    .nocontent p, .notfound p, .forbidden p, .offline p, .firstrun p {
        font-size: 16px;
        margin-top: 10px;
    }
    /* END no-content styles */

/********  LOGIN / CHANGE PASSWORD PAGES ***************/

    body.login, body.login .container {background-color: white;}
    body.login header                 {display: none;}
    body.login .row                   {padding: 0 20px;} /* for better alignment */

    body.login .login-text {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    body.login .login-widget {padding-top: 25px;}
    body.login .login-logo   {padding: 10% 0 0 5px;}

    body.login footer {
        margin: 40px 0 0 0;
        padding: 20px 0 10px 0;
    }

    body.login footer .copy, body.login footer .copyright-info,
    body.login footer .version-info {
        margin-bottom: 5px;
        font-size: 12px;
        display: block;
        width: 100%;
    }

    body.login .body-content {max-width: 980px;} /* no point going larger than this */
    
    body.login h1, body.login .app-name, 
    body.login p, body.login label          {color: #001F5B;}      /* KR: font colours to harmonise with logo */

    .login-row .login-widget, body.login footer {
        border-top: solid 1px #dbeeff;
        font-size: 14px;
    }

    .login-row form .form-control, .login-panel form .form-control {background-color: #f0f5f9;}
    
    body.login footer .version-info {float: left;}

    /* 768px - switch from above to side by side. */
    @media only screen and (min-width : 768px) {

        body.login .login-widget {
            border-top: none;
            border-left: solid 1px #dbeeff;
        }

        body.login .login-text {padding-top: 30px;}

        body.login footer .copy, body.login footer .copyright-info,
        body.login footer .version-info {
            display: inline-block;
            width: auto;
            font-size: 13px;
        }

        body.login footer .version-info {float: right;}
    }

    /* 992px - switch to larger fonts */
    @media only screen and (min-width : 992px) {
        body.login h1, body.login .app-name {font-size: 1.8em;}
        body.login p, body.login label      {font-size: 1.2em;}

        body.login footer .copy, body.login footer .copyright-info,
        body.login footer .version-info     {font-size: 14px;}
    }

    /* KR: deprecated class names */
    .login .appName {
        font-size: 1.4em;
        font-weight: 500;
    }

    .login-panel form {margin: 0 auto;}

    .login-panel .text1 {
        font-size: 1.1em;
        font-weight: 500;
    }

    .login-panel form .control-label {
        font-weight: normal;
        text-align: left;
    }

    .login-panel .login-widget {
        border-left: 1px solid #eee;
        margin-left: -10px;
        padding-left: 20px;
        padding-right: 70px;
    }

    /* KR: Deprecated class names */
    @media (max-width: 759px) {

        .login-panel, .login-panel .text1 {padding: 0;}

        .login-panel .login-widget {
            border: none;
            margin-top: 20px;
            margin-left: 0px;
            padding-right: 20px;
            padding-left: 20px;
        }
    }
    /* END login styles */

/**************** Validation errors **************/
    .validation-summary-errors {
        border-radius: 3px;
        background-color: #E74C3C;
        margin-top: 10px;
        padding: 10px;
    }

    .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    .validation-summary-errors ul li {
        font-size: 15px;
        list-style-type: none;
        text-align: center;
        color: #fff;
    }

    .field-validation-error {color: #E74C3C;}
    
    .ifx-error-container {
        border: 1px dashed #FF3333;
        display: inline-block;
        margin: 1px;
        padding: 2px;
        text-align: center;
    }

/************* iFrame default *****************/
    .ifx-urladdinframe {width: 600px;}

    .scrollable-menu {
        max-height: 300px;
        overflow-y: scroll;
    }
    /* Point on grid rows for selection */
    table.k-selectable tr {
        cursor: pointer;
    }

    .dropdown-menu .logout {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
        border: none;
    }

/**************** Menus *********************/
    .dropdown-submenu { position: relative; }

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-on-hover:hover > .dropdown-menu,
    .dropdown-submenu:hover > .dropdown-menu  {display: block;}

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after { border-left-color: #fff;}
    .dropdown-submenu.pull-left       {float: none;}

    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }

    @media (max-width: 768px) {
        .subnav {
            border-top: 1px solid #e7e7e7;
            margin-left: 10px;
        }
        .subnav a       {color: #777;}
        .subnav a:hover {color: #333;}
    }

/*********** Collapse icon **************/
    .accordion .panel-body {
        padding-left: 0px;
        padding-right: 0px;
    }

    .accordion.panel-group .panel-heading + .panel-collapse > .panel-body {
        border-top: none;
    }

    .accordion .panel-default > .panel-heading {
        border: solid 1px #ddd;
        border-radius: 4px;
        padding: 0px;
        color: #3c648c;
    }

    .accordion .panel {border: none;}

    .accordion .panel-heading .accordion-toggle {
        display: block;
        height: 100%;
        width: 100%;
        text-decoration: none;
        padding: 10px 15px;
    }

    .accordion .panel-heading .accordion-toggle:after {
        /* symbol for "opening" panels */
        font-family: 'Font Awesome 5 Free'; /* essential for enabling glyphicon */
        content: "\f106"; /* adjust as needed, taken from bootstrap.css */
        float: right; /* adjust as needed */
        font-weight: 900;
    }

    .accordion .panel-heading .accordion-toggle.collapsed:after {
        /* symbol for "collapsed" panels */
        content: "\f107"; /* adjust as needed, taken from bootstrap.css */
    }

    .accordion .panel-title {
        font-size: 14px;
        font-weight: 600;
    }

/*********** NAVBAR Blue ***********/

    .navbar, .navbar-blue {
        line-height: 14px;
        margin-bottom: 0;
        min-height: 39px;
    }

    .navbar-blue .navbar-nav > li > a {
        background-color: transparent; /* KR Review with AW - azure? */
        color: #3c648c;
        line-height: 8px;
        height: 39px;
        border: none;
        border-top: 1px solid #d6dee6;
        font-weight: 600;
        transition: 0.3s; /*New styling rule for nav bar to look nicer */
    }

    /* KR: override focus style on links - set to same as active 
       Changed to maintain when hovering over dropdown menus */
    
    /* .navbar-blue .navbar-nav > li.active > a:hover,
       .navbar-blue .navbar-nav > li.active > a, */
    .navbar-blue .navbar-nav > li > a:hover,          
    .navbar-blue .navbar-nav > li.dropdown-on-hover:hover {
        background-color: #d5ecff;
    }

    /* KR: Active page in dropdown menu appears in primary colour. */
    .navbar-blue .dropdown-menu > .active > a,
    .navbar-blue .dropdown-menu > .active > a:focus,
    .navbar-blue .dropdown-menu > .active > a:hover,
    .navbar-blue .navbar-toggle:hover
    /* .navbar-blue .navbar-toggle:focus */ {
        background-color: #d5ecff;
        color: #3c648c;
    }

    .navbar-blue .navbar-toggle {
        background-color: transparent;
        color: #3c648c;
        float: left;
        font-weight: 600;
    }

    .navbar-blue .navbar-toggle .icon-bar {
        background-color: #3c648c;
    }
    /*
    .navbar .navbar-nav > .active > a, .navbar .navbar-nav a,
    .navbar-blue .navbar-nav > .active > a, .navbar-blue .navbar-nav a  {
        border-left: 1px solid white; */ /****adds border between active nav buttons making easier to distinguish when highlighting other buttons in nav****/ /*
        border-right: 1px solid white;
    }
    */
    .navbar .navbar-nav > li:first-child > a,
    .navbar-blue .navbar-nav > li:first-child > a {
        border-left: none; /* hide the border on the first child.*/
    }

    /* KR: When in site-menu, remove padding. */
    .site-menu .navbar-collapse {
        padding-left: 0;
        padding-right: 0;
    }

    .site-menu .navbar-toggle {
        margin: 0;
        border-radius: 0;
        height: 35px;
    }
        
    /* KR Support for mobile devices:
           Make full width by default for mobile with padding
           - switch to auto and no padding from small devices and above */
    .site-menu {
        width: 100%;
    }

    .site-menu .navbar {
        display: block;
    }

    .site-menu .navbar-nav {
        margin: 0;
    }

    .site-menu .navbar .nav > li > a {
        padding-left: 25px;
        padding-right: 25px;
    }

    @media (min-width: 768px) {
        .site-menu {
            width: auto;
        }

            .site-menu .navbar .nav > li > a {
                padding-left: 15px;
                padding-right: 15px;
            }

        .navbar-blue .navbar-nav > li > a
        /*        .navbar-blue .navbar-collapse .navbar-nav > li > a,
        .navbar-blue .navbar-nav > li > a .fas  */{
            background-color: transparent;
            border: none;
            /* border-right: solid 0px #67686929; */
            border-left: 1px solid white; /****adds border between active nav buttons making easier to distinguish when highlighting other buttons in nav****/
            border-right: 1px solid white;
        }
    }

/********* End NAVBAR Blue *********/


/********* Override Grid default styles *********/
    .k-grid-header .k-link:link, .k-grid-header .k-link:visited, .k-grid-header .k-nav-current.k-state-hover .k-link, .k-grouping-header .k-link {
        color: #858687; /****slightly lighter shade to balance out with increased font weight****/
        font-weight: 600; /****increased font weight to differentiate more from the results****/
    }

    .k-grid td {
        border-width: 0px 0px 1px 1px; /****adds border around cells****/
    }

    .k-grid .k-grid-content .k-state-selected {
        color: inherit;
    }

    .k-grid tr, .k-grid tr.k-alt {
        background-color: #fff; /****removes the alternating row colour so all display white****/
    }

    .k-grid tr:hover, .k-grid tr.k-alt:hover {
        background-color: #c8e0f5; /****changed highlighted colour to a shade of blue****/
    }


/********* Utilities *********/

/* Support Bootsrtap colour styles on nav pills */
.nav-pills.default > li.active > a {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.nav-pills.primary > li.active > a {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.nav-pills.success > li.active > a {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.nav-pills.info > li.active > a {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.nav-pills.warning > li.active > a {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.nav-pills.danger > li.active > a {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.nav-pills.link > li.active > a {
    background-color: transparent;
    border-color: transparent;
    font-weight: 400;
    color: #337ab7;
    border-radius: 0;
}

/*********** COPIED FROM STANDARD BUTTONS (SITFINITY) ***********/

    /* PRIMARY BUTTONS - ALT STYLE WITH CONTAINER CLASS */
    .primary .btn {
        background-color: #317bba;
        color: white;
        border-color: #256ba7;
    }

    .primary .btn:hover,
    .primary .btn:active,
    .primary .open > .dropdown-toggle.btn {
        background-color: #19b5FB;
        color: white;
        border-color: #16a2e0;
    }

    /* SECONDARY BUTTONS */
    .btn-secondary, .secondary .btn {
        background-color: #00c7c1;
        color: white;
        border-color: #00afaa;
    }

    .btn-secondary:hover, .secondary .btn:hover,
    .btn-secondary:active, .secondary .btn:active,
    .secondary .open > .dropdown-toggle.btn {
        background-color: #01b1ac;
        color: white;
        border-color: #019c98;
    }

/********************** MODIFIERS AND HELPER CLASSES *********************/

    /*======== no-gutters (equivalent to bootstrap v4) ========*/
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
    .row.no-gutters .col-lg-1, .row.no-gutters .col-lg-10, .row.no-gutters .col-lg-11, .row.no-gutters .col-lg-12, .row.no-gutters .col-lg-2, .row.no-gutters .col-lg-3, .row.no-gutters .col-lg-4, .row.no-gutters .col-lg-5, .row.no-gutters .col-lg-6, .row.no-gutters .col-lg-7, .row.no-gutters .col-lg-8, .row.no-gutters .col-lg-9, .row.no-gutters .col-md-1, .row.no-gutters .col-md-10, .row.no-gutters .col-md-11, .row.no-gutters .col-md-12, .row.no-gutters .col-md-2, .row.no-gutters .col-md-3, .row.no-gutters .col-md-4, .row.no-gutters .col-md-5, .row.no-gutters .col-md-6, .row.no-gutters .col-md-7, .row.no-gutters .col-md-8, .row.no-gutters .col-md-9, .row.no-gutters .col-sm-1, .row.no-gutters .col-sm-10, .row.no-gutters .col-sm-11, .row.no-gutters .col-sm-12, .row.no-gutters .col-sm-2, .row.no-gutters .col-sm-3, .row.no-gutters .col-sm-4, .row.no-gutters .col-sm-5, .row.no-gutters .col-sm-6, .row.no-gutters .col-sm-7, .row.no-gutters .col-sm-8, .row.no-gutters .col-sm-9, .row.no-gutters .col-xs-1, .row.no-gutters .col-xs-10, .row.no-gutters .col-xs-11, .row.no-gutters .col-xs-12, .row.no-gutters .col-xs-2, .row.no-gutters .col-xs-3, .row.no-gutters .col-xs-4, .row.no-gutters .col-xs-5, .row.no-gutters .col-xs-6, .row.no-gutters .col-xs-7, .row.no-gutters .col-xs-8, .row.no-gutters .col-xs-9 {
        padding-left: 0;
        padding-right: 0;
    }

    /* Negate Gutters - remove 15px padding used by bootstrap in some instances */
    .negate-gutters {
        margin-left: -15px;
        margin-right: -15px;
    }

/*======== Spacing and Margins ========*/

    .margin-lg                              {margin: 20px;}
    .margin-md,          .margin            {margin: 15px;}
    .margin-sm                              {margin: 10px;}
    .margin-xs                              {margin: 5px;}
    .margin-none,        .margin-0          {margin: 0;}

    .padding-lg                             {padding: 20px;}
    .padding-md,         .padding           {padding: 15px;}
    .padding-sm                             {padding: 10px;}
    .padding-xs                             {padding: 5px;}
    .padding-none,       .padding-0         {padding: 0;}

    /* side specifiers override full specifiers */

    .margin-none-bottom, .margin-bottom-0   {margin-bottom: 0;}
    .margin-none-top,    .margin-top-0      {margin-top: 0;}
    .margin-none-left,   .margin-left-0     {margin-left: 0;}
    .margin-none-right,  .margin-right-0    {margin-right: 0;}

    .padding-none-bottom, .padding-bottom-0 {padding-bottom: 0;}
    .padding-none-top,    .padding-top-0    {padding-top: 0;}
    .padding-none-left,   .padding-left-0   {padding-left: 0;}
    .padding-none-right,  .padding-right-0  {padding-right: 0;}

    .margin-xs-bottom,  .margin-bottom-xs   {margin-bottom: 5px;}
    .margin-xs-top,     .margin-top-xs      {margin-top: 5px;}
    .margin-xs-left,    .margin-left-xs     {margin-left: 5px;}
    .margin-xs-right,   .margin-right-xs    {margin-right: 5px;}

    .padding-xs-bottom, .padding-bottom-xs  {padding-bottom: 5px;}
    .padding-xs-top,    .padding-top-xs     {padding-top: 5px;}
    .padding-xs-left,   .padding-left-xs    {padding-left: 5px;}
    .padding-xs-right,  .padding-right-xs   {padding-right: 5px;}

    .margin-sm-bottom,  .margin-bottom-sm   {margin-bottom: 10px;}
    .margin-sm-top,     .margin-top-sm      {margin-top: 10px;}
    .margin-sm-left,    .margin-left-sm     {margin-left: 10px;}
    .margin-sm-right,   .margin-right-sm    {margin-right: 10px;}

    .padding-sm-bottom, .padding-bottom-sm  {padding-bottom: 10px;}
    .padding-sm-top,    .padding-top-sm     {padding-top: 10px;}
    .padding-sm-left,   .padding-left-sm    {padding-left: 10px;}
    .padding-sm-right,  .padding-right-sm   {padding-right: 10px;}

    .margin-bottom,  .margin-bottom,    .margin-md-bottom,  .margin-bottom-md   {margin-bottom: 15px;}
    .margin-top,     .margin-top,       .margin-md-top,     .margin-top-md      {margin-top: 15px;}
    .margin-left,    .margin-left,      .margin-md-left,    .margin-left-md     {margin-left: 15px;}
    .margin-right,   .margin-right,     .margin-md-right,   .margin-right-md    {margin-right: 15px;}

    .padding-bottom, .padding-bottom,   .padding-md-bottom, .padding-bottom-md  {padding-bottom: 15px;}
    .padding-top,    .padding-top,      .padding-md-top,    .padding-top-md     {padding-top: 15px;}
    .padding-left,   .padding-left,     .padding-md-left,   .padding-left-md    {padding-left: 15px;}
    .padding-right,  .padding-right,    .padding-md-right,  .padding-right-md   {padding-right: 15px;}

    .margin-lg-bottom,  .margin-bottom-lg   {margin-bottom: 20px;}
    .margin-lg-top,     .margin-top-lg      {margin-top: 20px;}
    .margin-lg-left,    .margin-left-lg     {margin-left: 20px;}
    .margin-lg-right,   .margin-right-lg    {margin-right: 20px;}

    .padding-lg-bottom, .padding-bottom-lg  {padding-bottom: 20px;}
    .padding-lg-top,    .padding-top-lg     {padding-top: 20px;}
    .padding-lg-left,   .padding-left-lg    {padding-left: 20px;}
    .padding-lg-right,  .padding-right-lg   {padding-right: 20px;}

    .m-auto            {margin: auto;}
    .mt-auto, .my-auto {margin-top: auto;}
    .mb-auto, .my-auto {margin-bottom: auto;}
    .ml-auto, .mx-auto {margin-left: auto;}
    .mr-auto, .mx-auto {margin-right: auto;}

    /*======== borders ========*/

    .border-none, .border-0 {border: none;}
    .border-full            {border: solid 1px #ccc;} /* Don't use .border as it's used elsewhere */

    .border-top-0    {border-top: none;}
    .border-right-0  {border-right: none;}
    .border-bottom-0 {border-bottom: none;}
    .border-left-0   {border-left: none;}

    .border-top      {border-top: solid 1px #ccc}
    .border-bottom   {border-bottom: solid 1px #ccc}
    .border-left     {border-left: solid 1px #ccc}
    .border-right    {border-right: solid 1px #ccc}

    /* based on bootstrap 4 */
    .rounded         {border-radius: 0.25rem;}
    .rounded-top {
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
    }
    .rounded-right {
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    }
    .rounded-bottom {
      border-bottom-right-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }
    .rounded-left {
      border-top-left-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }
    .rounded-circle {
      border-radius: 50% !important;
    }
    .rounded-0 {border-radius: 0 !important;}

    /*======== Display types ========*/
    .d-none,         .d-xs-none         { display: none; }
    .d-inline,       .d-xs-inline       { display: inline; }
    .d-inline-block, .d-xs-inline-block { display: inline-block; }
    .d-block,        .d-xs-block        { display: block;}
    @media screen and (min-width: 768px) {
        .d-sm-none                  { display: none; }
        .d-sm-inline                { display: inline; }
        .d-sm-inline-block          { display: inline-block; }
        .d-sm-block                 { display: block;}
    }
    @media screen and (min-width: 992px) {
        .d-md-none                  { display: none; }
        .d-md-inline                { display: inline; }
        .d-md-inline-block          { display: inline-block; }
        .d-md-block                 { display: block;}
    }
    @media screen and (min-width: 1200px) {
        .d-lg-none                  { display: none; }
        .d-lg-inline                { display: inline; }
        .d-lg-inline-block          { display: inline-block; }
        .d-lg-block                 { display: block;}
    }

    /*======== Sizing ========*/
    .mw-100 { max-width: 100%; }
    .mh-100 { max-height: 100%; }
    .w-25   { width: 25%; }
    .w-50   { width: 50%; }
    .w-75   { width: 75%; }
    .w-100  { width: 100%; }

    /*======== Responsive Images : apply to image class to limit size to 100% but allow to resize down ========*/
    .responsive-img {max-width: 100%;}

    /*======== TEXT MODIFIER: ========*/
    
    /* font-size : Affect size of text*/
    .text-xs {font-size: 0.8em;}
    .text-sm {font-size: 0.9em;}
    .text-md {font-size: 1.25em;}
    .text-lg {font-size: 1.4em;}
    .text-xl {font-size: 1.6em;}
    .text-justify  { text-align: justify; }

     /* Bootstrap modifiers : Important tags removed */
    .text-lowercase  { text-transform: lowercase; }
    .text-uppercase  { text-transform: uppercase; }
    .text-capitalize { text-transform: capitalize; }

    .font-weight-light  { font-weight: 200; }
    .font-weight-normal { font-weight: 400; }
    .font-weight-bold   { font-weight: 600; }
    .font-italic        { font-style: italic; }
    
    .text-white { color: #fff; }

    /*======== text align ========*/
    .text-left,   .text-xs-left   { text-align: left }
    .text-center, .text-xs-center { text-align: center; }
    .text-right,  .text-xs-right  { text-align: right;}
    @media screen and (min-width: 768px) {
        .text-sm-left             { text-align: left; }
        .text-sm-center           { text-align: center; }
        .text-sm-right            { text-align: right;}
    }
    @media screen and (min-width: 992px) {
        .text-md-left             { text-align: left; }
        .text-md-center           { text-align: center; }
        .text-md-right            { text-align: right;}
    }
    @media screen and (min-width: 1200px) {
        .text-lg-left             { text-align: left; }
        .text-lg-center           { text-align: center; }
        .text-lg-right            { text-align: right;}
    }

    /*======== Navbar size ========*/
    
    .navbar-xs.navbar {min-height: 24px;}
    
    .navbar-xs.navbar .navbar-nav > li > a,
    .navbar-xs.navbar .navbar-collapse .navbar-nav > li > a,
    .navbar-xs.navbar .navbar-nav > li > a .fas {
        height: 24px;
        line-height: 4px;
    }

    .navbar-sm.navbar {min-height: 30px;}
    
    .navbar-sm.navbar .navbar-nav > li > a,
    .navbar-sm.navbar .navbar-collapse .navbar-nav > li > a,
    .navbar-sm.navbar .navbar-nav > li > a .fas {
        height: 30px;
        line-height: 12px;
    }

    .navbar-md.navbar {min-height: 35px;}

    .navbar-md.navbar .navbar-nav > li > a,
    .navbar-md.navbar .navbar-collapse .navbar-nav > li > a,
    .navbar-md.navbar .navbar-nav > li > a .fas {
        height: 35px;
        line-height: 17px;
    }

    .navbar-lg.navbar {min-height: 45px;}

    .navbar-lg.navbar .navbar-nav > li > a,
    .navbar-lg.navbar .navbar-collapse .navbar-nav > li > a,
    .navbar-lg.navbar .navbar-nav > li > a .fas {
        height: 45px;
        line-height: 27px;
    }

    .navbar-xl.navbar {min-height: 50px;}

    .navbar-xl.navbar .navbar-nav > li > a,
    .navbar-xl.navbar .navbar-collapse .navbar-nav > li > a,
    .navbar-xl.navbar .navbar-nav > li > a .fas {
        height: 50px;
        line-height: 22px;
    }

    @media (min-width: 768px) {
        .navbar-xs .navbar-nav > li > a,
        .navbar-sm .navbar-nav > li > a,
        .navbar-md .navbar-nav > li > a,
        .navbar-lg .navbar-nav > li > a,
        .navbar-xl .navbar-nav > li > a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }


    /* Size Modifier classes for navs (not navbar-nav) - apply as container or specifier class to decrease size */
    /* TODO - check if navbar and nav modifiers can be consolidated */
    /* Modifier: nav-lg */
    .nav-lg .nav:not(.navbar-nav) > li > a,
    .nav-lg.nav:not(.navbar-nav) > li > a {
        line-height: 1.4em;
        padding: 10px 15px;
    }
    /* Modifier: nav-md */
    .nav-md .nav:not(.navbar-nav) > li > a,
    .nav-md.nav:not(.navbar-nav) > li > a {
        line-height: 1em;
        padding: 8px 12px;
    }

    /* Modifier: nav-sm */
    .nav-sm .nav:not(.navbar-nav) > li > a,
    .nav-sm.nav:not(.navbar-nav) > li > a {
        line-height: 1em;
        padding: 6px 9px;
    }

    /* Modifier: nav-xs */
    .nav-xs .nav:not(.navbar-nav) > li > a,
    .nav-xs.nav:not(.navbar-nav) > li > a {
        line-height: 1em;
        padding: 4px 9px;
    }

    /*************************** BUTTON SIZE MODIFIER CLASSES ************************************/

    /* convert bootstrap buttons to ems for scaling then increase/decrease font size
           line-height increases button size.
        */
    .large .btn {
        padding: 0em 1em;
        font-size: 1.2em;
        line-height: 2em;
    }

    .extra-large .btn {
        padding: 0em 1.25em;
        font-size: 1.4em;
        line-height: 2em;
    }

    .compact .btn {
        padding: 0em 0.5em; /* override other modifiers */
        line-height: 1.7em;
    }

    .compact .btn .fas, .compact .btn .far {line-height: 1.7em;}
    
    .btn-full-width .btn, .btn-full-width.btn { width: 100%;}

    /* Stack: stacks 1st level elements on top of each other sized to the outer container 
       requires the outer container to be expicitly sized, otherwise will size to 100% of 
       its parent 
       
       stack-spaced is a variant that adds a 5px margin between each element.
       */

    .stack-spaced, .stack, .stack-spaced > *, .stack > * {width: 100%;}
    .stack-spaced > *:not(:last-child)                   {margin-bottom: 5px;}
    
    /******************** JUMBOTRON - LITE : Lightweight version of jumbotron ************************/    
    .jumbotron-lite {
        background-color: ghostwhite;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 15px;
    }
    @media screen and (min-width: 768px) {
      .jumbotron-lite, .container .jumbotron-lite, .container-fluid .jumbotron-lite {
        padding-left: 30px;
        padding-right: 30px;
      }
    }

    /*************************** BACKGROUND ************************************/
    .bg-white                       {background-color: white;}
    .bg-transparent                 {background-color: transparent;}
    .bg-blue                        {background-color: #BFE2FE;}
    .bg-grey, .bg-gray              {background-color: #f0f5f8}
    .bg-blue-accent, .bg-light-blue {background-color: #d6ecff;}