/*********************************************************************************
    based on BEMIT (BEM + ITCSS), see https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
        - in the form:
        block__element--modifier
        ie. btn__primary--active
    ITCSS has following layers:
        1) Settings – used with preprocessors and contain font, colors definitions, etc.
        2) Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
        3) Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
        4) Elements/Base – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
        5) Objects – class-based selectors which define undecorated design patterns, for example media object known from OOCSS
        6) Components – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components
        7) Themes
        8) Utilities/Trumps – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class
    see https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a
    But, since we don't have a pre-processor, we'll omit Settings and Tools
*********************************************************************************/
/*********************************************************************************
   3)  Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
*********************************************************************************/
legend {
    width: auto;
}
/* since tooltip is text based, hovering over it shows the text selection cursor; not what we want */
svg:hover {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*********************************************************************************
    override jquery-ui datepicker style.  Can't just add my own class to this element as it is generated
*********************************************************************************/
.ui-datepicker {
    font-size: 1rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.ui-dialog { z-index: 1050 !important ;}
/* modal background solid as opposed to diagonal pattern */
.ui-widget-overlay {
    background: #808080;
}
/*********************************************************************************
    override bootstrap style.  For a lot of the elements, can't just add my own class to this element as it is generated
*********************************************************************************/
.no-display{
    display:none !important;
}

.container {
    max-width: 63rem;
}
/* TODO Brian: TRACS UI - Update all class references to vertically center content
/*.form-group {*/
/*    align-items: center;*/
/*}*/
.btn {
    margin-bottom: 0.5rem;
}
.page--grayscale .btn {
    display: none;
}
/* make modal scrollable*/
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
/* make modal not shift the background to the right, see https://stackoverflow.com/a/19962780 */
.modal {
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
}
/* center modal based off of https://dotdev.co/vertically-centered-bootstrap-modal/ */
.modal-open .modal {
    display: flex !important;
}
.modal .modal-dialog {
    margin: auto;
}
.tooltip { pointer-events: none; } /* fixes flickering when lots of content, and screen is narrow */
.tooltip-info__text div.arrow,  .tooltip-warning__text div.arrow, .tooltip-__text div.arrow {
    display: none;
}
.breadcrumb--alberta {
    background: none;
    padding-left: 0;
    margin-bottom: 0;
}
.breadcrumb--alberta__item+.breadcrumb--alberta__item::before {
    /* for whatever reason, content attribute flickers
        content: url(../../CommonWebContent/images/breadcrumb-separator.svg);
    */
    background: url(../../CommonWebContent/images/breadcrumb-separator.svg) center center no-repeat;
    color: transparent;
}
.breadcrumb--alberta__item a {
    text-decoration-line: underline;
}
.page {
    /* for sticky footer */
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.page .welcome{
    font-weight:bold;
}
.page__content {
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* for sticky footer */
    flex: 1 0 auto;
}
/* copied from bootstrap.css to use col-md instead of col-xs, see https://stackoverflow.com/a/36370182/4430939 */
@media print {
    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/*********************************************************************************
    6) Components
*********************************************************************************/
.container--header, .container--footer {
    height: 5rem;
}
.data-table {
    margin: 0 0 1rem 0;
}
.error-text {
    margin-top: 1rem;/* need to make space for char-count, since it goes directly below the textarea on mobile */
}
/*fieldset*/.fieldset{
    margin: 1rem 0em;
    padding: 1rem;
}
/*fieldset*/.fieldset, .tooltip-inner {
    text-align: left;
}
/*fieldset*/.fieldset legend {
    margin-left: 0.5rem;
}
.file-input {
    opacity: 0;
    height: 0;
}
/* center icon-group by matching height with line-height*/
.icon-group {
    height: 1.5rem;
}
.label {
    text-align: left;
    font-weight: bold;
}
.label--checkbox {
    margin-left: 0.3rem;
}
.link--footer {
    margin-right: 1rem;
}
/* loading message */
.loading-modal {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    height: 100%;
    width: 100%;
    background: rgba(194, 194, 194, .8);
}
.loading-modal--message-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color:#858585;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    text-align: center;
}
.loading-modal--message-child {
    padding: 2em 4em;
}
.loading-modal--spinner-message{
    margin-bottom: 0.5em;
}
.loading-modal--spinner{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Styling for dealing with browsers that don't support animations.  By default don't display the spinner, unless
    we activate it by setting the html class to svg-animation*/
.loading-modal--spinner { display: none; }
.svg-animation .loading-modal--spinner { display: inline; }
/* put char-counter below textarea in mobile */
.form-group--textarea__char-count {
    position: absolute;
    bottom: -1.5rem;
}
.table__caption {
    caption-side: top;
    text-align: left;
    font-size: 1.3rem;
    color: #000;
}
.tooltip-inner {
    width: inherit; /* will take up least amount of space */
    max-width: 300px; /* increase default max-width of 200px */
}
/*********************************************************************************
    non-responsive styling breakpoint
*********************************************************************************/
@media print, (min-width: 768px) {
    .col-form-label {
        padding-top: 0;
        padding-bottom: 0;
    }
    .error-text {
        margin-top: 0;
    }
    .fieldset__legend {
        font-size: 1.3rem;
    }
    /*  - the following 2 selectors center the labels, tooltips, required indicators...
        - the default align-items value of stretch couldn't be used as it centers labels, which only works for single
        line input fields but not textareas or groups of radios/checkboxes
    */
    /* TODO Brian: TRACS UI - Update all class references to vertically center content
    /*.form-group {*/
    /*    align-items: start;*/
    /*}*/
    /*.label, .icon-group, .ro-input {*/
    /*    margin-top: 7px;!* (height_input-height_label)/2 = (38px-24px)/2 = 7 *!*/
    /*}*/
    .form-group--ro {
        margin-bottom: 0.5rem;
    }
    .form-group--textarea {
        margin-bottom: 2rem;
    }
    .heading {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .label {
        text-align: right;
    }
    .label-small {
        text-align: right;
        font-size: 0.7rem;
    }
    .label-warning {
        text-align: right;
        color: #FF0000;
    }
    .page__content {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .form-group--textarea {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    /* put char-counter above and to the right in non-responsive */
    .form-group--textarea__char-count {
        top: -1.5rem;
        right: 1rem;
    }
    .tooltip-inner {
        max-width: 500px; /* increase default max-width of 200px */
    }
}
@media print {
    /*
        Fix bootstrap printing issue, see:
            https://stackoverflow.com/questions/49785039/printing-bootstrap-4-html-page-in-chrome-cuts-off-chrome-header-footers/50400421#50400421
    */
    @page{
        size: a4;
        width: 900px;
    }
    /*
       Fix for Firefox in Print Preview losing all content following a fieldset that lands on a page-break
        - bug open for 10 years, see:
            1) https://bugzilla.mozilla.org/show_bug.cgi?id=471015
            2) https://bug471015.bmoattachments.org/attachment.cgi?id=400725
        - Firefox version 60.0.1; most recent version at time of writing
        if you go to the second link and click print preview, the fieldsets don't get rendered properly
    */
    .page {
        display: block;
    }
    .t-page .alberta {
        fill: #00AAD2;
        color: #5F6A72;
    }
}
/*********************************************************************************
 7) Themes
 - this is the only place you should see:
    1) color based properties (could see them in @media rule as we don't want to separate)
    2) nested selectors, when it comes to overriding colors (other than in framework overrides)
*********************************************************************************/
.t-page {
    background-color: #D3D7D9;
}
.t-page--dark {
    background-color: #2B2C2E;
    color: #FFFFFF;
}
.t-page--grayscale {
    background-color: #FFFFFF;
    color: #000000;
}
/* colors can be overridden via inline styles */
.t-page .page__content {
    background-color: #FFFFFF;
}
.t-page--dark .page__content {
    background-color: #2B2C2E;
}
.t-page--grayscale .page__content {
    background-color: #FFFFFF;
}
.t-page .page__header, .t-page .page__footer {
    background: #FFFFFF;
}
.t-page--grayscale .page__header, .t-page--grayscale .page__footer {
    background: #FFFFFF;
}
.t-page .breadcrumb--alberta__item a {
    color: #FFFFFF;
    text-decoration-line: underline;
}
.t-page--grayscale .breadcrumb--alberta {
    display: none;
}
.t-page .breadcrumb--alberta__item a:hover {
    background: #006A8C;
}
.t-page .page__header {
    border-bottom: none;
}
.t-page--grayscale .page__header {
    border-bottom: none;
}
.t-page .page__footer {
    border-top: none;
}
.t-page--grayscale .page__footer {
    display: none;
}
.t-page .data-table__head {
    background-color: #1D5987;
    color: #FFFFFF;
}
.t-page--grayscale .data-table__head {
    background-color: #999999;
    color: #000000;
}
.t-page .data-table__foot {
    background-color: #2398e2;
    color: #FFFFFF;
}
.t-page .alberta {
    fill: #00AAD2;
    color: #5F6A72;
}
.t-page--grayscale .alberta {
    fill: #00AAD2;
    color: #5F6A72;
}
/* bootstrap override - make breadcrumb match alberta.ca's new look, see https://www.alberta.ca/budget.aspx */
.t-page .nav--breadcrumb {
    background-color: #6A7780;
}
.t-page--grayscale .breadcrumb--alberta,
.t-page--grayscale .required-icon,
.t-page--grayscale .tooltip--info__icon,
.t-page--grayscale .tooltip--error__icon,
.t-page--grayscale .tooltip--warning__icon,
.t-page--grayscale .btn {
    display: none;
}
.t-page--grayscale .container {
    font-size: 0.8rem;
    width: auto;
}
.t-page .tooltip--info__icon {
    fill: #00AAFF;
    color: white;
}
.t-page .tooltip--warning__icon {
    fill: #FFDB58;
    color: white;
}
.t-page .tooltip--error__icon {
    fill: #FF0000;
    color: white;
}
.t-page .required-icon, .t-page .error-text {
    color: #FF0000;
}
.t-page /*fieldset*/.fieldset, .tooltip-inner {
    background: #FFFFFF;
    border: 0.125rem #A9A9A9 solid;
    color: #000000;
}
.t-page--dark /*fieldset*/.fieldset {
    background: #9C9C9C;
    border: 0.125rem #FFFFFF solid;
    color: #FFFFFF;
}
.t-page--grayscale /*fieldset*/.fieldset {
    background: #FFFFFF;
    border: 0.125rem #A9A9A9 solid;
    color: #000000;
}
.t-page /*fieldset*/.fieldset--info, .t-page .tooltip-info__text .tooltip-inner {
    background: #EBF4FB;
    border-color:#B7DDF2;
}

.t-page--dark /*fieldset*/.fieldset--info {
    background: #3d5681;
    border-color: #FFFFFF;
}
.t-page--grayscale /*fieldset*/.fieldset--info {
    background: #EBF4FB;
    border-color:#B7DDF2;
}
.t-page /*fieldset*/.fieldset--errors, .t-page .tooltip-error__text .tooltip-inner  {
    background: #E5C5C8;
    border-color: #A00000;
}
.t-page /*fieldset*/.fieldset--warnings, .t-page .tooltip-warning__text .tooltip-inner  {
    background-color: #FCFAC1;
    border-color: #FCD03D;
}
.t-page /*fieldset*/.fieldset--links {
    background-color: #DEE2E6;
    border-color: #D1D4D7;
    padding: 0rem 0rem 0rem 1rem;
    margin: 0rem 0rem 1rem 0rem;
}

.t-page /*fieldset*/.fieldset--important {
    background: #FCFAC1; /* Soft yellow background */
    border-color: #ff0000; /* Darker red border */
}

.t-page .link--footer {
    color: #000000;
}

.t-page .link--footer__inline {
    color: #000000;
}

/* put char-counter below textarea in mobile */
.t-page .form-group--textarea__char-count {
    color: darkgray;
}
.t-page--dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.35);
}
.t-page--grayscale .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}
/********************************************************************************
    8) Utilities (components)
********************************************************************************/
/* if want to force page-break, use div with class u-page-break */
@media all {
    .u-page-break { display: none; }
}
@media print {
    .u-page-break { display: block; page-break-before: always; }
}

t-page .navbar-custom .navbar-nav > li > a {
    color: #ffffff;
    padding-left:25px;
    padding-right:25px;
    padding-top:20px;
    padding-bottom:20px;
    background: #0a56c8;
}

/********************************************************************************
Increase checkbox visibility in CIT Delegated TPO privileges
********************************************************************************/
div.form-group.auth input[type="checkbox"] {
    -ms-transform: scale(1.2);      /* IE */
    -moz-transform: scale(1.2);     /* FF */
    -webkit-transform: scale(1.2);  /* Safari and Chrome */
    -o-transform: scale(1.2);       /* Opera */
    transform:scale(1.4, 1.4);
}
div.form-group.auth input:checked[type="checkbox"][disabled] {
    box-shadow: 0 0 2px 1pt #666a6f;
}

div[role=group] {
    margin: 0.55rem 0.5rem 0.55rem 0.75rem;
}

/*
    all buttons need to be wrapped in a button-group, and must be placed in the page in the reverse order in which you
    want them displayed.

    This is done, because upon clicking ENTER in any field the browser looks for the 1st button with type submit and
    activates it.  Since our first button is by standards Previous and our last is submit, we want our last button to
    be the 1st one in the page (found by browser), hence why we reverse the order.  We could have also done this with
    js, but its seems more sloppy, see:
        http://stackoverflow.com/questions/1963245/multiple-submit-buttons-on-html-form-designate-one-button-as-default?answertab=active#tab-top
*/
div[role=group].button-group {
    margin: 0.5rem 0rem;
    display: inline-block; /*   needed so that the container takes up only the size of all its content, if it takes up
                                the whole line than the following definition will float the buttons to the far-right
                                side of the page */
    overflow: hidden;
}
div[role=group].button-group button {
    float: right;
    margin-right: 0.2rem;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}

.list-inline-item:not(:last-child):after {
    content: "|";
}

span.char-count{
    background-color: #777;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.container .bulletLink {
    color: #0A4B9B;
    display:block;
    background: url(../images/circle_over.gif) no-repeat center left;
    text-indent: 15px;
    position: relative;
}

.fade {
    -webkit-transition: opacity 1s linear !important;
    -moz-transition: opacity 1s linear !important;
    -ms-transition: opacity 1s linear !important;
    -o-transition: opacity 1s linear !important;
    transition: opacity 1s linear !important;
}

.line-item-number {
    height: 1.2rem;
    border-style: solid;
    border-width: 1px;
    color: black;
    margin: 0 0.5rem 0 0 ;
    padding: 0 0.25rem 0 0.25rem;
    font-weight: bold;
}