* {
    -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: text;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: #E4E4E4;
    background-image: linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment: fixed;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    height: 100%;
    margin: 0px;
    padding: 0px;
/*    text-transform:uppercase; */
    width: 100%;
}

.talr {
	text-align: right;
}


.ui-content a, .ui-content a:visited, .ui-content a:hover {
	color: #059;
}
a:visited {
	text-decoration: none;
}

/***************************************************
              modified version of Jquery mobil css */
.ui-content {
	padding: .1em .5em !important;
}
#ruteOversigt .ui-content {
	padding: 0 .5em !important;
}

.ui-header .ui-title, .ui-footer .ui-title {
	margin-left: 20%;
	margin-right: 20%;
	text-shadow: none;
	font-weight: bold;
}
.ui-field-contain .ui-controlgroup-controls {
	width: initial;
	display: inline-block;
}
.ui-field-contain > label {
	width: inherit;
	padding-top: 2em;
}
.ui-field-contain {
	border-bottom-width: 0px; 
}
.ui-btn {
	font-size: 1.0em;
	text-overflow: initial;
/*	padding: 0.8em 20px; */
}
label.iu-btn {
	
}
label.ui-btn-inline {
	width: auto;
}
.ui-btn.small {
	padding: .1em 1em;
	margin: .2em;
}
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-mini .ui-btn {
	font-size: 0.833em;
}
.ui-footer .ui-btn-icon-right {
	padding-right: 3em;
}
.ui-footer .ui-btn-icon-left {
	padding-left: 3em;
}
.ui-btn-icon-right {
	text-align: left;
}
.ui-popup-screen.in {
	background-color: black;
}
label.ui-select {
	font-size: 1.0em;
}
.ui-bar-a {
	background: #FF6633;
}
.ui-page-theme-a .ui-bar-inherit {
/*	background: #FF6633 url('../img/TI-Logo-60x35_tr.png') no-repeat 10% 50%; */
	background-color: #FF6633;
	color: #FFF;
	text-shadow: -1px -1px 0px #000;
	padding: 0 4px;
}
.ui-slider > .ui-page-theme-a, .ui-slider > .ui-bar-inherit {
	background-color: #E9E9E9;
}
.ui-btn.ui-corner-all {
	border-radius: .8em;
}
.ui-btn.ui-btn-b {
	background-image: linear-gradient(#444, #2D2D2D);
	border-top: 1px inset #C0C0C0;
}
.ui-mobile label, div.ui-controlgroup-label {
	font-size: 0.89em;
}
.ui-mobile label.capturePhoto {
	display: inline-block;
	margin: .5em .625em .5em 0em;
}
label.capturePhoto div {
	display: none;
}

.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
	background-size: 0.7em;
	height: 1.2em;
	margin-top: -0.5em;
	width: 1.2em;
}
.ui-autocomplete-loading {
	background: white url("../img/ui-anim_basic_16x16.gif") right center no-repeat;
}
.controlgroup-textinput{
    padding-top:.22em;
    padding-bottom:.22em;
}

/***************************************************
                    hide arrows from number fields */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/***************************************************
              on to the intraApp specific settings */

div#hamburger {
	cursor: pointer;
	display: inline-block;
	margin: 0 8px -4px 0;
	position: fixed;
	width: 2em;
	height: 2em;
	top: .3em;
	left: .3em;
	z-index: 10010;
}
div#hamburger .hamburger-line {
	position: absolute;
	height: 2px;
	width: 22px;
	left: 50%;
	top: 50%;
	margin-left: -11px;
	margin-top: -1px;
	background-color: #000;
	will-change: transform;
	transition: transform .2s ease-in-out;
	transform-origin: center center;
}
div#hamburger .hamburger-line:first-child {
	transform: translateY(-7px);
}
div#hamburger .hamburger-line:last-child {
	transform: translateY(7px);
}
div#hamburger.visible .hamburger-line {
	transform: scaleX(0);
}
div#hamburger.visible .hamburger-line:first-child {
	transform: rotate(-45deg);
}
div#hamburger.visible .hamburger-line:last-child {
	transform: rotate(45deg);
}

div#menu {
	background-color: #f9f9f9;
	border: none;
	box-shadow: none;
	max-height: calc(100% - 2.5em);
	overflow: hidden;
	position: fixed;
	top: 2.2em;
	transition: width .2s linear;
	width: 0;
	z-index: 10020;
}
div#menu.visible {
	box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.5);
	overflow: auto;
	text-align: left;
	width: 67%;
	padding: 0px 8px;
}
div#menu a {
	background-color: #f6f6f6;
    border: 1px solid #ddd;
    border-radius: .8em;
    cursor: pointer;
    color: #333;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 1.0em;
    line-height: 1.3;
    
    margin: .5em 0;
    padding: .7em 2.5em .7em 1em;
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 #f3f3f3;
    white-space: nowrap;
    user-select: none;
}
/*
.install-button {
	background-color: #f6f6f6;
	background-clip: padding-box;
	border-color: #ddd;
	border-radius: .8em;
	box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
	color: #333;
    cursor: pointer;
	font-weight: 700;
	font-size: 1.0em;
	margin: .5em 0;
    padding: .7em 1em;
	padding-right: 2.5em;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
	text-overflow: initial;
	text-align: left;
	text-decoration: none!important;
	text-shadow: 0 1px 0 #f3f3f3;
    user-select: none;
}
.install-button:after {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%229%2C7%209%2C0%205%2C0%205%2C7%200%2C7%207%2C14%2014%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}
*/
#list-refresh,
#rute-refresh {
	cursor: pointer;
	display: inline-block;
	position: fixed;
	top: .7em;
	right: 1.5em;
	height: 1em;
	width: 1em;
	z-index: 10010;
}
#list-refresh:after,
#rute-refresh:after {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20d%3D%22M13%2C2.5%20a7%2C7%200%201%2C0%200%2C11%22%3E%3C%2Fpath%3E%3Cpath%20stroke%3D%22none%22%20fill%3D%22black%22%20d%3D%22M15.5%2C0%20l0%205-5%200%20z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
}

.hidden {
	display: none !important;
}
.pull-left {
	float: left;
}
.clear-both {
	clear: both;
}

#intrAppMask {
	background-color: #aaa;
	bottom: 0;
	filter: Alpha(Opacity=70);
	left: 0;
	right: 0;
	opacity: .7;
	position: fixed;
	top: 0;
	z-index: 1500;
}
#modal {
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 8px 8px;
	box-shadow: 1px 1px 8px 2px #000;
	margin: 5em;
	z-index: 2000;
	position: fixed;
	top: -25em;
	left: 0;
	right: 0;
	transition: top .2s ease-in-out;
}
#modal-title {
	border-bottom: 1px solid #777;
	font-weight: bold;
	padding: .5em 2em;
}
#modal-main {
	padding: 1em;
}
#modal-buttons {
	padding: 1em;
	text-align: right;
}

#imgGalleri {
	background-color: rgba(34, 34, 34, 0.7);
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 1999;
	visibility: hidden;
}
#imgGalleri img {
	background-color: #fff;
	margin: 5% 0 0 0;
	max-width: 90%;
	max-height: 90%;
	min-height: 32px;
	min-width: 32px;
}
#imgGalleri::after {
	content: '';
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3C%2Fsvg%3E");
	background-color: rgba(0, 0, 0, 0.5);
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 12px 12px;
	position: absolute;
	height: 24px;
	top: 36px;
	right: 36px;
	width: 24px;
	z-index: 2000;
}
img#loading, img.loading {
	left: 50%;
	margin: -50px 0 0 -50px;
	position: absolute;
	top: 50%;
}
.atchmnt, .simlink {
	color: #38c;
	font-weight: 700;
	text-decoration: underline;
}
.simlink {
	cursor: pointer;
}
#gpsMessage {
	background-color: rgba(34, 34, 34, 0.5);
	bottom: 0;
	left: 0;
	padding: 72px;
	position: fixed;
	right: 0;
	text-align: center;
	text-shadow: none;
	top: 0;
	visibility: hidden;
	z-index: 2000;
}

#commentMsgFrm textarea {
	min-height: 8em;
}
#msgFeatHeadline {
	padding: 4px;
	text-align: left;
	text-shadow: none;
}

.intrAppBtn {
	background: #eee;
	background-image: linear-gradient(#fff,#f1f1f1);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	border-radius: 1em;
	border: 1px solid #ccc;
	color: #222;
	cursor: pointer;
	display: inline-block;
	font-size: 1.0em;
	font-weight: 700;
	margin: .5em .3em;
	min-width: 5em;
	padding: 0.8em 1.1em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	vertical-align: middle;
}
.intrAppBtn.ui-btn-icon-left {
	padding-left: 2.5em;
}

#appLoginForm {
/*	position: absolute; */
	left: 164px;
	width: 400px;
	text-align: center;
	margin: 0 auto;
}

#status {
	text-shadow: none;
	white-space: nowrap;
}

/* for lists */
.list_hdr {
	background-color: rgba(0,0,0,0.1);
	cursor: pointer;
	margin: -4px;
	padding: 4px;
}
.ttsBtn_s, .ttsBtn_l {
	float: right;
}
.ttsBtn_s {
	height: 2em;
}
.ttsBtn_l {
	height: 3em;
	padding: 0.4em 0;
}
#today {
	clear: both;
	font-weight: bold;
	text-align: center;
}
.top_btns {
	margin: 0;
}
.cntrd_btns {
	text-align: center;
}
.right_btns {
	text-align: right;
}
.vogn_btns {
	margin-top: 1em;
	text-align: center;
}
.centered_btns, #tidsregBtns, #vognedtBtns, #tidsregAddon {
	clear: both;
	text-align: center;
}
.vognhist-doc > a {
	font-weight: normal;
	text-decoration: none;
}
.frameDiv {
	border: 1px dotted #CCC;
	margin-top: 4px;
	padding: 0 8px;
}
#vgnWrpr, #tidsregWrpr, #tidsreg_hist {
	border: 1px dotted #CCC;
	border-radius: 6px 6px;
	text-shadow: none;
	padding: 8px;
	margin: 16px 0;
}
#forvgnWrpr, #trailrWrpr {
	margin: 8px 0;
}
#forvgnWrpr, #trailrWrpr {
	background-color: rgba(255, 255, 255, 0.4);
}
#vgnWrpr {
	background-color: #9cf;
}
#tidsregWrpr {
	background-color: #9c9;
}
#tidsreg_hist {
	background-color: #ddd;
}
#tidsreg_hist > div {
	padding: 4px;
	margin: 8px 0;
}
#tidsreg_hist > .tidsregHdl, .tidsregHdl {
	background-color: inherit;
	font-weight: bold;
	margin-bottom: 8px;
}
.tidsregHdl > .navn {
	font-weight: normal;
}
#tidsregOpn, #tidsregMainBtns {
	background-color: rgba(255, 255, 255, 0.4);
	padding: 8px;
}
#tidsregMainRmrk img {
	height: 16px;
	float: right;
}
#tidsreg_hist > .tidsreg_Log {
	border: none;
	margin: 0 -8px;
}
#tidsreg_hist div img {
	cursor: pointer;
	max-height: 1.5em;
	float: right;
}
#tidsregMainBtns .intrAppBtn {
	min-width: 4.0em;
}

.list_row {
	border-radius: 6px 6px;
	margin: 8px 0;
	overflow: hidden;
	text-shadow: none;
	z-index: 2;
}
.list_col {
	cursor: pointer;
	padding: 4px;
	overflow: hidden;
}
.list_opn, .list_col {
	padding: 4px;
	overflow: hidden;
}
.cls {
	padding: 0 4px;
	height: 0px;
}
.sorter {
	float: right;
	font-weight: bold;
	color: #fff;
	margin-right: 4px;
}
.inlineBlock {
	display: inline-block;
}
.list_btns {
	display: flex;
	justify-content: space-between;
	z-index: 10;
}
.status_span {
	font-size: .85em;
	float: right;
	margin-right: 1em;
}
.list_content {
	margin: 16px 0;
}
.list_block {
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
	margin: 8px 0;
}
.impremrks {
	background-color: #f70;
	border-radius: 0.31em;
	color: #fff;
	padding: 8px 0;
	margin: 0;
}
.rute_block {
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	margin: 8px 0;
	padding-top: 8px;
}

.list_block h2, .rute_block h2 {
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	margin: 0 0.5em 0 0;
	text-align: right;
	vertical-align: top;
}
.list_block h2 {
	width: 8em;
}
.rute_block h2 {
	width: 7.2em;
}
.list_block .varelinje h2 {
	width: 7.5em;
}
.rute_block input {
	width: 4.5em;
	text-align: right;
}
.list_block > div, .rute_block > div {
	display: inline-block;
	width: calc(100% - 8.5em);
}
.rute_block > div.impremrks {
	width: calc(100% - 4px);
}
.list_block > div > div, .rute_block > div > div {
	clear: both;
}
.list_block > div img, .rute_block > div img {
	cursor: pointer;
	float: right;
	margin-right: 0.5em;
	max-height: 1.5em;
}
.list_50, #tidsregStart, #tidsregSlut {
	float: left;
	padding: 0 .2em;
	text-align: left;
	width: calc(50% - 0.4em);
}
.list_50 img{
	float: left;
	margin-right: 4px;
}
.list_50 div {
	clear: both;
}
.gps-wrapper {
	border: 1px solid #aaa;
	margin-top: .5em;
	padding: 4px;
}
.gps-lbl {
	border: 1px solid transparent;
	display: inline-block;
	text-align: right;
	width: 7em;
}
.gps-val {
	border: 1px solid #aaa;
	display: inline-block;
	width: 7em;
	margin: .2em;
	padding: .3em;
}
.gps-btn {
	display: inline-block;
	width: 15.3em;
	text-align: right;
}
.toolate {
	color: #fff;
}
.list_mat {
	margin: 0 0 0 16px;
}
.edit_matnr {
	background-color: rgba(255, 255, 255, 0.4);
	margin: -2px 0.5em 4px 0.5em;
	padding: 0.25em 0;
	white-space: nowrap;
	overflow: hidden;
}
.list_block .edit_matnr > span {
	display: inline-block;
	margin: 0 0.5em 0 0;
	text-align: right;
	width: 7.5em;
}
.list_block .freightline {
	background-color: rgba(255, 255, 255, 0.4);
	display: block;
	margin: 0 0.5em 1em 0.5em;
	padding: 0.5em 0;
	width: calc(100% - 1em);
}
.list_block .editable-line {
	background-color: rgba(255, 255, 255, 0.4);
	display: block;
	margin: 0 0.5em 0.5em 0;
	padding: 0.5em 0;
	width: calc(100% - 1em);
}

.list_block .freightline > div {
	display: inline-block;
	margin-bottom: 0;
	width: calc(100% - 10.5em);
}
.list_block .freightline .colli {
	padding: 1em 0;
}
.list_block .freightline h2 {
	width: 7.5em;
}

.list_block .freightline h2.colli {
	line-height: 1.6em;
}
.varelinje {
	background-color: rgba(255, 255, 255, 0.4);
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	margin: 0 0.5em 2px 0.5em;
	padding: 0.25em 0;
}
.varelinje > div,
.edit_matnr > div {
	display: inline-block;
	margin-bottom: 0;
	width: calc(100% - 10.5em);
}
.varelinje > div > span,
.varelinje > div.sumline > div > span,
.edit_matnr > div > span {
	display: inline-block;
	margin-right: 2px;
	width: calc(5em + 5px); /* + 5px to align with input fields */
	text-align: right;
}
.list_block div.sumline {
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	padding-top: 0.5em;
	width: 100%;
}
.list_block .sumline-btns {
	float: right;
	display: inline-block;
	width: max-content;
}
.sumline > div {
	display: inline-block;
	margin-bottom: 0.25em;
	width: calc(100% - 9em);
}
.sumline > div > .ui-btn {
	float: right;
}
.varelinje input,
.freightline input,
.edit_matnr input {
	width: 5em;
	text-align: right;
}

#ruteMapWrpr {
	display: none;
	position: relative;
	width: 300px;
	height: 300px;
}
#ruteTools {
	display: flex;
	gap: 4px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}

.map-btn {
	background: rgba(30, 30, 40, 0.9);
	color: #fff;
	border: 1px solid #4a4a4a;
	border-radius: 4px;
	font-size: 11px;
	padding: 6px 10px;
	cursor: pointer;
	transition: all 0.15s;
}

.map-btn:hover {
	background: rgba(50, 50, 60, 0.95);
}

.map-btn.active {
	background: #4db6ac;
	color: #1a1a2e;
	border-color: #4db6ac;
}

.map-checkbox {
	background: rgba(30, 30, 40, 0.9);
	color: #fff;
	border: 1px solid #4a4a4a;
	border-radius: 4px;
	font-size: 11px;
	padding: 4px 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
}

.map-checkbox input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: #4db6ac;
}

#gpsRecordingOption {
	border-top: 1px solid #333;
}

#mapDebug {
	display: none;
}
#ruteAktuel {
	margin: 1em 0;
	padding-bottom: 4px;
}
#ruteAktuelInfo {
	padding: 4px;
	position: relative;
	text-shadow: none;
}
.rute_row, .rute_rowdone {
	margin: 8px 0;
	min-height: 7.5em;
	padding: 4px;
	position: relative;
	text-shadow: none;
	z-index: 2;
}
.rute_row span, .rute_rowdone span {
	display: inline-block;
	width: calc(100% - 8em);
}
#ruteFullList > .rute_row span, #ruteFullList .rute_rowdone span {
	width: calc(100% - 7.5em);
}
.ruteBtns {
	float: left;
	margin-right: 1em;
	padding: 0;
	width: 4em;
}
.ruteRightBtns {
	display: inline-block;
	position: absolute;
	right: 3em;
	bottom: .3em;
}
.ruteRightBtns .ui-btn {
	margin: 0.1em 0;
}
.rutePriorBtn {
	margin-bottom: 4px;
	padding: .35em 0;
	width: 4em;
	text-align: center;
}
.rutePriorBtn::after {
	display: table;
	content: ' ';
}
.ruteAktuelCurrent {
	display: inline-block;
	max-width: calc(100% - 7.2em);
}
.ruteFLBtns {
	height: 3.0em;
}
.ruteFLBtns > .ui-checkbox {
	float: left;
	width: 50%;
}
.posFlag {
	display: none;
	position: absolute;
	top: 3em;
	right: .6em;
}
.gm-marker {
	font-size: 1em;
}
#manualDispTxt {
	height: 5em !important;
}
#confirmTakeoverDiv > img {
	position: relative;
	left: 50%;
	margin: 20px -50px;
}

#lCalendarBtn, #tCalendarBtn {
	background: url(../img/calendar.png) no-repeat 8px center;
	padding-left: 38px;
}

/***** for js_cal *****/
#js_cal_outer {
	margin: 1em auto;
	width: 420px;
}
.js_cal_control span {
	border: 1px solid #C1C1C1;
	cursor: pointer;
	float: left;
	padding: 8px;
	text-align: center;
	width: 42px;
}
.js_cal_control .js_cal_mnthName {
	border-bottom: none;
	border-left: none;
	border-right: none;
	width: 284px;
}
.js_cal_control .btn {
	background-color: #FFFFFF;
	box-shadow: inset -2px -2px 12px #E1E1E1;
	height: 42px;
	width: 42px;
}
.js_cal_control .btn:hover {
	box-shadow: inset -2px -2px 12px #C1C1C1;
}
.js_cal_dayNames span {
	border: 1px solid #C1C1C1;
	float: left;
	font-weight: bold;
	text-align: center;
	width: 58px;
}
.js_cal_week span {
	border: 1px solid #C1C1C1;
	float: left;
	height: 42px;
	padding: 8px;
	text-align: right;
	width: 42px;
}
.js_cal_week span.we, .js_cal_dayNames span.we {
	background: #FFD0D0;
}
.js_cal_week .btn {
	background-color: #FFFFFF;
	box-shadow: inset -2px -2px 12px #E1E1E1;
}
.js_cal_week .we {
	box-shadow: inset -2px -2px 12px #FFA1A1;
}
.js_cal_week .td, .js_cal_week .we .td {
	box-shadow: inset -2px -2px 12px #D1D100;
}
.js_cal_week span.btn:hover, .js_cal_week span.we span.btn:hover {
	box-shadow: inset -2px -2px 12px #C1C1C1;
}
.js_cal_week span.td:hover, .js_cal_week span.we span.td:hover {
	box-shadow: inset -2px -2px 12px #B1B100;
}

.selwrp {
	margin: 0 4px;
}

/**** for chat ****/
#chat {
	height: calc(100% - 6.3em);
}
#chat > .ui-content {
	height: calc(100% - 0.2em);
}
.chatDialog {
	height: calc(100% - 0.5em);
	position: relative;
	text-shadow: none;
}
#autocomplete {
	background-color: rgba(249, 249, 249, 0.9);
	position: absolute;
	left: 0;
	right: 0;
	top: 2em;
	z-index: 10;
}
.chatBtn {
	cursor: pointer;
	background: none;
	border-right: none;
	border-bottom-left-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	height: 0.5em;
	padding: 0.5em;
	position: fixed;
	width: 50px;
	overflow: hidden;
	right: 0.5em;
	bottom: -1em;
	transition: height 0.5s;
}
.flashing {
	animation: flash2full 1s linear infinite;
	background: rgba(255, 255, 255, 0.95) url("../img/64x64-chat-green.png") center 0 no-repeat;
	border: 1px solid #eee;
	box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 8px 1px;
	top: 0;
	height: 40px;
	opacity: 0.2;
	z-index: 2000;
}
@keyframes flash2full {  
	50% { opacity: 1; }
}

.chatDialog > div {
	margin-bottom: 4px;
}
.chatDialog > div > label {
	display: inline-block;
	margin-left: -8px;
	min-width: 48px;
	position: absolute;
	text-align: right;
}
.chatDialog > div > input, .chatDialog > div > select {
	width: 100%;
}
.chatDialog > div > textarea {
	display: inline-block;
	margin: 0;
	height: 3.4em;
	width: calc(100% - 8.5em);
}
.chatDialog > div > textarea.inclAttachment {
	background: url("../img/paperclip.png") right 1em center no-repeat;
}

.chatDialog > div > select {
	height: 1.8em;
}
.chatDialog > div.chatMsgDiv {
	margin-bottom: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.chatDialog > .group-receivers {
	display: none;
	height: 1em;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.chatDialog.group > div.chatMsgDiv {
	bottom: 1.2em;
}
.chatDialog.group > .group-receivers {
	display: block;
}
#chatBck {
	display: inline-block;
	height: 1em;
	width: 1em;
	padding: 1.1em;
	top: -0.3em;
}
#chatSearch {
	display: inline-block;
	width: calc(100% - 3em);
}
#imgBtn0 {
	background: url("../img/paperclip.png") center center no-repeat;
	display: inline-block;
	width: 3.4em;
	height: 3.4em;
	padding: 3px 4px;
	position: absolute;
	right: 4.9em;
	top: 0;
}
#imgBtn0 > div {
	display: none;
}
#sendBtn0 {
	background: url("../img/sendChat.png") center center no-repeat;
	display: inline-block;
	width: 3.4em;
	height: 3.4em;
	margin: 0;
	position: absolute;
	right: 0.5em;
	top: 0;
}
.chatDialog .chatLogChat,
.chatDialog .chatLogMail {
	height: calc(100% - 7.5em);
	margin: 0 -8px 0 -4px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 4px 0 0;
}
.chatLogChat.long {
	height: calc(100% - 3.6em);
}
.chatDialog.attached .chatLogChat {
	height: calc(100% - 9.5em);
}
.chatDialog.group .chatLogChat, .chatDialog .chatLogMail {
	height: calc(100% - 9.5em);
}
div.chatMsgDiv > .replyto {
    background-color: #e6b7b7;
	border: 1px solid #333;
    padding: .1em 0;
	width: calc(100% - 14px);
	position: absolute;
	top: calc(-1.9em - 19px);
}
div.chatMsgDiv > .replyto > .chatTS {
	font-size: .75em;
	padding: 2px 8px 4px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div.chatMsgDiv > .replyto > .msg {
	padding: 1px 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: calc(100% - 8px);
}
div.chatMsgDiv > .replyto > .close-replyto {
	float: right;
	padding: 0 .2em;
	cursor: pointer;
}

.chatDialog div.attach2chatLogDiv {
	border: 1px solid #aaa;
	display: none;
	margin-top: 0.5em;
	overflow: hidden;
	padding: 3px;
	position: relative;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.chatDialog div.attach2chatLogDiv > span {
	border: 1px solid #aaa;
	border-radius: 6px 6px;
	color: red;
	cursor: pointer;
	font-family: sans-serif;
	line-height: 1;
	position: absolute;
	width: 1em;
	right: 2px;
	top: 2px;
	height: 1em;
	text-align: center;
}
.chatLogMail {
	height: calc(100% - 133px);
}
.chatLogChat > img {
	position: relative;
	left: 50%;
	margin-left: -50px;
}
.chatLogChat img {
    max-width: 100%;
}
.chatLogChat > div, .chatLogMail > div {
	clear: both;
	padding: 0 4px;
}
.chatLogChat > .chatMore {
	cursor: pointer;
	text-align: center;
	text-decoration: underline;
}
.chatLogChat > .chatRcnt {
	border: 1px solid #eee;
	border-radius: 4px 4px;
	color: #000;
	cursor: pointer;
	margin: 4px 0;
	padding: 4px;
}
.chatLogChat > .chatRcnt > i {
    float: right;
}
.chatLogChat > .chatRcnt > i.fa-users {
    float: right;
}
.chatLogChat > .chatRcnt > i.fa-users:before {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48cGF0aCBkPSJNOTYgMjI0YzM1LjMgMCA2NC0yOC43IDY0LTY0cy0yOC43LTY0LTY0LTY0LTY0IDI4LjctNjQgNjQgMjguNyA2NCA2NCA2NHptNDQ4IDBjMzUuMyAwIDY0LTI4LjcgNjQtNjRzLTI4LjctNjQtNjQtNjQtNjQgMjguNy02NCA2NCAyOC43IDY0IDY0IDY0em0zMiAzMmgtNjRjLTE3LjYgMC0zMy41IDcuMS00NS4xIDE4LjYgNDAuMyAyMi4xIDY4LjkgNjIgNzUuMSAxMDkuNGg2NmMxNy43IDAgMzItMTQuMyAzMi0zMnYtMzJjMC0zNS4zLTI4LjctNjQtNjQtNjR6bS0yNTYgMGM2MS45IDAgMTEyLTUwLjEgMTEyLTExMlMzODEuOSAzMiAzMjAgMzIgMjA4IDgyLjEgMjA4IDE0NHM1MC4xIDExMiAxMTIgMTEyem03Ni44IDMyaC04LjNjLTIwLjggMTAtNDMuOSAxNi02OC41IDE2cy00Ny42LTYtNjguNS0xNmgtOC4zQzE3OS42IDI4OCAxMjggMzM5LjYgMTI4IDQwMy4yVjQzMmMwIDI2LjUgMjEuNSA0OCA0OCA0OGgyODhjMjYuNSAwIDQ4LTIxLjUgNDgtNDh2LTI4LjhjMC02My42LTUxLjYtMTE1LjItMTE1LjItMTE1LjJ6bS0yMjMuNy0xMy40QzE2MS41IDI2My4xIDE0NS42IDI1NiAxMjggMjU2SDY0Yy0zNS4zIDAtNjQgMjguNy02NCA2NHYzMmMwIDE3LjcgMTQuMyAzMiAzMiAzMmg2NS45YzYuMy00Ny40IDM0LjktODcuMyA3NS4yLTEwOS40eiIvPjwvc3ZnPg==") center 0 no-repeat;
	background-size: contain;
	content: '';
	width: 1em;
	height: 1em;
	float: right;
}
.chat-toolbox > i.fa-reply:after {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0iTTE3OTIgMTEyMHEwIDE2Ni0xMjcgNDUxLTMgNy0xMC41IDI0dC0xMy41IDMwLTEzIDIycS0xMiAxNy0yOCAxNy0xNSAwLTIzLjUtMTB0LTguNS0yNXEwLTkgMi41LTI2LjV0Mi41LTIzLjVxNS02OCA1LTEyMyAwLTEwMS0xNy41LTE4MXQtNDguNS0xMzguNS04MC0xMDEtMTA1LjUtNjkuNS0xMzMtNDIuNS0xNTQtMjEuNS0xNzUuNS02SDY0MHYyNTZxMCAyNi0xOSA0NXQtNDUgMTktNDUtMTlMMTkgNjg1UTAgNjY2IDAgNjQwdDE5LTQ1TDUzMSA4M3ExOS0xOSA0NS0xOXQ0NSAxOSAxOSA0NXYyNTZoMjI0cTcxMyAwIDg3NSA0MDMgNTMgMTM0IDUzIDMzM3oiLz48L3N2Zz4=") center 0 no-repeat;
	background-size: contain;
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
}
.chatLogChat > .chatRcnt.offline {
	color: #555;
}
.chatLogChat > .chatRcnt.offline:after {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xIDE1aDRsLTQgNmg0TTcgN2g2bC02IDkgNiAxbTItMTYgNyAxLTkgOSA3IDEiLz48L3N2Zz4=") center 0 no-repeat;
	background-size: contain;
	content: '';
	width: .8em;
	height: .8em;
	float: right;
}
.chatLogChat > .chatRcnt.green:after {
	background: url(../img/64x64-chat-green.png) center 0 no-repeat;
	background-size: contain;
	content: '';
	width: 1em;
	height: 1em;
	float: right;
}
.chatTocList > .chatRcnt.green.offline {
	color: #777;
}
.chatLogChat > .chatRcnt:hover {
	background-color: #eee;
}
.chatLogChat > .chatRcnt > .chatTS {
	display: inline-block;
	min-width: 5em;
	text-align: right;
}
input.error {
	background: url("../img/exclamation.png") right center no-repeat;
}
.chatFromYou,
.chatFromMe {
	display: inline-block;
	padding: 14px 0 8px 0;
	max-width: 100%;
	position: relative;
}
.chatFromYou {
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	margin-right: 12px;
}
.chatFromMe {
	float: right;
	margin-left: 12px;
	text-align: right;
}
.chatFromYou > .chatTS,
.chatFromMe > .chatTS {
    border-top-left-radius: 8px 9px;
    border-top-right-radius: 8px 8px;
	display: inline-block;
	font-size: 0.8em;
	margin-bottom: -2px;
	max-width: 100%;
	min-width: 54px;
	padding: 2px 8px 4px 8px;
}
.chatFromYou > .chatTS {
	background-color: #e6b7b740;
	border-bottom-right-radius: 8px 8px;
	left: -1px;
	max-width: calc(100% - 32px);
}
.chatFromYou:before {
	border-bottom: 6px solid #e6b7b7;
	border-left: 6px solid #fff;
	bottom: 8px;
	content: '';
	position: absolute;
	left: -6px;
}
.chatFromMe > .chatTS {
	background-color: #ccc4;
	border-bottom-left-radius: 8px 8px;
	right: -1px;
}
.chatFromMe.read > .chatTS {
	background-color: #91d6c840;
}
.chatFromYou > .chatTS > b,
.chatFromMe > .chatTS > b {
	white-space: nowrap;
}
/*
.chatFromMe > .chatTS::after {
	content: ' Sendt';
}
.chatFromMe.read > .chatTS::after {
	content: ' Læst';
}
.chatFromMe.sending > .chatTS::after {
	content: ' ...';
}
.chatFromMe.offline > .chatTS::after {
	content: ' Bruger er ikke online';
}
*/
.chatFromMe::after {
	border-bottom: 6px solid #ccc;
	border-right: 6px solid #fff;
	bottom: 8px;
	content: '';
	position: absolute;
	right: -6px;
}
.chatFromMe.read::after {
	border-bottom: 6px solid #91d6c8;
}
.chatFromYou > .chat-toolbox {
	cursor: pointer;
	position: relative;
	top: 0.2em;
	left: 0.2em;
}
.chatFromMe > .question,
.chatFromYou > .question {
	font-size: 0.75em;
	padding: 4px;
	max-width: 100%;
}
.chatFromYou > .question {
	background-color: #e6b7b780;
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
}
.chatFromMe > .question {
	background-color: #91d6c880;
	border-top-left-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;
}
.chatFromYou > .msg {
	background-color: #e6b7b7;
	border: 1px solid #e6b7b7;
	border-bottom-right-radius: 8px 8px;
	border-top-right-radius: 8px 8px;
	padding: 4px;
}
.chatFromMe > .msg {
	background-color: #ccc;
	border-top-left-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;
	padding: 4px;
}
.chatFromMe.read > .msg {
	background-color: #91d6c8;
}

.flash10s {
	animation: flash2half 1s linear 10;
}
@keyframes flash2half {  
	50% { opacity: 0.7; }
}

/* a few for switch look alike checkboxes */
/*
label.switchLbl {
	position: relative;
	display: inline-block;
	margin: 4px 1em 0 0;
}

input[type="checkbox"].switch:not(:checked), 
input[type="checkbox"].switch:checked { /* :checked here acting as a filter for older browsers */
/*	position: absolute;
	opacity: 0;
}

input[type="checkbox"].switch + span {
	width: 1.8em;	height: 1em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 999px;
	display: inline-block;
	margin: -2px 4px;
	background: #888;
	background-image: linear-gradient(rgba(0,0,0,.4), transparent);
	background-origin: border-box;
	background-clip: border-box;
	box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	overflow: hidden;
	transition-duration: .2s;
	transition-property: padding, width;
}
input[type="checkbox"].switch:checked + span {
	padding-left: .8em;
	width: 1em;
}
input[type="checkbox"].switch + span:before {
	content: '';
	display: block;
	width: 1em; height: 1em;
	margin: -1px;
	border: 1px solid rgba(0,0,0,.7);
	border-radius: inherit;
	background: #c4c4c4;
	background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
	box-shadow: 0 0 .5em rgba(0,0,0,.5),
	            0 .2em hsla(0,0%,100%,.3) inset,
	            0 -.1em .3em hsla(0,0%,0%,.2) inset;
}
*/
/**** tidsreg *****/
.tidsreg-dateBtn {
	opacity: 1;
/*	padding: 0 24px; */
}
.tidsRegDiv {
	border: thin dotted black;
	margin: 8px 0;
	padding: 4px;
	text-shadow: none;
	transition: height 0.8s;
	z-index: 2;
}
#tidsReg_error {
	clear: both;
	font-weight: bold;
	text-align: center;
}
#tidsReg_error span {
	font-weight: normal;
	font-size: 0.8em;
}
.status0 {
	background-color: #9C9;
	cursor: pointer;
}
.vgnStatus0 {
	background-color: #9CF;
}
.status1, .vgnStatus1 {
	background-color: #F93;
	border: none;
}
.status2 {
	background-color: #F93;
}

/* for the message dialog */
#smallImage {
	display: none;
	max-width: 90%;
	margin: 4px auto;
}
#messageList div, #recptComments div {
	border: 1px dotted #000;
/*	cursor: pointer; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 4px;
	margin: 8px 0;
}
#messageList div img, #recptComments div img {
	cursor: pointer;
	float: right;
	max-height: 1.5em;
}
#messageList div.selected {
	border: 1px solid #000;
	white-space: normal;
}
#messageList div.selected img {
	max-height: initial;
}
#messageList div.expanded {
	white-space: initial;
}

/* The signature and "finger" -message dialog */
.signatureWrapper {
	overflow: hidden;
}
#signature, #fingerMsg {
	margin: 1em 0;
	border: 2px dotted black;
	background-color:lightgrey;
}
#fingerMsg button {
	width: initial;
}
#commentRecptFrm label {
	display: inline-block;
	margin-top: 4px;
	min-width: 15em;
}
#recptFeatHeadline {
	margin-top: 4px;
	padding: 4px;
	text-shadow: none;
}

/*** Logs ***/
#log-details {
	padding: .5em 0;
}

#settings_div {
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	padding-top: .25em;
}

/* a few for switch look alike checkboxes */
label.switchLbl {
	position: relative;
	display: inline-block;
	margin-right: 1em !important;
}

input[type="checkbox"].switch:not(:checked), 
input[type="checkbox"].switch:checked { /* :checked here acting as a filter for older browsers */
	position: absolute;
	opacity: 0;
}

input[type="checkbox"].switch + span {
	width: 1.8em;	height: 1em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 999px;
	display: inline-block;
	margin: -2px 4px;
	background: #888;
	background-image: linear-gradient(rgba(0,0,0,.4), transparent);
	background-origin: border-box;
	background-clip: border-box;
	box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	overflow: hidden;
	transition-duration: .2s;
	transition-property: padding, width;
}
input[type="checkbox"].switch:checked + span {
	padding-left: .8em;
	width: 1em;
}
input[type="checkbox"].switch + span:before {
	content: '';
	display: block;
	width: 1em; height: 1em;
	margin: -1px;
	border: 1px solid rgba(0,0,0,.7);
	border-radius: inherit;
	background: #c4c4c4;
	background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
	box-shadow: 0 0 .5em rgba(0,0,0,.5),
	            0 .2em hsla(0,0%,100%,.3) inset,
	            0 -.1em .3em hsla(0,0%,0%,.2) inset;
}

/***************************************************
 and finally some "responsive web design" settings */
 
@media screen and (min-width: 1025px) {
/* for js_cal */
	#js_cal_outer {
		width: 630px;
	}
	.js_cal_control span {
		padding: 4px;
	}
	.js_cal_control .js_cal_mnthName {
		width: 437px;
	}
	.js_cal_control .btn {
		height: 79px;
		width: 79px;
	}
	.js_cal_dayNames span {
		width: 87px;
	}
	.js_cal_week span {
		height: 63px;
		padding: 12px;
		width: 63px;
	}
}
/* ===========================================
   TABLET LANDSCAPE MODE
   =========================================== */
@media screen and (min-width: 900px) and (orientation: landscape) {

	/* Main content area - use full height */
	.ui-content {
		padding: 12px 20px !important;
		height: calc(100vh - 60px);
		overflow: hidden;
	}

	/* Rute page - split layout */
	#ruteOversigt .ui-content {
		display: flex !important;
		gap: 20px;
	}

	#ruteDescr {
		flex: 0 0 55%;
		height: calc(100vh - 100px);
		overflow-y: auto;
		padding-right: 16px;
	}

	#ruteMapWrpr {
		flex: 0 0 43%;
		display: block !important;
		height: calc(100vh - 100px);
		border-radius: 12px;
		overflow: hidden;
		border: 1px solid var(--border);
	}

	#ruteMap {
		width: 100%;
		height: 100%;
	}

	.posFlag {
		display: inline-block;
	}

	/* Aktuel ordre card */
	#ruteAktuel {
		background: var(--bg-card) !important;
		border-radius: 16px;
		padding: 20px !important;
		margin-bottom: 16px;
	}

	#ruteAktuelInfo {
		font-size: 1.1em;
		line-height: 1.5;
		padding: 16px !important;
		border-radius: 12px;
	}

	/* Action buttons - all same size, centered */
	#ruteAktuelBtns {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center !important;
		gap: 10px;
		margin-top: 12px;
		padding: 0 !important;
	}

	#ruteAktuelBtns .ui-btn {
		min-height: 52px !important;
		min-width: 95px;
		font-size: 0.85em !important;
		line-height: 52px !important;
		white-space: nowrap;
	}

	/* Route list items - larger touch targets */
	.rute_row, .rute_rowdone {
		min-height: 80px;
		padding: 16px !important;
		margin: 12px 0 !important;
		border-radius: 12px;
	}

	.rute_row span, .rute_rowdone span {
		font-size: 1.1em;
	}

	/* Liste page - better spacing */
	#liste_div .list_row {
		margin: 12px 0 !important;
		padding: 16px !important;
		border-radius: 12px;
	}

	.list_col {
		padding: 12px !important;
		font-size: 1.1em;
	}
}

/* Smaller tablets / large phones landscape */
@media screen and (min-width: 600px) and (max-width: 899px) and (orientation: landscape) {
	#ruteDescr, #ruteMapWrpr {
		display: inline-block;
		height: 350px;
		width: calc((100% - 16px) / 2);
		vertical-align: top;
	}

	#ruteDescr {
		overflow-y: auto;
	}

	#ruteMapWrpr {
		border-radius: 12px;
		overflow: hidden;
	}

	.posFlag {
		display: inline-block;
	}
}
@media screen and (max-width: 580px) {
	.ui-content {
		padding: .1em .8em !important;
	}
	#appLoginForm {
/*		left: 0;
		top: 120px; */
		width: 100%;
	}
	
	.list_block > div.varelinje {
		width: 100%;
	}
/*	.varelinje .sumlines input, .freightline .sumlines input {
		width: 4em;
	} */

}
@media screen and (max-width: 420px) {
	.ui-content {
		padding: .1em .4em !important;
	}
/* for js_cal */
	#js_cal_outer {
		width: 280px;
	}
	.js_cal_control span {
		padding: 4px;
	}
	.js_cal_control .js_cal_mnthName {
		width: 190px;
	}
	.js_cal_control .btn {
		height: 31px;
		width: 31px;
	}
	.js_cal_dayNames span {
		width: 38px;
	}
	.js_cal_week span {
		height: 26px;
		padding: 6px;
		width: 26px;
	}
}

/***************************************************
              DARK ANTHRACITE THEME
              TransportIntra Mock - Kris Edition
 ***************************************************/

/*
   COLOR PHILOSOPHY:
   - Anthracite base for professional, easy-on-eyes feel
   - Orange header preserved from original TransportIntra
   - Status colors: saturated enough to distinguish, dark enough to fit theme
   - White input fields for clarity and data entry focus
*/

:root {
	/* Anthracite base - warm dark grays */
	--bg-primary: #1a1a1a;
	--bg-secondary: #222222;
	--bg-tertiary: #2a2a2a;
	--bg-card: #303030;
	--bg-elevated: #383838;

	/* Text hierarchy */
	--text-primary: #f5f5f5;
	--text-secondary: #b0b0b0;
	--text-muted: #707070;
	--text-on-color: #ffffff;

	/* Brand colors */
	--brand-orange: #FF6633;
	--brand-orange-dark: #cc5229;

	/* Accent - teal for interactive elements */
	--accent: #4db6ac;
	--accent-hover: #26a69a;
	--accent-light: rgba(77, 182, 172, 0.2);

	/* Semantic colors */
	--success: #66bb6a;
	--success-dark: #2e7d32;
	--warning: #ffa726;
	--warning-dark: #f57c00;
	--error: #ef5350;
	--error-dark: #c62828;
	--info: #42a5f5;

	/* Borders & dividers */
	--border: #404040;
	--border-light: #4a4a4a;
	--divider: rgba(255, 255, 255, 0.08);
}

/* Body and background */
body {
	background: var(--bg-primary) !important;
	background-image: none !important;
	color: var(--text-primary);
}

/* jQuery Mobile page backgrounds */
.ui-page,
.ui-page-theme-a,
.ui-page-active,
.ui-body-a,
.ui-panel-wrapper,
#listepage,
#rutepage,
#ruteOversigt,
#tidsreg,
#chat,
#login,
[data-role="page"] {
	background: var(--bg-primary) !important;
	background-color: var(--bg-primary) !important;
	color: var(--text-primary) !important;
}

/* jQuery Mobile listview */
.ui-listview,
.ui-listview > li,
.ui-li-static,
.ui-listview > li.ui-li-static,
.ui-listview > li.ui-bar-a,
.ui-listview-inset > li {
	background: var(--bg-card) !important;
	border-color: var(--border) !important;
	color: var(--text-primary) !important;
}

.ui-listview > li > a {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

.ui-listview > li > a:hover {
	background: var(--bg-tertiary) !important;
}

/* jQuery Mobile body inherit */
.ui-body-inherit,
.ui-page-theme-a .ui-body-inherit,
.ui-body-a,
.ui-page-theme-a .ui-body-a,
.ui-overlay-a,
.ui-page-theme-a .ui-panel-wrapper {
	background: var(--bg-primary) !important;
	border-color: var(--border) !important;
	color: var(--text-primary) !important;
}

/* Force override jQuery Mobile default blue/gray theme */
.ui-page-theme-a,
.ui-page-theme-a .ui-btn,
.ui-bar-a,
.ui-body-a,
.ui-btn-a,
.ui-page-theme-a .ui-btn:hover,
div[data-role="content"],
div[data-role="page"] {
	background-color: var(--bg-primary) !important;
	color: var(--text-primary) !important;
	text-shadow: none !important;
}

/* Control groups */
.ui-controlgroup,
.ui-controlgroup-controls {
	background: transparent !important;
}

/* Collapsible and other dynamic content */
.ui-collapsible-content,
.ui-collapsible-heading,
.ui-corner-all,
.ui-shadow {
	background-color: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

/* Header bar - original orange */
.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit {
	background: #FF6633 !important;
	border-bottom: 1px solid #cc5229;
	color: #ffffff !important;
	text-shadow: -1px -1px 0px #000 !important;
}

/* Page content area */
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
	background: var(--bg-primary) !important;
	color: var(--text-primary);
}

.ui-content {
	background: transparent !important;
}

/* Buttons - Redesigned for tablet/touch */
.ui-btn,
.intrAppBtn {
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border: 1px solid #4a4a4a !important;
	border-radius: 8px !important;
	color: var(--text-primary) !important;
	text-shadow: none !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
	transition: all 0.15s ease !important;
	min-height: 44px !important;
	padding: 0 16px !important;
	font-size: 1em !important;
	font-weight: 500 !important;
	text-align: center !important;
	line-height: 44px !important;
}

.ui-btn:hover,
.ui-btn:focus,
.intrAppBtn:hover {
	background: linear-gradient(180deg, #454545 0%, #353535 100%) !important;
	border-color: var(--accent) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.ui-btn:active,
.intrAppBtn:active {
	background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%) !important;
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

.ui-btn.ui-btn-active {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
	color: var(--text-on-color) !important;
	border-color: var(--accent-hover) !important;
}

/* Primary action button (Afslut) */
.btn-primary,
.ui-btn.btn-primary,
.intrAppBtn.btn-primary {
	background: linear-gradient(180deg, #2d8a4e 0%, #1e6b3a 100%) !important;
	border-color: #3da864 !important;
	min-height: 48px !important;
	font-size: 1.05em !important;
	font-weight: 600 !important;
	padding: 0 20px !important;
	line-height: 48px !important;
}

.btn-primary:hover {
	background: linear-gradient(180deg, #3da864 0%, #2d8a4e 100%) !important;
}

.btn-primary:active {
	background: linear-gradient(180deg, #1e6b3a 0%, #155a2e 100%) !important;
}

/* Danger/Error button */
.btn-danger,
.ui-btn.btn-danger,
.intrAppBtn.btn-danger {
	background: linear-gradient(180deg, #8a3a3a 0%, #6b2a2a 100%) !important;
	border-color: #a04a4a !important;
}

.btn-danger:hover {
	background: linear-gradient(180deg, #a04a4a 0%, #8a3a3a 100%) !important;
}

/* Secondary/neutral button */
.btn-secondary,
.ui-btn.btn-secondary {
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border-color: #4a4a4a !important;
}

/* Icon buttons */
.ui-btn.ui-btn-icon-left {
	padding-left: 48px !important;
}

.ui-btn.ui-btn-icon-right {
	padding-right: 48px !important;
}

/* Rute action buttons - all same size, centered */
#ruteAktuelBtns {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center !important;
	gap: 8px;
	padding: 10px 0 !important;
}

#ruteAktuelBtns .ui-btn {
	min-height: 52px !important;
	min-width: 95px;
	padding: 0 10px !important;
	line-height: 52px !important;
	font-size: 0.85em !important;
	margin: 0 !important;
	white-space: nowrap;
}

#rute-afslut-btn {
	background: linear-gradient(180deg, #2d8a4e 0%, #1e6b3a 100%) !important;
	border-color: #3da864 !important;
}

/* Fejl/Afvis buttons - neutral styling (same as other buttons) */
#rute-fejl-btn,
#rute-afvis-btn {
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border-color: #4a4a4a !important;
}

/* Inline buttons (data-inline=true) */
.ui-btn-inline {
	min-height: 40px !important;
	padding: 0 14px !important;
	line-height: 40px !important;
}

/* Message page (Afvis/Fejl) - scrollable content */
#message .ui-content {
	overflow-y: auto !important;
	height: auto !important;
	max-height: calc(100vh - 60px) !important;
	padding-bottom: 20px !important;
}

#message .cntrd_btns {
	padding: 10px 0;
}

#message .cntrd_btns .ui-btn,
#message .cntrd_btns .intrAppBtn,
#message .cntrd_btns label.ui-btn {
	min-height: 44px !important;
	line-height: 44px !important;
	margin: 4px !important;
	display: inline-block !important;
	vertical-align: middle;
}

/* Photo buttons */
label.photoBtn {
	min-height: 44px !important;
	line-height: 44px !important;
	padding: 0 14px !important;
}

/* Control group buttons (navigation arrows, calendar) */
.ui-controlgroup .ui-btn {
	min-height: 40px !important;
	min-width: 48px !important;
	line-height: 40px !important;
	padding: 0 12px !important;
}

/* Date navigation buttons */
#lYesterdayBtn, #lTomorrowBtn,
#tYesterdayBtn, #tTomorrowBtn {
	min-width: 64px !important;
}

#lCalendarBtn, #tCalendarBtn {
	min-width: 120px !important;
}

/* Input fields - white background */
.ui-input-text,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea,
select {
	background: #ffffff !important;
	border: 1px solid var(--border) !important;
	color: #1c1c1c !important;
}

.ui-input-text:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--accent) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-light) !important;
}

/* Links */
a, .ui-content a, .ui-content a:visited {
	color: var(--accent) !important;
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--accent-hover) !important;
	text-decoration: underline;
}

/* Simulated links */
.simlink, .atchmnt {
	color: var(--accent) !important;
	cursor: pointer;
}

/* List rows and cards */
.list_row,
.rute_row,
.rute_rowdone,
#liste_div .list_row,
#ruteliste .rute_row,
#ruteFullList .rute_row,
#ruteFullList .rute_rowdone {
	background: var(--bg-card) !important;
	border: 1px solid var(--border) !important;
	border-radius: 12px;
	color: var(--text-primary) !important;
	transition: all 0.15s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.list_row:hover,
.rute_row:hover {
	border-color: var(--accent) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.list_col,
.list_opn {
	color: var(--text-primary) !important;
	cursor: pointer;
}

.list_hdr {
	background: rgba(255,255,255,0.05) !important;
	border-radius: 8px;
	padding: 8px 12px !important;
}

/* Completed rows - subtle styling */
.rute_rowdone {
	opacity: 0.7;
}

.rute_rowdone:hover {
	opacity: 1;
}

/* Rute Aktuel - current route info */
#ruteAktuel,
#ruteAktuelInfo,
#ruteDescr {
	background: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
	border-radius: 8px;
}

#ruteAktuelInfo {
	background: var(--bg-card) !important;
	padding: 8px;
	border-radius: 6px;
}

/* Liste div - dispatch list */
#liste_div,
#ruteliste,
#ruteFullList {
	color: var(--text-primary) !important;
}

/* Dispatch list items on listePage */
#liste_div > .list_row,
#liste_div > div,
#liste_div .list_col,
#liste_div .list_hdr {
	color: var(--text-primary) !important;
	border-color: var(--border) !important;
}

/* Ensure text is always light on status-colored backgrounds */
#liste_div .list_col,
#liste_div .list_col div,
#ruteliste .rute_row,
#ruteliste .rute_row span,
#ruteFullList .rute_row,
#ruteFullList .rute_row span,
#ruteFullList .rute_rowdone,
#ruteFullList .rute_rowdone span,
#ruteAktuel,
#ruteAktuelInfo {
	color: #e8e8e8 !important;
}

/* Override any blue jQuery Mobile backgrounds */
[class*="ui-body"],
[class*="ui-btn"]:not(.ui-btn-active),
.ui-page-theme-a [class*="ui-body"] {
	background-color: var(--bg-card) !important;
	background-image: none !important;
	color: var(--text-primary) !important;
}

/* Specific jQuery Mobile overrides for listePage and ruteOversigt */
#listePage .ui-body-a,
#ruteOversigt .ui-body-a,
#ruteFullListPage .ui-body-a {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

/* Header bar - keep original orange */
[data-role="header"] .ui-bar-inherit,
[data-role="header"].ui-bar-a,
.ui-header,
.ui-page .ui-header,
div[data-role="header"] {
	background: #FF6633 !important;
	background-color: #FF6633 !important;
	border-bottom: 1px solid #cc5229 !important;
	color: #ffffff !important;
	text-shadow: -1px -1px 0px #000 !important;
}

/* Status colors - adjusted for dark theme */
.status0 {
	background-color: var(--success) !important;
	color: #fff;
}

.status1, .status2 {
	background-color: var(--warning) !important;
	color: #000;
}

.vgnStatus0 {
	background-color: var(--accent) !important;
}

.vgnStatus1 {
	background-color: var(--warning) !important;
}

/* Wrappers - Tidsregistrering */
#vgnWrpr {
	background: linear-gradient(135deg, #1a3d5c 0%, #2a4a6b 100%) !important;
	border: 1px solid #3d5a7a !important;
	border-radius: 8px;
}

#tidsregWrpr {
	background: linear-gradient(135deg, #1a4a2a 0%, #2a5a3a 100%) !important;
	border: 1px solid #3a6a4a !important;
	border-radius: 8px;
}

#tidsreg_hist {
	background-color: var(--bg-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: 8px;
}

#forvgnWrpr,
#trailrWrpr {
	background-color: rgba(255, 255, 255, 0.03) !important;
	border-radius: 6px;
	margin: 4px 0;
}

/* Modal and popups */
#modal {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border) !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
	color: var(--text-primary);
	border-radius: 12px !important;
}

#modal-title {
	border-color: var(--border) !important;
	background: var(--bg-tertiary) !important;
	border-radius: 12px 12px 0 0 !important;
}

#intrAppMask {
	background-color: rgba(0,0,0,0.75) !important;
	backdrop-filter: blur(4px);
}

/* Menu */
div#menu {
	background-color: var(--bg-secondary) !important;
	border-radius: 0 0 12px 0;
}

div#menu.visible {
	box-shadow: 4px 4px 24px rgba(0,0,0,0.5) !important;
}

div#menu a {
	background: var(--bg-card) !important;
	background-image: linear-gradient(to bottom, var(--bg-elevated), var(--bg-card)) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
	text-shadow: none !important;
	transition: all 0.15s ease;
}

div#menu a:hover {
	background: var(--bg-elevated) !important;
	background-image: none !important;
	border-color: var(--accent) !important;
	padding-left: 1.2em;
}

/* Hamburger menu icon - make it white */
div#hamburger .hamburger-line {
	background-color: #fff !important;
}

/* Refresh icon - invert for dark bg */
#list-refresh:after,
#rute-refresh:after {
	filter: invert(1);
}

/* Important remarks - uses brand orange */
.impremrks {
	background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%) !important;
	color: var(--text-on-color) !important;
	border-radius: 6px;
	padding: 10px !important;
	font-weight: 500;
}

/* Sorter badge - uses brand orange for visibility */
.sorter {
	color: var(--brand-orange) !important;
	font-weight: bold;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Frame divs and blocks */
.frameDiv {
	border: 1px solid var(--border) !important;
	background: var(--bg-secondary);
	border-radius: 8px;
	padding: 12px !important;
	margin: 8px 0;
}

.list_block,
.rute_block {
	border-color: var(--divider) !important;
}

/* Varelinje and edit rows */
.varelinje,
.edit_matnr,
.freightline,
.editable-line {
	background-color: rgba(255,255,255,0.03) !important;
	border-radius: 4px;
	margin: 4px 0 !important;
}

/* Tidsreg */
.tidsRegDiv {
	background: var(--bg-card) !important;
	border-color: var(--border) !important;
	color: var(--text-primary);
}

#tidsregOpn,
#tidsregMainBtns {
	background-color: rgba(255,255,255,0.05) !important;
}

/* Chat styling */
.chatDialog {
	color: var(--text-primary);
}

.chatFromYou > .msg {
	background-color: var(--bg-elevated) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary);
	border-radius: 12px 12px 12px 4px !important;
}

.chatFromYou > .chatTS {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

.chatFromYou:before {
	border-bottom-color: var(--bg-elevated) !important;
	border-left-color: var(--bg-primary) !important;
}

.chatFromMe > .msg {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
	color: var(--text-on-color);
	border-radius: 12px 12px 4px 12px !important;
}

.chatFromMe.read > .msg {
	background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%) !important;
}

.chatFromMe::after {
	border-bottom-color: var(--accent) !important;
	border-right-color: var(--bg-primary) !important;
}

.chatFromMe.read::after {
	border-bottom-color: var(--success) !important;
}

.chatLogChat > .chatRcnt {
	background: var(--bg-card);
	border: 1px solid var(--border) !important;
	border-radius: 8px;
	color: var(--text-primary) !important;
	transition: all 0.15s ease;
}

.chatLogChat > .chatRcnt:hover {
	background-color: var(--bg-elevated) !important;
	border-color: var(--accent) !important;
}

/* Calendar */
.js_cal_week span,
.js_cal_control span,
.js_cal_dayNames span {
	background-color: var(--bg-card) !important;
	border-color: var(--border) !important;
	color: var(--text-primary) !important;
	transition: all 0.15s ease;
}

.js_cal_control .btn {
	background-color: var(--bg-elevated) !important;
	cursor: pointer;
}

.js_cal_control .btn:hover {
	background-color: var(--accent) !important;
	color: var(--text-on-color) !important;
}

.js_cal_week .btn {
	background-color: var(--bg-secondary) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.js_cal_week .btn:hover {
	background-color: var(--bg-elevated) !important;
	border-color: var(--accent) !important;
}

/* Weekend days - subtle red tint */
.js_cal_week span.we,
.js_cal_dayNames span.we {
	background-color: rgba(239, 68, 68, 0.15) !important;
}

/* Today - highlighted with accent */
.js_cal_week .td {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
	color: var(--text-on-color) !important;
	font-weight: bold;
}

/* GPS wrapper */
.gps-wrapper {
	border: 1px solid var(--border) !important;
	background: var(--bg-card);
	border-radius: 8px;
	padding: 12px !important;
}

.gps-val {
	background: var(--bg-primary) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
	border-radius: 4px;
	font-family: monospace;
}

.gps-lbl {
	color: var(--text-secondary) !important;
}

/* Image gallery */
#imgGalleri {
	background-color: rgba(0, 0, 0, 0.85) !important;
}

#imgGalleri img {
	background-color: var(--bg-card) !important;
}

/* Labels */
label,
.ui-mobile label {
	color: var(--text-secondary) !important;
}

/* Today date */
#today {
	color: var(--text-primary);
}

/* Status span */
.status_span {
	color: var(--text-secondary);
}

/* Slider */
.ui-slider > .ui-page-theme-a,
.ui-slider > .ui-bar-inherit {
	background-color: var(--bg-card) !important;
}

/* Checkbox/Radio buttons */
.ui-checkbox label,
.ui-radio label {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

/* Switch */
input[type="checkbox"].switch + span {
	background: var(--bg-tertiary) !important;
}

/* Popup screen */
.ui-popup-screen.in {
	background-color: rgba(0,0,0,0.8) !important;
}

/* GPS message */
#gpsMessage {
	background-color: rgba(0, 0, 0, 0.7) !important;
	color: var(--text-primary);
}

/* Attachment link */
.atchmnt, .simlink {
	color: var(--accent) !important;
}

/* Messages */
#messageList div,
#recptComments div {
	background: var(--bg-card);
	border-color: var(--border) !important;
	color: var(--text-primary);
}

/* Signature */
#signature,
#fingerMsg {
	background-color: var(--bg-card) !important;
	border-color: var(--border) !important;
}

/* Log details */
#log-details {
	color: var(--text-primary);
}

/* Settings */
#settings_div {
	border-color: var(--border) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
	background: var(--bg-tertiary);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
}

/* Main menu buttons (menuPage) - force white text */
#mainMenu a.ui-btn,
#mainMenu .ui-btn {
	color: #ffffff !important;
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
	border: 1px solid #4a4a4a !important;
	text-shadow: none !important;
}

#mainMenu a.ui-btn:hover,
#mainMenu .ui-btn:hover {
	background: linear-gradient(180deg, #454545 0%, #353535 100%) !important;
	border-color: var(--accent) !important;
}

/* ============================================
   EXTRA ROUTE CALENDAR STYLES
   ============================================ */

.extra-cal-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: var(--bg-secondary);
	border-radius: 8px;
	margin-bottom: 10px;
}

.extra-cal-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: var(--bg-primary);
	border-radius: 50%;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
}

.extra-cal-title {
	font-size: 18px;
	font-weight: bold;
	color: var(--text-primary);
}

.extra-cal-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 5px;
}

.extra-cal-header span {
	text-align: center;
	padding: 8px;
	color: var(--accent);
	font-weight: bold;
}

.extra-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.extra-cal-day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--bg-secondary);
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s;
}

.extra-cal-day.empty {
	background: transparent;
	cursor: default;
}

.extra-cal-day .day-num {
	font-size: 16px;
	color: var(--text-primary);
}

.extra-cal-day.today {
	border-color: var(--accent);
}

.extra-cal-day.today .day-num {
	color: var(--accent);
	font-weight: bold;
}

.extra-cal-day.selected {
	background: var(--accent);
}

.extra-cal-day.selected .day-num {
	color: var(--bg-primary);
}

.extra-cal-day:not(.empty):hover {
	border-color: var(--accent);
}

/* Route buttons in extra route picker */
.extra-route-btn {
	padding: 15px;
	margin: 8px 0;
	background: var(--bg-secondary);
	border-radius: 8px;
	border: 2px solid transparent;
	color: var(--text-primary);
	cursor: pointer;
	transition: all 0.2s;
}

.extra-route-btn:hover {
	border-color: #9b59b6;
}

.extra-route-btn.selected {
	background: #9b59b6;
	border-color: #9b59b6;
	color: white;
}

.extra-route-btn small {
	color: #888;
	font-size: 12px;
}

.extra-route-btn.selected small {
	color: rgba(255,255,255,0.8);
}

/* Extra route items in main route list */
.extra-route-item {
	border-left: 4px solid #9b59b6 !important;
}

.extra-route-label {
	font-size: 10px;
	color: #bb86fc;
	padding: 2px 6px;
	background: #2d2d44;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 5px;
}

.extra-route-header {
	background: #2d2d44;
	color: #bb86fc;
	padding: 10px;
	margin: 15px 0 5px 0;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ============================================
   EXTRA ROUTE COMPACT POPUP
   ============================================ */

#extraRoutePopup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #1a1a2e;
	border: 1px solid #4a4a4a;
	border-radius: 12px;
	padding: 0;
	z-index: 9999;
	width: 280px;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

#extraRoutePopup.visible {
	display: block;
}

.erp-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background: #16213e;
	border-radius: 12px 12px 0 0;
	font-weight: bold;
	color: #f5f5f5;
}

.erp-close {
	cursor: pointer;
	color: #888;
	font-size: 18px;
	padding: 0 5px;
}

.erp-close:hover {
	color: #e74c3c;
}

.erp-selectors {
	display: flex;
	gap: 8px;
	padding: 10px 15px;
	background: #16213e;
}

.erp-select {
	flex: 1;
	padding: 6px 10px;
	background: #2a2a3e;
	border: 1px solid #4a4a4a;
	border-radius: 6px;
	color: #f5f5f5;
	font-size: 14px;
}

.erp-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	padding: 10px 15px;
}

.erp-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2a2a3e;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	color: #b0b0b0;
	transition: all 0.15s;
}

.erp-day:hover {
	background: #3a3a4e;
	color: #f5f5f5;
}

.erp-day.today {
	border: 2px solid #4db6ac;
	color: #4db6ac;
	font-weight: bold;
}

.erp-day.selected {
	background: #4db6ac;
	color: #1a1a2e;
	font-weight: bold;
}

.erp-day.weekend {
	color: #e57373;
}

.erp-day.weekend:hover {
	color: #ef5350;
}

.erp-day.weekend.selected {
	background: #e74c3c;
	color: #fff;
}

#erpRoutes {
	padding: 10px 15px;
	border-top: 1px solid #3a3a4a;
}

.erp-hint {
	text-align: center;
	color: #707070;
	font-size: 13px;
	padding: 15px 0;
}

.erp-route {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	margin: 5px 0;
	background: #2a2a3e;
	border-radius: 6px;
	cursor: pointer;
	color: #f5f5f5;
	font-size: 13px;
	transition: all 0.15s;
}

.erp-route:hover {
	background: #3a3a4e;
}

.erp-route input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #4db6ac;
}

.erp-route span {
	flex: 1;
}

.erp-route small {
	color: #888;
}

.erp-clear {
	text-align: center;
	padding: 12px;
	color: #e74c3c;
	cursor: pointer;
	border-top: 1px solid #3a3a4a;
	font-size: 13px;
}

.erp-clear:hover {
	background: rgba(231, 76, 60, 0.1);
}

/* Plus button for adding routes */
#addRouteBtn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%);
	color: #fff;
	border-radius: 50%;
	font-size: 24px;
	font-weight: bold;
	line-height: 34px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
	transition: all 0.15s;
	z-index: 10;
}

#addRouteBtn:hover {
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#addRouteBtn:active {
	transform: translateY(-50%) scale(0.95);
}

/* Weekday header row in calendar */
.erp-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	padding: 5px 15px 0 15px;
}

.erp-weekday {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #4db6ac;
	padding: 4px 0;
}

.erp-weekday.weekend {
	color: #e74c3c;
}

/* Empty day cells for calendar alignment */
.erp-day.empty {
	background: transparent;
	cursor: default;
}

/* Route label badge for main route */
.main-route-header {
	background: #1a3d5c;
	color: #4db6ac;
	padding: 10px;
	margin: 0 0 5px 0;
	border-radius: 5px;
	border-left: 4px solid #4db6ac;
	display: flex;
	justify-content: space-between;
	align-items: center;
}