/* Add here all your CSS customizations */

:root {
    --danger-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --alert-color: #ff4500;
    --warning-text: #856404;
    --info-color: #17a2b8;
    --neutral-color: #becad4;
    --pale-text: #ffffff;
    --help-icon: #007bff;
    --hover-link-text-color: #007bff;
    --link-text-color: #333;
    --ipc-head-color: #777;
    --ipc-head-bg: #fff;
    --ipc-not-good: rgb(229, 151, 151);
    --sunshine: #FFD700;

    --prolink-bad: #FE0730;
    --prolink-ok: #007bff;
    --prolink-good: #28a745;
    --prolink-pale: #a3b9c8;
    --prolink-dark: #333;
    --prolink-warn: rgb(240, 178, 8);
    --prolink-test: rgb(184, 3, 124);

    --prolink-bg: #87ceeb;
    --prolink-status-bg: #4179f0;
    --prolink-btn: #4682b4;
    --prolink-btn-dark: #2c5373;
    --prolink-screen-bg: rgba(238,251,251,1);

    --tooltip-bg-color: rgba(69,181,198,1);
    --tooltip-text: #ffffff;

    --th-background: rgba(0,0,0,.03);
}
body
{
    box-sizing: border-box;
}
body.waiting *
{
    cursor: progress;
}
/* default <code> font is a bit small hence ... */
code
{
    font-size: 1em;
}

.app_clickable
{
    color: var(--link-text-color);
    cursor:pointer;
}
.app_clickable:hover
{
    color: var(--hover-link-text-color);
}

/* block elements like <table>, <h?> etc should not reside inside <p> hence this <p> imitation div class */
.paragraf
{
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

 /* missing from the last bootstrap 4 download */
@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}

/* my addition for wider modals */
.modal-xxl
{
    max-width: 1400px;
    width: 96%;
}
.modal-xxxl
{
    max-width: 1510px;
    width: 98%;
}

.card-header-sm /* for tidier card-headers */
{
    padding: 0.38rem 0.64rem;
}
.card-header-xsm /* for tidier card-headers */
{
    padding: 0.19rem 0.32rem;
}

.fade {
  transition: opacity 0.15s linear !important;
}
/*
.modal {
  overflow-y:auto;
}
*/
/* flash-logo styling (3 flames from Protec's logo) .. usage: <i class="flash-logo"></i> (or any convenient tag) */

.flash-header /* if a container's required or as an <h class */
{
    vertical-align: middle !important;
    border-bottom: 1px solid #ccc;
}
.flash-logo-disabled,
.flash-logo-flat,
.flash-logo /* sized to suit <h5> titles nicely */
{
    display: inline-block;
    padding: 0;
    margin-right: 8px;
    margin-bottom: 4px;
    width: 32px;
    height: 32px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    box-sizing: border-box;
    vertical-align: middle !important;
}
.flash-logo
{
    background-image: url('../../assets/img/protec-flames.png');
}
.flash-logo-flat
{
    background-image: url('../../assets/img/protec-flames-flat.png');
}
.flash-logo-disabled
{
    background-image: url('../../assets/img/protec-flames-disabled.png?anc=99');
}
.flash-logo-sm /* sized to suit widgets */
{
    margin: 0px;
    width: 13px;
    height: 13px;
    background-size: 15px 15px;
}
.flash-logo-fs /* sized to font */
{
    margin: 0px;
    width: 1em;
    height: 1em;
    background-size: 1em 1em;
}
.flash-logo-re /* sized to font */
{
    margin: 0px;
    width: 1.5em;
    height: 1.5em;
    background-size: 1.5em 1.5em;
}

.google-map-logo
{
    display: inline-block;
    padding: 0;
    /* margin-right: 8px; */
    /* margin-bottom: 4px; */
    /* width: 32px; */
    /* height: 32px; */
    background-image: url('../../assets/img/google-map-pin.png'); /* made from an original SVG Attributed to Google Inc via Premeditated */
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: 30px 30px; */
    box-sizing: border-box;
    vertical-align: middle !important;

    margin: 0px;
    width: 1.1em;
    height: 1.1em;
    background-size: 1.1em 1.1em;
}
.google-map-link
{
    cursor: pointer;
    white-space: nowrap;
}
.google-map-link:hover
{
    opacity: 0.50;
}

/*  for future use maybe? */
.social-icons li span {
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	border-radius: 100%;
	display: block;
	height: 28px;
	line-height: 28px;
	width: 28px;
	text-align: center;
	color: #fff !important;
	text-decoration: none;
	font-size: 12.8px;
	font-size: 0.8rem;
}
.social-icons-protec-count
{
    font-size: 0.8rem;
    color: var(--info-color);
}
.social-icons-protec
{
    visibility: hidden;
    width: 28px;
    height: 28px;
    text-align: center;
    font-size: 0.8rem;
}

.social-icons-protec-alert
{
    visibility: visible;
    /* background: #e30613; */
    background: var(--info-color);
    color: #fff;
    animation: blinker 2s linear infinite;
}
.social-icons-protec-alert:hover
{
    cursor: pointer;
    color: var(--neutral-color);
}
@keyframes blinker
{
    50% { opacity: 25%; }
}
/*
    custom file upload input styling.
    see also genUtils.inputfileSetup();
*/
.inputfile /* My custom type='file' styling */
{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.inputfile + label
{
    display: inline-block;
    padding: 4px 8px 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #777;
    background-color: #fff;
}
.inputfile:focus + label,
.inputfile + label:hover
{
    background-color: lightgrey;
    color: white;
    cursor: pointer;
}
.goback-button
{
    width: 5em;
    text-align: center;
    color: #777;
    background-color: #fff;
    font-size: medium;
    font-weight: normal;
    padding: 4px 8px 4px 8px;
    margin: 4px 8px 4px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.goback-button:hover
{
    cursor:pointer;
    background-color: #eee;
}
.home-page-btns-container
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.home-page-btns-container > div
{
    width: 232px;
    margin: 8px;
}

.app-bg-danger
{
    background-color: var(--danger-color) !important;
}
.app-bg-warning
{
    background-color: var(--warning-color) !important;
}
.app-warning-span
{
    background-color: var(--warning-color) !important;
    color: #000 !important;
}
.app-bg-success
{
    background-color: var(--success-color) !important;
}
.app-bg-info
{
    background-color:  var(--info-color) !important;
}
.app-bg-success-ish
{
    background-color:  #0a7924 !important;
}
.app-bg-white
{
    background-color: #ffffff !important;
}
.app-bg-neutral
{
    background-color: var(--neutral-color) !important;
}
.app-text-danger,
.app-invalid-field
{
    color: var(--danger-color) !important;
}
.app-text-warning
{
    color: var(--warning-text) !important;
}
.app-text-success
{
    color: var(--success-color) !important;
}
.app-text-info
{
    color: var(--info-color) !important;
}
.app-text-white
{
    color: #ffffff !important;
}
.app-warning-color,
.app-icon-warning-color
{
    color: var(--warning-color);
}
.app-icon-booked-color
{
    color: #d870af;
}
.app-icon-booked-color-bg
{
    background-color: #d870af;
    color: #111;
}
.app-alert-warning
{
	color: var(--warning-text);
	background-color: #fff3cd;
	border: 1px solid var(--warning-text);
    border-radius: 4px;
    margin: 4px auto;
    padding: 4px 4px;
    width: 98%;
    text-align: center;
    font-size: 14px;
}
.app-sunshine-bg
{
    background-color: var(--sunshine);
}
@media (max-width: 768px) {
    .app-alert-warning
    {
        font-size: 12px;
    }
}
.oven-icon
{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 12px;
    height: 12px;
    background-image: url('/images/oven.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-sizing: border-box;
    vertical-align: middle !important;
}
.vent-icon
{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 12px;
    height: 12px;
    background-image: url('/images/vent.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-sizing: border-box;
    vertical-align: middle !important;
}
.fixof
{
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
}
.thin-alert
{
    width:100%;
    padding: 0px;
    border-radius: 4px;
}
/* divs as tables .. jic */
.table-layout
{
    display: table;
    font-weight: normal;
    background-color: #fff;
    color: #777;
}
.table-row,
.table-row-th
{
    display: table-row;
}
.table-cell,
.table-th,
.table-td
{
    display: table-cell;
}
.table-th
{
    font-weight: bold;
}
.table-layout-bordered .table-cell,
.table-layout-bordered .table-th,
.table-layout-bordered .table-td
{
    border: 1px solid #dee2e6;
}
.table-layout-hover .table-row:hover
{
    background-color: rgba(0, 0, 0, 0.075);
    color: #000;
}
.narrow-data
{
    width: 2%;
    white-space: nowrap;
}
.center-data
{
    text-align: center;
}
.htab
{
    display: inline-block;
    padding: 0;
    margin: 0 1rem 0 0;
    width: 1rem;
    box-sizing: border-box;
}

/*
    see PHP class Display::titledContainer($title = '', $faw_icon_classes = null, $close_call = null, $echo_it = true)

    these css class are used to create a 'standard' header div start

*/

.in-page-container
{
    display: block;
    width: 100%;
    background: #FFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #DFDFDF;
    border-left: 1px solid #ECECEC;
    border-radius: 8px;
    border-right: 1px solid #ECECEC;
    -webkit-box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    min-height: 64px;
    position: relative;
    text-align: left;
    z-index: 1;
    border-top: 4px solid #777;
    padding: 4px 8px;
    font-size: 14px;
    max-width: 1450px;
}
.ipc-header
{
    line-height: 1;
    text-align: center;
    color: var(--ipc-head-color);
}
.ipc-cwrapper
{
    position: absolute;
    top: 2px;
    right: 4px;
}
.ipc-close
{
    float:right;
    margin: 0;
    padding: 2px;
    cursor: pointer;
    z-index: 2;
}
.ipc-title
{
    text-transform: uppercase;
    font-weight: bold;
}
.ipc-close:hover
{
    opacity: 0.50;
}
.ipc-icon
{
    /*
    background: #777;
    color: #fff;
    padding: 8px;
    margin: 0;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    */
    color: var(--ipc-head-color);
    background: var(--ipc-head-bg);
}
.ipc-header hr
{
    margin-top: -15px;
}
.ipc-help
{
    color: var(--help-icon);
}
.in-page-topper
{
    display: block;
    width: 100%;
    background: #FFF;
    box-sizing: border-box;
    border-radius: 8px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    min-height: 64px;
    position: relative;
    text-align: left;
    z-index: 1;
    border-top: 4px solid #777;
    padding: 4px 8px;
    font-size: 14px;
}
/* ** end Display:: .. classes */
.n-logo
{
    font-size: 10pt;
    margin: 0 1px 0 -4px;
    padding: 0;
}
.n-number
{
    font-size: 10pt;
}
/* prolink status tables */
.prolinkStatCol
{
    font-size: 10pt;
    border: 6px solid var(--prolink-bg);
    background: var(--prolink-btn);
    color: #fff;
    padding: 2px 4px;
    text-align: center;
    font-weight: 600;
    white-space:nowrap;
}
.panel-btn
{
    font-size: 10pt;
    line-height: 1;
    vertical-align: middle;
    border: 4px solid var(--prolink-bg);
    padding: 4px 4px;
}
.panel-btn-active:hover
{
    cursor: pointer;
    background-color: var(--prolink-bg);
    color: var(--prolink-btn);
}
.prolinkStatCol-no-btn
{
    font-size: 10pt;
    border-top: 6px solid var(--prolink-bg);
    border-bottom: 6px solid var(--prolink-bg);
    border-right:1px solid #aaa;
    background: var(--prolink-bg);
    color: #fff;
    padding: 2px 4px;
    text-align: left;
    font-weight: 600;
    white-space:nowrap;
}
.panel6500StatusDisplayWidget
{
    table-layout: fixed;
    line-height:1;
}
.panel6500StatusDisplayWidget div
{
    display: inline-block;
    vertical-align: middle;
}
.panel6500StatusDisplayWidget th,
.panel6500StatusDisplayWidget td
{
    border: 3px solid var(--prolink-bg);
    text-align: center;
    font-weight: 600;
}
.panel6500StatusDisplayWidget th
{
    font-size: 7pt;
    background-color: var(--prolink-btn);
    color: #fff;
    white-space: nowrap;
}
.panel6500StatusDisplayWidget td
{
    font-size: 18pt;
    background-color: var(--prolink-bg);
    color: #fff;
}

.panel6500StatusDisplayVert,
.panel6500StatusDisplayHoriz
{
    margin: 0 auto;
    color: #777;
}
.panel6500StatusDisplayVert th,
.panel6500StatusDisplayVert td,
.panel6500StatusDisplayHoriz th,
.panel6500StatusDisplayHoriz td
{
    border: 1px solid #ddd;
    padding: 4px 8px;
}

.panel6500StatusDisplayVert td,
.panel6500StatusDisplayHoriz td
{
    text-align: center;
    font-weight: 700;
}
.pan-fire
{
    background: var(--prolink-bg) !important;
    color: var(--pale-text) !important;
}
.pan-fault
{
    background: var(--prolink-bg) !important;
    color: var(--pale-text) !important;
}
.pan-disabled
{
    background: var(--prolink-bg) !important;
    color: var(--pale-text) !important;
}
.pan-test
{
    background: var(--prolink-bg) !important;
    color: var(--pale-text) !important;
}
.pan-alarm
{
    background: var(--prolink-bg) !important;
    color: var(--pale-text) !important;
}

.event-filter
{
    cursor:pointer;
    text-decoration: underline;
    text-decoration-color: blue;
}
.event-filter:hover
{
    background-color: #fcfcfc;
    color: #000;
}

.event-filter-widg
{
    cursor:pointer;
}
.event-filter-widg:hover
{
    background-color: var(--prolink-bg);
    color: var(--prolink-btn);
}

.event-active
{
    text-decoration: underline;
    color: blue;
    box-shadow:inset 0px 0px 0px 1px #777;
}
.event-active-widg
{
    box-shadow:inset 0px 0px 0px 4px orange;
}

/* Prolink Blade styles */

.prolink-screen
{
    background-color: var(--prolink-bg);
    background-image: url("/assets/img/prolink-screen-bg.png"), linear-gradient(to bottom, var(--prolink-bg), var(--prolink-btn));
    background-size: cover;
    background-repeat:  no-repeat;
    background-position: center center;
    min-height: 450px;
    max-height: 450px;
    padding-top: 10px;
}

.prolink-panel-content
{
    background-color: var(--prolink-screen-bg);
    height: 272px;
    margin: 0;
    overflow-y: auto;
}

.prolink-panel-content-placeholder
{
    height: 297px;
    display: block;
}

.prolink-panel-content-header
{
    background-color: var(--prolink-btn);
    margin: 0;
}

.prolink-panel-content-header h4
{
    color: #FFFFFF;
    margin: 0;
}
.prolink-panel-content .list-group-item-action:hover
{
    cursor: pointer;
}

.prolink-clickable
{
    cursor: pointer;
}

.prolink-log-menu-item
{
    height: 55px;
}

.prolink-log-item
{
    height: 55px;
    padding: 1px 10px 1px 0;
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
}

.prolink-log-item i {
    font-size: 24px;
}

.prolink-log-item h5
{
    margin-bottom: 0px;
    text-transform: none;
    font-size: 17px;
}

.prolink-log-item div
{
    line-height: 1.2em;
    font-size: 0.9em;
}

.prolink-log-item .flash-logo-re
{
    background-size: 1em 1em;
}

.prolink-log-item h5 span.fire
{
    background: red;
    color: #fff;
    padding: 0 5px;
    font-size: 13px;
}

.prolink-notification-bar
{
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 10px;
}

.prolink-notification-bar .prolink-notification-button
{
    background-image: linear-gradient(to bottom, var(--prolink-btn), var(--prolink-btn-dark));
    text-align: center;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    border: none;
}

.prolink-notification-button
{
    padding-top: 2px;
    padding-bottom: 2px;
}

.prolink-notification-button-icon
{
    font-size: 18px;
    float: left;
    line-height: 2em;
    height: 2em;
    margin-left: -5px;
}

.prolink-notification-button-counter
{
    font-size: 1.2em;
    line-height: 1em;
    font-weight: bold;
}

.prolink-action-bar
{
    line-height: 1;
    margin-top: 20px;
}
.prolink-action-button
{
    font-size: 1.2em;
}

.prolink-panel-menu
{
    margin-top: 20px;
}

.prolink-status-bar {
    background: var(--prolink-status-bg);
    padding: 5px;
    color: var(--pale-text);
}

#prolink-alarmcountmodal .modal-content div {
    padding: 0.5rem;
}

#prolink-alarmcountmodal .modal-hd {
    background: #0088CC;
}

#prolink-alarmcountmodal h4 {
    color: var(--pale-text);
    margin: 0;
}

.prolink.fa-exclamation-triangle {
    font-size: 1.5em;
    color: #fb0;
    line-height: 2;
}

.text-version {
    color: var(--prolink-bg);
    font-size: 0.7rem
}

/* xtra theme features */

html .featured-box-amber .icon-featured {
	background-color: #FFBF00;
}

html .featured-box-amber h4 {
	color: #FFBF00;
}

html .featured-box-amber .box-content {
	border-top-color: #FFBF00;
}

html .featured-box-amber .box-content-border-bottom {
	border-bottom-color: #FFBF00;
}

html .featured-box-effect-2.featured-box-amber .icon-featured:after {
	-webkit-box-shadow: 0 0 0 3px #FFBF00;
	box-shadow: 0 0 0 3px #FFBF00;
}

/* my tooltip mods */
.tooltip.in, .tooltip.show
{
    opacity: 0.95 !important;
}
.tooltip-inner
{
    background-color: var(--tooltip-bg-color) !important;
    color: var(--tooltip-text) !important;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--tooltip-bg-color) !important;
    color: var(--tooltip-text) !important;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: var(--tooltip-bg-color) !important;
    color: var(--tooltip-text) !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: var(--tooltip-bg-color) !important;
    color: var(--tooltip-text) !important;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
    border-right-color: var(--tooltip-bg-color) !important;
    color: var(--tooltip-text) !important;
}
.table-xsm th,
.table-xsm td {
	padding: 0.2rem !important;
	font-size: small;
}
.table-xxsm th,
.table-xxsm td {
	padding: 0.1rem !important;
	font-size: small;
}
.t-greyed {
    background: var(--th-background);
}

#historyModal {
    margin-top: 10px;
}

#historyModal .modal-header, #historyModal .modal-footer {
    background: #444;
}

#historyModal .modal-header h5, #historyModal .modal-header .close {
    color: #FFF;
}

#historyModal .modal-content {
    border-radius: 0;
    border: 0;
}

#historyModal .modal-body {
    max-height: 292px;
    overflow-y: auto;
}

#historyModal .grid {
    display: grid;
    grid-template-columns: auto;
    column-gap: 20px;
}

#prolinkEventsTestModal #prolink-events-siteid {
    display: grid;
    grid-template-columns: repeat(auto-fit,  364px);
    column-gap: 10px;
}

#prolink-events-table-eng-tbody {
    font-size: 95%;
}

#prolink-events-table-eng-tbody .fas, #prolink-events-table-eng-tbody .far, #prolink-events-table-eng-tbody .flash-logo-re {
    font-size: 120%;
}