/*
This CSS file is shared by both the server side (Vue) and client side (login, register, pdf export) application.

**** KEY *****

.blockName
.blockName-elementName (for a subcomponent of a block)
.blockName_modifierName (for a variation of a block)

*/

html {
    /**
     * We set the font size here since rems are relative to the html tag's font size.
     * Adjusting this percentage will scale every element on the page specified in rems or ems proportionally
     */
    font-size: 100%; /* 1rem is equivalent to 16px at this percentage - Divide any pixel value by 16 to get the equivalent value in rems */
}
    @media (max-width: 600px) {
        html {
            font-size: 95%;
        }
	}

	/*@media (min-width: 1600px) {
		font-size: 140%;
	}
	@media (min-width: 1800px) {
	   font-size: 150%;
	}
	@media (min-width: 2000px) {
	   font-size: 160%;
	}*/

body {
	font-family: 'Encode Sans', sans-serif;
	color: #6A6A6A;
	background-color: #f7fafd;

    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust: 100%; /* responsive */
}

::placeholder {
  color: #888;
}

/**
 * Sets site's primary content container width/margins
 */
.container {
    margin: 0 1.5rem;
    position: relative;
}
    /* Ignore nested containers */
    .container .container {
        width: auto;
        min-width: initial;
        max-width: initial;
        margin: initial;
    }
    @media (max-width: 800px) {
        .container {
            margin: 0 1.5rem;
        }
	}
	@media (max-width: 600px) {
        .container {
            margin: 0 1rem;
        }
	}
    @media (max-width: 350px) {
        .container {
            margin: 0 .75rem;
        }
	}


.mobileOverflowFix {
    min-width: 320px; /* No smaller than iPhone SE */
	overflow-x: hidden; /* Prevent horizontal scrolling on mobile devices */
}

.panel {
	background-color: #fff;
	border: 1px solid #D8D8D8;
	box-shadow: 0 2px 17px 0 rgba(29,118,190,0.09);
    min-height: 18rem;
}
	.panel-tabs {
		box-shadow: 0 0 6px #EEEEEE;
	}
	.panel-content {
		padding: 1rem;
	}
    @media (min-width: 1200px) {
        .panel-content {
            padding: 1.25rem 1.25rem;
        }
    }
    @media (max-width: 400px) {
        .panel-content {
            padding: 1rem .75rem;
        }
    }

.primaryPanel {
    /*display: flex;
    height: 100%;*/
    padding: 4rem 0;
}
    .primaryPanel-panel {
        width: 25rem;
        margin: auto;
        padding: 2rem;
        border-top: 3px solid #1e75bc;
    }
    .primaryPanel-logo {
    	display: block;
    	margin: 0 auto 1.5rem;
        width: 6rem;
    }
    .primaryPanel_large {
        padding: 4rem 2rem;
    }
        .primaryPanel_large .primaryPanel-panel {
            width: auto;
            max-width: 50rem;
        }
    @media (max-width: 500px) {
        .primaryPanel {
            height: 100%;
            display: flex;
            padding: 0;
        }
        .primaryPanel .primaryPanel-panel {
            width: 100%;
            min-height: 100%;
        }
    }


.label,
.InputfieldHeader
{
    text-transform: uppercase;
    font-size: .8125rem;
    color: #3D78C3;
    margin-bottom: .5rem;
    display: block;
}

.txtBox,
.tagify,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select
{
    font-size: 1rem;
    padding: .25rem .5rem;
    height: 2.5rem;
    background-color: #fff;
    border: 1px solid #CED4DA;
    border-radius: .25rem;
    width: 100%;
    box-shadow: inset 1px 1px 2px #eee;
}
    .txtBox:hover, .txtBox:focus,
    input[type="text"]:hover, input[type="text"]:focus,
    input[type="number"]:hover, input[type="number"]:focus,
    input[type="email"]:hover, input[type="email"]:focus,
    input[type="password"]:hover, input[type="password"]:focus,
    select:hover, select:focus
    {
        border-color: #aaa;
    }
    .txtBox_multiLine {
        height: auto;
    }

/* Tagify component style overrides */
.tagify { /* Limit the height of the tag input and allow scrolling */
	height: auto;
	max-height: 10rem;
	overflow-y: auto;
}
    .tagify--select.tagify--select::after {
        color: #3D78C3;
        opacity: 1;
    }
    .tagify--select.tagify--invalid {
        /*border: 1px solid #ff8989;*/ /* Removed due to red border appearing randomly in IE10 */
        border: 1px solid #CED4DA;
    }
    .tagify__tag {
        /*z-index: auto !important; Removes tag background color :( */
    }
    .tagify__tag__removeBtn.tagify__tag__removeBtn {
        font-size: 1.25rem;
        line-height: 1;
        height: 1.25rem;
        width: 1.25rem;
        left: 0;
        right: 0;
        margin: 0;
        top: .7rem;
        font-family: inherit;
        color: rgba(0,0,0,0.3);
    }
    .tagify__tag__removeBtn.tagify__tag__removeBtn::after {
        content: "\D7";
    }

/* Date Picker component style overrides */
.vdpComponent.vdpComponent {
    font-size: inherit;
    display: block;
    color: inherit;
}
    .vdpComponent .vdpOuterWrap {
        font-size: 0.7rem;
    }
    .vdpComponent .vdpClearInput:before {
        border: none;
    }
    .vdpComponent .vdpClearInput {
        width: 1.25rem;
        right: .5rem;
    }
    .vdpComponent .vdpClearInput:before {
        font-size: 1.25rem;
        line-height: 1;
        height: 1.25rem;
        width: 1.25rem;
        left: 0;
        right: 0;
        margin: 0;
        top: .7rem;
        background-color: transparent;
        transition: all 0.3s;
    }
        .vdpComponent .vdpClearInput:hover:before {
            background-color: #c77777;
            color: #fff;
            box-shadow: none;
            transition: all 0.3s;
        }
    .vdpComponent.vdpComponent.vdpWithInput>input {
        padding-right: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .vdpComponent .vdpCell.selected .vdpCellContent, .vdpComponent .vdpCell.selectable:hover .vdpCellContent, .vdpComponent .vdpCell:focus .vdpCellContent {
        background-color: #3D78C3;
    }
    .vdpComponent .vdpArrowNext:after {
        border-left-color: #3D78C3;
    }
    .vdpComponent .vdpArrowPrev:after {
        border-right-color: #3D78C3;
    }

/* Wrap around VueDatePick component to include a calendar icon */
.datePicker {
    position: relative;
}
    .datePicker > svg { /* Calendar icon */
        position: absolute;
        top: .75rem; right: .75rem;
        color: #3D78C3;
        pointer-events: none;
    }
    .datePicker .vdpClearInput {
        right: 2rem; /* Push clear button to the left so it doesn't overlap the calendar icon */
    }
    .datePicker .vdpComponent.vdpWithInput>input {
        padding-right: 3.5rem;
    }

.btn,
.ui-button
{
    background-color: #3D78C3;
    color: #fff;
    border-radius: .25rem;
    text-transform: uppercase;
    font-size: .875rem;
    display: inline-block;
    padding: .75rem 1rem;
    transition: all .2s;
    cursor: pointer;
}
    .btn:hover, .btn:focus,
    .ui-button:hover, .ui-button:focus {
        background-color: #00367b;
        transition: all .2s;
    }
    .btn_alt {
        background-color: #fff;
        border: 2px solid #3D78C3;
        padding: calc(.75rem - 2px) calc(1rem - 2px);
        color: #3D78C3;
    }
        .btn_alt:hover, .btn_alt:focus {
            color: #fff;
            background-color: #00367b;
            border-color: #00367b;
        }
    .btn_bad {
        background-color: #fff;
        border: 2px solid #c77777;
        padding: calc(.75rem - 2px) calc(1rem - 2px);
        color: #c77777;
    }
        .btn_bad:hover, .btn_bad:focus {
            color: #fff;
            background-color: #c70000;
            border-color: #c70000;
        }
    .btn_small {
        padding: .4rem .6rem;
    }
    .btn_small.btn_alt {
        padding: calc(.4rem - 2px) calc(.6rem - 2px);
    }
    .btn_xSmall {
        padding: .25rem .5rem;
        font-size: .7rem;
        font-weight: normal;
    }
    .btn_xSmall.btn_alt {
        padding: calc(.25rem - 2px) calc(.5rem - 2px);
    }
    .btn_disabled, .btn_disabled:hover, .btn_disabled:focus {
        cursor: not-allowed;
        background-color: #dadada;
        color: #666;
    }

.iconBtn {
    cursor: pointer;
    text-align: center;
    display: inline-block;
    color: #3D78C3;
    padding: .1rem .25rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
    .iconBtn-icon {
        font-size: 1.9rem;
        margin-bottom: .15rem;
    }
    .iconBtn-label {
        font-size: .65rem;
        text-transform: uppercase;
    }
    .iconBtn:hover, .iconBtn:active {
        border: 1px solid #eee;
    }


/* Styles for PW inputfields when used on front-end */
.Inputfield {
    margin-bottom: 1rem;
    display: block;
    clear: both;
    padding: 0 .15rem;
}
    .InputfieldContent {
        font-size: .85rem;
    }
    .InputfieldColumnWidth {
        float: left;
        clear: none;
    }
    /* Space between PW fields */
    .InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) {
        margin-left: 1%;
    }
    @media only screen and (max-width: 479px) {
        /**
         * Disregard column width when at mobile size
         *
         */
        .Inputfield {
            clear: both !important;
            width: 100% !important;
            margin-left: 0 !important;
            margin-bottom: 1em !important;
        }
    }

.LoginRegisterError {
    background-color: #ffe5e5;
    color: #945a5a;
    font-weight: 600;
    letter-spacing: .025rem;
    padding: .2rem .5rem;
    margin-top: 0.25rem;
    text-transform: uppercase;
    font-size: .8rem;
    display: inline-block;
}

.notice,
.LoginRegisterMessage {
    font-weight: 600;
    letter-spacing: .025rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background-color: #d9e6f9;
    color: #00367b;
}
    .notice-icon {
        margin-right: .25rem;
    }
    .notice_good,
    .LoginRegisterMessage {
        background-color: #d1f9d2;
        color: #007b59;
    }
    .notice_bad {
        background-color: #ffe5e5;
        color: #945a5a;
    }
    .notice_small, .LoginRegisterMessage {
        /*text-transform: uppercase;*/
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

.link, .richTxt a {
    color: #1e75bc;
    text-decoration: underline;
    cursor: pointer;
}
    .link:hover, .richTxt a:hover,
    .link:focus, .richTxt a:focus {
        text-decoration: blink;
        color: #00367b;
    }

.subtleLink,
.LoginRegisterLinksForgot,
.LoginRegisterLinksRegister,
.LoginRegisterLinks
{
    font-size: .875rem;
    color: #999;
    cursor: pointer;
}
    .subtleLink:hover, .subtleLink:focus,
    .LoginRegisterLinksForgot a:hover, .LoginRegisterLinksForgot a:focus,
    .LoginRegisterLinksRegister a:hover, .LoginRegisterLinksRegister a:focus,
    .LoginRegisterLinks a:hover, .LoginRegisterLinks a:focus
    {
        color: #1e75bc;
        text-decoration: underline;
    }

.heading1 {
	font-size: 1.43rem;
	font-weight: 600;
    color: #1e75bc;
    margin-bottom: 1.5rem;
}
    @media (max-width: 600px) {
        .heading1 {
            font-size: 1.3rem;
        }
    }

.heading2 {
    text-transform: uppercase;
    font-size: 0.9375rem;
    color: #1e75bc;
    margin-bottom: 1rem;
    font-weight: 700;
}
    .heading2 > svg {
        margin-right: .25rem;
    }

.heading3 {
    text-transform: uppercase;
    font-size: 0.8125rem;
    color: #1e75bc;
    margin-bottom: 0.75rem;
    font-weight: 700;
}
    .heading3 > svg {
        margin-right: .25rem;
    }

.subheading {
    color: #999999;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}
    .heading1 + .subheading {
        margin-top: -1.25rem;
    }

p {
    margin-bottom: 1rem;
}

.notes {
    font-size: .9rem;
    background-color: #feffd7;
    padding: .5rem;
}

.list {
    margin-top: .5rem;
    padding-left: 1.5rem;
    list-style-type: disc;
}
    .list li {
        margin-bottom: .25rem;
    }


.tooltip {
    display: block !important;
    z-index: 10000;
}
    .tooltip .tooltip-inner {
        background: #00367b;
        color: #fff;
        border-radius: .25rem;
        padding: .25rem .5rem;
        font-size: .9rem;
    }
    .tooltip .tooltip-arrow {
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        margin: 5px;
        border-color: #00367b;
        z-index: 1;
    }
    .tooltip[x-placement^="top"] {
        margin-bottom: 5px;
    }
    .tooltip[x-placement^="top"] .tooltip-arrow {
        border-width: 5px 5px 0 5px;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        border-bottom-color: transparent !important;
        bottom: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }
    .tooltip[x-placement^="bottom"] {
        margin-top: 5px;
    }
    .tooltip[x-placement^="bottom"] .tooltip-arrow {
        border-width: 0 5px 5px 5px;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        border-top-color: transparent !important;
        top: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }
    .tooltip[x-placement^="right"] {
        margin-left: 5px;
    }
    .tooltip[x-placement^="right"] .tooltip-arrow {
        border-width: 5px 5px 5px 0;
        border-left-color: transparent !important;
        border-top-color: transparent !important;
        border-bottom-color: transparent !important;
        left: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
    }
    .tooltip[x-placement^="left"] {
        margin-right: 5px;
    }
    .tooltip[x-placement^="left"] .tooltip-arrow {
        border-width: 5px 0 5px 5px;
        border-top-color: transparent !important;
        border-right-color: transparent !important;
        border-bottom-color: transparent !important;
        right: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
    }
    .tooltip.popover .popover-inner {
        background: #f9f9f9;
        color: #00367b;
        padding: 24px;
        border-radius: 5px;
        box-shadow: 0 5px 30px rgba(0,0,0,.25);
    }
    .tooltip.popover .popover-arrow {
        border-color: #f9f9f9;
    }
    .tooltip[aria-hidden='true'] {
        visibility: hidden;
        opacity: 0;
        transition: opacity .15s, visibility .15s;
    }
    .tooltip[aria-hidden='false'] {
        visibility: visible;
        opacity: 1;
        transition: opacity .15s;
    }

.noResults {
    padding: 7rem .5rem;
}
    .noResults > p {
        font-size: 1.75rem;
        font-weight: bold;
        color: #ccc;
        text-align: center;
    }
    .noResults-input {
        margin: 2rem auto;
        max-width: 20rem;
    }
    @media (max-width: 800px) {
        .noResults > p {
            font-size: 1.25rem;
        }
    }

.richTxt {
    line-height: 1.5;
}

.richTxt table {
    width: 100%;
    margin-bottom: 1rem;
    font-size: .9em;
    line-height: 1.25;
}
    .richTxt table th {
        font-weight: bold;
    }
    .richTxt table td, .richTxt table th {
        padding: .25rem;
        border: 1px dotted #ccc;
    }

.boxed {
	border: 1px solid #d8d8d8;
	padding: 1.25rem;
	min-height: 325px;
	margin-top: -1px; /* Collapse top border when stacked */
}
    @media (max-width: 600px) {
        .boxed {
            min-height: 0;
        }
	}

	@media (max-width: 500px) {
        .boxed {
            border: none;
            padding: 0;
            margin-bottom: 1rem;
        }
	}

.stats {
	margin-bottom: 2rem;
}

.statsTable {
    font-size: 0.875rem;
    font-weight: 700;
    width: 100%;
}
    .statsTable td {
        vertical-align: top;
        padding: 0.5rem 0;
    }
    .statsTable .btn {
        float: right;
        margin-left: 0.25rem;
    }
    .statsTable tr {
        border-bottom: 1px solid #e3e3e3;
    }
    .statsTable .statsTable-label {
        font-weight: 400;
        text-transform: uppercase;
        padding-right: 0.75rem;
        white-space: nowrap;
    }
    @media (max-width: 1000px) {
        .statsTable .statsTable-label {
            white-space: normal;
            min-width: 8rem;
            max-width: 8rem;
            width: 8rem;
        }
    }

.statBoxes {
	display: flex;
	flex-wrap: wrap;
}

.statBox {
    padding: 0.85rem;
    border: 1px solid #d8d8d8;
    margin-top: -1px; /* Collapse top border when stacked */
    margin-right: -1px;
    flex-grow: 1;
    min-width: 15rem;
}
    .statBox tr {
		font-size: 0.8125rem;
		font-weight: 700;
	}

    .statBox td {
		padding: 0.15rem 0;
	}

    .statBox .statBox-label {
		text-transform: uppercase;
		font-weight: 400;
		padding-right: 0.5rem;
	}

.smallTable {}
	.smallTable th {
		font-weight: bold;
	}
	.smallTable td, .smallTable th {
		padding: .25rem;
		border: 1px dotted #ccc;
	}

.colorDot {
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    display: inline-block;
}
    .colorDot.maint-alarm, .checkList-item.maint-alarm.filter-active, .colorDot.bad {
        background-color: #ef664b;
    }
    .colorDot.purity-alert, .checkList-item.purity-alert.filter-active {
		background-color: #f8a600;
	}
    .colorDot.normal, .checkList-item.normal.filter-active, .colorDot.good {
		background-color: #84b749;
	}
    .colorDot.no-usage, .checkList-item.no-usage.filter-active {
		background-color: #3eb6e0;
	}
    .colorDot.no-call, .checkList-item.no-call.filter-active {
		background-color: #8f97a3;
	}

.field {
	margin-bottom: 1.25rem;
}
	.field-label {
		margin-bottom: 0.5rem;
	}
    .field-description {
        font-size: 0.825rem;
        margin-bottom: 0.5rem;
    }
	.field-notes {
		margin: 0.31rem 0;
		font-size: 0.8125rem;
		color: #878787;
	}
	.field-error {
		background-color: #ffe5e5;
		color: #945a5a;
		font-weight: 600;
		letter-spacing: .025rem;
		padding: .2rem .5rem;
		margin-top: 0.25rem;
		font-size: .8rem;
	}
	.field-required {
		color: #ef664b;
	}
	.field_inline {
		margin: 0.5rem 0;
		display: flex;
		align-items: center;
	}
	.field_inline > * {
		margin: 0;
	}
	.field_inline .field-label {
		margin-bottom: 0;
		margin-right: 0.5rem;
		text-align: center;
	}
	.field_inline .field-dash {
		margin: 0 0.25rem;
	}

/****** Helpers *******/

.center {
	text-align: center;
}

/* Use hidden when you want your layout to behave as if the element was still there */
.hidden {
    visibility: hidden;
}

.relative {
    position: relative;
}