/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/*
    ====LARGE DISPLAY====
*/
@media (min-width: 1200px) {
    .body-content {
        min-height: 650px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1540px;
    }

    .body-content {
        min-height: 650px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1860px;
    }

    .body-content {
        min-height: 650px;
    }
}

.text-no-wrap {
    white-space: nowrap;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-no-wrap.large {
    min-width: 200px;
    max-width: 200px;
}

header {
    background-color: #ffffff;
    border-bottom: 1px solid rgb(67,156,186);
}

.navbar-brand {
    line-height: 75px;
    vertical-align: middle;
}

/* Provide sufficient contrast against white background */
a {
    color: rgba(0,0,0,.55);
    text-decoration: none;
}

a:hover {
    color: rgb(67,156,186);
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #000000;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-size: 16px !important;
}

body {
}

body.TEST {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(240,240,240)' font-size='20'>Test</text></svg>");
}

body.UAT {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(240,240,240)' font-size='20'>UAT</text></svg>");
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

/*
    ====HEADINGS====
*/
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

/* EXTRA WIDTHS */
.w-10 {
    width: 10% !important;
}

.w-40 {
    width: 40% !important;
}

/* SCREEN AREAS */

.area-header {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    margin-top: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.area-header h1 {
    margin-top: 0px !important;
}

.area-header .btn {
    margin-left: 5px !important;
    font-size: 1.0em;
}

.area-header .btn-default {
    background-color: #ffffff;
}

.area-search .btn {
    margin-left: 5px !important;
    font-size: 1.0em;
}

.area-info-title {
    font-weight: bold;
    font-size: 1.2em;
    color: #0065b7;
}

.area-info {
    background-color: #ffffff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    border: solid 1px #dddddd;
    color: #666;
}

.area-info.bg-success {
    background-color: #dff0d8;
}

.area-info.bg-danger {
    background-color: #f2dede;
}

.area-info.bg-warning {
    background-color: #fcf8e3;
}

.area-info label {
    color: #666;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
}

.area-search {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 10px 0px;
    border: solid 1px #e6e6e6;
    color: #666;
}

.area-search label {
    color: #666;
    font-weight: bold;
    font-size: 0.9em;
}

.area-search .btn-inline {
    margin-top: 0px !important;
}

.area-search-results {
    background-color: #fff;
}

.area-search-results .btn {
    font-size: 1.0em;
}

.area-search-results-title {
    font-weight: bold;
    font-size: 1.2em;
    color: #0065b7;
}

.area-general {
    background-color: #ffffff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    border: solid 1px #dddddd;
    color: #666;
}

.area-blank {
    background-color: #ffffff;
    margin-bottom: 10px;
    padding: 10px;
    color: #666;
}

.area-blank label {
    color: #666;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    width: 110px;
}

/*
    ====FORMS====
*/

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1.0em;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-group {
    margin-bottom: 1em;
}

.control-label {
    color: #6f6754;
    display: block;
    font-size: 1.0em;
    font-weight: 500;
    line-height: 1.5;
}

.display-label {
    font-weight: 500;
    color: #212529;
}

.required {
    color: #ff0000;
    font-weight: bold;
}

.nowrap {
    white-space: nowrap;
}

/*
    ====INFO BOX ====
*/

.info-box {
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    padding: 1em;
}



/*
    ====TABLE ACTIONS====
*/
.action-buttons-cell {
    text-align: right;
    width: 1px;
    white-space: nowrap;
}

.action-buttons-cell.w10 {
    width: 10%;
}

.action-buttons-cell.w20 {
    width: 20%;
}

.action-buttons-cell.w30 {
    width: 28%;
}

.action-buttons-cell.w40 {
    width: 50%;
}

.table-action-button {
    margin-right: 5px;
    margin-left: 5px;
    color: #0065b7;
}

.table-action-button-add {
    color: #28a745;
}

.table-action-button-maintain {
    color: #e67201;
}

.table-action-button-maintain:hover {
    color: #fe7f03;
}

.table-action-button-view {
    color: rgb(67,156,186);
}

.table-action-button-view:hover {
    color: rgb(2,154,187);
}

.table-action-button-edit {
    color: #337ab7;
}

.table-action-button-delete {
    color: #d43f3a;
}

.table-action-button-undelete {
    color: #d43f3a;
}

/*
    ====SELECT2 OVERRIDES====
*/

.select2-container {
    width: 100% !important;
}

.select2-selection--single {
    min-height: calc(1.5em + .75rem + 2px) !important;
}

.select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px) !important;
}

.select2-selection__rendered, .select2-selection__arrow {
    /*height: calc(1.5em + .75rem + 2px) !important;*/
    /*line-height: calc(1.5em + .75rem + 2px) !important;*/
    vertical-align: middle;
}

.select2-selection__choice {
    background-color: #337ab7 !important;
    color: #ffffff;
    margin-bottom: 5px;
}

.select2-selection__choice__remove {
    color: #ffffff !important;
}

.nested-selection .select2-selection--single {
    height: auto !important;
}

.nested-selection .select2-selection--single .select2-selection__rendered {
    white-space: normal !important;
    word-wrap: break-word !important;
}

.select2-container--open {
    z-index: 9999999
}

.select2-selection--multiple:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 15px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #888;
}

.select2-selection__placeholder {
    color: #495057 !important;
}

/*
    ====ANGULAR====
*/
/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

/*
    ==== POPOVERS ====
*/
.popover h3 {
    margin-top: 0px;
}

/*
    ==== TOOLTIPS ====
*/

/*
    ==== UI MODAL ====
*/
.modal-dialog .datepicker, .modal-dialog .datetimepicker, .modal-dialog .timepicker {
    z-index: 99999 !important;
}

.modal-xl {
    max-width: 75vw;
    width: 75vw
}

.modal-fw {
    max-width: 97vw;
    width: 97vw;
}

@media (max-width: 767px) {
    .modal-xl {
        max-width: 97vw;
        width: 97vw;
    }

    .modal-fw {
        max-width: 97vw;
        width: 97vw;
    }
}

/*
    ====LOADING SPINNER====
*/
.loading-spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid rgb(67,156,186); /* Orange */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    background-color: #000000; /* Black */
}

.loading-spinner .loading-spinner-text {
    height: 88px;
    line-height: 88px;
    text-align: center;
    animation: spinrev 2s linear infinite;
    color: #ffffff;
    font-size: 1.4em;
}

.loading-spinner .loading-spinner-text:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 900ms infinite;
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
}

.loading-spinner.medium {
    width: 80px;
    height: 80px;
    border-width: 12px;
}

.loading-spinner.small {
    width: 40px;
    height: 40px;
    border-width: 6px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinrev {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes spinrev {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

.loading-text {
    margin: 0 auto;
    text-align: center;
}

/*
    ==== BUTTONS ====
*/
/* HIDE TEXT FOR SOME BUTTONS IN MOBILE VIEW? */
@media (max-width: 767px) {
    .btn-text {
        display: none;
    }
}

/*
    ==== PAGINATION ====
*/
.pagination-container .pagination {
    margin-bottom: 0;
    padding: 0.35rem;
    border: 1px solid #eee;
    border-radius: 0.25em;
}

/*
    ==== LONG SCROLL BACK TO TOP ====
*/
#toTop {
    position: fixed;
    bottom: 50px;
    right: 30px;
    cursor: pointer;
    display: none;
    padding: 5px;
    min-width: 37px;
    z-index: 1000;
}

/*
    ==== HIDE SPINNER ON INPUT(type=number) ====
*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*
    ==== PRINT ====
*/
@media print {
    header, .container, footer, .modal-footer, .modal-body:not(.qr-code) {
        display: none; /* no print*/
    }

    .modal-content {
        border: none;
    }
}

/*
    ==== TABLES ==== Stop double border
*/
.table tbody + tbody {
    border-top: none;
}

/*
    ==== VERTICAL TABLES ====
*/

@media only screen and (max-width: 575px) {

    /* Force table to not be like tables anymore */
    .vertical-table table,
    .vertical-table thead,
    .vertical-table tbody,
    .vertical-table th,
    .vertical-table td,
    .vertical-table tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .vertical-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .vertical-table tr:not(.colspan) {
        border: 1px solid #ccc;
        margin-bottom: 2px;
    }

    .vertical-table td:not(.colspan) {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
        min-height: 46px;
    }

    .vertical-table td:not(.colspan):before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0px;
        left: 6px;
        width: 45%;
        padding: 0.75rem;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
    }

    /*	Label the data	*/
    .vertical-table td:before {
        content: attr(data-title);
    }

    .vertical-table td.action-buttons-cell {
        width: auto;
        font-size: 1.25em;
        text-align: right;
    }
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.clickable {
    cursor: pointer;
}

.not-clickable {
    cursor: not-allowed;
}

.no-border {
    border: 0 solid transparent !important;
}

.strong {
    font-weight: bold !important;
}

#dataTable {
    margin-left: 5px;
    margin-right: 25px;
    overflow-x: hidden;
}

#dataTableResults {
    transform: rotateX(0deg);
    moz-transform: rotateX(0deg);
}

#dataTable tr th {
    background-color: #e6e6e6 !important;
    color: #555;
    padding-right: 10.5px !important;
    z-index: 1;
}

#dataTable tr th.rotate {
    /* Something you can count on */
    height: 80px;
    white-space: nowrap;
}

#dataTable tr th.rotate > div {
    -webkit-transform:
    /* Magic Numbers */
    translate(1px, 1px)
    /* 45 is really 360 - 45 */
    rotate(270deg);
    -moz-transform:
    /* Magic Numbers */
    translate(1px, 1px)
    /* 45 is really 360 - 45 */
    rotate(270deg);
    -ms-transform:
    /* Magic Numbers */
    translate(1px, 1px)
    /* 45 is really 360 - 45 */
    rotate(270deg);
    -o-transform:
    /* Magic Numbers */
    translate(1px, 1px)
    /* 45 is really 360 - 45 */
    rotate(270deg);
    transform:
    /* Magic Numbers */
    translate(1px, 1px)
    /* 45 is really 360 - 45 */
    rotate(270deg);
    width: 30px;
}

#dataTable tr th.rotate > div > span {
    padding: 5px 10px;
}

.dataTables_filter {
    text-align: left !important;
}

.dataTables_filter label {
    font-weight: bold !important;
}

.dataTables_scrollBody > table > thead {
    display: none;
}

/* A2AA SPECIFIC */

.logo {
    /*height: 70px;*/
    width: 340px;
}

.btn {
    background-image: none;
    border-radius: 0px !important;
}

.saved_container .alert .close {
    position: absolute;
    right: 1em;
}

.nav-filler {
    width: 215px;
}

.nav-filler a {
    color: rgba(0,0,0,.55)
}

.nav-link {
    font-size: 1.2em;
    color: rgba(0,0,0,.55)
}

.nav-link:hover, .nav-link:focus, .nav-link.active {
    color: rgb(67,156,186) !important;
}

.tracking-link {
    color: rgb(67,156,186);
    text-decoration: none;
}

.table-action-button {
    text-decoration: none;
}

button.close {
    border: none;
}

#ModalInstanceViewDetailsCtrl .card-header {
    border-bottom: 1px solid rgb(67,156,186);
}

.bg-brand {
    background-color: rgb(67,156,186);
}

.btn-brand {
    background-color: rgb(67,156,186);
    color: #ffffff !important;
}

.btn-brand:hover {
    background-color: #0091b7;
}

.area-search .radio-group label {
    display: block;
    margin-bottom: 3px;
}

@media (max-width: 767px) {
    .area-search .radio-group label {
        display: inline-block;
        margin-right: 10px;
    }
}

input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] + *,
input[type="radio"] + * {
    vertical-align: middle;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
}

input[type=checkbox] {
    box-shadow: 0px 3px 0px #0000000F;
    margin-right: 15px !important;
}

input[type=checkbox]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fff;
    border: 1px solid #818a91;
    border-radius: 3px;
    font-weight: 900;
}

input[type=checkbox]:checked:before {
    color: black !important;
}

input[type=radio] {
    margin-right: 5px !important;
}

input[type=radio]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    font-size: 15px;
    color: transparent !important;
    background: #fff;
    border: 1px solid #818a91;
    border-radius: 50%;
    padding: 1px 1px 1px 1px;
    font-weight: 900;
}

input[type=radio]:checked:before {
    color: rgb(67,156,186) !important;
}

.text-transform-capitalize {
    text-transform: capitalize;
}

.dropdown-menu li {
    background-color: transparent;
}

.dropdown-item {
    font-size: 1.1em;
    background-color: #ffffff;
    color: rgb(33,37,41);
}

.dropdown-item:hover {
    font-size: 1.1em;
    background-image: none !important;
    background-color: rgb(67,156,186) !important;
    color: #ffffff !important;
}

.home-page-link {
    font-size: 32px;
    padding-top: 30px;
}

@media (max-width: 576px) {
    .home-page-link {
        min-height: 300px;
    }
}

.home-page-link-sales {
    background-image: url('/img/SALES_GREY.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page-link-sales:hover {
    background-image: url('/img/SALES_BLUE.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page-link-master {
    background-image: url('/img/MK_GREY.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page-link-master:hover {
    background-image: url('/img/MK_BLUE.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page-link-price {
    background-image: url('/img/PRICE_GREY.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page-link-price:hover {
    background-image: url('/img/PRICE_BLUE.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page-link-help {
    background-image: url('/img/HELP_GREY.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-page-link-help:hover {
    background-image: url('/img/HELP_BLUE.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.navbar-alt {
    list-style-type: none;
    padding-left: 0;
}

.navbar-alt .nav-link {
    color: rgba(0,0,0,.55);
}

.navbar-alt .nav-link:hover {
    color: rgb(67,156,186)!important;
}

.account-name {
    border-top: 1px solid rgb(67,156,186);
}

.form-label {
    font-size: 16px;
    color: #6f6754;
}

.form-text {
    font-size: 16px;
    color: rgb(33,37,41);
    margin-top: 0;
}

.page-title {
    text-transform: uppercase;
    font-size: 2.0em;
}

.page-title span {
    color: rgb(67,156,186);
    font-weight: bold;
}

.page-title.no-transform {
    text-transform: capitalize;
}

/*
    HEXAGONS
*/

.hexagon-gallery-container {
    min-height: 100%;
    overflow: hidden;
}

.hexagon-gallery {
  margin: auto;
  max-width: 1500px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 7px;
  padding-bottom: 75px;
}

@media (max-width: 575px) {
    .hexagon-gallery {
        display: none;
    }
    .standard-homne-page-links {
        display: block;
    }
}

@media (min-width: 576px) {
    .hexagon-gallery {
        display: grid;
    }

    .standard-home-page-links {
        display: none;
    }
}

.hex {
  display: flex;
  position: relative;
  width: 240px;
  height: 265px;
  background-color: #424242;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  text-align: center;
}

.hex:first-child {
  grid-row-start: 1;
  grid-column: 1 / span 2;
}

.hex:nth-child(2) {
  grid-row-start: 1;
  grid-column: 3 / span 2;
}

.hex:nth-child(3) {
  grid-row-start: 1;
  grid-column: 5 / span 2;
}

.hex:nth-child(4) {
  grid-row-start: 1;
  grid-column: 7 / span 2;
}

.hex:nth-child(5) {
  grid-row-start: 1;
  grid-column: 9 / span 2;
}

.hex:nth-child(6) {
  grid-row-start: 1;
  grid-column: 11 / span 2;
}

.hex:nth-child(7) {
  grid-row-start: 2;
  grid-column: 2 / span 2;
}

.hex:nth-child(8) {
  grid-row-start: 2;
  grid-column: 4 / span 2;
}

.hex:nth-child(9) {
  grid-row-start: 2;
  grid-column: 6 / span 2;
}

.hex:nth-child(10) {
  grid-row-start: 2;
  grid-column: 8 / span 2;
}

.hex:nth-child(11) {
  grid-row-start: 2;
  grid-column: 10 / span 2;
}

.hex:nth-child(12) {
  grid-row-start: 3;
  grid-column: 1 / span 2;
}

.hex:nth-child(13) {
  grid-row-start: 3;
  grid-column: 3 / span 2;
}

.hex:nth-child(14) {
  grid-row-start: 3;
  grid-column: 5 / span 2;
}

.hex:nth-child(15) {
  grid-row-start: 3;
  grid-column: 7 / span 2;
}

.hex:nth-child(16) {
  grid-row-start: 3;
  grid-column: 9 / span 2;
}

.hex:nth-child(17) {
  grid-row-start: 3;
  grid-column: 11 / span 2;
}

.hex div, .hex div:hover {
    background-color: #fff;
}

.hex > img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    opacity: 0.4;
}

.elementToFadeIn {
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 0.4;}
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 0.4;}
}

.elementToFadeOut {
    animation-name: fadeOut;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 2s;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}