/*
Dominantly Style is set by Angular Materials.

See: app.config(...) { $mdThemingProvider.theme('default') ... }

By default, shades 500, 300 800 and A100 are used for primary and warn intentions, while A200, A100, A400 and A700 are used for accent.

.primaryPalette('pink',
{
 'default': '400', // by default use shade 400 from the pink palette for primary intentions
 'hue-1': '100', // use shade 100 for the md-hue-1 class
 'hue-2': '600', // use shade 600 for the md-hue-2 class
 'hue-3': 'A100' // use shade A100 for the md-hue-3 class
 })
 If you specify less than all of the keys, it will inherit the default shades
*/

:root {
    --primary-default-color: #4caf50;
    --primary-hue-1-color: #81c784;
    --primary-hue-2-color: #2e7d32;
    --primary-hue-3-color: #b9f6ca;
    --accent-default-color: #ffab40;
    --accent-hue-1-color: #ffd180;
    --accent-hue-2-color: #ff9100;
    --accent-hue-3-color: #ff6d00;
    --tertiary-light-color: #fff1be;
    --on-tertiary-light-color: #303030;
    --tertiary-color: #fde26b;
    --on-tertiary-color: #303030;
    --tertiary-dark-color: #e0c652;
    --tertiary-dark-color: #f5f5f5;
}

body {
    font:
        400 15px Lato,
        sans-serif;
    line-height: 1.8;
    color: #303030; /* #818181 */
}
main {
    overflow-y: auto;
}
h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.87);
    font-weight: 600;
    margin-bottom: 10px;
}
h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 10px;
}
md-content.colored {
    color: var(--on-tertiary-light-color);
    background-color: var(--tertiary-light-color);
}

mat-chip-option {
    border: 1px solid #000000; /* black; */
    color: var(--on-tertiary-light-color);
    background-color: var(--tertiary-light-color);
    padding: 15px;
    border-radius: 8px;
}
.colored {
    color: var(--on-tertiary-light-color);
    background-color: var(--tertiary-light-color);
}
.mitigationAttributesDynamicHeight {
    height: 480px;
    white-space: nowrap;
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.propertyAttributesDynamicHeight {
    height: 610px;
    white-space: nowrap;
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.eventAttributesDynamicHeight {
    height: 395px;
    white-space: nowrap;
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.reading_ticket_display {
    width: 300px;
    height: 270px;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.readings_display {
    width: 300px;
    height: 180px;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
/*
  md-toast.md-success-theme .md-toast-content {
   color: var(--on-tertiary-light-color);
    background-color: var(--tertiary-light-color);
}
*/
/*md-card.color-card {
   color: var(--on-primary-light-color);
    background-color: var(--primary-hue-1-color);
}*/
/*
md-toast.md-error-theme .md-toast-content {
	color: #000000;
    background-color: #E6C2C5;
}
*/
/*
md-toast.md-info-theme .md-toast-content {
	color: var(--on-tertiary-color);
    background-color: var(--tertiary-color);
}
*/
.with-icon {
    display: flex;
    align-items: center;
}
.aligned-with-icon {
    position: absolute;
    margin-top: 5px;
    margin-left: 5px; /* optional */
}

#parent_div_1,
#parent_div_2,
#parent_div_3 {
    width: 650px;
    height: 420px;
    overflow: auto;
    border: 0px solid #000000; /* black; */
    margin-right: 10px;
    margin-left: 10px;
    float: left;
}
.child_div_1 {
    float: left;
    margin-right: 5px;
}

.divContainer {
    display: table;
    border: 0px;
}
.divRow {
    display: table-row;
    height: auto;
}

.divColumn {
    display: table-cell;
}
.childContainer {
    width: 100%;
    height: 100%;
}

.childColumn1 {
    width: 50%;
    height: 100%;
}

.childColumn2 {
    width: 50%;
    height: 100%;
}

.fieldsetbutton {
    position: absolute;
    right: 30px;
    bottom: 30px;
}
.md-select-placeholder {
    margin-top: -6px;
}

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
    border-radius: 8px;
    margin: 0 5px;
    height: 100%;
    background-color: var(--primary-hue-1-color);
}
legend {
    font-size: 1.2em;
    font-weight: lighter;
}

.unread-notification {
    font-weight: bold;
}

#autoComplete input[name="autocompleteField"] {
    background: url(../../mdi/svg/svg/magnify.svg);
    background-repeat: no-repeat;
    background-position: 5px 7px;
    padding: 0px 35px;
}
.ui-grid-cell-contents-auto {
    /* Old Solution */
    /*min-width: max-content !important;*/

    /* New Solution */
    display: grid;
    grid-auto-columns: max-content;

    /* IE Solution */
    /*    display: -ms-grid;
    -ms-grid-columns: max-content;*/
}
.circular-progress-button {
    height: 36px;
}

.circular-progress-button > md-progress-circular {
    margin: auto;
    margin-top: -6px; /* If circular does not appear at the center, change this value. */
}

.circular-progress-button > md-progress-circular .md-half-circle {
    border-top-color: white !important;
}

.circular-progress-button > md-progress-circular .md-left > .md-half-circle {
    border-left-color: white;
}

.circular-progress-button > md-progress-circular .md-right > .md-half-circle {
    border-right-color: white;
}
/*
.s24 {
  width: 24px;
  height: 24px;
  color: #ff3c24;
  }
*/
/*
  .s18 {
  width: 18px;
  height: 18px;
  color: #ff3c24;
 }
*/
/*
  .s36 {
  width: 36px;
  height: 36px;
  color: #129fe9; }
  */
.hint {
    font-size: 14px;
    color: var(--primary-dark-color); /* #3041e9; */
}
.username {
    font-size: 14px;
    font-weight: bold;
}
.message-panel-container {
    pointer-events: auto;
}
.message-panel {
    width: 456px;
    background-color: #fff;
    border-radius: 4px;
}
.message-panel .message-divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: #e3e3e3; /* rgba(0, 0, 0, 0.11);  */
}

.message-panel .message-content {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    max-height: 305px;
    overflow-y: auto;
    min-width: 456px;
}

.message-panel .message-item {
    display: flex;
    flex-direction: row;
    min-height: 48px;
    height: 48px;
    align-content: center;
    justify-content: flex-start;
}
.message-panel .message-item > * {
    width: 100%;
    margin: auto 0;
    padding-left: 16px;
    padding-right: 16px;
}
.message-panel .message-item > a.md-button {
    padding-top: 5px;
}
.message-panel .message-item > .md-button {
    display: inline-block;
    border-radius: 0;
    margin: auto 0;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    text-align: left;
}
.message-panel .message-item > .md-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.message-panel .message-item > .md-button md-icon {
    margin: auto 16px auto 0;
}
.message-panel .message-item > .md-button p {
    display: inline-block;
    margin: auto;
}
.message-panel .message-item > .md-button span {
    margin-top: auto;
    margin-bottom: auto;
}
.message-panel .message-item > .md-button .md-ripple-container {
    border-radius: inherit;
}
.menu-panel-container {
    pointer-events: auto;
}
.menu-panel {
    width: 256px;
    background-color: #fff;
    border-radius: 4px;
}

.menu-panel .menu-divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: #e3e3e3; /* #E3E3E3; rgba(0, 0, 0, 0.11); */
}

.menu-panel .menu-content {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    max-height: 305px;
    overflow-y: auto;
    min-width: 256px;
}

.menu-panel .menu-item {
    display: flex;
    flex-direction: row;
    min-height: 48px;
    height: 48px;
    align-content: center;
    justify-content: flex-start;
}
.menu-panel .menu-item > * {
    width: 100%;
    margin: auto 0;
    padding-left: 16px;
    padding-right: 16px;
}
.menu-panel .menu-item > a.md-button {
    padding-top: 5px;
}
.menu-panel .menu-item > .md-button {
    display: inline-block;
    border-radius: 0;
    margin: auto 0;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    text-align: left;
}
.menu-panel .menu-item > .md-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.menu-panel .menu-item > .md-button md-icon {
    margin: auto 16px auto 0;
}
.menu-panel .menu-item > .md-button p {
    display: inline-block;
    margin: auto;
}
.menu-panel .menu-item > .md-button span {
    margin-top: auto;
    margin-bottom: auto;
}
.menu-panel .menu-item > .md-button .md-ripple-container {
    border-radius: inherit;
}
.myGrid {
    width: 50%;
    height: 400px;
}
.myTab {
    min-height: 580px;
}
.myFooter {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    background-color: #dbdadc;
}
.carddemoBasicUsage .card-media {
    background-color: #999999;
}
HTMLJSCSS .listdemoListControls md-divider {
    margin-top: 0;
    margin-bottom: 0;
}

.listdemoListControls md-list {
    padding-top: 0;
}

.listdemoListControls md-list-item > p,
.listdemoListControls md-list-item > .md-list-item-inner > p,
.listdemoListControls md-list-item .md-list-item-inner > p,
.listdemoListControls md-list-item .md-list-item-inner > .md-list-item-inner > p {
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}
/*
  .jumbotron {
      background-color: #B7E8E6;
      color: #000000;
      padding: 5px 25px;
      font-family: Montserrat, sans-serif;
}
*/
.container-fluid {
    padding: 60px 50px;
}
.bg-grey {
    background-color: #f6f6f6;
}
.logo-small {
    color: #e3e3e3; /* #f4511e;*/
    font-size: 50px;
}
/*
  .toolbar{
   background-color: #8ADEDA;
   text-align: right;
   padding: 5px 25px;
   font-family: Montserrat, sans-serif;
   font-size: 20px;
  }
  */
.logo {
    color: #ff3c24; /* #f4511e;*/
    font-size: 200px;
}
.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}
.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}
.carousel-control.right,
.carousel-control.left {
    background-image: none;
    color: #ff3c24; /* #f4511e;*/
}
.carousel-indicators li {
    border-color: #ff3c24; /* #f4511e;*/
}
.carousel-indicators li.active {
    background-color: #ff3c24; /* #f4511e; */
}
.divRight {
    float: right;
}
/*
  .accordion {
    background-color: #8ADEDA;
    color: #444;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 13px;
    transition: 0.4s;
    overflow: hidden;
}.active, .accordion:hover {
    background-color: #87e7e1;
}
*/
.item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
}
.item span {
    font-style: normal;
}
.panel {
    border: 1px solid #ff3c24; /* #f4511e;*/
    border-radius: 0 !important;
    transition: box-shadow 0.5s;
}
.panel:hover {
    box-shadow: 5px 0px 40px rgba(0, 0, 0, 0.2); /* #C3C3C3; rgba(0,0,0, .2); */
}
.panel-footer .btn:hover {
    border: 1px solid #ff3c24; /* #f4511e; */
    background-color: #fff !important;
    color: #ff3c24; /* #f4511e;*/
}
.panel-heading {
    color: #fff !important;
    background-color: #ff3c24 !important; /* #f4511e*/
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.panel-footer {
    background-color: white !important;
}
.panel-footer h3 {
    font-size: 32px;
}
.panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}
.panel-footer .btn {
    margin: 15px 0;
    background-color: #ff3c24; /* #f4511e; */
    color: #fff;
}
.navbar {
    margin-bottom: 0;
    background-color: #3d3d5c; /* #3D3D5C */
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
}
.navbar li a,
.navbar .navbar-brand {
    color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
    color: #ff3c24 !important; /* #f4511e !important; */
    background-color: #fff !important;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}
footer .glyphicon {
    font-size: 20px;
    margin-bottom: 10px;
    color: #ff3c24; /* #f4511e; */
}
.slideanim {
    visibility: hidden;
}
.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
.tabsdemoDynamicHeight md-content {
    background-color: transparent !important;
}
.tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e3e3e3; /* #E3E3E3; */
    height: 70%;
}
.tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper {
    background: white;
}
.tabsdemoDynamicHeight md-content h1:first-child {
    margin-top: 0;
}
.toolbardemoBasicUsage md-toolbar .md-button.md-icon-button .favorite-icon {
    fill: #ff3c24; /* DE3641 */
}
.prtDynamicHeight md-content {
    background-color: transparent !important;
}
.tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e3e3e3; /* #E3E3E3; */
    height: 90%;
}
.prtDynamicHeight md-content md-tabs md-tabs-wrapper {
    background: white;
}
.prtDynamicHeight md-content h1:first-child {
    margin-top: 0;
}

.toolbardemoBasicUsage md-toolbar md-toolbar-filler {
    background-color: #e0e0e0;
}
.toolbardemoBasicUsage md-toolbar md-toolbar-filler #filler-icon {
    fill: #4c9ef1;
}
.progressLineardemoBasicUsage body {
    padding: 20px;
}

.progressLineardemoBasicUsage h4 {
    margin: 10px 0;
}

.progressLineardemoBasicUsage md-progress-linear {
    padding-top: 10px;
    margin-bottom: 10px;
}

.progressLineardemoBasicUsage #loaders > md-switch {
    margin: 0;
    margin-left: 10px;
    margin-top: -10px;
}

.progressLineardemoBasicUsage #loaders > h5 {
    margin-top: 0;
}

.progressLineardemoBasicUsage #loaders > p {
    margin-right: 20px;
    margin-bottom: 14px;
}

.progressLineardemoBasicUsage p.small {
    font-size: 0.8em;
    margin-top: -18px;
}

.progressLineardemoBasicUsage hr {
    width: 100%;
    margin-top: 10px;
    border-color: rgba(221, 221, 177, 0.1);
}

.progressLineardemoBasicUsage p.small > code {
    font-size: 0.8em;
}

.progressLineardemoBasicUsage .visible {
    opacity: 0;
    border: 2px solid white !important;
}

.progressLineardemoBasicUsage .container {
    display: block;
    position: relative;
    width: 100%;
    border: 2px solid #aad1f9;
    transition: opacity 0.1s linear;
    border-top: 0px;
}

.progressLineardemoBasicUsage .bottom-block {
    display: block;
    position: relative;
    background-color: rgba(255, 235, 169, 0.25);
    height: 85px;
    width: 100%;
}

.progressLineardemoBasicUsage .bottom-block > span {
    display: inline-block;
    margin-top: 10px;
    padding: 15px;
    font-size: 0.9em;
}
TABDIALOG.TMPL.HTML
    HTMLJSCSSDIALOG1.TMPL.HTMLTABDIALOG.TMPL.HTML
    .dialogdemoBasicUsage
    #popupContainer {
    position: relative;
}

.dialogdemoBasicUsage .footer {
    width: 100%;
    text-align: center;
    margin-left: 20px;
}

.dialogdemoBasicUsage .footer,
.dialogdemoBasicUsage .footer > code {
    font-size: 0.8em;
    margin-top: 10px;
}

.dialogdemoBasicUsage button {
    width: 200px;
}

.dialogdemoBasicUsage div#status {
    color: #ff3c24; /* #C60008;*/
}

.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
    margin-bottom: 0;
}

.md-dialog-orders {
    background-color: #fafafa;
    width: 950px;
    height: 850px;
}

.md-dialog-small {
    background-color: #fafafa;
    width: 20px;
    height: 20px;
}

.md-dialog-reading {
    background-color: #fafafa;
    width: 650px;
    height: 550px;
}
.md-dialog-forgotpassword {
    background-color: #fafafa;
    width: 450px;
    height: 450px;
}
canvas {
    background-color: #f3f3f3;
    -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
    -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
    box-shadow: 3px 3px 3px 0 #e3e3e3;
    border: 1px solid #c3c3c3;
    height: 100px;
    margin: 6px 0 0 6px;
}

.nv-file-over {
    background-color: #ffbea3;
}

.other-drop-zone {
    border: 2px dashed burlywood;
    padding: 4px;
    height: 100px;
}

.other-over-zone {
    background-color: moccasin;
}
/*
.bg {
    background-color: lightgreen;
}
*/
.over-zone {
    border: 2px dashed lavender;
    height: 100px;
    padding: 4px;
}

.item-progress-box {
    height: 20px;
    margin-top: -20px;
    margin-left: 60px;
    margin-right: 10px;
}

.item-progress {
    background-color: #0070be;
    height: 100%;
    width: 0;
}

.total-progress-box {
    height: 20px;
    margin-top: -20px;
    margin-left: 90px;
    margin-right: 10px;
}

.total-progress {
    background-color: #0070be;
    height: 100%;
    width: 0;
}

.box {
    margin: 20px;
}
/*
.progress {
    background-color: mediumpurple;
    height: 20px;
}
*/
.uploaded {
    background-color: lightgreen;
    height: 20px;
    width: 100px;
}

ul > li:nth-child(odd) {
    background-color: #f5f5f5;
    margin: 2px;
}

.zone {
    width: 100%;
}

.tabsdemoDynamicHeight .fileUpload {
    float: right;
    margin-left: 25%;
    font-size: large;
    font-weight: bold;
}
/*
.fakeAnchor {
	color: var(--primary-dark-color);
	text-decoration: underline;
}
*/
.fileUpload {
    font-weight: bolder;
    padding-left: 40% !important;
}
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@media screen and (max-width: 768px) {
    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 15px;
    }
}
@media screen and (max-width: 480px) {
    .logo {
        font-size: 150px;
    }
}
/*
  .white-icon {
    color: white;
}
*/
/* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */
/*
.white-icon svg {
    fill: white;
}
*/
/*
  </style>
  */