* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    /*background-color:#E4E4E4;
    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);*/
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:12px;
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    /*text-transform:uppercase;*/
    width:100%;
    /*position: fixed;
    top:0;*/
    overflow: hidden;
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

#deviceready.ready .event.listening { display: none; }
#deviceready.ready .event.received { display: block; }

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}


@media screen and (prefers-color-scheme: dark) {
    body {
        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
    }
}
.oninputScrollPrevent{
    position: fixed;
    left: 5px;
    right: 5px;    
}
.drag-mode .title{
    border-radius: 4px;   
}
.title{
    background-color: white;
    color: var(--c-green);
    text-transform: uppercase;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;   
}
[id^=_m_] {
    color: var(--c-green);
    border: 1px solid var(--c-green);  
}
[id^=rblock]{
    display:none;
}
[id^=rblock] .title{
    background-color: var(--c-disabled);
}
[id^=rblock] [id^=_m_]{
    color: var(--c-disabled);
    border: 1px solid var(--c-disabled); 
}
/*[id^=_m_] > div:not(.title) {
  transition: height 0.1s linear;
  overflow: hidden;
}*/

.workarea{
    overflow-y: scroll;    
    scrollbar-width: none;
    overflow-x: hidden;
}
.workarea::-webkit-scrollbar{
    display: none;
}

.menu-top{
    z-index: 1;
    position: fixed;
    background: linear-gradient(to top, rgba(255,0,0,0), var(--c-bg) 30%);
}
[id^=menuTop].btn{
    border:0;
}

.MenuBottomEl{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,0,0,0), var(--c-bg));
    padding: 10px;
}
.none{
    display:none!important;
}
[id*=block] > div{
    position: relative;
    border-radius:5px;
}
/*[id*=block] [data-kpp]{
    text-transform: lowercase;
}*/
[id*=block] .removeItem,
[id*=block] .dragVert,
[id*=block] .plusItem{
    position:absolute;
    top: calc(50% - 12.5px);
    display:none;
    color:white;
}

[id*=block] .removeItem,
[id*=block] .plusItem{
    right:50px;
    pointer-events: auto !important;
}
[id^=block] .dragVert{
    left:50%;
}

.m-freeze{
    position:relative;
}

.m-drag{
    pointer-events: none;
    position: absolute!important;
    width: 100%;
    z-index: 1;    
}

.drag-mode [id*=block]{
    height:36.3px;
    display:block;
}
.drag-mode *:not([id^='_m_']):not([id*='block']){
    pointer-events: none;
}
.drag-mode [id^=block] .dragVert,
.drag-mode [id^=block] .removeItem,
.drag-mode [id^=rblock] .plusItem{
    display:block;
    margin-top: -0.5px;
}
.drag-mode [id^=_m_] .container,
.drag-mode [id^=_m_] .row:not(:first-child),
.drag-mode [id^=_m_] .alarma{
    display:none;
}
[id*=block] .flag{
    width: 30px;
    display: inline-block;    
}

.my_car span,
.my_car input{
    border-radius: 5px;
    padding-right: 10px;
    padding-left: 10px;
    border-left: 30px solid var(--c-green)!important;    
    border: 2px solid var(--c-green);
    min-width: 200px;
    display: inline-block;    
}
.my_car{
    position: relative;
    padding: 0 5%;
}
.my_car.edit_car span{
    transition: font-size .25s ease-in, margin .25s ease-in;
    font-size: 50px;    
    margin: 21px 0 100px;
    display: block;
}
input:focus-visible{
    outline: 0;
}
.my_car:not(.edit_car) input{
    transition: font-size .25s ease-in, margin .25s ease-in;
    margin:0;
    font-size: 33px;
}
.my_car.edit_car input{
    font-size: 50px;    
    margin: 21px 0 100px;    
}
.my_car p{
    margin: 0;
    opacity: 0;
    transition: opacity .5s ease-in;
    height: 0;
}
.my_car svg{
    opacity: 0;
}
.my_car.edit_car p{
    opacity: 1;
    transition: opacity 2s ease-in;
    position: relative;
}
.my_car.edit_car svg{
    opacity:1;
    transition: opacity 1s ease-in;
    position: absolute;
    bottom: 25px;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    color: var(--c-green);    
}

.myModal{
    height: 0;
    transition: opacity .2s ease-in, height .2s ease-in;  
    position: absolute;
    z-index: 3;
    top: 0;
    width: 100%;    
    background-color: var(--c-bg);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);    
}
.bgModal.bgNo{
    opacity:0;
}
.bgModal{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: #000;
    transition: opacity .2s ease-in; 
    opacity: 0.5;
}

.infoPage .pSvg{
    height: 100%;
    background-color: var(--c-green);
    color: var(--c-bg);
    border-radius: 10px;    
    position: relative;
}
.pSvg svg{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;    
}
.infoPage p,
.helpPage p{
    line-height:14px;
    font-size:14px;
    font-style: italic;
}
.helpPage p{
    padding-top: 5px;
}
.helpPage svg{
    margin: 10px;
    color:var(--c-green);    
}
.helpPage .row.topline{
    border-top: 1px solid var(--c-green);
}

.oneline{
    white-space: nowrap;
    overflow: hidden;
}

div.switcher {
  position: relative;
}
.switch-checkbox{
    opacity:0;
}
.switch-checkbox:not(checked) + label::before {
  content: '';
  position: absolute;
  top: -.15rem;
  left: 0;
  width: 2.7rem;
  height: 1.7rem;
  border-radius: 13px;
  border: 1px solid var(--c-green);
  background: var(--c-bg);
  cursor: pointer;
}
.switch-checkbox:checked + label::after {
  left: 1.1875rem;
  background: var(--c-green);
}
.switch-checkbox:not(checked) + label::after {
  content: '';
  position: absolute;
  top: .05rem;
  left: .2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 10px;
  background: var(--c-disabled);
  transition: all .2s;
  cursor: pointer;
}


.ero{
    position: absolute;
    z-index: 9999;
    padding: 0 10%;
    color: var(--c-bg);
    top: 45%;
    width: 100%;
    text-align: center;    
}
.ero div{
    background: var(--c-ero);
    border-radius: 5px;
    padding: 10px;    
}


.btn[class*=canvas_]{
    width:80px;
    font-size:12px;
}
.statsinfo{
    font-size: 12px;
    line-height: 14px;
    color: var(--c-black);    
}
.statsinfo span{
    width: 30px;
    display: inline-block;    
}
#_m_mytime{
    color:var(--c-text-mycar);
}
#_m_mytime [data-kpp]:not([data-kpp=my_car]){
    font-weight: 600;
    /*font-size: 20px;
    line-height: 22px;*/
}
.alarma{
    /*position: absolute;
    top: 34px;
    z-index: 1;
    background-color: var(--c-red);
    color: var(--c-bg);
    text-align: center;
    width: 100%; */
    
    position: absolute;
    top: 0;
    z-index: 2;
    background-color: var(--c-red);
    color: var(--c-bg);
    text-align: center;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;  
}
.alarma span{
    font-size:20px;
    display:block;
    line-height:28px;
}

.islink *{
    pointer-events: none;
}
.hidemeEl{
    overflow: hidden;
    transition: height .2s ease;    
}
.hideme{
    height: 0!important;
}
.alert-my{
    border: 1px solid var(--c-green) ; 
    border-radius: 15px;
    margin-bottom: 20px;    
}
.alert-my .islink{
    color: var(--c-green)!important;
    padding: 15px 0;
}

.jury u{
    font-size:12px;
    padding:0;
    color: var(--c-black);
}

.openpage{
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 100%;
    background-color: var(--c-bg);
    left:0;
    max-width: 100% !important;
}
.openpage>.row *{
    pointer-events: none;
}
.openpage.loading{
    padding-top: 70%;
    text-align: center;    
}
.openpage:not(.loading){
    overflow-y: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}
.openpage.loading svg {
    animation: spin 2s linear infinite;
}
.openpage .close{
    position: fixed;
    right: 0;
    top:0;
    padding: 15px; 
    margin-top: 10px;
    background-color: var(--c-bg);
    padding-top:env(safe-area-inset-top, 0px);
}

input#myemail{
    border: 1px solid var(--c-bg);
    border-radius: 15px;
    text-transform: lowercase;  
    padding: 0 5px;
}
input#myemail:focus {
    border: 1px solid var(--c-green);
    color: var(--c-green);
}
input#myemail.valid:not(:focus){
    background-color: var(--c-green);
    color: var(--c-bg);    
}
input#myemail.error:not(:focus){
    background-color: var(--c-red);
}