html {
    height: 100% ;
    /*overflow-y: scroll;*/
    /* font-size: calc( 0.80em + 0.20vw ) ;*/
    font-size: 1.2em ;
    user-select: none; /* Prevent text highlighting */
    background-color: #5d5d5d ;
    transition: background-color 500ms ease-out ;
}

body {
    height: 100% ;
    margin: 0;
    padding: 0;

    font-family: 'Lato', sans-serif;
}

body.scanner {
    display: flex ;
    flex-direction: column ;
    justify-content: space-evenly ;
    align-items: stretch ;
    background-color: #000 ;
    color: #ddd ;
    transition: opacity 500ms linear ;
    opacity: 1 ;
    overflow: hidden ;
}

body.scanner #site-corner-high, #site-corner-low {
    position: fixed ;
    z-index: 550 ;
    width: 10rem ;
    height: 10rem ;
    -ms-transform: rotate(45deg);	 /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
    background-color: #7dd566 ;
}
body.scanner #site-corner-high {
    left: -15rem ;
    top: -6.4rem ;

}
body.scanner #site-corner-low {
    right: -15rem ;
    bottom: -6.4rem ;
}

body.scanner #pageicon {
    background: url("../../Images/App/CEDAR_logo_app_icon_1024.png") ;
    background-size: contain ;
    background-repeat: no-repeat;

    text-align: center ;
    color: transparent;
    font-size: 3rem ;
    font-weight: bolder ;

    position: fixed ;
    top: 1px ;
    left: calc( 50% - 2.5rem );
    z-index: 550 ;

    /** The following setting values must be the same **/
    border-radius: 4rem ;
    height: 4rem;
    width: 4rem ;
    line-height: 4rem ;
}

body.scanner #pageicon.clear {
    background-image: none;
    background-color: #fff ;
    color: #444 ;
}


/*
 Top Area
 */
body.scanner div#top {
    flex: 0 1 auto ;
    width: 100% ;
    text-align: center;
    font-size: 1.4rem ;
    margin-left: auto ;
    margin-right: auto ;
    padding-top: 4rem ;
    height: 4em ;
}
body.scanner div#top p {
    margin: 0.25em 1.5em ;
}
body.scanner div#top p#subheader {
}
body.scanner div#top p#headline {
    font-size: 1.5em ;
    font-weight: bold ;
    text-transform: capitalize;
}


/*
 Footer Area
 */
body.scanner div#foot {
    text-align: center ;
    flex: 0 1 auto ;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: flex-end;
    padding:0 1.5em 0.2em 1.5em;
}

body.scanner #institution {
    height: 4em;
    display: inline-block;
}

body.scanner div#foot > div {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}

body.scanner div#foot div:nth-child(1), body.scanner div#foot div:nth-child(3) {
    flex: 1 1 0em ;
/*    width: 0em;
    max-width: 0em; */
    overflow: hidden ;
    margin: 0 1em ;
    text-align: left ;
    opacity: 0 ;
}
body.scanner div#foot div:nth-child(2) {
    flex: 2 0 auto ;
}

/*
Main Area
 */
body.scanner div#main div {
    opacity: 1 ;
}
body.scanner div#main {
    flex: 1 1 auto ;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    padding: 1em;
    text-align: center ;
}

body.scanner video {
    -webkit-border-radius: 0.5em  ;
    -moz-border-radius: 0.5em ;
    border-radius: 0.5em ;
    width: 100% ;
}

body.scanner div#main > div {
    border-radius: 0.5em ;
}

/* Particular style for the first scanner display div (permanent) */
body.scanner div#main > div:nth-child(1){
    margin: 0 0 0 0 ;
    width: 38vw ;
  /*  min-width: 20em ;*/
    max-width: 45vh ;
    position: relative ;
}

/* Particular style for the second feedback div */
body.scanner div#main > div:nth-child(2) {
    flex: 1 0 auto ;
    max-width: 0vw ;
    max-height: 0vh ;
    overflow: hidden;
    margin: 0 ;
    background-color:black;
    position: relative;
    left: 75vw ;
}

body.scanner div.message {
    font-size: 1rem ;
    border-radius: 0.25em ;
    font-weight: bold;
    padding: 1em ;
}

body.scanner div.message p {
    padding: 0;
    margin: 0;
}

body.scanner .highlight {
    font-weight: bold ;
}


/**
 #main results/info styling
 Registration Marks
 */
body.scanner #registration {
    /* display: none; */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 90%;
    padding: 1em;
}
body.scanner #registration #person{
    display: flex;
    flex: 5 1 auto;
    flex-wrap: wrap;
    align-items: stretch;
}
body.scanner #registration #person #photo{
    flex: 1 0 10em;
    /*background-image: url( 'http://expressimaging.co.uk/wp-content/uploads/2013/03/003_IMAGE_011-234x300.jpg' );*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: contain;
    background-size: contain;
}
body.scanner #registration #person #name{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.scanner #registration #mark{
    padding: 1em;
    margin-top: 1em;
    border-radius: 0.5em;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
}

/**
 #main results/info styling
 Registration Marks
 */
body.scanner #activities {
    padding: 0.5em;
    text-align: left ;
}
body.scanner #activities .section {
    background-color: #4a4a4a;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 0.5em 0.5em 0em 0em;
    padding: 0.25em 0.25em 0.25em 3em;
    line-height: 2;
}
body.scanner #activities p {
    line-height: 1;
    margin-bottom: 0.7em;
    margin-top: 0.5em;
}
body.scanner #activities p.past {
    opacity: 0.5;
}

body.scanner #activities p.activities-message {
    margin-left: 1em;
}
body.scanner #activities p span.time {
    font-weight: bold;
    display: inline-block;
    text-align: center;
    margin-right: 0.3em;
    
    background-color: #505050;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 0.5em;
    padding: 0.22em 0.4em;
}
body.scanner #activities p.highlight span.time {
    background-color: #2e7d1b;
    color: #ddd;
}
html.warning body.scanner #activities p.highlight span.time {
    background-color: #ac820a;
}
body.scanner #activities p span.row {
    display: block;
    /*margin-left: var(--time-entry-width);*/
    margin-left: 0.3em;
    margin-top: 0.35rem;
    font-size: 0.85em;
    /*opacity: 0.9;*/
}
body.scanner #activities p span.more {
    font-style: italic;
	margin-top: 0.5rem;
    opacity: 0.9;
    color: lightgray;
}
body.scanner #activities p span.more::before {
    content: '... ';
}

body.scanner #activities .section.thisroom {
    background-image: url("../../Icons/ui/ux2/appbar-door-enter.png");
}
body.scanner #activities .section.your {
    background-image: url("../../Icons/ui/ux2/appbar-calendar-day.png");
}

#activities .section + .section  {
   margin-top: 0.6em;
}

body.scanner #loading-message {
	text-align: center;
    background-color: black;
    font-size: 1.5em;
    /*font-size: 0.85em;*/
    /*width: 100%;*/
    position: absolute;
    padding: 0 2.5em;
	bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

body.scanner #map {
    border-radius: 15px;
    height: calc(100% - 8.3em);
    width: 93%;
    margin-left: auto;
    margin-right: auto;
}

/**
DEFAULT style, awaiting input, no registers expected, screen saving mode
*/
body.scanner div.hide {
    display:none !important;
}

/**
 Scanner mode change
 */
body.scanner.active {
    background-color: #828282 ;
    /*background: linear-gradient(140deg, #000000, #262626, #3c5544, #262626);*/
    background: linear-gradient(140deg, #000000 20%,#158463 32%,#212121 40%,transparent 76%,#2b2b2b 92%);

    background-size: 600% 600%;

    animation-direction: normal  ;
    animation-name: scan ;
    animation-timing-function: ease ;
    animation-duration: 2s ;
    animation-iteration-count: 1;
    animation-fill-mode: both ;
}
body.scanner.active.reverse {
    animation-direction: reverse ;
}

body.scanner.active #site-corner-high {
    left: -5rem ;
    top: -6.4rem ;
}
body.scanner.active #site-corner-low {
    right: -5rem ;
    bottom: -6.4rem ;
}

body.scanner.active #pageicon {
    left: -0.26rem ;
    /*transform: rotate( -720deg ) ;*/
    /*transition-duration: 750ms ;*/
    /*-moz-transition-timing-function: ease-in-out ;*/
}

body.scanner.active #top {
    height: 4.5em;
    padding: 0.5em 0 0 0;
    font-size: 1em;
}

body.scanner.active div#foot div:nth-child(1), body.scanner.active div#foot div:nth-child(3)  {
    /*width: auto ;*/
    /*max-width: 33vw ;*/
    opacity: 0.6 ;
}


body.scanner.active div#main p#headline {
    padding: 0 3em ;
}

body.scanner.active div#main > div:nth-child(1) {
    width: 28vw ;
   /* min-width: 15em ;*/
}

body.scanner.active div#main > div:nth-child(2) {
    max-width: 60vw ;
    max-height: 64vh ;
    margin: 0 0 0 1em ;
    left: 0vw ;
}

/**
  Colouring for default message/banner highlighting
 */
body.scanner.active #top, body.scanner.active .message {
    background-color: #6b6b6b ; /* #54b03c; */
    color: white;
}
body.scanner.active .highlight {
    color: #54b03c ;
}


/**
 Colouring for positive messages
 */
html.success{
    background-color: #6f8c71 ;
}
html.success body.scanner #top, html.success body.scanner .message {
    background-color: #54b03c;
    color: white;
}
html.success body.scanner .highlight {
    color: #54b03c ;
}
body.scanner #registration #mark, body.scanner #registration #mark.present {
    background-color: #54b03c ;
    color: #fff;
    border-color: transparent ;
}


/**
Colouring for ALERT message/banner highlighting
 */
html.alert {
    background-color: #674230 ;
}
html.alert body.scanner #top, html.alert body.scanner .message {
    background-color: #ff6c00;
    color: white;
}

html.alert body.scanner .highlight {
    color: #ff6c00 ;
}

html.alert body.scanner #site-corner-high, html.alert body.scanner #site-corner-low {
    background-color: #cf6800;
}

html.alert body.scanner #pageicon {
    background-color: #fff ;
    background-image: none ;
    color: #ff6c00 ;
}

/**
Colouring for WARNING message/banner highlighting
 */
html.warning {
    background-color: #867350;
}

html.warning body.scanner #top, html.warning body.scanner .message  {
    background-color: #ce9800;
    color: white;
}

html.warning body.scanner .highlight, body.scanner .highlight.warning {
    color: #ce9800 ;
}

html.warning body.scanner #site-corner-high, html.warning body.scanner #site-corner-low {
    background-color: #ffbc00;
    
}

html.offline body.scanner #pageicon:not(.clear), div.offline {
    background-image: url("../../Icons/ui/scanner/offline.png");
}
body.scanner #registration #mark, body.scanner #registration #mark.late {
    background-color: #ce9800 ;
    color: #fff;
    border-color: transparent ;
}

html #offline-message {
    opacity: 0;
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    border: 0.5em solid #ce9800;
    background-color:   #ce9800;
    font-size: 1.1em;
    padding: 0 0.6em;
    z-index: 650;
}

html.offline #offline-message {
    opacity: 1;
}

/**
Scan Confirmation
 */

#scan-confirmation {
    background: url("../../Icons/ui/scanner/scan-confirmation.png") no-repeat;
    background-size: contain;
    width: 4rem;
    height: 4rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 650;
    opacity: 0.25;
    margin: 0.2rem;
    animation-duration: 0.3s;
}

#scan-confirmation.hidden {
    display: none;
}

/**
Room Booking Session styles
 */
.occupancy-full  {
    color: #e43030;
}
.occupancy-sufficient {
    color: orange;
}
.occupancy-sparse {
    color: lightgreen;
}
.occupancy-empty {
    color: #a3a3a3;
}

/**
Animations and supporting classes
 */
@keyframes scan {
    0%{background-position:0% 0%}
    100%{background-position:94% 100%}
    /*100%{background-position:0% 0%}*/
    /*100%{background-position:79% 0%}*/
}


body.scanner.updating #registration,
body.scanner.updating #activities,
body.scanner.updating #sessioninfo,
body.scanner.updating #scan-message,
body.scanner.updating #scan-confirmation,
body.scanner.updating #headline,
body.scanner.updating #subheader,
.fadeout {
    opacity: 0 !important;
}
.semi-fadeout{
    opacity: 0.5 !important;
}

.nowrap {
	white-space: nowrap;
}

.loaded .animated {
    animation-duration: 1.4s  ;
}

.loaded .animated.no-leadin {
    /*-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important ;*/
    /*-moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)  !important ;*/
    /*-o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)  !important ;*/
    transition-timing-function: cubic-bezier(0.17, 0.07, 0.36, 1)  !important ;

    /*-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important ;*/
    animation-timing-function: cubic-bezier(0.17, 0.07, 0.36, 1) !important ;
}


/**
    These are placed here (instead of being grouped with similar selectors) to increase specificity.
 */
html body.scanner .message.success {
    background-color: #54b03c;
    color: white;
}
html body.scanner .message.warning {
    background-color: #ce9800;
    color: white;
}
