@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
@import url('appdesign.css');

 
/* -- COLORS -- */

:root {
	--blue: #2196f3;
	--font-black-grey: #313435;
	--font-white-grey: #d8d8d8;
	--font-white: #fff;
	--background-white: #fff;
	--border-white-grey: #ced4da;
}


/* div .checkbox { width: 20px; height: 20px; border: 1px solid #a5a5a5; } */



/* LOGIN */

	#loginBox {width: 800px; max-width: 90%; background-color: #fff; padding: 25px 400px 25px 25px; border: 1px solid rgba(0,0,0,.2);box-shadow: 0px 0px 25px 3px rgba(87, 87, 87, 0.71); background-image: url('../img/firm_logo.png'); background-position: 85% center; background-size: 30%; background-repeat: no-repeat;}
	#buttonBox { float: right; line-height: 35px; text-align: right; font-size: 85%;}


	#loginStatusmessage {line-height: 30px;}
	#loginStatusmessage div  {text-align: center}
	#loginStatusmessage div .ajaxloader { height: 20px; text-align: center}

	/* LOGIN CLASSES */
	
	.bluegard {width: 100%; height: 100%;  background-image: url(../img/sign_in_bg.jpg); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center;}



/* - MAIN ELEMENTS - */

* {padding: 0; margin: 0; box-sizing: border-box; text-align: left; -webkit-text-size-adjust: none, -ms-overlow-style: none;}
*::-webkit-scrollbar {display: none}
*:focus { outline: none !important; }

a {color: var(--font-black-grey); text-decoration: none;}
a:hover {color: var(--blue); text-decoration: none; cursor: pointer}
html { }
body {width: 100%; font-family: 'Roboto',-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; font-size: 14px; font-weight: 400; color: #313435; letter-spacing: .2px; -webkit-font-smoothing: antialiased;}
main {padding: 86px 20px 20px; min-height: 100vh; float: left; width: 100%;}
small {text-overflow: ellipsis; white-space: nowrap}
h1, h2, h3, h4, h5, h6 {letter-spacing: .5px;}
h1 {font-size: 19px;}
h4 {font-size: 21px;}
h6 {letter-spacing: .5px; font-size: 15px;color: #313435!important; margin-bottom: .5rem;font-weight: 500;}
a[title] {cursor: help;}
b {font-weight: 500;}

.small-font {font-size: 75%; }
.big-font {font-size: 150%;}
*[onclick^="location.href"]:hover, *[onclick^="window.open"]:hover, *[data-href] > * {cursor: pointer;}


.qasColor {border-bottom: 1px solid #c40707}
.qasName {position: absolute; background-color: #c40707; bottom: -20px; font-size: 12px; line-height: 20px; width: 200px; text-align: center; left: calc(50% - 100px); border-bottom-left-radius: 5px;  border-bottom-right-radius: 5px; color: #fff}
/* CAR IMAGES */

.carImage { width: 100%; height: 200px; object-fit: cover;}
.imageLoader { width: 20px; vertical-align: middle; margin-right: 10px}

.imageFrame {position: relative;}
.imageInformation {position: absolute; bottom: 0; background-color:rgba(255, 255, 255, 0.75); width: 100%; display: none; }
.imageFrame:hover .showme {display: block; }
.imageInformation .imageFileName {float: left; width: 100%; font-size: 90%; padding: 5px 10px 0px 10px; text-align: left; overflow: hidden;}
.imageInformation .imageFileSize {float: left; width: 50%; font-size: 90%; padding: 5px 10px; text-align: left; }
.imageInformation .imageFileOptions {float: left; width: 50%; padding: 5px 10px; text-align: right; }
.imageInformation .imageFileOptions i {font-size: 100%; }
.imageInformation .imageFileOptions i:hover {cursor: pointer}

ul.tabs::-webkit-scrollbar {display: none }
div ::-webkit-scrollbar {display: none}

.hidescrollbar {-ms-overlow-style: none;}

.textRight {text-align: right !important}

/* TOOLTIP */

.helpIcon {font-size: 15px !important; color: #2196f3 !important;}
.helpIcon:hover {color: #313435 !important;}


/* - NAVIGATOR */

#navigator p {font-size: 90%; text-transform: none;}
#navigator p:hover {cursor: default}
#navigator p a {color: var(--font-black-grey);}
#navigator p a:hover {color: var(--blue);}
#navigator p span {padding: 0px 7px; color: var(--blue);}

.colorLegend {font-size: 90%;}

/* removed 16.10.2021 
.editButton {display:none;}
.hideEdit:hover .editButton {display:inline;}
*/


/* - TABS - */

ul.tabs {margin: 0px; padding: 0px; list-style: none; width: 100%; white-space: nowrap !important; overflow-x: scroll;}
ul.tabs li{color: var(--font-black-grey); display: inline-block; padding: 15px 25px;cursor: pointer; *display: inline;}
ul.tabs li.current{ background: var(--blue); color: #fff;}
ul.tabs li:hover{ background: var(--blue); color: #fff;}
.tab-content{display: none; clear: both;}
.tab-content:after {content: ".";clear: both;display: block;visibility: hidden; height: 0px;}
.tab-content.current{display: inherit;}
.overflow-scroll {display:block !important}


/* RASTER ELEMENTS - */

#boxline {width: 100%; float: left;}
#boxarea {width: 100%; float: left;  /* delete 13.03.19 display: table; */}
/* form #box {min-height: 110px;} */
#box {float: left; line-height: 20px;}
#box.w20 {width: 20%; }
#box.w25 {width: 25%; }
#box.w33 {width: 33.33%; }
#box.w50 {width: 50%; }
#box.w50m {width: 50%; }
#box.w66 {width: 66.66%;}
#box.w75 {width: 75%;}
#box.w100 {width: 100%;}
#contentbox {width: 100%; float: left; }

.bd {border: 1px solid rgba(0,0,0,.0625)!important; }
.bgw { background-color: #fff;}

/* - FORM ELEMENTS - */

input, textarea, select {color: var(--font-black-grey); border: 1px solid #ced4da; border-radius: 0;padding: 6px 12px; font-size: 14px; width: 100%; box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1);}

input:focus, select:focus, textarea:focus {border: 1px solid #2196f3;}

.form-control {display: block;width: 100%; padding: 6px 12px; line-height: 1.5; color: var(--font-black-grey); background-color: var(--background-white); background-image: none; background-clip: padding-box;
border: 1px solid #ced4da; border-radius: 0; } 
input:read-only, input:disabled {color: var(--font-black-grey); border: 0px; padding: 0px 0px; font-size: 20px; font-weight: 500; width: 100%; -webkit-text-fill-color: var(--font-black-grey); opacity: 1; box-shadow: none;}

button:disabled {background-color: #aaaaaa; border-color: #aaaaaa;}

textarea:read-only, textarea:disabled {color: var(--font-black-grey); border: 0px; padding: 0px 0px; font-size: 15px; font-weight: 500; width: 100%; -webkit-text-fill-color: var(--font-black-grey); opacity: 1; box-shadow: none;}

select:disabled {color: -var(--font-black-grey); border: 0px; padding: 0px 0px; font-size: 20px !important; font-weight: 500; width: 100%; background-image: none !important; box-shadow: none;}
input:read-only:hover {cursor: text}

input::placeholder {color: var(--font-white-grey) !important; font-size: 14px; width: 100%;}
textarea { resize: none; }
label {display: inline-block; max-width: 100%; margin-bottom: 8px; overflow: hidden; -moz-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap;  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; }
label .fieldLoader img { height: 17px; margin-bottom: -4px; margin-left: 5px;}

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile + label { color: var(--font-black-grey); background-color: var(--background-white); display: inline-block; border: 1px solid #ced4da; padding: 6px 12px; font-size: 14px; width: 100%; }
.inputfile:focus + label,.inputfile + label:hover { }
.inputfile + label {cursor: pointer; }
.form-group {margin-bottom: 16px; padding-left: 5px; padding-right: 5px;}
.form-text {margin-top: 4px; display: block}
.stay-sticky { position: -webkit-sticky; position: sticky; top: 80; z-index:500}
select.form-control:not([size]):not([multiple]) { /*height: calc(2.0625rem + 2px); */  white-space: pre; -webkit-rtl-ordering: logical; cursor: default;  font-size:14px; -webkit-appearance:none; background-image: url('../img/down-arrow.png'); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; }
.checkInput {border-color: #ffba00 !important;}
.buttonInput {position:relative}
.buttonInput button {position:absolute; right: 0; top: 0; border-radius: 0; width: 33%;}
.buttonInput input:read-only {color: var(--font-black-grey); border: 1px solid #ced4da;border-radius: 0;padding: 6px 12px; font-size: 14px; width: 100%; box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1);}

input.disabled, select.disabled {pointer-events:none; background-color: rgba(235, 235, 235, 0.55)}

/* button-sytles */

button[data-icon]:hover span {display:none}
button[data-icon]:hover {font-family: 'Material Icons'; line-height: 33px; font-size: 20px; padding:0; }
button[data-icon]:hover:before { content: attr(data-icon); }


/* - TABLE ELEMENTS - */


table[id="data-table"] {width: 100% !important;}
*.popup:hover, tr.hovereffect:hover {cursor: pointer;}
tr.popup:hover, tr[onclick^="location.href"]:hover, tr[onclick^="window.open"]:hover, tr.hovereffect:hover {background: #2196f3 !important; color: #fff !important;}

.detailVT { width: 80%; margin-left: 20%;}
.detailVT thead tr { /* background-color: var(--blue) !important; */ font-weight: bold; line-height: 90%;}


.alldpn {display: none !important}















/* PLUGIN: CAR COORDINATES */


.car_coordinates { position: relative;  height: 170px;  background-size: 100% 100% !important; background-repeat: no-repeat; }
.car_coordinates.topv {background: url(../img/carmarker/top.png);}
.car_coordinates.leftv {background: url(../img/carmarker/left.png);}
.car_coordinates.rightv {background: url(../img/carmarker/right.png);}
.car_coordinates.front_backv {background: url(../img/carmarker/front_back.png);}
.car_coordinates > select {width: auto !important;height: 20px !important;}




/* form */
#form-row {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}

.layers {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

#read_more:before {
    content: "»";
    margin-right: 6px;
}
::placeholder {color: #e0e0e0}



p.fieldinfo {font-size: 20px; font-weight: 500;}

.red-error-frame {
    border-color: #d65046 !important;
}


/* checkbox */
.container {display:block;position:relative;padding-left:25px;margin: 8px 0px;cursor:pointer; line-height: 18px; color:#495057;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:justify;}
.container input[type="checkbox"] {position: absolute;opacity: 0; cursor: pointer;}
.checkmark {margin-left: 1px;  position: absolute;  top: 0;  left: 0;  height: 18px;  width: 18px;background-color: #fff; border: 1px solid #ced4da; border-radius: 0px;  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1);  }
.container:hover input[type="checkbox"] ~ .checkmark { background-color: #fff;}
.container input[type="checkbox"]:checked ~ .checkmark { background-color: #fff;}
.container input[type="checkbox"]:disabled ~ .checkmark { background-color: #fff;}
.checkmark:after { content: ""; position: absolute;  display: none;}
.container input[type="checkbox"]:checked ~ .checkmark:after { display: block;}
.container .checkmark:after {left: 5px;top: 1px; width: 3px; height: 9px; border: solid #2196f3; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.container input[type="checkbox"]:disabled ~ .checkmark:after {left: 5px;top: 1px; width: 3px; height: 9px; border: solid #868e96; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}




/* radiobutton */
.container input[type="radio"] {position: absolute;opacity: 0; cursor: pointer;}
.radiomark {margin-left: 1px;  position: absolute;  top: 0;  left: 0;  height: 18px;  width: 18px;background-color: #fff; border: 1px solid #ced4da; border-radius: 50px;}
.container:hover input[type="radio"] ~ .radiomark { background-color: #fff;}
.container input[type="radio"]:checked ~ .radiomark { background-color: #fff;}
.container input[type="radio"]:disabled ~ .radiomark { background-color: #fff;}
.radiomark:after { content: ""; position: absolute;  display: none;  border-radius: 50%;}
.container input[type="radio"]:checked ~ .radiomark:after { display: block;}
.container .radiomark:after {left: 3px;top: 3px; width: 10px; height: 10px; border-radius: 50%; background-color: #2196f3;}






/* table */
table {	font-size: 13px;width: 100%;max-width: 100%;margin-bottom: 1rem;background-color: transparent;border-collapse: collapse;}
.table thead th {padding: 6px;vertical-align: middle;border-bottom: 2px solid #e9ecef;}
.table thead th span {font-weight: normal; font-size: 75%}
.table th {padding: 6px;vertical-align: middle;border-top: 1px solid #e9ecef;}
.table td {text-align: inherit;display: table-cell;padding: 6px; border-top: 1px solid #e9ecef}
.table-striped tbody tr:nth-of-type(odd) {background-color: rgba(0,0,0,.05);}
.table th.notmob, td.notmob{display: none;}
td[colspan]:not([colspan="1"]) {
    text-align: center;
}
.textCenter { text-align: center;}

.individual_search td:first-child {width: 30%;}

#header { background-color: #fff; border-bottom: 1px solid rgba(0,0,0,.0625); display: block;height: 65px; position: fixed; float: left; z-index: 800; width: 100%;}
#header #header-container:after, #sidebar-close:after{
display: block;
clear: both;
content: "";
	
}
#header-container {float:left; width: 100%;}
#header-container ul {list-style: none;}
#header-container-left ul li, #header-container-right ul li {display: list-item relative; text-align: -webkit-match-parent; float: left; }
#header-container-middle ul {text-align: center; }
#header-container-middle ul li {width: 100%; display: inline; line-height: 65px; white-space: nowrap;text-overflow: ellipsis; overflow: hidden}
#header-container-middle ul li:hover {cursor: default}
/*#header-container-middle ul li.mes_success {color:#4caf50}*/
/*#header-container-middle ul li.mes_error {color:#ea1c0d}*/
#header-container-middle ul li span {padding-left: 5px;}
#header-container ul li input {margin: 17px 0 0 10px; border: none;}
#header-container-left, #header-container-right {padding: 0 20px; float: left; width: 35%; height: 100%;}
#header-container-middle {width: 30%; float: left; height: 100%;}
#header-container ul li input {margin: 17px 0 0 10px; border: none;}
#header-container-left, #header-container-right {padding: 0 20px; float: left; width: 35%; height: 100%;}

#header-container-right ul {float: right}
#header-container-left ul {float: left}

#header-container-middle .ajaxloader { height: 20px; margin-top: 22px; }

.mes_success {color:#4caf50 }
.mes_warning {color:#d89233 }
.mes_error {color:#ea1c0d}

div {display: block}

#flexcol {float: left;}
.clear{clear: both;}



#sidebar { position: fixed;top: 0;left: 0;overflow: hidden;transition: 0.8s;width: 0px; height: 100%; background: #fff; z-index: 900;  border-right: 1px solid rgba(0,0,0,.0625);}
#sidebar-close ul {display: block; float: right;}
#sidebar-close ul {list-style: none; }

#sidebar-close, #header-container ul li a {line-height: 65px; padding: 0 10px; color: #495057; }

.sidebar-menu {
height: calc(100vh - 105px);
list-style: none;
margin: 0;
overflow: auto;
padding: 0;
position: relative;
}

.sidebar-copyright {font-size: 10px; line-height: 40px; padding-left:15px; height: 40px; border-top: 1px solid rgba(0,0,0,.0625);}


.sidebar-menu li a, .sidebar-menu li.seperator span {
display: block;
font-size: 14px;
font-weight: 500;
position: relative;
white-space: nowrap;color: #72777a;
line-height: 35px;
font-weight: 400;
}
.sidebar-menu li a {padding: 5px 15px; }
.sidebar-menu li a:hover {background-color: #f0f0f0 }
.sidebar-menu li.seperator span {padding: 5px 15px 5px 15px; font-size: 80%; line-height: 30px; text-transform: uppercase;}


p.carinfo {font-size: 20px; line-height: 30px; font-weight: 500;}
p.clientInfo {font-size: 16px; line-height: 20px; font-weight: 500;}
p.inputreplace {font-size: 18px; line-height: 35px; font-weight: 500;}

/*form */

form {display: block}

button {text-transform: none; overflow: visible; -webkit-appreciate: button;}
button:hover {cursor: pointer;}
button.w100 {width: 100% !important;}
button.w20 {width: 20% !important;}
button.w25 {width: 25% !important;}
button.w50 {width: 50% !important;}
button.w33 {width: 33.33% !important;}
.btn {display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
	-webkit-user-select: none;
vertical-align: middle;padding: 6px 12px;line-height: 1.5;
border-radius: 0;border: 1px solid transparent;
font-size: 14px;
}
.nowrap {white-space: nowrap}
.btn-table {
	padding: 0;
	border: 0;
	background: none;
	
}

.btn-primary {
color: #fff;
background-color: #2196f3;
border-color: #2196f3;
}

.btn-secondary{
color: #fff;
background-color: #ea1c0d;
border-color: #ea1c0d;
}

.btn-opt{
color: #fff;
background-color: #d6d5d5;
border-color: #d6d5d5;
}

.btn-success{
color: #fff;
background-color: #4caf50;
border-color: #4caf50;
}
.btn-input{
color: #fff;
background-color: #b9b9b9;
border-color: #b9b9b9;
}

.btn-inline{
color: #fff;
background-color: #2196f3;
border-color: #b9b9b9;
border-left-color: #2196f3;
}



.sticky {
	position: -webkit-sticky;
    position: sticky;
    top: 86px;
    font-size: 20px;
}



a.deactivated {display: none !important;}





#page-container { min-height: 100vh; top:0; bottom: 0; /* overflow: hidden; removed for sticky in app 202*/}

.table-icons {font-size: 20px !important; vertical-align: middle !important;}


/* removed 2020-11-15 .icon_navbar {line-height: 65px !important;} */


.material-icons {vertical-align: middle !important; line-height: inherit!important;}
.icon_small {line-height: 100% !important; font-size: 100% !important; padding-right: 3px;}
.icon_tablewarning {line-height: 100% !important; font-size: 15px !important; padding-right: 3px;}
.icon_index {line-height: 22px !important; font-size: 20px !important; padding-right: 10px;}
.icon_text {line-height: 22px !important; font-size: 20px !important; padding-right: 3px;}


.icon-sidebar {line-height: 40px !important; font-size: 21px !important; padding-right: 20px;}
.icon-button {line-height: 21px !important; font-size: 20px !important; }
.icon-tablebutton {line-height: 30px !important; font-size: 20px !important; margin-top: -3px;}
.icon-tablebutton:hover {cursor: pointer}


.sign_in_left {width: 65%; background-image: url(../img/sign_in_bg.jpg); height: 100%; background-size: cover; background-position: center;}
.sign_in_right {width: 35%; height: 100%; padding: 80px 50px 0px 50px; position: relative}
#bottom_sign_in {position: absolute; bottom: 20px;}


.p-40 {padding: 40px;}
.p-30 {padding: 30px;}
.p-20 {padding: 20px;}
.p-20-ue {padding: 20px 20px 0px 20px;}
.p-10 {padding: 10px;}
.mT-30 {margin-top: 30px;}
.mT-60 {margin-top: 60px;}
.mB-20 {margin-bottom: 20px;}
.mB-30 {margin-bottom: 30px;}
.mT-20 {margin-top: 20px !important;}
.mT-10 {margin-top: 10px; }
.mL-10 {margin-left: 10px;}
.mL-20 {margin-left: 20px;}
.mR-10 {margin-right: 10px;}
.mR-20 {margin-right: 20px;}
.mB-10 {margin-bottom: 10px;}
.mB-20 {margin-bottom: 20px;}
.gap-20>* {padding: 10px!important;}
.ib {display: inline-block !important;}

.form-group {margin-bottom: 16px;}
.scrollable-y {overflow-y: scroll !important;}
.colorred {color:#ea1c0d !important;}
.colorgrey {color: #868e96 !important;}
.colorblue {color: #2196f3 !important;}
.colorgreen {color: #4caf50 !important;}
.colororange {color: #f56607 !important;}
.right {float: right;}
.left {float: left;}
.center {margin: 0px auto; display: block}
.mB-40 {margin-bottom: 40px;}
.fw-300 {font-weight: 300;}
.bgc-white {background-color: #fff;}
.bgc-grey-100 {background-color: #f9fafb!important;}
.row {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}
	


.dpn {display:none !important;}
/* statusbox & overlay*/


#popupOverlay {position: fixed; z-index: 10000; width: 100%; height: 100%; background: rgba(250,250,250,0.9); display: flex; align-items: center; justify-content: center;}
#popupContent {width: 500px; max-width: 80%; max-height: 90%; background-color: #fff;border: 1px solid rgba(0,0,0,.2); overflow: auto; top: 50%; left: 50%; box-shadow: 0px 0px 25px 3px rgba(138,138,138,1); }

#overlayTitle, #statusbox_text { padding: 15px 25px;border-bottom: 1px solid rgba(0,0,0,.05); line-height: 100%; position: sticky; top: 0; background-color: fff; z-index: 999999;}
#overlayTitle h1 { font-size: 15px;}



#statusbox_button { padding: 15px 20px;line-height: 150%; }
#statusbox_button p {line-height: 150%; text-align: center !important;text-align: justify;}
#statusbox_button:hover {cursor: pointer}

#statusbox_message {position: absolute;
right: 0;
top: 0;
height: 50px;
width: 50%; /*border:1px solid;*/
line-height: 45px;}


#statusbox_message ul {text-align: right; padding-right: 20px;}
#statusbox_message ul li {width: 100%;display: inline; white-space: nowrap;text-overflow: ellipsis; overflow: hidden}
#statusbox_message ul li:hover {cursor: default}
/*
#statusbox_message ul li.mes_success {color:#4caf50}
#statusbox_message ul li.mes_error {color:#ea1c0d}
*/
#statusbox_message ul li span {padding-left: 5px;}
#statusbox_message .ajaxloader { height: 20px; margin-top: 17px; }



#rightclickmenu  {width: 220px; background-color: #fff; border: 1px solid rgba(0,0,0,.2);  position: absolute; z-index: 10000;}


.note-icon {padding: 8px 5px !important;}


ul.list { 
    display: block;
    list-style-type: square;
	line-height: 18px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
}



/* progressbar */

.progress-bar { height: 20px; width: 100%; float: left; background: grey; margin: 10px auto 0px auto;}
.progress-bar div { height: 100%; float: left; background: #2196f3; }
.progress-bar div.blue { background: #2196f3 !important; }
.progress-bar div.red { background: #ea1c0d !important; }
.progress-bar div.green { background: #4caf50 !important; }
.progress-bar div.orange { background: #ffbd0b !important; color: #000 !important;}
.progress-bar div { color: #fff !important; line-height: 22px; text-align: center; overflow: hidden;}

/* old and unused

.col-md-12 {-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}
.col-md-9 {-webkit-box-flex: 0;-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;}
.col-md-8 {-webkit-box-flex: 0;-ms-flex: 0 0 66.6%;flex: 0 0 66.6%;max-width: 66.6%;}
.col-md-6 {-webkit-box-flex: 0;-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
.col-md-4 {-webkit-box-flex: 0;-ms-flex: 0 0 33.3%;flex: 0 0 33.3%;max-width: 33.3%;}
.col-md-3 {-webkit-box-flex: 0;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;}

*/


/* file */

.file {width: 33.33%; height: 100px; float:left; padding: 0 10px 0 80px; display: table; }
.file[data-file-type="pdf"] {background: url(../img/icons/002-pdf.png)}
.file[data-file-type="xls"] {background: url(../img/icons/001-xls.png)}
.file[data-file-type="jpg"] {background: url(../img/icons/003-jpg.png)}
.file[data-file-type="zip"] {background: url(../img/icons/008-zip.png)}



.file_details { width: 100%;   display: table-cell;vertical-align: middle; overflow: hidden;  }
.file_title {font-weight: 500; display:inline-block; width: 100%;}
.file_id {font-weight: 400; display:inline-block; width: 100%;}
.file_type_size {font-weight: 300; font-size: 80%;  width: 100%;}

.file[data-file-type]{background-size: auto 60px !important; background-repeat: no-repeat !important; background-position: 10px 50% !important;}

#map { height: 100%; }


/* dropdown (logout etc.) */

.dDown { position: relative; transition: 3s; }
.dDownCnt { display: none; position: absolute; z-index: 850; background-color: #fff; border: 1px solid rgba(0,0,0,.2); box-shadow: 0px 0px 7px 3px rgba(165, 165, 165, 0.6); right: 0; min-width: 100% }
.dDownCnt a { line-height: inherit !important; padding: 12px 20px !important; white-space: nowrap; display: inline-block;  width: 100%; }
.dDownCnt p { line-height: inherit !important; padding: 12px 20px !important; white-space: nowrap; display: inline-block;  width: 100%; text-align: center;}
.dDownCnt a.bTop { border-top: 1px solid rgba(0,0,0,.2); }
.dDownCnt a.bBottom { border-bottom: 1px solid rgba(0,0,0,.2); }
.dDownCnt a:hover, .dDownCnt a:hover i { color: var(--blue) !important; }
.dDownCnt i { font-size: 120%; padding-right: 10px; }
.dDown:hover .dDownCnt, .dDown:active .dDownCnt { display: block; }



/* DOKUMENTE */

.docBox {padding-left: 80px !important; overflow: hidden;}
.docBox[data-fileType="PDF"] {background-image: url(../img/icons/pdf-red.png); background-repeat: no-repeat; background-size: 50px; background-position: 20px center;}

@media only screen and (min-width: 819px) {
	
	/* DESKTOP ONLY */
	
	.desktopDPN {display: none !important;}
	
}

@media only screen and (max-width: 819px) and (min-width: 550px) {
	
	
	
	 /* TOOLTIP */
    .helpIcon {display: none !important}
    
	/* LOGIN */

	#loginBox { width: 400px; padding: 125px 25px 25px 25px; background-position: center 10%; background-size: auto 75px ; background-repeat: no-repeat;}
	
	
	
	
	
	.tablet_dpn, .tabletDPN {display: none !important;}
	#box.w25 {width: 50%;}
    ul.tabs li{ float: none;}
#box.w33 {width: 50%;}
#box.w50 {width: 50%;}
#box.w50w100t {width: 100%;}
#box.w75 {width: 50%;}
#box.w100 {width: 100%;}    
#box.w100t {width: 100% !important}    
.file {width: 50%; height: 100px; float:left; padding: 0 10px 0 80px; display: table; }
    #statusbox_message {width: 40%}
}


@media only screen and (max-width: 549px) and (min-width: 1px) {
	
	/* TOOLTIP */
    .helpIcon {display: none !important}
    
	/* LOGIN */
	#loginBox { width: 90%; padding: 125px 25px 25px 25px; background-position: center 10%; background-size: auto 75px ; background-repeat: no-repeat;}
	
	
	
	
	
	
ul.tabs li{ float: none;}
#header-container-left, #header-container-right {padding: 0 10px; float: left; width: 43%; height: 100%;}
#header-container-middle {width: 14%; float: left; height: 100%;}
#header-container ul li a {line-height: 65px; color: #495057; }

.dDownCnt a { line-height: 40px; !important; }
    
.p-30 {padding: 15px !important;}
.p-40 {padding: 20px !important;}
.p-30 {padding: 20px !important;}
.p-20 {padding: 10px !important;}
.p-10 {padding: 5px !important;}
	.phone_dpn, .phoneDPN, .mobileHide {display: none !important;}
    #boxarea {float: left; width: 100%}
	#box.w25 {width: 100%;}
#box.w33 {width: 100%;}
#box.w50 {width: 100%;}
#box.w75 {width: 100%;}
#box.w100 {width: 100%;}
.sign_in_left {width: 0%; background-image: url(../img/sign_in_bg.jpg); height: 100%; background-size: cover; background-position: center;}
.sign_in_right {width: 100%; height: 100%; padding: 80px 50px 0px 50px;}
    .colum_filename {max-width: 150px; overflow: hidden; text-overflow: ellipsis;}
.file {width: 100%; height: 100px; float:left; padding: 0 10px 0 80px; display: table; }
     #statusbox_message {width: 40%}
	.stay-sticky {position: relative; top: 0;}
} 




/*
.app-path {font-size: 90%;}
.app-path:hover {font-size: 90%; cursor: default}
.app-path a {color: #313435;}
.app-path a:hover {color: #2196f3;}
*/



.wf-box {display: table !important; height: 45px; }
.wf-number { width: 35px; font-size: 25px; display:table-cell; vertical-align: middle; text-align: right; padding-right: 4;}
.wf-text {width: calc(50% - 35px); font-size: 90%; color: #868e96; line-height: 10px; display: table-cell; vertical-align: middle;}