* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust:none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) rgba(0,0,0,0);
    outline:none;
    box-sizing: border-box;
    font-family: 'Poppins', tahoma, helvetica;
}

::-webkit-input-placeholder { color:#ccc; font-weight: 400; }
:-moz-placeholder { color:#ccc; font-weight: 400; }
::-moz-placeholder { color:#ccc; font-weight: 400; }
:-ms-input-placeholder { color:#ccc; font-weight: 400; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.15); }

h1, h2, h3, h4 { margin:0; }
h1 { font-size:28px; font-weight: 500; color:#096cb8; }
h2 { font-size:16px; font-weight: 500; margin:10px 0; color:#212830; }
h3 { font-size:14px; font-weight: 500; color:#212830;}
h4 { font-size:14px; font-weight: 300; margin:5px 0; color:#acadb2; }
p { margin:0; }
hr { height:0; border:0; border-top:1px solid rgba(0,0,0,.15); margin:13px 0; }
.fadeInQueue { opacity: 0; }
.clear {clear:both;}
.hidden { display:none; }
.relative { position: relative; }
.inline { display:inline;}
.block { display:block; }
.faded { opacity: .5};
.clickable { transition: all .3s ease-in-out; }
.clickable:active, .clickable:active .item { cursor:pointer; opacity: .75; }
.smallspacer { height:5px; }
.spacer { height:10px; }
.bigspacer { height:24px; }
.separator {
    height: 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,.033) 0%, rgba(0,0,0,0) 100%);
    margin-left: -24px;
    margin-right: -24px;
    position: relative;
}

.separator:before, .separator:after { content:''; width:50px; height:16px; position: absolute; top:0; }
.separator:before { left:0; background:linear-gradient(to right, rgba(249,249,249,1) 0%, rgba(249,249,249,0) 100% ); }
.separator:after { right:0; background:linear-gradient(to left, rgba(249,249,249,1) 0%, rgba(249,249,249,0) 100% ); }

.display { display:block; margin-bottom:16px; font-weight: 600;}
.padding { padding:16px; }
.sidepadding { padding-left:16px; padding-right:16px; }
.hcenter { text-align: center; }
.centered { margin:0 auto; }

html { height:100%; -ms-overflow-style: -ms-autohiding-scrollbar; overflow:hidden; background-color: #000; }
body {
    background: linear-gradient(to bottom, #222 0%, #000 100%);
    /* background: #000 url('/_img/bg.jpg') no-repeat center center; */
    background-size: cover;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    font-size: 14px;
}

.app { width:100%; height:100%; overflow:hidden; }
.main, .garbage { width:100%; height:100%; overflow:hidden; }
.main.hiddenscroll view::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0); }
.panes { }

/* Content */
.content { padding:16px 0; color:#888; max-width: 1024px; margin:0 auto; }
.content a { color:#888; }
.content.scrollable { height:100%; overflow:auto;}

/* Buttons */
button {
    cursor:pointer;
    transition: opacity .3s ease-in-out;
    background:#096cb8;
    color:#fff;
    border:0;
    font-size:14px;
    text-transform: uppercase;
    font-weight: 600;
    padding:0 16px;
    height:48px;
    border-radius:10px;
    display:block;
    font-family: 'Poppins';
}
button:disabled { opacity: .25; }
button.centered { margin:0 auto; }
button.fullwidth { width:100%; }

button:active { background:#035b9e; }

/* Inputs */
input { display:block; width:100%; height:48px; padding:0 15px; border:0; background:rgba(255,255,255,.1); border-radius:10px; font-weight: 400; color:#fff; }

/* Autocomplete styles in Chrome*/
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:active,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus,select:-webkit-autofill:active { -webkit-animation: autofill 0s forwards; animation: autofill 0s forwards; }
@keyframes autofill { 100% { background: rgba(255,255,255,.1); color: inherit; } }
@-webkit-keyframes autofill { 100% { background: rgba(255,255,255,.1); color: inherit; } }

/* Slick */
.slick-list, .slick-track { touch-action:pan-y !important; }
.slick, .panes { height:100%; }
.slick-track { height:100%; }
.slick-slide { padding:0px; }
.slick-slide img { display:inline-block; }

/* Cards */
.cardslider_wrapper { width:calc(100% + 48px); overflow:hidden; height:33vh; margin:0; }
.cardslider .item { padding:20px 20px 20px 0; width:25%; display:inline-block; }

.cardslider .card {
    border-radius: 10px;
    overflow:hidden;
    position: relative;
    background-position: center center;
    background-size:cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.cardslider .card .front {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius: 10px;
    overflow:hidden;
    background-position: center center;
    background-size:cover;
    transform: perspective(1000px) rotateY(0deg);
    backface-visibility: hidden;
    transition: all 0.5s;
    opacity:1;
}

.cardslider .card .back {
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius: 10px;
    overflow:hidden;
    background-color:#000;
    transform: perspective(1000px) rotateY(-180deg);
    backface-visibility: hidden;

    transition: all 0.5s;
    opacity:0;
}

.filler {
    position: fixed;
    top: 0;
    padding: 16px;
    width: 100%;
    height: 100%;
    /* background:radial-gradient(circle at center, #000 0%, #000 50%, rgba(0,0,0,0) 50%); */
    background-position: center center;
    background-size:100%;
    color: #fff;
    z-index: 99;
    opacity: 1;
}
.filler.fill {
    -webkit-animation: circlefill 0.6s ease-in-out both; animation: circlefill 0.6s ease-in-out both;
}

.cardslider .card .logo {
    position: absolute;
    left:50%;
    top:50%;
    width:50%;
    height:50%;
    transform:translate(-50%, -50%);
    background-position: center center;
    background-size:contain;
    background-repeat: no-repeat;
    filter:drop-shadow(2px 4px 0px rgba(0,0,0,.33));

}
.cardslider .card:before {
    content: '';
    display: block;
    padding-top: 60%;
    float: left;
}

.cardslider .card .front:after {
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(to bottom right, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 25%, rgba(0,0,0,.2) 75%, rgba(0,0,0,.25) 100%);
    border-radius: 10px;
}

.cardslider .card.flipped { transform: rotate(-5deg); }

.cardslider .card.flipped .front{
  opacity:0;
  transform: perspective(1000px) rotateY(180deg);
}

.cardslider .card.flipped .back{
  opacity:1;
  z-index:2;
  transform: perspective(1000px) rotateY(0deg);
}

/* Box */
.box { background: #fff; padding:24px; margin:0; border-radius: 10px; box-shadow: 0 0 128px 0 rgba(0,0,0,.025); }

/* Breadcrumbs */
.breadcrumbs { margin-bottom:15px; font-size:12px;
    white-space: nowrap;
    overflow: hidden;
      /* "overflow" value must be different from "visible" */
    text-overflow: ellipsis;
    /* direction: rtl;     */
}
.breadcrumbs a { color: #096cb8; font-weight: 600; text-decoration: none; }

/* Top */
.navigation { position: absolute; background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.0)); border-bottom: none; border-color: #fff; width:100%; height:74px; top:0; left:0; padding:16px 0; z-index:100; display:none; }
.navigation.fixed { background: #fff; border-bottom:1px solid #eee; transition: border .3s ease-in-out, box-shadow .3s ease-in-out; box-shadow: 0 10px 32px 0 rgba(0,0,0,.1); }
.navigation .title { color:#fff; font-weight: 600; line-height: 42px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding:0 64px; }
.navigation button { position: absolute; top:16px; width:42px; height:42px; font-size:20px; background: none; padding:0; color:#fff; }
.navigation button:active { opacity: .50 !important; }
.navigation button.backbtn { left:12px; }
.navigation button.menubtn { right:12px; }

.navigation button.menubtn:after {
    content:'\f142';
    font-family: 'FontAwesome';
    font-weight: 400;
}

.sidr-menu-open .navigation button.menubtn:after {
    content:'\f142  \f0da';
}

/* View */
view { width:100%; height:100%; display:block; position: relative; margin:0 auto; padding:80px 24px 24px 24px;
    /* overflow-y: auto; */
    overflow:hidden;
    /* -webkit-overflow-scrolling: touch;
    backface-visibility: hidden; */
}

    /* Login */
    view.login { width:100%; height:100%; max-width: 100%; padding-top:0; }
    view.login .wallpaper { width:calc(100% + 48px); height:50%; margin:0 -24px; position: relative; overflow:hidden;
        background-image:url('/_img/marquee.png');
        background-size:cover;
        background-position-y:center;
        -webkit-animation: marqueeWallpaper 30s linear infinite;
        animation: marqueeWallpaper 30s linear infinite;
    }
    view.login .wallpaper .pattern { width:100%; height:100%; position: absolute; z-index:0; background:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 100%); }
    view.login .content { width:100%; height:50%; padding:32px 0 32px 0; position: relative; z-index:9; }
    view.login .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 320px; height: 200px; background: url('/_img/logo_white.png') no-repeat center center; background-size: contain; }
    view.login .loginform { width:100%; max-width:480px; margin:0 auto; }
    view.login .loginform:before, view.login .loginform:after {
        font-family: 'FontAwesome';
        font-size:32px;
        color:#fff;
        background:#096cb8;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        left:50%;
    }

    view.login .loginform:before { z-index:1; content: ''; width: 72px; height: 72px; top: -36px; margin-left: -36px; animation: ping 1s ease-in-out infinite both; }
    view.login .loginform:after { z-index:2; content: '\f2c2'; width:64px; height:64px; line-height: 64px; margin-left:-32px; top:-32px; }
    view.login .loginform label { display:inline-block; margin:5px 0; text-transform: uppercase; font-size:11px; font-weight: 600; }
    view.login .loginform button { margin-top:20px; }

    /* Home */
    view.home { width:100%; height:100%; max-width: 100%; padding-top:0; overflow-x: hidden; }
    view.home .content { height:100%; display:grid; align-content: center; }
    view.home .content>.logo { width: 100%; max-width: 200px; height: 120px; margin:0 auto; background: url('/_img/logo_white.png') no-repeat center center; background-size: contain; }
    view.home .wallpaper {
        width: calc(100% + 48px);
        height: 100%;
        margin: 0 -24px;
        position: absolute;
        top: 0;
        overflow: hidden;
        z-index: -1;
        opacity: 0;
    }
    view.home .wallpaper .pattern { width:100%; height:100%; position: absolute; z-index:0; background: rgba(0,0,0,.8); }
    view.home .wallpaper video {
        position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
        min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1; overflow: hidden;
    }

    /* Installing */
    view.installing { width:100%; height:100%; max-width: 100%; padding-top:0; }
    view.installing .content { height:100%; display:grid; justify-content: left; align-content: center; }
    view.installing h1 { line-height: 32px; }

    /* Offline */
    view.offline { width:100%; height:100%; max-width: 100%; padding-top:0; }
    view.offline .content { height:100%; display:grid; align-content: center; }
    view.offline .content button { margin:0 auto; }

    /* Card */
    view.card { width:100%; height:100%; max-width: 100%; color:#fff; background-size:cover; }
    view.card .content {
        display:grid;
        grid-template-rows: auto 1fr auto;
        align-items: end;
        height:100%;
        position: relative;
    }

    view.card .badge {
        border-radius: 8px;
        width:100%;
        max-width: 480px;
        min-height:200px;
        /* max-height:360px; */
        position: relative;
        margin: 0 auto;
        box-shadow: 0 3px 0 rgba(0,0,0,.15);
        transition: all .3s ease-in-out;
        opacity:0;
        transform:translateY(20px);
        z-index: 1;
        position: relative;
    }

    view.card .outline {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 8px;
        z-index: 0;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        border: 2px dashed rgba(255,255,255,.5);
    }

    view.card .badge.active {
        transform:translateY(0);
        opacity: 1;
    }

    view.card .badge .top {
        padding:10px 0 5px 0;
        overflow:hidden;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    view.card .badge .top .hole {
        width:64px;
        height:10px;
        border-radius:5px;
        box-shadow: 0 0 0 300px rgba(255,255,255,.9), inset 0 3px 0 rgba(0,0,0,.15);
        margin:0 auto;
    }

    view.card .badge .main {
        background:rgba(255,255,255,.9);
        display:grid;
        /* grid-template-columns: minmax(100px,33%) auto; */
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding:0 20px 10px 20px;
    }
    /* view.card .badge:after {
        content:'';
        position: absolute;
        top:10px;
        left:50%;
        margin-left: -32px;
        width:64px;
        height:10px;
        border-radius: 5px;
        background:rgba(0,0,0,.1);
        box-shadow: inset 0 2px 2px rgba(0,0,0,.15);
    } */
    view.card .badge .pic {
        width:100%;
        background:rgba(0,0,0,.2);
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        background-size:cover;
        background-position: center center;
    }

    view.card .badge .pic:before {
        content: '';
        display: block;
        float:left;
        padding-top:100%;
    }

    view.card .badge .profile {
        padding:5px 0 0 0;
        filter:blur(5px);
        transition: all .3s ease-in-out;
    }
    view.card .badge.active .profile { filter:blur(0); }

    view.card .badge .info {
        padding:20px 0 10px 0;
        filter:blur(5px);
        transition: all .3s ease-in-out;
    }

    view.card .badge .info h2 { font-size:16px; font-weight: 700; color:#096cb8; margin:0; }

    view.card .badge.active .info { filter:blur(0); }

    view.card .badge .info label { color:rgba(0,0,0,.5);}
    view.card .content>.logo { width: 100%; max-width: 200px; height:100px; margin:20px auto 32px auto; background: no-repeat center center; background-size: contain; filter:drop-shadow(2px 4px 0px rgba(0,0,0,.33)); }

    view.card .fingerprint {
        background: rgba(0,0,0,.15);
        border-radius: 50%;
        width:80px;
        height:80px;
        margin:20px auto 0 auto;
        padding:15px;
        box-shadow: inset 0 4px 0 rgba(0,0,0,.15);
        transition: all .3s ease-in-out;
        position: relative;
    }

    view.card .fingerprint.active {
        background:rgba(0,168,0,.5);
    }

    view.card .fingerprint .img {
        width:100%;
        height:100%;
        background:url('/_img/fingerprint.png') no-repeat center center;
        background-size:contain;
        filter:drop-shadow(2px 4px 0px rgba(0,0,0,.15));
        animation: heartbeat 3s infinite;
        -webkit-backface-visibility: hidden;
    }

    view.card .barcode {
        width:100%;
        border-radius: 5px;
        overflow:hidden;
        /* grid-column-start: 1;
        grid-column-end: 3; */
        box-shadow: 0 2px 0 rgba(0,0,0,.15);
        background: #fff;
    }


    view.card .barcode h3 { text-align: center; margin:-5px 0 5px 0; }

/* Toast */
.toast_window {
	position:absolute;
    width:100%;
	background: #096cb8;
	color:#fff;
	font-size:14px;
	font-weight:600;
	padding:16px 12px;
	text-align:center;
	z-index:9999;
	top:0;
    left:0;
}

.toast_window a { color:#333; font-weight: 400; }
.toast_window .fa-check { color:#00cc00; }
.toast_window .fa-exclamation-triangle { color:#ecab2d; }

/* Modal */
.modal_bg {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 65px, rgba(0,0,0,.1) 66px, rgba(0,0,0,.1) 100%);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 98;
    display: none;
}
.modal_window {
    position: absolute;
    background:#fff;
    color:#333;
    width: 100%;
    max-width:320px;
    min-height: 32px;
    z-index: 99;
    padding:20px;
    font-family:tahoma, helvetica;
    font-weight: 400;
    font-size:14px;

    -webkit-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25);
}
.modal_close { position: absolute; top: 0px; right: 0px; color: #555; font-size: 16px; padding: 21px 23px; }
.modal_window .fa-ul { margin: 0; padding: 0 20px; list-style-type: square; }
.modal_window h1 { margin:0 0 10px 0; }
.modal_window a { color:#096cb8; }
.modal_button_wrapper { display:inline-block; width:50%; vertical-align: top;}
.modal_button_wrapper:first-child { padding-right:10px; }
.modal_button_wrapper:last-child { padding-left:10px; }
.modal_button { margin:0 !important; position:relative; }
.modal_icon.modal_success::before, .modal_icon.modal_success::after, .modal_icon.modal_success .modal_fix { background:#fff; }

/* No internet */
.nointernet { font-size:12px; text-align: center; position: relative; }
.nointernet:before {
    content:'\f1e6';
    font-family: FontAwesome;
    font-size:200px;
    color:#ddd;
    z-index:0;
    display: inline-block;
    vertical-align: middle;
    margin-bottom:20px;
}

/* Empty */
.empty { font-size:12px; text-align: center; position: relative; }
.empty:before {
    content:'\f01c';
    font-family: FontAwesome;
    font-size:200px;
    color:#ddd;
    z-index:0;
    display: inline-block;
    vertical-align: middle;
}

/* Loader */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:-24px;
    margin-left:-24px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding:0;
    box-sizing: border-box;
    border: 5px solid rgba(255, 255, 255, 0.15);
    border-top: 4px solid rgba(255,255,255,1);
    animation: loader 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@keyframes loader { 100% { transform: rotate(360deg); } }

/* Progress */
.progress { width: 100%; height: 2px; background: rgba(0,0,0,0); margin: 10px auto; }
.progress .fill { width:0; height:100%; background:#096cb8; transition: all .3s ease-in-out; }
.progress .msg { font-size:11px; font-weight: 600; text-transform: uppercase; padding:16px 0; }
.progress .msg i.fa-check { color:#00aa00; }

/* Custom animations */
.puff-out-center { -webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }
.ping { -webkit-animation: ping 0.8s ease-in-out infinite both; animation: ping 0.8s ease-in-out infinite both; }

@keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}

@keyframes ping {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes circlefill {
  0% {
    opacity: .95;
    background-size:100%;
    -webkit-background-size: 100%;
  }
  100% {
    opacity: 1;
    background-size:500%;
    -webkit-background-size: 500%;
  }
}

@keyframes circleunfill {
  0% {
    opacity: 1;
    background-size:500%;
  }
  100% {
    background-size:100%;
    opacity: 0;
  }
}

@keyframes heartbeat
{
  0%
  {
    transform: scale( 1 );
  }
  20%
  {
    transform: scale( 1.1 );
  }
  40%
  {
    transform: scale( 1 );
  }
  60%
  {
    transform: scale( 1.1 );
  }
  80%
  {
    transform: scale( 1 );
  }
  100%
  {
    transform: scale( 1 );
  }
}

@keyframes marqueeWallpaper { 100% { background-position-x: -320px; } }
@-webkit-keyframes marqueeWallpaper { 100% { background-position-x: -320px; } }

/* Responsive */
@media (max-width: 768px) {
    view.login .logo { width: 200px; }
    view.home { padding-top: 72px; }

    .cardslider_wrapper { margin-left: -24px; margin-right: -24px; }
    .cardslider .item { padding:20px 0 20px 20px; }
}