@charset "UTF-8";
/* CSS Document Last-Mod: 2024-08-02 */
@keyframes scannotice { 
  from { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='black' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M232-172q-26 0-43-17t-17-43v-128h28v128q0 12 10 22t22 10h128v28H232Zm368 0v-28h128q12 0 22-10t10-22v-128h28v128q0 26-17 43t-43 17H600ZM172-600v-128q0-26 17-43t43-17h128v28H232q-12 0-22 10t-10 22v128h-28Zm588 0v-128q0-12-10-22t-22-10H600v-28h128q26 0 43 17t17 43v128h-28Z'/%3E%3C/svg%3E"); } 
  to   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' fill='transparent' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M232-172q-26 0-43-17t-17-43v-128h28v128q0 12 10 22t22 10h128v28H232Zm368 0v-28h128q12 0 22-10t10-22v-128h28v128q0 26-17 43t-43 17H600ZM172-600v-128q0-26 17-43t43-17h128v28H232q-12 0-22 10t-10 22v128h-28Zm588 0v-128q0-12-10-22t-22-10H600v-28h128q26 0 43 17t17 43v128h-28Z'/%3E%3C/svg%3E"); } 
} 

@keyframes screentouch { 
  
  0%   { background-size:  320px; background-color:black; } 
  50%  { background-size:  64px;  background-color:darkslategray;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgba(210,170,32,0.2)'%3E%3Cpath d='M446.69-120q-32.61 0-62.11-13.54t-48.81-39.38L146.23-423.77l10.54-11.54q10-11 23.77-13.46 13.77-2.46 26.23 4.85l120.92 59.61v-304.92q0-8.5 5.76-14.25t14.27-5.75q8.51 0 14.36 5.75 5.84 5.75 5.84 14.25v372.77l-143.15-70.77L370.31-195q13.69 17.77 34 26.38 20.31 8.62 42.38 8.62h172.54q42.23 0 71.5-28.88Q720-217.77 720-260v-141.54q0-24.19-16.37-40.56-16.36-16.36-40.55-16.36H478.69v-40h184.39q40.38 0 68.65 28.27Q760-441.92 760-401.54v141.49q0 58.36-41.35 99.2Q677.3-120 619.23-120H446.69ZM209.31-609.23q-10.69-18.15-16.16-38.37-5.46-20.22-5.46-41.63 0-66.85 46.58-113.42 46.58-46.58 113.42-46.58 66.85 0 113.43 46.58 46.57 46.57 46.57 113.32 0 21.71-5.46 41.83-5.46 20.12-16.15 38.27l-34.39-20q8-14 12-28.5t4-31.5q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 17 4 31.5t12 28.5l-34.38 20Zm263.46 280Z'/%3E%3C/svg%3E"); } 
  
  51%  { background-size:  64px;   background-image:none; background-color:darkslategray; } 
  99%  { background-size:  320px;  background-image:none; background-color:black; } 
  100% { background-size:  320px; background-color:black; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgba(210,170,32,0.8)'%3E%3Cpath d='M446.69-120q-32.61 0-62.11-13.54t-48.81-39.38L146.23-423.77l10.54-11.54q10-11 23.77-13.46 13.77-2.46 26.23 4.85l120.92 59.61v-304.92q0-8.5 5.76-14.25t14.27-5.75q8.51 0 14.36 5.75 5.84 5.75 5.84 14.25v372.77l-143.15-70.77L370.31-195q13.69 17.77 34 26.38 20.31 8.62 42.38 8.62h172.54q42.23 0 71.5-28.88Q720-217.77 720-260v-141.54q0-24.19-16.37-40.56-16.36-16.36-40.55-16.36H478.69v-40h184.39q40.38 0 68.65 28.27Q760-441.92 760-401.54v141.49q0 58.36-41.35 99.2Q677.3-120 619.23-120H446.69ZM209.31-609.23q-10.69-18.15-16.16-38.37-5.46-20.22-5.46-41.63 0-66.85 46.58-113.42 46.58-46.58 113.42-46.58 66.85 0 113.43 46.58 46.57 46.57 46.57 113.32 0 21.71-5.46 41.83-5.46 20.12-16.15 38.27l-34.39-20q8-14 12-28.5t4-31.5q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 17 4 31.5t12 28.5l-34.38 20Zm263.46 280Z'/%3E%3C/svg%3E"); } 

} 



@keyframes screentouch2 { 
  0%   { background-position:  -120px center;             opacity:0;    } 
    
  10%  { background-position:  20px center;               opacity:0;    } 
  50%  { background-position:  center center;             opacity:0.76; } 
  90%  { background-position:  calc(100% - 20px) center;  opacity:0;    } 
    
  100% { background-position:  -120px center;             opacity:0;    } 
} 


@keyframes connect { 
    
    
  0% { 
      
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgba(255,255,255,0)'%3E%3Cpath d='M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Zm220-280Z'/%3E%3C/svg%3E");

  } 
  25% { 

      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgba(255,255,255,0.25)'%3E%3Cpath d='M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Zm220-280Z'/%3E%3C/svg%3E");

  } 
  50% { 

      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgba(255,255,255,0.5)'%3E%3Cpath d='M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Zm220-280Z'/%3E%3C/svg%3E");

  } 
  75% { 

      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgba(255,255,255,0.75)'%3E%3Cpath d='M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Zm220-280Z'/%3E%3C/svg%3E");

  } 
  100% { 
      
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='red'%3E%3Cpath d='M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q17-72 85-137t145-65q33 0 56.5 23.5T520-716v242l64-62 56 56-160 160-160-160 56-56 64 62v-242q-76 14-118 73.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-48-22-89.5T600-680v-93q74 35 117 103.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm220-358Z'/%3E%3C/svg%3E");
  } 
    
} 
/* Lage Screens */
@media screen and (min-width: 1080px) { html { font-size:1.3rem;  } } 
@media screen and (min-width: 1280px) { html { font-size:1.2rem; } } 
@media screen and (min-width: 1440px) { html { font-size:1rem;  } } 



/* UN20 Upwards */
@media screen and (min-width: 720px) and (max-width: 720px) { html { font-size:1.5rem; } } 



* { 
    box-sizing: border-box; 
    background-repeat: no-repeat; 
    max-width: 100%; 
} 


html, body { 
    display: flex; 
    width: 100%; 
    position: relative;
    min-height: 100vh;
    margin: 0px 0px;
    padding: 0px 0px;
    flex-direction: column;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    flex-grow: 1;
    background-color: #222; 
    align-items: center;
    background-repeat: no-repeat;
} body { color: #fefefe; } 

html { 
    font-size: 1em;
    font-family: Helvetica, Arial, "sans-serif";
    line-height: 1.3;
    font-weight: 200;
} 

h1, h2, h3, h4, h5, p { 
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    padding: 20px 32px;
    margin: 0px 0px;
    justify-content: space-evenly;
    line-height: 1.3;
    max-width: 100%; 
    width:100%;
} 

h1 { font-size: 2.5rem;   word-break: break-all;  font-weight:400;  } 
h2 { font-size: 2rem;     word-break: break-all;  font-weight:400;  } 
h3 { font-size: 1.75rem;                          font-weight:200;  } 
h4 { font-size: 1.65rem;                          font-weight:200;  } 
h5 { font-size: 1.5rem;                           font-weight:200;  } 
h6 { font-size: 1.5rem;                           font-weight:200;  } 
p  { font-size: 1.5rem;                           font-weight:200;  } 

p:not(.small) { padding-top:48px; } 
p.small { 
    font-size: 1.25rem;
    text-align: left;
    justify-content: flex-start;
    align-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0.8;
    padding-left: 128px;
    min-height: 92px;
    background-size: 86px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='seagreen' %3E%3Cpath d='M480-695.38q10.85 0 17.73-6.89 6.89-6.88 6.89-17.73 0-10.85-6.89-17.73-6.88-6.89-17.73-6.89-10.85 0-17.73 6.89-6.89 6.88-6.89 17.73 0 10.85 6.89 17.73 6.88 6.89 17.73 6.89Zm-20 312.3h40v-243.07h-40v243.07ZM120-156.92v-618.46q0-27.62 18.5-46.12Q157-840 184.62-840h590.76q27.62 0 46.12 18.5Q840-803 840-775.38v430.76q0 27.62-18.5 46.12Q803-280 775.38-280h-532.3L120-156.92ZM226-320h549.38q9.24 0 16.93-7.69 7.69-7.69 7.69-16.93v-430.76q0-9.24-7.69-16.93-7.69-7.69-16.93-7.69H184.62q-9.24 0-16.93 7.69-7.69 7.69-7.69 16.93v521.15L226-320Zm-66 0v-480 480Z'/%3E%3C/svg%3E");
    background-position: 20px 18px;
} 
p.small > b { 
    color: red; 
    display: inline-block;
    box-sizing: border-box;
    padding: 8px 0px 0px 0px;
    font-size: 115%;
    font-weight: 200;
    text-align: left;
} 





p.important { color:mediumseagreen; font-weight:400; font-size:2rem; padding-top:30px; } 

body > div#stage > div.footer > button, button { 
    
    color: #121212;
    display: inline-flex; 
    box-sizing: border-box; 
    padding: 16px 16px 16px 16px; 
    max-height: 160px; 
    margin: 14px auto;
    justify-content: center;
    text-align: center;
    font-size: 1.85rem;
    font-weight: 400;
    align-items: center;
    border: 0px;
    border-radius: 8px;
    box-shadow: 0px 0px 12px 1px black;
    min-height: 160px;
    min-width: 48%;
    background-repeat: no-repeat;
    background-size: 64px; 
    /* background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23484848'%3E%3Cpath d='M456.46-281.54q-75.23-9.61-125.84-65.54Q280-403 280-480q0-83.08 58.46-141.54Q396.92-680 480-680q77 0 132.92 50.23 55.93 50.23 65.54 125.46L635.23-517q-13-54-55.61-88.5Q537-640 480-640q-66 0-113 47t-47 113q0 57 34.88 100 34.89 43 88.12 56l13.46 42.46Zm333.77 153.08L598.46-321l-36.92 111.77L480-480l270.77 81.54L639-361.54l192.54 191.77-41.31 41.31Z'%3E%3Canimate attributeName='opacity' dur='3s' values='0;1;0' repeatCount='indefinite' begin='0.1'/%3E%3C/path%3E%3C/svg%3E "); */
    background-position: 3px 8px; 
    
} 

body > div#stage > div.footer > button,  
button.prev, button.next { 
    background-size: 80px; 
    color: white; 
    font-size: 2rem; 
} 


body > div#stage > div.footer > button.exit, 
button.prev { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white' %3E%3Cpath d='M400-107.69 27.69-480 400-852.31l42.54 42.54L112.77-480l329.77 329.77L400-107.69Z'/%3E%3C/svg%3E"); 
    background-position: 8% center; 
    background-color: indianred; 
    padding: 16px 16px 16px 60px; 
} 


body > div#stage > div.footer > button.next, 
body > div#stage > div.footer > button.ok, 
button.next { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white' %3E%3Cpath d='m320.23-107.69-42.54-42.54L607.46-480 277.69-809.77l42.54-42.54L692.54-480 320.23-107.69Z'/%3E%3C/svg%3E"); 
    background-position: right center; 
    background-color: seagreen; 
    padding: 16px 60px 16px 16px; 
} 





body > div#stage > div.footer > button:active, 
button.next:active, 
button.prev:active, 
button:active { 
    background-color: #111 !important;  
    color:            white !important; 
} 

button.next.off, button.prev.off { pointer-events: none !important; opacity:0.02 !important; box-shadow:none !important; display:none !important; } 

body > div#stage > div.footer > button.solo, 
button.solo { min-width: 99%; margin-left:0.5%  } 

button.timeout { position: relative; overflow: hidden; }
button.timeout:before { 
    
    content: '';
    display: block;
    position: absolute;
    top:0px;
    left:0px;
    height:160px;
    background:rgba(0,0,0,0.2);
    margin:0px auto 0px 0px; 
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -ms-transition: width 2s linear;
    -o-transition: width 2s linear;
    transition: width 2s linear;
    
} 
button.timeout.x25:before { width: 100%; }
button.timeout.x24:before { width: 96%;  }
button.timeout.x23:before { width: 92%;  }
button.timeout.x22:before { width: 88%;  }
button.timeout.x21:before { width: 84%;  }
button.timeout.x20:before { width: 80%;  }
button.timeout.x19:before { width: 76%;  }
button.timeout.x18:before { width: 72%;  }
button.timeout.x17:before { width: 68%;  }
button.timeout.x16:before { width: 64%;  }
button.timeout.x15:before { width: 60%;  }
button.timeout.x14:before { width: 56%;  }
button.timeout.x13:before { width: 52%;  }
button.timeout.x12:before { width: 48%;  }
button.timeout.x11:before { width: 44%;  }
button.timeout.x10:before { width: 40%;  }
button.timeout.x9:before  { width: 36%;  }
button.timeout.x8:before  { width: 32%;  }
button.timeout.x7:before  { width: 28%;  }
button.timeout.x6:before  { width: 24%;  }
button.timeout.x5:before  { width: 20%;  }
button.timeout.x4:before  { width: 16%;  }
button.timeout.x3:before  { width: 12%;  }
button.timeout.x2:before  { width: 8%;   }
button.timeout.x1:before  { width: 4%;   }
button.timeout.x0:before  { width: 0%;   }





div#stage > div.search > button { 
    
    color: white;
    display: inline-flex;
    box-sizing: border-box;
    padding: 40px 30px 40px 70px;
    margin: 18px auto;
    justify-content: center;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 200;
    align-items: center;
    border: 0px;
    border-radius: 8px;
    box-shadow: 0px 0px 12px 1px black;
    min-height: 105px;
    min-width: 76%;
    background-repeat: no-repeat;
    background-size: 90px !important;
    background-color: seagreen;
    /* 
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M456.46-281.54q-75.23-9.61-125.84-65.54Q280-403 280-480q0-83.08 58.46-141.54Q396.92-680 480-680q77 0 132.92 50.23 55.93 50.23 65.54 125.46L635.23-517q-13-54-55.61-88.5Q537-640 480-640q-66 0-113 47t-47 113q0 57 34.88 100 34.89 43 88.12 56l13.46 42.46Zm333.77 153.08L598.46-321l-36.92 111.77L480-480l270.77 81.54L639-361.54l192.54 191.77-41.31 41.31Z'%3E%3Canimate attributeName='opacity' dur='3s' values='0;1;0' repeatCount='indefinite' begin='0.1'/%3E%3C/path%3E%3C/svg%3E ");
    */ 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
    background-position: 24px center !important;
    
} 



body > div#stage > div.footer { 

    position: fixed !important;
    bottom: 0px !important;
    height: 200px !important;
    margin: 0px 0px !important;
    padding: 2px 2px !important;
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    width: 100% !important;
    align-content: flex-start;

}
body > div#stage > div.footer > button { 
    margin: 2px 4px !important;
}
body > div#stage > div.footer > button.exit { 
    background-color: indianred !important;
} 

body > div#stage > div.footer > button.warning { 
    
    background-color: seagreen !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
    background-position: 24px center !important;
    background-size: 90px !important;
    
}



















/* 3 Teile */
/* 3 Teile */
/* 3 Teile */

body > div#header,  
body > div#footer { 
    display:         inline-flex; 
    flex-direction:  row; 
    padding:         2px 2px; 
    align-items:     center; 
    justify-content: space-around; 
} 
body > div#header, 
body > div#footer, 
body > div#stage { 
    min-width:100%; 
    max-width:100%; 
    width: 100%; 
    margin:0px 0px 0px 0px !important; 
} 
body > div#header { 
    height:     48px; 
    max-height: 48px; 
    min-height: 48px; 
} 

body > div#footer { 
        height: 200px;
    max-height: 200px;
    min-height: 200px;
    padding-bottom: 36px;
    
    margin-bottom:0px !important;
    margin-top:auto !important;
} 



body > div#footer > span#bottom { 
    display: flex;
    min-width: 100%;
    max-width: 100%;
    position: absolute;
    height: 24px;
    background-color: #585858;
    bottom: 0px;
    padding: 3px 24px;
    justify-content: flex-end;
    justify-items: flex-end;
    align-content: center;
    font-size: 18px;
    text-align: right;
    line-height: 1;
    color: rgba(255,255,255,0.5);
    font-weight: bold;
    letter-spacing: 1px;
} 
body > div#stage { 
    
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    height: calc(100vh - 248px);     
    max-height: calc(100vh - 48px);  
    min-height: calc(100vh - 248px); 
    padding: 0px 0px 0px 0px; 
    justify-content: space-around;
    position: relative;
    max-width: 100%;
    overflow-y: auto;
    /* align-content: space-around; */
    align-content: flex-start; 
    
} 




/* Full Screen on Home -> No Nav Buttons available */
body > div#footer.off /*, 
body.home > div#footer*/ { /* option disable nav Buttons */
        height: 0px;
    max-height: 0px;
    min-height: 0px;
    padding: 0px 0px 0px 0px !important;
    overflow:hidden !important;
} 
body.home > div#stage { 
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    min-height: calc(100vh - 48px);
} 

body > div#header { 
    justify-content: flex-start;
    padding-left: 0px;
    padding-right: 0px;
    background-repeat: no-repeat;
    background-size: auto 74px;
    background-position: 50% 5%;
    margin-top: 0px !important;
} 

body > div#header > div#headline, 
body > div#header > div#clock,
body > div#header { background-color: black !important; } 

body.checkin > div#header > div#headline, 
body.checkin > div#header > div#clock,
body.checkin > div#header   { background-color: darkolivegreen !important; } 

body.walkin > div#header > div#headline, 
body.walkin > div#header > div#clock,
body.walkin > div#header    { background-color: cornflowerblue !important; } 

body.checkout > div#header > div#headline, 
body.checkout > div#header > div#clock,
body.checkout > div#header  { background-color: darkgoldenrod !important;  } 

body.lostkey > div#header > div#headline, 
body.lostkey > div#header > div#clock,
body.lostkey > div#header   { background-color: indianred !important;      } 

body.payment > div#header > div#headline, 
body.payment > div#header > div#clock,
body.payment > div#header   { background-color: mediumseagreen !important; } 



body.checkin > div#header > div#headline, 
body.walkin > div#header > div#headline, 
body.checkout > div#header > div#headline, 
body.lostkey > div#header > div#headline, 
body.payment > div#header > div#headline { color: white !important; } 


















body > div#header > div#clock { 
    margin: 0px 0px 0px 0px; 
    font-size: 28px; 
    font-weight: 200; 
    line-height: 1; 
    width: 148px; 
    height: 48px; 
    display: flex; 
    justify-content: left; 
    align-items: center; 
    padding-left:12px; 
} 

body > div#header > div#version { 
    margin: 0px 0px 0px 0px;
    font-size: 7px;
    font-weight: 200;
    line-height: 1;
    width: 112px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 68px;
    position: absolute;
    background: rgba(0,0,0,0);
    border-radius: 0px 12px 12px 0px;
    opacity: 0.1;
    display: none;
} 

body > div#header > div#headline { 
    margin: 0px 0px 0px 0px;
    font-size: 32px;
    font-weight: 200;
    line-height: 1;
    width: calc(100% - 196px);
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: seagreen;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-right: 78px;
} 
body.connecting > div#header > div#headline { 
    
    font-size: 42px;
    text-transform: lowercase;
    letter-spacing: 0px;
    justify-content: flex-start;
    
} 


body > div#header > div#headline.empty { background-color:transparent;} 
body > div#header > span#admin { 
    
    margin: 0px 0px 0px 0px; 
    height: 48px; 
    width: 48px; 
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='m414-280 226-226-58-58-169 169-84-84-57 57 142 142ZM260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z'/%3E%3C/svg%3E");
    
    
    background-size:      44px; 
    background-position:  12px center; 
    background-repeat:    no-repeat; 
    padding-right:        64px;
    
} body > div#header > span#admin:hover { background-color: rgba(0,0,0,0.5);  }


body.online > div#header > span#admin   { 
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='m414-280 226-226-58-58-169 169-84-84-57 57 142 142ZM260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z'/%3E%3C/svg%3E"); 
    
} 

body.warning > div#header > span#admin  { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='black'%3E%3Cpath d='m414-280 226-226-58-58-169 169-84-84-57 57 142 142ZM260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z'/%3E%3C/svg%3E"); 
} 
body.offline > div#header { background-color: red; }
body.offline > div#header > span#admin  { 

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M792-56 686-160H260q-92 0-156-64T40-380q0-77 47.5-137T210-594q3-8 6-15.5t6-16.5L56-792l56-56 736 736-56 56ZM260-240h346L284-562q-2 11-3 21t-1 21h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm185-161Zm419 191-58-56q17-14 25.5-32.5T840-340q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-27 0-52 6.5T380-693l-58-58q35-24 74.5-36.5T480-800q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 39-15 72.5T864-210ZM593-479Z'/%3E%3C/svg%3E");

} 
body.offline > div#header > div#headline { background-color: red; }






body.connecting.offline > div#header > div#headline { color:red; background-color:black; } 
body.connecting.offline > div#header { background-color:black !important; } 
body.connecting.offline > div#header > span#admin { 
    animation-name: connect;
    animation-iteration-count: infinite;
    animation-duration: 2000ms;
    background-size: 56px;
    background-position: 80px -4px;
} 


        body.loading, 
        body.connecting.offline  {
            
            background-size: 280px;
            background-position: center; 
            background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='rgba(255,255,255,0.2)' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            
            
        }  
        
        

body > div#footer > button.next.off, 
body > div#footer > button.prev.off, 
body.home > div#footer > button.next, 
body.home > div#footer > button.prev { display:none !important; } 





div#screensafer { 
    
    animation-name: screentouch;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-timing-function: linear;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: black;
    background-size: 320px;
    background-position: center 60%;
    background-repeat: no-repeat;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='rgba(210,170,32,0.8)'%3E%3Cpath d='M446.69-120q-32.61 0-62.11-13.54t-48.81-39.38L146.23-423.77l10.54-11.54q10-11 23.77-13.46 13.77-2.46 26.23 4.85l120.92 59.61v-304.92q0-8.5 5.76-14.25t14.27-5.75q8.51 0 14.36 5.75 5.84 5.75 5.84 14.25v372.77l-143.15-70.77L370.31-195q13.69 17.77 34 26.38 20.31 8.62 42.38 8.62h172.54q42.23 0 71.5-28.88Q720-217.77 720-260v-141.54q0-24.19-16.37-40.56-16.36-16.36-40.55-16.36H478.69v-40h184.39q40.38 0 68.65 28.27Q760-441.92 760-401.54v141.49q0 58.36-41.35 99.2Q677.3-120 619.23-120H446.69ZM209.31-609.23q-10.69-18.15-16.16-38.37-5.46-20.22-5.46-41.63 0-66.85 46.58-113.42 46.58-46.58 113.42-46.58 66.85 0 113.43 46.58 46.57 46.57 46.57 113.32 0 21.71-5.46 41.83-5.46 20.12-16.15 38.27l-34.39-20q8-14 12-28.5t4-31.5q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 17 4 31.5t12 28.5l-34.38 20Zm263.46 280Z'/%3E%3C/svg%3E");
    /*  /%3E %3Canimate attributeName='fill' from='white' to='seagreen' begin='0s' dur='4s' fill='freeze' repeatCount='indefinite' /%3E */
    
} 



div#screensafer:after { 
    animation-name: screentouch2;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    animation-timing-function: linear;
    display: flex;
    content: '';
    width: 100%;
    position: absolute;
    top: 10%;
    left: 0px;
    height: 64px;
    background-color: transparent;
    background-size: 148px;
    background-repeat: no-repeat;
    background-image: url("onstay_sci.svg");
    background-position: -120px center;
    opacity:0;
}







body.loading > h1 { 
    
    display: inline-flex;
    box-sizing: border-box;
    color: gainsboro;
    font-size: 1.5rem;
    width: 100%;
    padding: 12px 8px 12px 36px;
    justify-content: flex-start;
    background-color: black;
    box-shadow: 0px 3px 12px black;
    font-weight: 100;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 8px center;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e8eaed'%3E%3Cpath d='M260-200q-74.85 0-127.42-52.23Q80-304.46 80-379.31q0-68.77 47-122.07 47-53.31 116.85-57.24 10.07-74.3 74.61-136.61Q383-757.54 460-757.54q16.08 0 28.04 11.96T500-717.54v291.23l82.46-82L610.77-480 480-349.23 349.23-480l28.31-28.31 82.46 82v-291.23q-75.23 3.23-127.62 65.42Q280-589.92 280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-49.54-22-91.04-22-41.5-58-68.96v-47.62q56.31 31.16 88.15 86.97Q720-584.85 720-520v40h24.62q57.46 1.85 96.42 42.19Q880-397.46 880-340q0 58.85-40.58 99.42Q798.85-200 740-200H260Zm220-298.77Z'/%3E%3C/svg%3E");
    
    
}

body.loading > p.install { 
    
    margin: 0px 0px 0px 0px;
    padding: 0px 1px 24px 6px;
    justify-content: flex-end;
    text-align: left;
    line-height: 12px;
    font-size: 10px;
    font-family: monospace;
    letter-spacing: 0px;
    color: darkseagreen;
    flex-direction: column;
    width: calc(100%);
    margin-left: 0px;
    align-items: flex-start;
    border-left: 0px dotted;
    max-height: calc(100vh - 45px); /* war -58px  */
    min-height: calc(100vh - 45px); /* war -58px  */
    overflow-y: auto;
    max-width: calc(100% - 0px) !important;
    overflow-x: hidden;
    background-color: black;
    flex-wrap: nowrap;

}

body.loading > p.install > b , 
body.loading > p.install > i { 

    display: inline-flex;
    width: 100%;
    font-style: normal;
    font-weight: 200;


} 


body.loading > p.install > b { 

    margin-top: 8px;
    padding-top: 1px;
    padding-left: 0px;
    padding-right: 18px;
    max-width: 100%;
    color: white;
    font-size: 8px;
    text-align: right;
    justify-content: flex-end;

} 
body.loading > p.install > i { 

    padding-right: 18px;
    flex-direction: row;
    padding-top: 1px;
    font-size: 9px;
    padding-left: 14px;
    color: darkseagreen;
    justify-content: flex-end;
    text-align: right;
    justify-items: flex-end; 
    flex-wrap: wrap; 
    
} 
body.loading > p.install > i > small { 

    padding-left: 2px;
    font-size: 8px;
    min-width: calc(100% - 86px);
    max-width: calc(100% - 86px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: cadetblue;
    margin-bottom: 1px;
    word-break: break-word;
    
} 

body.loading > p.install > i.err > small { 

    color: red;
    
} 

body.loading > p.install > i.none > small { 

    color: orange;
    
} 


body.loading > p.install > i.err { 
    color: red !important;
} 




body.loading > p.install > button.manualload { 

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e8eaed'%3E%3Cpath d='M460-171.46v-297.08L200-619.08v283.23q0 6.16 3.08 11.54 3.07 5.39 9.23 9.23L460-171.46Zm40 0 247.69-143.62q6.16-3.84 9.23-9.23 3.08-5.38 3.08-11.54v-283.23L500-468.54v297.08Zm-20-331.46 257-148.54-244.69-141.62q-6.16-3.84-12.31-3.84t-12.31 3.84L223-651.46l257 148.54ZM192.31-279.69q-15.16-8.69-23.73-23.62-8.58-14.92-8.58-32.31v-288.76q0-17.39 8.58-32.31 8.57-14.93 23.73-23.62l255.38-147.15q15.16-8.69 32.31-8.69 17.15 0 32.31 8.69l255.38 147.15q15.16 8.69 23.73 23.62 8.58 14.92 8.58 32.31v288.76q0 17.39-8.58 32.31-8.57 14.93-23.73 23.62L512.31-132.54q-15.16 8.69-32.31 8.69-17.15 0-32.31-8.69L192.31-279.69ZM480-480Z'/%3E%3C/svg%3E");
    padding: 5px 8px 5px 42px;
    min-height: 26px;
    border-radius: 3px;
    box-shadow: 1px 1px 12px 0px black;
    background-color: darkgoldenrod;
    color: white;
    background-size: 25px;
    background-position: 7px center;
    min-width: 200px;
    position: fixed;
    top: 0px;
    margin: 6px 8px;
    right: 4px;
    
} 



















body p.pairingStage { 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: black;
    padding: 12px 12px 36px 12px;
} body p.pairingStage > b { 
    display: inline-block;
    width: 100%;
    padding: 12px 0px 12px 0px;
    font-weight: 300;
    font-size: 24px;
    color: seagreen;
} 
body p.pairingStage > i { 
    display: inline-block;
    width: 90%;
    margin: -8px 5% 2px 5%;
    background-color: darkslategrey;
    border-radius: 4px;
    padding: 4px;
    font-size: 12px;
    line-height: 1;
    color: white;
    text-align: center;
    opacity: 0.5;
} 

body p.pairingStage > i.err { 
    color: red !important;
} 

body p.pairingStage > input { 

        display: inline-block;
    width: 90%;
    font-size: 2rem;
    padding: 10px 12px;
    border-radius: 5px;
    border: 0px;
    color: black;
    letter-spacing: 1px;
    font-weight: bold;
    margin: 12px 0px 12px 0px;
    text-align: center;


}
body p.pairingStage > button { 

    background-color: seagreen;
    color: white;
    font-size: 32px;
    border-radius: 0px 0px 12px 12px;
    padding: 8px 12px;
    min-height: 24px;
    margin: 0px 0px 32px 0px;
    width: 90%;

}






/*  Loader Stage on Larger Screens   */




@media screen and (min-width: 800px) { 

body.loading > h1 { 
    
    padding: 12px 8px 12px 48px;
    background-size: 36px;
    
}
    
    
body.loading > p.install {
    line-height: 16px;
}

body.loading > p.install > b { 
    font-size: 12px;
    margin-bottom: 4px;

} 
body.loading > p.install > i { 
    font-size: 12px;
    
} 
body.loading > p.install > i > small { 
    font-size: 11px;
    min-width: calc(100% - 128px);
    max-width: calc(100% - 128px);
}


body.loading > p.install > button.manualload { 
    background-size: 36px;
    
} 


}