.emptylabel { position: relative; }
.emptylabel label { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #fff; color: #969696; cursor: text; }

html,body { background: #444; }
html,body,div,input,select,option,textarea { font-family: 'Lato', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 12pt; }

h1 { font-size: 22pt; font-weight: 300; line-height: 1.3em; margin-bottom: 0.5em; }
h2 { font-size: 16pt; font-weight: 300; line-height: 1.3em; margin-bottom: 0.5em; text-transform: uppercase; color: #00a5dc; }

a { color: #00438d; }
a:hover { color: #000; }
i.high { color: #00a5dc; font-style: normal; }
.info { display: block; padding: 1em; margin-bottom: 1em; line-height: 1.2em; font-size: 0.9rem; color: #7b703b; background: #f0e29e; border: 1px solid #ffd401; border-radius: 0.3em; }
.info.error { color: #68220c; background: #f69679; border: 1px solid #ed410c; }
#info { display: none; }

.faketable>.tr { position: relative; }
.faketable>a.tr:hover { color: #fff; background: #00a5dc; }
.faketable>a.tr:hover em { color: #fff; }
.faketable>a.tr:hover i.high { color: #000; }

.btn.default { background: #00a5dc; }

#wrapper { margin: 40px auto 0 auto; max-width: 1300px; }
.cookiebar #wrapper { padding-top: 60px; }
#pageframe { position: relative; background: #f0f0f0; border: 20px solid #fff; }
#header { position: relative; height: 80px; }
#logo { float: left; width: 260px; height: 100%; background: #00438d url(img/logo.png) left center no-repeat; background-size: contain; }

#userbar { position: absolute; right: 0; bottom: 0; padding: 20px; font-weight: lighter; color: #444; }
#userbar a { color: #444; font-weight: normal; text-decoration: none; }
#userbar a>em { font-weight: normal; font-style: normal; text-decoration: underline; }
#userbar a:before { content: '\00B7\0020'; color: #444; }
#userbar a:hover { color: #000; }

#menubar { padding: 8px 15px 0 15px; background: #969696; }
#menubar a { display: inline-block; vertical-align: top; padding: 0 0.8em 0.5em 0.8em; color: #fff; font-size: 0.85rem; font-weight: 400; line-height: 1.8em; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; cursor: pointer; }
#menubar a.active { color: #444; background: #f0f0f0; }
#menubar a:hover { color: #000; }

#content { padding: 20px 50px; min-height: 100px; }
#dashboard { display: flex; }
#main { flex: 1 1 auto; width: 100%; }
#sidebar { flex: 1 0 auto; padding: 0 0 2rem 2rem; width: 18rem; }
#sidebar.welcome { width: 22rem; }
#sidebar h1 { font-size: 16pt; font-weight: 700; color: #888; }

#login { max-width: 550px; padding-top: 50px; margin: 0 auto; border-top: 1px solid transparent; text-align: center; }
.cookiebar #login { padding-top: 110px; }
#login>div { position: relative; text-align: left; background: #fff; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.5); }
#login>div>img { width: 100%; }
#login>div>div { padding: 1em; }
#login>div>div>div{ display: flex; margin-bottom: 0.5em; }
#login>div>div>div>span { position: relative; flex: 0 1 50%; padding: 4px; background: #eee; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 3px; }
#login>div>div>div>span:first-child { margin-right: 0.5em; }
#login>div>div>div>span>input { width: 100%; height: 1.3em; line-height: 1.3em; border: 0; background: transparent; }
#login>div>div>div>span>label { position: absolute; display: none; left: 0; top: 0; right: 0; bottom: 0; padding: 4px; color: #ccc; background: rgba(255, 255, 255, 0.01); cursor: text; }
#login input[type="submit"] { padding: 4px 1.5em; line-height: 1.3em; background: #ffa500; border: 0; border-radius: 1em; cursor: pointer; }
#login>a { display: inline-block; padding: 0 1em; height: 1.5rem; line-height: 1.5rem; font-size: 0.9rem; color: #888; }
#login>a:hover { color: #ccc; }

#clientlist { margin-bottom: 1em; }
#clientlist>*>span:nth-child(1) { width: 10%; }
#clientlist>*>span:nth-child(2) { width: 35%; }
#clientlist>*>span:nth-child(3) { width: 30%; }
#clientlist>*>span:nth-child(4) { width: 25%; }
#clientlist>.tf>span:nth-child(1) { width: 100%; }
#clientlist>.nplate::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1.3rem; background-image: url(img/flaticon_car.svg); background-position: left center; background-size: 70%; background-repeat: no-repeat; }
#clientlist>.nplate.offline::before { background-image: url(img/flaticon_car_offline.svg); }
#clientlist>.webcam::after { content: ''; position: absolute; right: 1.3rem; top: 0; bottom: 0; width: 1.3rem; background-image: url(img/flaticon_webcam.svg); background-position: left center; background-size: 70%; background-repeat: no-repeat; }
#clientlist>.undelivered>span:nth-child(1)>em { color: #aaa; }

#search { position: absolute; display: block; right: 0; top: 0; padding: 0.2em 0.5em; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
#search>input { vertical-align: top; width: 200px; height: 1.2em; line-height: 1.2em; background: transparent; border: 0; }
#search>a { display: inline-block; vertical-align: top; width: 1.2em; height: 1.2em; background: transparent url(img/flaticon_delete.svg) center center no-repeat; background-size: 80%; opacity: 0.5; cursor: pointer; }

.actionbar { position: relative; padding: 10px; color: #666; background: #fff; }
.actionbar>a { position: relative; display: inline-block; vertical-align: top; margin-right: 1em; padding-left: 1.8em; height: 1.6em; line-height: 1.6em; text-decoration: none; color: #666; cursor: pointer; }
.actionbar>a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.6em; background: transparent; background-position: center; background-repeat: no-repeat; background-size: 70%; opacity: 0.4; }
.actionbar>a:hover::before { opacity: 0.7; }
.actionbar>a.add { font-weight: 400; color: #00a5dc; }
.actionbar>a.add::before { background-image: url(img/flaticon_add.svg); }
.actionbar>a.download::before { background-image: url(img/flaticon_download.svg); }
.actionbar>a:hover { color: #000; }
.actionbar #search { top: 10px; right: 10px; }

.formblocks { display: flex; margin-left: -20px; }
.formblocks>div { margin-left: 20px; margin-bottom: 1em; width: 100%; }

.form { display: inline-block; vertical-align: top; margin-bottom: 2px; cursor: default; }
.form>* { display: inline-block; vertical-align: top; }
.form>em { padding: 0.1em 0; margin-right: 10px; width: 110px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form>span { padding: 0.1em 0.2em; width: calc(100% - 130px - 0.4em); }
.form.input>span,
.form.password>span,
.form.select>span,
.form.textarea>span { background: #fff; border-radius: 4px; border: 1px solid #fff; }
.form.readonly>span { background: transparent; border-radius: 4px; border: 1px solid #fff; }
.form.url>span { background: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form.url>span a { color: #666; }
.form>span>input,
.form>span>select { width: 100%; height: 1.3em; line-height: 1.3em; color: #000; background: transparent; border: 0; }
.form>span>textarea { width: 100%; height: 3.9em; line-height: 1.3em; color: #000; background: transparent; border: 0; }
.form>span>label { display: inline-block; vertical-align: top; height: 1.3em; line-height: 1.3em; margin-right: 10px; }
.form>span>label>input { margin-right: 5px; }
.form.clipboard a { display: inline-block; vertical-align: top; height: 1.3em; color: #00a5dc; text-decoration: underline; cursor: pointer; }
.form.clipboard a:hover { color: #000; }

#fgender, #fflag_deliveryaddress, #fflag_nplate { display: table; width: 100%; }
#fshortname,#fstartpwd,#fflag_hotspot,#fdelivered { display: table; width: 50%; }
#fname, #faddress, #fdaddress, #femail, #furl, #fhead1, #fhead2, 
#fopentimes, #ffacebook, #fdetails, #floopid, #fapikey, #furlname, #furltest, #fboxname, #fwebcamurl { width: 100%; }
#fid, #fpackage, #fforename, #flastname, #fphone, #ffax, #fsmssender, #fdebitorid,
#fnplatemodule, #fusername, #flastlogin, #ftemplate, #fclientgroupid, #fdeviceid, 
#fmounting, #fboxid, #fserial, #factivated { width: 50%; }
#fcount_device, #fcount_player, #fcount_router, #fcount_splitter, #fcount_repeater, #fcount_webcam,#fcount_mounting { width: 33.3%; }
#fflag_webcam, #fflag_sms, #fflag_autosubmit { width: 50%; }
#fzip, #fdzip { width: 40%; }
#fcity, #fdcity { width: 60%; }

.overlay { padding: 2px; border-radius: 0.3rem; }
.overlay h1 { margin: 0; padding: 10px; font-size: 16pt; }
.overlay .formblocks { margin: 0; padding: 10px; background: #f0f0f0; }
.overlay .formblocks>div { margin: 0; }

.ovlbuttonbar { padding: 0.3em; text-align: center; background: #fff; }
.ovlbuttonbar a { display: inline-block; vertical-align: top; padding: 0.4em 1em; background: #ddd; border-radius: 0.5em; cursor: pointer; }
.ovlbuttonbar a[btnok] { color: #fff; background: #00a5dc; }
.ovlbuttonbar a + a { margin-left: 0.5em; }

.overlay #fshortname,
.overlay #fcity { width: 100%; }

#nplate { display: block; width: 18rem; font-size: 2em; background: #fff; border: 1px solid #bbb; border-radius: 0.5rem; white-space: nowrap; overflow: hidden; }
#nplate span { display: inline-block; vertical-align: top; height: 3rem; }
#nplate .countryid { width: 1.5rem; background: #00438d; }
#nplate .countryid.de { }

#nplateinput { white-space: nowrap; overflow: hidden; }
#nplateinput>sup { color: #ccc; font-size: 110%; font-weight: bold; top: -0.2em; margin-left: 0.1em; margin-right: 0.1em; }
#nplateinput>input { vertical-align: top; margin-left: 1px; height: 3rem; line-height: 3rem; text-align: center; font-size: 2rem; background: #fff; border: 0; }
#nplateinput>input:focus { background: #f0f0f0; }
#nplateinput>input.upper { text-transform: uppercase; }
#nplateinput>input:nth-child(1) { width: 2.5em; }
#nplateinput>input:nth-child(3) { width: 2.0em; }
#nplateinput>input:nth-child(4) { width: 2.8em; }

#nmobile { display: block; position: relative; margin-top: 0.5rem; white-space: nowrap; overflow: hidden; }
#nmobile.hidden { display: none; }
#nmobile .icon { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5rem; background: #eee; }
#nmobile label { display: block; line-height: 1.3em; color: #bbb; }

#nmobileinput { }
#nmobileinput>input { width: 100%; background: #fff; border: 0; border-bottom: 1px solid #ddd; }
#nmobileinput>input:focus { background: #fff; border-bottom-color: #00438d; }

#nsmstext { }
#nsmstext>span { display: block; height: 1.1em; line-height: 1.1em; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#nsmstext>span::before { content: '\00bb\00a0'; }

.ovlsmstextarea { margin: 0; padding: 5px 10px; background: #eee; }
#ovlsmstextarea { width: 100%; height: 5em; line-height: 1.2em; border: 0; background: #eee; color: #00438d;}
.ovlsmspresets { padding: 5px 10px; }
.ovlsmspresets>* { display: inline-block; vertical-align: top; margin-right: .5em; line-height: 1.2em; white-space: nowrap; }
.ovlsmspresets>span { padding: .1em .5em; color: #444; background: #eee; border: 1px solid #ddd; border-radius: 1em; cursor: pointer; }
.ovlsmspresets>span:hover { color: #00438d; }

#nsubmit { margin-top: 0.5rem; }
#nsubmit>* { display: inline-block; vertical-align: top; line-height: 1.8rem; }
#nsubmit>span { width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nsubmit>a { margin: 0; padding: 0; width: 40%; text-align: center; }
#nsubmit>a:hover { background: #00438d; color: #fff; }

#nclear { }
#nclear>a { display: block; text-align: center; height: 1.5em; line-height: 1.5em; color: #666; cursor: pointer; }
#nclear>a:hover { color: #000; }

.switch { position: relative; display: inline-block; vertical-align: top; padding-left: 1.4rem; color: #666; cursor: pointer; }
.switch::before { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1.3rem; background-position: left center; background-size: 70%; background-repeat: no-repeat; }
.switch.on::before { background-image: url(img/flaticon_yes.svg); }
.switch.off::before { background-image: url(img/flaticon_no.svg); }
.switch:hover { color: #000; }
.switch:hover::before { opacity: 0.3; }

#nplatelist { margin-top: 0.5em; padding: 1px 1px 0 1px; width: 18rem; background: #fff; border: 1px solid #ccc; }
#nplatelist>div { position: relative; display: block; margin-bottom: 1px; padding: 0.3em 0.6em; text-align: right; white-space: nowrap; overflow: hidden; cursor: default; }
#nplatelist>div>* { display: inline-block; vertical-align: top; height: 1.5em; line-height: 1.5em; }
#nplatelist>div>span { position: absolute; left: 0.6em; top: 0.3em; cursor: default; }
#nplatelist>div>a { margin-left: 5px; width: 1.5em; color: #666; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 55%; border-radius: 1em; cursor: pointer; }
#nplatelist>div>a:hover { background-color: #00a5dc; }
#nplatelist>div>a.publish { background-image:url(img/flaticon_alarm.svg); }
#nplatelist>div>a.push { background-image:url(img/flaticon_push.svg); }
#nplatelist>div>a.hide { background-image:url(img/flaticon_hide.svg); }
#nplatelist>div.notpublished>span { color: #aaa; }
#nplatelist>div.sms:before { content: ''; display: block; position: absolute; right: 4.1em; top: 0.3em; width: 1.5em; height: 1.5em; background-image:url(img/flaticon_mobile.svg); background-position: center; background-repeat: no-repeat; background-size: 55%; }
#nplatelist>div.sms.smsfailed:before { background-image:url(img/flaticon_mobile_failed.svg); }
#nplatelist>div sup { color: #ccc; font-size: 110%; font-weight: bold; top: -0.2em; margin-left: 0.1em; margin-right: 0.1em; }
#nplatelist>div:hover { background-color: #eee; }
#nplatelist>div:nth-child(1):not(.notpublished),
#nplatelist>div:nth-child(2):not(.notpublished),
#nplatelist>div:nth-child(3):not(.notpublished),
#nplatelist>div:nth-child(4):not(.notpublished),
#nplatelist>div:nth-child(5):not(.notpublished) { background-color: #dae6f4; }
#nplatelist>div:nth-child(1):not(.notpublished):hover,
#nplatelist>div:nth-child(2):not(.notpublished):hover,
#nplatelist>div:nth-child(3):not(.notpublished):hover,
#nplatelist>div:nth-child(4):not(.notpublished):hover,
#nplatelist>div:nth-child(5):not(.notpublished):hover { background-color: #c0d6f0; }
#nplatelist .empty { text-align: center; color: #ccc; line-height: 1.5; margin-bottom: 1px; }

#nplatehistory { margin-bottom: 1em; }
#nplatehistory>*>span:nth-child(1) { width: 20%; }
#nplatehistory>*>span:nth-child(2) { width: 20%; }
#nplatehistory>*>span:nth-child(3) { width: 20%; }
#nplatehistory>*>span:nth-child(4) { width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nplatehistory>*>span.failed { color: #9e0b0f; text-decoration: line-through; }

.pagination { margin-bottom: 1em; }
.pagination>* { display: inline-block; vertical-align: top; margin-right: 2px; width: 2em; line-height: 1.5em; font-style: normal; text-align: center; text-decoration: none; color: #000; border: 1px solid transparent; white-space: nowrap; overflow: hidden; }
.pagination>a { background: #fff; border-color: #c0d6f0; }
.pagination>.current { background: #dae6f4; border-color: #c0d6f0; }
.pagination>.ellipsis { color: #888; }

#welcome { display: block; }
#welcome>span { display: inline-block; vertical-align: top; margin-bottom: 5px; }
#welcome>span>span { display: block; padding: 0 5px; background: #fff; border: 1px solid #ccc; border-radius: 5px; }
#welcome input { width: 100%; height: 1.15em; font-size: 1.3rem; line-height: 1.15em; background: #fff; border: 0; }
#welcomedate { width: 50%; margin-right: 5%; }
#welcometime { width: 45%; }
#welcomename { width: 100%; }
#welcomedate input, #welcometime input { text-align: center; }

#wsubmit { margin-top: 0.5rem; }
#wsubmit>* { display: inline-block; vertical-align: top; line-height: 1.8rem; }
#wsubmit>span { width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wsubmit>a { margin: 0; padding: 0; width: 40%; text-align: center; }
#wsubmit>a:hover { background: #00438d; color: #fff; }

#wmobile { display: block; position: relative; margin-top: 0.5rem; white-space: nowrap; overflow: hidden; }
#wmobile.hidden { display: none; }
#wmobile .icon { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5rem; background: #eee; }
#wmobile label { display: block; line-height: 1.3em; color: #bbb; }

#wmobileinput { }
#wmobileinput>input { width: 100%; background: #fff; border: 0; border-bottom: 1px solid #ddd; }
#wmobileinput>input:focus { background: #fff; border-bottom-color: #00438d; }

#welcomelist { display: block; margin-top: 0.5em; padding: 1px 1px 0 1px; background: #fff; border: 1px solid #ccc; }
#welcomelist>div { position: relative; display: block; margin-bottom: 1px; padding: 0.3em 0.6em; text-align: left; white-space: nowrap; overflow: hidden; cursor: default; }
#welcomelist>div:hover { background-color: #eee; }
#welcomelist>div.active { background-color: #dae6f4; }
#welcomelist>div>span { display: inline-block; vertical-align: top; cursor: default; }
#welcomelist>div>span.wdate { margin-right: 5px; color: #aaa; font-size: 0.9em; line-height: 1em; }
#welcomelist>div>span.wtime { color: #aaa; font-size: 0.9em; line-height: 1em; }
#welcomelist>div>span.wname { color: #444; }
#welcomelist>div>span.wbtns { position: absolute; right: 0.6em; top: 0.3em; height: 1.5em; line-height: 1.5em; text-align: right; }
#welcomelist>div>span.wbtns>b,
#welcomelist>div>span.wbtns>a { display: inline-block; margin-left: 5px; width: 1.5em; height: 1.5em; color: #666; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 55%; border-radius: 1em; cursor: pointer; }
#welcomelist>div>span.wbtns>a:hover { background-color: #00a5dc; }
#welcomelist>div>span.wbtns>a.hide:hover { background-color: #ee3322; }
#welcomelist>div>span.wbtns>.sms { background-image:url(img/flaticon_mobile.svg); }
#welcomelist>div>span.wbtns>.hide { background-image:url(img/flaticon_hide.svg); }
#welcomelist>div>span.wbtns>.sms { display: none; }
#welcomelist>div.sms>span.wbtns>b.sms { display: inline-block; background-color: #acd373; cursor: help; }
#welcomelist>div.sms>span.wbtns>a.sms { display: none; }
#welcomelist>div.sms.notsubmit>span.wbtns>b.sms { display: none; }
#welcomelist>div.sms.notsubmit>span.wbtns>a.sms { display: inline-block; }
#welcomelist .empty { text-align: center; color: #ccc; line-height: 1.5; margin-bottom: 1px; }


/*
#welcomelist>div>a.publish { background-image:url(img/flaticon_alarm.svg); }
#welcomelist>div>a.push { background-image:url(img/flaticon_push.svg); }
#welcomelist>div>a.hide { background-image:url(img/flaticon_hide.svg); }
#welcomelist>div.notpublished>span { color: #aaa; }
#welcomelist>div.sms:before { content: ''; display: block; position: absolute; right: 4.1em; top: 0.3em; width: 1.5em; height: 1.5em; background-image:url(img/flaticon_mobile.svg); background-position: center; background-repeat: no-repeat; background-size: 55%; }
#welcomelist>div sup { color: #ccc; font-size: 110%; font-weight: bold; top: -0.2em; margin-left: 0.1em; margin-right: 0.1em; }
#welcomelist .empty { text-align: center; color: #ccc; line-height: 1.5; margin-bottom: 1px; }
*/