.ui-icon-ch-logo:after {
	background-image: url("images/ch-logo-18.png");
}

.ui-icon-help:after {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"></path></svg>');
    background-size: 18px 18px;
}

/* HD/"retina" logo (iPhone 4 mostly) */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
    .ui-icon-ch-logo:after {
	    background-image: url("images/ch-logo-36.png");
		-moz-background-size: 18px 18px;
		-o-background-size: 18px 18px;
		-webkit-background-size: 18px 18px;
		background-size: 18px 18px;
    }
}

.validation-summary-errors {
    color: red;
}

.validation-summary-errors ul {
    list-style: none;
}

.document-preview
{
    margin: 9px auto 0;
}
span.preview-image
{
    display:none;
}
img.preview-image
{
    border: solid 1px #cccccc;
    max-width: 90%;
    background: #ffffff;
}

/* In order to fit the full page title "Construction Hive BETA", we need slightly wider margins
 * than the default in jquery-mobile.  Trial and error values to get the full text to show on a
 * couple of standard smart-phones.
 */
.ui-header .ui-title
{
    margin-left:22%;
    margin-right:22%;
}
span.mobile-beta
{
    font-size: 8px;
    vertical-align: super;
    font-weight: lighter;
}


.ui-icon-doc-out-of-spec:after,
.ui-icon-doc-unread:after,
.ui-icon-doc-urgent:after,
.ui-icon-phone:after,
.ui-icon-email:after
{
    background-image: url(images/icons-doc-18-white.png);
}
.ui-icon-alt.ui-icon-doc-out-of-spec:after,
.ui-icon-alt.ui-icon-doc-unread:after,
.ui-icon-alt.ui-icon-doc-urgent:after,
.ui-icon-alt.ui-icon-phone:after,
.ui-icon-alt.ui-icon-email:after
{
    background-image: url(images/icons-doc-18-black.png);

}
.ui-icon-doc-out-of-spec:after
{
	background-position: 	2px 50%;
}
.ui-icon-doc-unread:after
{
	background-position: 	-16px 50%;
}
.ui-icon-doc-urgent:after
{
	background-position: 	-34px 50%;
}
.ui-icon-email:after
{
	background-position: 	-16px 50%;
}
.ui-icon-phone:after
{
	background-position: 	-52px 50%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
	.ui-icon-doc-out-of-spec:after,
	.ui-icon-doc-unread:after,
	.ui-icon-doc-urgent:after,
    .ui-icon-phone:after,
    .ui-icon-email:after
	{
		background-image: url(images/icons-doc-36-white.png);
		-moz-background-size: 72px 18px;
		-o-background-size: 72px 18px;
		-webkit-background-size: 72px 18px;
		background-size: 72px 18px;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
	.ui-icon-alt.ui-icon-doc-out-of-spec:after,
	.ui-icon-alt.ui-icon-doc-unread:after,
	.ui-icon-alt.ui-icon-doc-urgent:after,
    .ui-icon-alt.ui-icon-phone:after,
    .ui-icon-alt.ui-icon-email:after
	{
		background-image: url(images/icons-doc-36-black.png);
	}
}


/* styles for document list */
.ui-li .ui-btn-inner a.ui-link-inherit.doc-list-item
{
    padding-top: 0;
    padding-bottom: 0;
}
.ui-li-has-thumb .ui-btn-inner a.doc-list-item
{
    padding-left: 64px;
}
a.doc-list-item .doc-list-logo:after,
a.doc-list-item .ui-icon-doc-urgent:after,
a.doc-list-item .ui-icon-doc-out-of-spec:after,
a.doc-list-item .ui-icon-doc-unread:after
{
    position: absolute;
}

a.doc-list-item .doc-list-logo
{
    left: 10px;
    top: 8px;
}
a.doc-list-item .ui-icon-doc-urgent:after
{
    left:3px;
    bottom: 10px;
}
a.doc-list-item .ui-icon-doc-out-of-spec:after
{
    left:21px;
    bottom: 10px;
}
a.doc-list-item .ui-icon-doc-unread:after
{
    left:39px;
    bottom: 10px;
}
a.doc-list-item h3,
a.doc-list-item p
{
    margin: 0;
}

/* metadata details */
.metadata
{
    position:relative;
    float:left;
    left: 50%;
}
.metadata .center
{
    position: relative;
    float: left;
    left: -50%;
}
.metadata p
{
    text-align: left;
    margin: 0 0 3px;
}

.ui-spacer
{
    padding: 15px 0;
}

.ui-text-with-icon
{
    position:relative;
    left: 20px;
    margin-right:20px;
}
.ui-text-with-icon .ui-icon
{
    position:absolute;
    left: -20px;
}
.ui-navbar .ui-btn
{
    border-radius: 0; /* navbar-button, override {global-radii-buttons} */
}

#qrcode img, #qrcode canvas {
    width: 80%;
    height: auto;
    max-height: 80vh; /* ensure the whole QR code appears in the viewport; particularly on mobile devices in landscape, it is otherwise too big */
    max-width: 80vh; /* same vh as max-height to maintain squareness */
}

#qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
}

.note {
    display: flex;
    align-items: normal;
    overflow: auto;
    padding: 10px 10px 10px 0;
    text-align: start;
    width: auto;
    word-break: break-word;
    margin: 10px 0 15px 0;
}

.note.warning {
    border: 1px solid #facc15;
    color: #713f12;
    background-color: #fefce8;
}

.note.danger {
    border: 1px solid #ff3029;
    background-color: #ffeaee;
    color: #d5001c
}

.note.info {
    border: 1px solid #1465c8;
    background-color: #e3f2fe;
    color: #1676da
}

.note-icon {
    padding: 0 0 0 12px;
}

.note-text {
    padding: 0 0 0 10px;
}