body {
	background: #0f386c;
	margin:0px;
	font-family: 'Roboto', sans-serif;

    user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        outline:none;
}

#logged {
	display:none;z-index:10
}

#unlogged, #logged {
	position:fixed;top:0px;bottom:0px;left:0px;right:0px;}

#logged {
	background:#d8ebfd
}
#unlogged {
	background:#fff
}

img#lady {
    margin-top: 91px !important;
}

body.transparent {
	opacity:0
}

#unlogged {
	display: block;
	z-index: 2000;
	background: #fff;
	background-position: bottom;
	background-repeat: no-repeat;
	background-image: url('/assets/waves.jpg');
	background-size: cover;
}

div#output {
    width: calc(100% - 38px);
    height: 80vh;
    /* background: #e5e5e5; */
    margin-bottom: 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    /* -webkit-box-shadow:inset 1px 1px 4px 0 rgba(0,0,0,0.6); */
    /* box-shadow:inset 1px 1px 4px 0 rgba(0,0,0,0.6); */
    padding: 14px;
    font-size: 1.3em;
    /* border: 5px solid #ccc; */
    }

div.green#output {background: #6ac045;color: #fff;border: 5px solid green;}
div.red#output {background: #cc3300 !important;color: #fff !important;border: 5px solid #f56130 !important;}

div#qr {
    text-align: center;
    padding: 25px 0px;
}

/* logowanie */

#unlogged header {
    padding: 30px;
    height:calc(40vh - 60px);
    text-align: center;
    padding-top: 60px;
}

#hlogo {
	display:none
}
#unlogged header img {width: 200px;max-width:100%;margin:auto;display:block;}

div#login {
    text-align: center;
    position: fixed;
    left: 40px;
    right: 40px;
    bottom: 50px;
}

#login button {cursor:pointer;background: #4382bb;color: #fff;font-size: 1.4em;padding:15px 40px;border-radius: 53px;border:0px;-webkit-box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.6);box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.6);width: 100%;max-width: 500px;}
#login label {margin-left: 15px;font-family: 'Roboto', sans-serif;font-weight: 100;}

#login button {background: rgba(52, 172, 224, 1);
	box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
	animation: pulse-blue 2s infinite;}

@keyframes pulse-blue {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
	}
}



#login button:hover {
background:rgb(38 131 172) !important
}

/* zalogowany */

ul#menu {
    position: fixed;
    bottom: 0px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    width: 100%;
    max-width: 612px;
    margin: auto;
    left: 0px;
    right: 0px;
}

ul#menu li {
    outline:none;
    display: inline-block;
    cursor:pointer;
    text-align: center;
    width: 25%;
    padding: 8px 14px;
    background: #183153;
    color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-right: 1px solid #2065a3;
    padding-bottom: 25px;outline:none;
    user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        outline:none;color: #479fed;
    
}

ul#menu li:last-child {border-right:0px;border-top-right-radius: 0px;}
ul#menu li:first-child {
    border-top-left-radius: 0px;
}

ul#menu li.active {
	background:#001c40;color:#fff
}

ul#menu li i {
    font-size: 1.7em;
    margin-top: 6px;
}

ul#menu li span {
    font-size: 0.7em;
    display: block;
    margin-top: 10px;
    
}

#logged header {
    background: #d8ebfd;
    /* -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.6); */
    /* box-shadow: 0 0 4px 0 rgba(0,0,0,0.6); */
}

#logged header img {width:140px;max-width:50%;margin-top: 10px;margin-left: 10px;margin-bottom: 10px;}

#logged {background:#fff;}


prog {
    display: block;
    height: 10px;
    background: #bec5cf;
}

prog inner {
	display:block;height:10px;background:#6ac045
}

div#content {
    padding: 15px;
    background: #001c40;
    height: 100%;
}

div#info {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #2065a3;
    padding: 20px;
    padding-bottom: 109px;
    color: #fff;
    max-width: 572px;
    margin: auto;
}

party, reader {
    display: inline-block;
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

reader {
    text-align: right;
    font-weight: 400;
}

party {
    font-weight: 100;
}

.barcode {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 20px;
    padding-bottom: 159px;
    background: #d8ebfd;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.6);
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.6);
    max-width: 572px;
    margin: auto;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

div.barcode {
	display:block;
	display:none;
}
div.barcode input#barcode {
    display: block;
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    font-size: 2em;
    outline: none;
    border: 1px solid #001c40;
    border-radius: 5px;
}

div.barcode but {
    display: flex;
    text-align: center;
    font-size: 3em;
    border: 0px;
    padding: 20px;
    border-radius: 15px;
    background: #6ac045;
    color: #b0f592;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    margin-top: 0px;
    margin-bottom: 14px;
    height: 48px;
}

div.barcode but:hover, close:hover
{background: #396c9b  !important;}

but#bt2 {
	flex-grow:4
}

buttons {
    display: flex;
    width: 100%;
    border-spacing: 10px;
    padding-top: 10px;
}


#reader {
	display:none;
	position: fixed;
	top: 0px;
	min-height: 384px;
	left: 0px;
	width: 100%;
	/* background: #6ac045; */
	border-radius: 15px;
	margin-bottom: 5px;
}

div#readerlogin {
    display: none;
    position: fixed;
    top: 29px;
    height: 190px;
    left: 0px;
    width: calc(100%);
    border-radius: 15px;
}

#unlogged close {
    display: none;
    position: fixed;
    bottom: 50px;
    cursor:pointer;
    left: 40px;
    right: 40px;
    text-align: Center;
    background: #4382bb;
    color: #fff;
    padding: 20px;
    border-radius: 44px;
    max-width: 500px;
    margin: auto;
    -webkit-box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.6);
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.6);
}

#logged close {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: none;
    position:fixed;
    bottom: 152px;
    cursor:pointer;
    left: 0px;
    right: 0px;
    text-align: Center;
    background: #6ac045;
    color: #fff;
    padding: 20px;
    max-width: 572px;
    margin: auto;
}

close i {margin-right:5px}

log {
	display:block;
	padding: 4px;
	border-bottom: 1px solid #ccc;
}

input#f_search {
    padding: 10px;
    font-size: 1.3em;
    background: #f2f2f2;
    border: 0px;
    width: calc(100% - 20px);
    margin-bottom: 0px;
    outline:none;
    margin-top: 0px;
    border-radius: 0px;
}

#output t {
    display: block;
    border-bottom: 1px solid #fff;
    margin-bottom: 4px;
    font-size: 1.5em;
}

log t {
    background: #6ac045;
    font-size: 0.8em;
    color: #fff;
    padding: 3px 6px;
    border-radius: 23px;
    float: right;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: -1px;
    margin-right: -4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

div.log {
    overflow: auto;
    height: calc(100vh - 210px);
}

div.log log:last-child {
    border-bottom: 0px;
}

div.tab {
    height: 100%;
}

#tab3 val {
    display: block;
    padding: 5px;
    border-top: 1px solid #ccc;
}

#tab3 val i {
    font-style: normal;
    font-weight: bold;
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

div#unlogged, div#logged {max-width: 612px;margin:auto;height: 100%;-webkit-box-shadow: 0 0 12px 0 rgba(0,0,0,0.6);box-shadow: 0 0 12px 0 rgba(0,0,0,0.6);}

#reader video {
    border-radius: 15px;
    width: calc(100%) !important;
    /* background: #6ac045; */
    /* border: 5px solid #6ac045; */
}

div#readerlogin video {
    border-radius: 201px;
    /* border: 5px solid #6ac045; */
    background:#fff;
    -webkit-box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.6);
    box-shadow: 6px 6px 19px 0 rgba(0,0,0,0.8);
    border: 0px solid #fff;
}

/* keyboard */

keyboard {
	display:none;
}

keyboard row {
    display: flex;
}

keyboard key {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 4px;
    padding: 10px;
    border-radius: 7px;
    font-size: 1.3em;
    background: #2065a3;
    color: #fff;
    font-weight: bold;
    user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        outline:none;
}

keyboard key:hover {
	background:#183153;cursor:pointer;
}

sideheader {
    float: right;
    padding: 3px;
    padding-bottom: 0px;
}

sideheader battery, sideheader status {
    display: inline-block;
    background: #6ac045;
    padding: 1px 6px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    color: #fff;
    float: right;
}

sideheader time {display:block;font-size: 1.67em;margin-bottom: 4px;text-align:center;font-weight: 100;margin-top: 3px;min-width: 150px;}

sideheader battery.red, sideheader status.red {
    background: #cc3300 !important;
}

battery i, status i {
    font-size: 0.8em;
    margin-right: 3px;
}

sideheader battery {
    margin-left: 5px;display:none;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  0% {
    opacity: 0;
  }
}

#output but {
    float: right;
    background: #f56130;
    padding: 5px 10px;
    border-radius: 9px;
}