﻿/* Base Styles */
body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 0.9em
}

label, input, .form-control, .selection, .btn, .table, .form-select, select, option, .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-search--inline .select2-search__field {
    font-family: "Open Sans", serif;
    font-size: unset;
}

.input-group.date .input-group-addon {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #ebeef2;
    border: var(--bs-border-width) solid #dfe3ea;
    border-radius: var(--bs-border-radius);
}

.form-check-input {
    border: 0;
}

ul.list-unstyled li {
    margin-bottom: 0.5em;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #001E62;
}


.text-active {
    background-color: #9B59B6;
    color: #fff;
    border: solid 2px #9B59B6;
}

.text-complete {
    background-color: #1ABC9C;
    color: #fff;
    border: solid 2px #1ABC9C;
}

.text-pending {
    background-color: #ea580c;
    color: #fff;
    border: solid 2px #ea580c;
}

.text-na {
    background-color: #93282C;
    color: #fff;
    border: solid 2px #93282C;
}

.text-closed {
    background-color: #001E62;
    color: #fff;
    border: solid 2px #001E62;
}

#page-container {
    background-color: #fff;
}

.fullheight {
    height: 100vh;
}

/* Header */

#page-header {
    height: 4rem;
}

.badge-logo {
    width: 100%;
    max-height: 4em;
    padding: 0.5em 0;
}

.switcher-en {
    border-radius: 10px 0 0 10px;
    padding: 0.35em 0.75em 0.35em 1em;
    border: 0;
    font-weight: bold;
    background-color: #F0F0F0;
    color: #333;
}

.switcher-fr {
    border-radius: 0 10px 10px 0;
    padding: 0.35em 1em 0.35em 0.75em;
    border: 0;
    font-weight: bold;
    background-color: #F0F0F0;
    color: #333;
}

.switcher-en:hover, .switcher-fr:hover {
    background-color: #ddd;
}

.switcher-en.active, .switcher-fr.active {
    background-color: #001E62;
    color: #fff;
}

/* Dashboard Button */

a.dashboard-btn {
}

a.dashboard-btn .block {
    border-radius: 1.25em;
    background-color: #F0F0F0;
    padding: 1.5em;
    text-wrap: nowrap;
    box-shadow: unset;
}

a.dashboard-btn .block .icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding-bottom: 4em;
    margin-bottom: 1em;
    min-width: 10em;
}

/* ----- Side Header ---- */

#page-container.sidebar-dark #sidebar {
    background-color: #333333;
}

.nav-main-link {
    min-height: unset;
    padding: 0;
}

.sidebar-dark #sidebar .nav-main-link {
    color: #fff;
}

.dark-mode #main-container .nav-main-item.open > .nav-main-submenu, .dark-mode #side-overlay .nav-main-item.open > .nav-main-submenu, .nav-main-dark .nav-main-item.open > .nav-main-submenu, .page-header-dark #page-header .nav-main-item.open > .nav-main-submenu, .sidebar-dark #sidebar .nav-main-item.open > .nav-main-submenu {
    background-color: #222;
}

.sidebar-dark #sidebar .nav-main-item.open > .nav-main-link-submenu, .sidebar-dark #sidebar .nav-main-item.open > .nav-main-link-submenu .icon-nav, li.open, li.open .icon-nav {
    background-color: #111;
}


.icon-nav {
    background-repeat: no-repeat;
    background-position: center;
    width: 3em;
    height: 3em;
    background-color: rgba(255,255,255,0.2);
    margin-right: 0.5em;
}

li.nav-main-item {
    margin-bottom: 2px;
}

.side-content {
    margin: 0 auto;
    padding: 13px 20px;
}

.side-header.side-content {
    text-align: center;
}

.side-header img {
    max-width: 155px;
}

/* ----- Override ----- */


.col-mr-auto, .col-ml-auto {
    width: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {

    .col-mr-auto {
        float: left;
        display: inline-block;
    }

    .col-ml-auto {
        float: right;
        display: inline-block;
    }
}

a {
    color: #333;
    transition: all .25s ease;
}

    a:hover {
        cursor: pointer;
        transition: all .25s ease;
    }

.btn-group-xs > .btn, .btn-xs {
    font-size: 0.9em;
}

.navbar-login {
    padding: 1em 1.5em;
}

.bg-none {
    background: transparent;
}

.login-btn {
    background-image: url("/../admin/assets/img/icons/account-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 2.15em;
    height: 2.15em;
    border: 0;
    position: relative;
    top: 2px;
    background-color: unset;
    margin-left: 2em;
}

label.required:after {
    color: #A94442;
    content: ' *';
    display: inline;
}

.flex {
    display: block;
  }

  .align-items-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }

  @media (min-width: 768px) {
    .flex {
        list-style: none;
        
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
    
        align-items: center;
        padding: 0 15px;
      }
  }

  .flex div {
      padding: 1em 0.8em 1em 0;
  }

.indent-left {
    padding-left: 4em;
}

.form-horizontal .form-group {
    margin-bottom: 1em;
}

.content .block {
    margin-bottom: 2em;
}

.pagination > .active > a {
    color: #021d49;
    background-color: #f9f9f9;
    -webkit-box-shadow: 0 2px #021d49;
    box-shadow: 0 2px #021d49;
}

.table-bordered > thead > tr > th {
    background: #2c343f !important;
    color: #fff;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: #fafafa;
}

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    background: #fff;
    box-shadow: none;
}

.table > tbody > tr > td {
    padding: 10px;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    top: 40%;
}

.btn-table {
    cursor: pointer;
}

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
      max-width: 800px;
      width: 100%;
    }
  }
  
  @media (min-width: 1200px) {
    .modal-xl {
      max-width: 1140px;
      width: 100%;
    }
  }

  .modal-body table td p {
      margin: 0;
  }

    /* ----- Tabs ---- */

    @media (min-width: 768px) {
        .block > .nav-tabs > li {
            border-bottom: none;
        }
    }


    /* ----- Header ---- */

    .nav-header .form-control {
        width: 8em;
    }


    /* ----- Side Header ---- */
    .side-content {
        margin: 0 auto;
        padding: 13px 20px;
    }

    .side-header.side-content {
        text-align:center;
    }

    .side-header img {
        max-width: 115px;
    }

    .sidebar-logo-hide {
        opacity: 0;
    }

    @media screen and (min-width: 992px) {
        .sidebar-o.sidebar-mini #sidebar .sidebar-logo-hide {
            opacity: 1 !important;
            -webkit-transition: opacity 0.28s ease-out;
            transition: opacity 0.28s ease-out;
            position: absolute;
            top: 4em;
            z-index: 1;
            left: 1em;
            width: 25px;
        }
    }

    /* ----- Margin Definitions ----- */

    .mb-1 {
        margin-bottom: 1em;
    }

    .mb-2 {
        margin-bottom: 2em;
    }

    .my-2 {
        margin: 2em 0;
    }

    /* ----- Padding Definitions ----- */

    .py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .px-4 {
        padding-left: 4em;
        padding-right: 4em;
    }

    .pb-1 {
        padding-bottom: 1em;
    }

    .pb-2 {
        padding-bottom: 2em;
    }

    .pt-1 {
        padding-top: 1em;
    }

    .py-2 {
        padding-top: 2em;
        padding-bottom: 2em;
    }


    /* Forms */

    .css-checkbox-default input:checked + span {
        background-color: #2c343f;
        border-color: #2c343f;
    }

    .btn[disabled] {
        opacity: .25;
    }

    /*----- Modals ----- */

    .bg-primary-dark {
        background-color: #021d49;
    }


    /* ----- Page Headers -----*/
    .page-heading {
        color: #2c343f;
        font-size: 2.5em;
        font-weight: 400;
        line-height: 1.24;
    }

    .page-heading .si {
        font-size: 0.75em;
    }

    /* ----- Header Row -----*/

    .grey-row {
        background: #eee;
        border-bottom: solid 1px #ddd;
    }

    /* ----- Buttons -----*/

.btn {
    border-radius: 20px;
    padding: 0.25em 1em;
}
    .btn-icon {
        padding: 0.15em 0.25em;
        border-radius: 10px;
        min-width: 2em;
    }
    
    .btn-primary {
        background-color: #001E62;
        border-color: #001E62;
    }

    .btn-primary:hover {
        background-color: #333;
        border-color: #333;
    }

    .btn-default[disabled] {
        background-color: #999;
        opacity: .5;
    }

.btn-dk-blue, .btn.btn-dark {
    background-color: #001E62;
    color: #fff;
    border: solid 2px #001E62;
}

    .btn-dk-blue:hover, .btn.btn-dark:hover {
        background-color: #fff;
        color: #001E62;
        border: solid 2px #001E62;
    }

    .btn-purple {
        background-color: #9B59B6;
        color: #fff;
        border: solid 2px #9B59B6;
}

        .btn-purple:hover {
            background: #fff;
            color: #9B59B6;
            border: solid 2px #9B59B6;
        }

    .btn-green {
        background-color: #1ABC9C;
        color: #fff;
        border: solid 2px #1ABC9C;
    }

        .btn-green:hover {
            background: #fff;
            color: #38b12f;
            border: solid 2px #38b12f;
        }

    .btn-blue {
        background-color: #334b81;
        color: #fff;
        border: solid 2px #334b81;
    }

        .btn-blue:hover {
            background-color: #fff;
            color: #334b81;
            border: solid 2px #334b81;
        }

.btn-orange {
    background-color: #ea580c;
    color: #fff;
    border: solid 2px #ea580c;
}

    .btn-orange:hover {
        background-color: #fff;
        color: #ea580c;
        border: solid 2px #ea580c;
    }

.btn-red {
    background-color: #93282C;
    color: #fff;
    border: solid 2px #93282C;
}

        .btn-red:hover {
            background-color: #fff;
            color: #93282C;
            border: solid 2px #93282C;
        }

.btn-text {
    font-size: 12px;
    padding: 0;
    background: none;
    border: none;
    text-decoration: underline;
    margin-bottom: .375rem;
    padding-left: 1em;
    font-weight: bold;
}

    .btn-text:hover {
        color: #001E62
    }


.print-btn {
    background-image: url("/../admin/assets/img/icons/print-icon.svg");
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: center center;
    background-color: #001E62;
    width: 2.15em;
    height: 2.15em;
    border: 0;
    border-radius: 10px;
    position: relative;
    top: 2px;
}

    .btn-print {
        border: solid 1px #e9e9e9;
        color: #545454;
        background-color: #f5f5f5;
    }

    .btn-gold {
        color: #fff;
        background-color: #8d7732;
        border-color: #c6ad71;
    }

    .btn-gold:hover {
        color: #fff;
        background-color: #333;
        border-color: #222;
    }

    .btn-gold:focus {
        color: #fff;
    }

    .btn-danger {
        color: #fff;
        background-color: #c33825;
        border-color: #c33825;
    }
    
    .btn-success {
        color: #fff;
        background-color: #01a185;
        border-color: #01a185;
    }

    /* ----- Members / Assign Members -----*/

    .table_members .css-checkbox {
        margin: 0;
    }

    table.table_members > tbody > tr > td {
        padding: 4px;
    }

    .assign_members .flex div {
        padding: 0.2em 0.35em;
    }

    .members--form, .opportunities--form label {
        font-weight: 300;
        font-size: 1.2em;
        display: block;
    }

    .members--form .pb-2 {
        padding-bottom: 0;
    }

    @media (min-width: 768px) {
        .form-inline .form-group {
            vertical-align: top;
        }

        .members--form .pb-2 {
            padding-bottom: 2em;
        }
    }


    @media (min-width: 768px) {

        .nav-tabs.nav-justified>li {
            width: auto;
        }

        .members-tabs .nav-tabs.nav-summary>li {
            display: table-cell;
            width: auto;
            border-right: solid 1px #bbb;
        }

        .members-tabs .nav-tabs.nav-summary>li:last-child {
            border-right: none;
        }

        .members-tabs .block > .nav-tabs.nav-tabs-alt {
            background-color: #ededed;
            border-top: solid 1px #bbb;
            border-bottom: solid 1px #bbb;
        }

        .members-tabs .nav-tabs.nav-justified>li {
            display: table-cell;
            width: auto;
            border-right: solid 1px #bbb;
        }

        .members-tabs .nav-tabs.nav-justified>li:last-child {
            border-right: none;
        }
    }


.breadcrumb {
    padding: 10px 10px 10px 10px;
    margin-bottom: 0;
    text-transform: initial;

    font-size: 14px;

    font-weight: initial;

    color: #999999;

    background-color: white;
}

    .breadcrumb > li + li:before {
        display: inline-block;
       

        /*font-family: "FontAwesome";*/
        /*color: rgba(0, 0, 0, 0.5);*/
        content: "\f105";
        width: 20px;
        text-align: center;
    }

.table {
    width: 100% !important;

}

.table thead th {
    text-transform: none;
    letter-spacing: 0;
}

thead {
    display: table-header-group;
}
tfoot {display: table-header-group;}

.table > tbody > tr > td {
    padding: 5px;
}

.dataTables_processing {
    background-color: #d51108;
    color: #fff;
    font-weight: 600;
    font-size: 2rem;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0;
}

.bg-gray-lighter {
    /*background-color: #f9f9f9;*/
}
.content {
    /*background-color: #f9f9f9;*/
}
.form-material > .form-control {
    padding-left: 10px;
}

/*@media screen and (min-width: 768px) {
    .content p, .content .push, .content .block, .content .items-push > div {
       
    }
}*/

.block {
    box-shadow: none;
}

.block-header-default .btn-block-option {
    color: #fff;
    font-weight: bold;
}

.block.block-rounded > .block-header, .block.block-rounded > .nav-tabs {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

.block .block-content.light {
    background-color: #f6f7f9;
}

.block .block-content {
    padding: 1.25rem
}

.nav-tabs-alt .nav-item {
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    margin-bottom: 0;
}

.nav-tabs-alt {
    background-color: #001E62;
    border-radius: 0 !important;
}

.nav-tabs-alt .nav-link {
    color: #fff !important;
    text-decoration: none !important;
}

.nav-tabs-alt .nav-link.active, .nav-tabs-alt .nav-link:focus {
    color: #fff;
    box-shadow: unset;
}
.nav-tabs-alt .nav-link.active {
    background-color: #334b81;
    border-radius: 0;
}

.nav-tabs-alt .nav-link:hover {
    color: #fff;
    background-color: #334b81;
    box-shadow: unset !important;
    border-radius:0;
}

.block.block-rounded > .nav-tabs > .nav-item:last-child > .nav-link {
    border-top-right-radius: 0;
}

.block-header-default {
    background-color: #001E62;
}

.block-header .block-title {
    color: unset;
}

.block-header-default .block-title {
    color: #fff;
}




footer {
}
.validation-summary-errors {
    /*padding-bottom: 10px;
    border-radius: 2px;
    border: none;


    margin-bottom: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.01);
    box-shadow: 0 2px rgba(0, 0, 0, 0.01);


    background-color: #f9eae8;
    color: #c54736;
    -webkit-box-shadow: 0 2px #f4d8d4;
    box-shadow: 0 2px #f4d8d4;*/
}
    .validation-summary-errors h4 {
        padding-bottom: 20px;
    }

.validation-summary-valid {
    display: none;
}

.field-validation-error {
    line-height: 30px;
}

.alert h2 {
    margin-bottom: 10px;
}
.alert div  {
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.alert .vertical-align {
    display: flex;
}
.alert p { padding-bottom: 10px;}


h4 {
    margin-bottom: 10px;
}

/* Login */

.login--box {
    border: solid 1px #eee;
}

.login--logo {
    max-width:25em;
    margin: 0 auto;
}

.logo--text {
    /* max-width: 15em; */
    /* width: 100%; */
    height: 1.3em;
    /* padding: 5px 0; */
    margin: 10px 10px;
}

.logo--print {
    height: 3.3em;
    margin: 10px 10px;
}

.logo--print.round {
    height: 6em;
}


/* Modal */

.block-title {
    color: #fff;
    letter-spacing: 0;
}

/* Avatar */

@media screen and (max-width: 1200px) {
    .img-avatar.img-avatar128 {
        padding-top:2em
    }
}

/* Work orders */

.work--orders .col-sm-12 {
    border-bottom: solid 1px #eee;
    padding: 0.5em 0;
    border-left: solid 1px #eee;
}

.special--instructions label {
    font-size: 1em;
    color: #2c343f;
}

.special--instructions {
    padding: 2em 1em;
    border: solid 1px #2c343f;
    border-bottom: solid 2px #2c343f;
    margin: 2em 0;
}

/* Work List */

ol.selected--fields {
    padding: 0;
    list-style: disc;
}

    ol.selected--fields li {
        display: inline-block;
        background: #2c343f;
        padding: 0.5em 1em;
        margin: 0.2em;
        color: #fff;
    }

        ol.selected--fields li:before {
        }


/* Reporting */

.reporting ul {
    margin: 0;
    padding-inline-start: 0px;
    list-style: none;
}

.reporting ul li a:before {
    padding: 0 1em 0 0;
    background-size: 0.625rem 0.625rem;
    content: "\e05f";
    font-family: Simple-Line-Icons;
}

    .reporting ul li a {
        padding: 1em;
        border-left: 2px solid #001E62;
        margin-bottom: 0.5em;
        background: #fff;
        display: block;
    }

        .reporting ul li a:hover {
            color: #fff;
            background-color: #001E62;
        }


/* Section */

.section--lightgrey {
    background: #fafafa;
    border: solid 1px #ddd;
    padding: 2em;
    overflow: hidden;
}

.section--light {
    background: #fff;
    border: solid 1px #ddd;
    padding: 2em;
    overflow: hidden;
}

    .section--light .form-check-input {
        background-color: #ededed;
        border: solid 1px #ddd;
    }

/* Warning Banner */
.header--warning-banner {
    color: #fff;
    line-height: 33px;
    font-weight: bold;
    font-size: 1.5em;
}
.header--warningbg {
    background-color: #f00 !important;
}
.layout--warning-banner {
    height: 75px;
    background: red;
    color: white;
    text-align: center;
    line-height: 75px;
    font-size: 24px;
    font-weight: bold;
}

.badge {
    text-align: left;
    white-space: normal;
    font-size: unset;
}


.table > thead > tr > td.--highlight,
.table > tbody > tr > td.--highlight,
.table > tfoot > tr > td.--highlight,
.table > thead > tr > th.--highlight,
.table > tbody > tr > th.--highlight,
.table > tfoot > tr > th.--highlight,
.table > thead > tr.--highlight > td,
.table > tbody > tr.--highlight > td,
.table > tfoot > tr.--highlight > td,
.table > thead > tr.--highlight > th,
.table > tbody > tr.--highlight > th,
.table > tfoot > tr.--highlight > th {
    background-color: #FFFF7B;
}

.ajax_load {
    background-color: black;
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    opacity: 0.5;
}

.--fullwidth{
    display: block;
    padding: 1em;
    text-align: left;
    font-size: 14px;
}