.tpIconLangDe { background:transparent url(../images/flags/de.png) no-repeat !important; width:32px;}
.tpIconLangEn { background:transparent url(../images/flags/en.png) no-repeat !important; width:32px;}
.tpIconLangFr { background:transparent url(../images/flags/fr.png) no-repeat !important; width:32px;}
.tpIconLangEs { background:transparent url(../images/flags/es.png) no-repeat !important; width:32px;}
.tpIconLangHr { background:transparent url(../images/flags/hr.png) no-repeat !important; width:32px;}
.tpIconLangSr { background:transparent url(../images/flags/sr.png) no-repeat !important; width:32px;}


.tp-user-name{
	white-space: nowrap;
}

.tp-organization-name{
	font-size: 80%;
	white-space: nowrap;
}

.tp-autosize-parent{
	width: 100%;
	height: 100%;
	display: flex; 
	flex-flow: column;
}

.tp-autosize-child-parent{
	flex: 1 1 auto;
	overflow: hidden;
	display: flex; 
	flex-flow: column;
	min-height: 100px;
}

.tp-autosize-child-parent-row{
	flex: 1 1 auto;
	overflow: hidden;
	display: flex; 
	flex-flow: row;
	min-height: 100px;
}


.tp-autosize-child{
	flex: 1 1 auto;
	overflow: hidden;
	min-height: 100px;
}

.tp-autosize-child-scroll{
	flex: 1 1 auto;
	overflow: auto;
	min-height: 100px;
}		

.tpPanelNoPadding{
	padding: 0px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelNoPaddingLeft{
	padding-left: 0px !important;
	margin-left: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelNoPaddingRight{
	padding-right: 0px !important;
	margin-right: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelNoPaddingHorizontal{
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelNoPaddingHorizontalTop{
	padding-top: 0px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelNoPaddingHorizontalBottom{
	padding-bottom: 0px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelMinPaddingHorizontal{
	padding-top: 4px !important;
	padding-bottom: 2px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}



.ui-panelgrid-cell-left {
	padding-left:unset;
}

.ui-panelgrid-cell-right {
	padding-right:unset;
}

.tpPanelNoPaddingVertical{
	padding-left: 0px !important;
	padding-right: 0px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelNoPaddingVerticalRight{
	padding-right: 0px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

.tpPanelNoPaddingVerticalLeft{
	padding-left: 0px !important;
	margin: 0px !important;
	border-collapse: collapse !important;
	border: 0px !important;
}

/**					
.selectMenu { 
	display: inline-block; 
	vertical-align: top; 
	text-align:left; 
}

.ui-layout-pane{
	border: 0px !important;
}

.tpTable > .ui-paginator{
	height : 30px;
}

.ui-editable-column.flexCell{
	display:flex;
}

.ui-selectonemenu100{
	 width: 100% !important;
	 max-width: 100% !important;
}

.ui-selectonemenu100.ui-selectonemenu-label{
	
}

.ui-selectonemenu-filter-container{
	width: 99%;
}

.ui-selectonemenu-panel .ui-selectonemenu-filter {
    width: 80%;
    padding-right: 15px;
}
**/

/**.ui-fileupload-content{
	display:none;
}

.timeline-event-content{
	width:100%; 
	height:100% !important;
	margin:0px !important;
}

.timelineContextMenu{
	width:100%; 
	height:100% !important;
	padding:5px;
}	

.controlPanel{
	width: 100%;
	padding-top: 5px;
	display: block;
	margin: 0px;
	text-align: right;
}
**/


.ui-selectonemenu-filter-container{
	width: 99%;
}

.img-avatar{
	width: 100%;
	height: 100%;
	
	background-size: cover;
	display: block;
	border-radius: 50%;
}

.img-avatar-inline{
	width: 36px;
	height: 36px;
	
	background-size: cover;
	display: block;
	border-radius: 50%;
}

.img-no-avatar{
	font-size:60px;	
}

.layout-menu-slim  .img-no-avatar,
.menu-layout-horizontal  .img-no-avatar{
	font-size:40px;	
	display:block !important;
}

.cropper-view-box,
.cropper-face {
	border-radius: 50%;
}

.tpTable > .ui-datatable-footer{
	padding : 0px !important;
}

.tpTable .ui-treetable-footer{
	padding : 0px !important;
}


.excel{
	background: url("/portal/javax.faces.resource/images/excel.png.jsf?ln=tepcon") no-repeat;
	background-size: contain;
}

.pdf{
	background: url("/portal/javax.faces.resource/images/pdf.png.jsf?ln=tepcon") no-repeat;
	background-size: contain;
}

.csv{
	background: url("/portal/javax.faces.resource/images/csv.png.jsf?ln=tepcon") no-repeat;
	background-size: contain;
}

.xml{
	background: url("/portal/javax.faces.resource/images/xml.png.jsf?ln=tepcon") no-repeat;
	background-size: contain;
}

.ui-datascroller-item-image{
	display: inline-block;
	position: relative;
	width: calc(100% - 40px);
	max-width: 350px;
	height: 200px;		
	margin: 20px;
	background-color: #e8e8e8;
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover;
	border-radius: 10px;
	text-align: center;
	font-family: 'Cairo', sans-serif;
	font-weight: lighter;
	font-size: 12pt;
	color: black;
	line-height: 13pt;
	box-shadow: 0px 0px 10px rgba(0,0,0, 0.5);	
	transition: box-shadow 0.1s ease-in-out, transform 0.3s ease-in-out;
}

.ui-datascroller-item-image:hover {
	box-shadow: 0px 0px 15px rgba(0,0,0, 0.5);
	transform: scale(1.02);	
}

.ui-datascroller-item-image:active {
	box-shadow: 0px 0px 15px rgba(0,0,0, 0.5);
	transform: scale(1);	
}

.ui-datascroller-item-image-logo-placeholder {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	height: 100px;
	width: 100%;
	overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ui-datascroller-item-image-name {
	position: absolute;
	width: calc(100% - 36px);
	height: 20px;
	background-color: white;
	border-radius: 20px;
	text-align: center;
	color: black;
	margin: auto auto 0px auto;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 10px #7a7a7a;
	padding: 0px 8px;
}

.ui-datascroller-item-image-name-big {
	position: absolute;
	width: calc(100% - 36px);
	text-align: center;
	color: white;
	font-size: xx-large;
    font-weight: 500;
    line-height: normal;
    text-shadow: 0px 0px 8px rgba(0,0,0, 0.5);
	margin: auto auto 0px auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0px 8px;
}

.ui-datascroller-item-image-state {
	position: absolute;
	width: 100px;
	height: 20px;
	border-radius: 20px;
	text-align: center;
	font-size: 9pt;
	line-height: 15pt;
	top: 10px;
	left: 10px;
	box-shadow: 0px 0px 10px #7a7a7a;
	padding: 0px 8px;
}

.detail-status-pill {
	display: inline-block;
	height: 32px;
	width: 150px;
	border-radius: 16px;
	text-align: center;
	line-height: 2.3;
	box-shadow: 0px 1px 2.5px #7a7a7a;
	color: black;
	margin-right: 0.25em;
	padding: 0px 8px;
	vertical-align: bottom;
}

.ui-icon-commit-add {
	background: url("/portal/images/buttonIcons/commit-add.svg");
	filter: invert(1);
	background-size: contain;
	transform: scale(0.8);
}

.ui-icon-commit-remove {
	background: url("/portal/images/buttonIcons/commit-remove.svg");
	filter: invert(1);
	background-size: contain;
	transform: scale(0.8);
}

.ui-icon-commit-accept {
	background: url("/portal/images/buttonIcons/commit-accept.svg");
	filter: invert(1);
	background-size: contain;
	transform: scale(0.8);
}

.ui-icon-commit-cancel {
	background: url("/portal/images/buttonIcons/commit-cancel.svg");
	filter: invert(1);
	background-size: contain;
	transform: scale(0.8);
}

.text-overflow-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.resizer {
    width: 20%;
    min-width: 14px;
    max-width: 1000px;
	top: 0px;
    bottom: 0px;
    position: relative;
    flex: none;
	overflow: hidden;
    overflow-wrap: anywhere;
}

.resizer-handler {
    position: relative;
	display: inline-block;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    min-width: 10px;
	height: 100%;
    padding: 0 1px;
    margin: 0 1px;
    background-color: #f7f7f7;
    transition: background-color 250ms ease-in-out;
    border-radius: 3px;
    cursor: ew-resize;
    line-height: 5px;
    font-size: 14px;
}

.resizer-handler:hover, .resizer-handler-horizontal:hover {
    background-color: #e8e8e8;
	transition: background-color 250ms ease-in-out;
}

.resizer-handler:before {
    content: '• • •';
    color: #212121;;
    width: 10px;
    position: absolute;
    top: 50%;
    font-weight: 300;
    line-height: 10px;
    font-size: 24px;
    text-align: center;
    margin-top: -15px;
}

.resizer-horizontal {
    height: 20%;
    min-height: 14px;
    max-height: 1000px;
	width: 100%;
    position: relative;
	flex: none;
	overflow: hidden;
    overflow-wrap: anywhere;
}

.resizer-handler-horizontal {
    position: relative;
	display: block;
    right: 0;
    top: 0;
    bottom: 0;
    height: 10px;
    min-height: 10px;
	width: 100%;
    padding: 1px 0;
    margin: 1px 0;
    background-color: #f7f7f7;
    transition: background-color 250ms ease-in-out;
    border-radius: 3px;
    cursor: ns-resize;
    line-height: 5px;
    font-size: 14px;
}

.resizer-handler-horizontal:before {
    content: '• • •';
    color: #212121;;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    line-height: 10px;
    font-size: 24px;
    text-align: center;
    letter-spacing: -1.5px;
}

.frame-detail-header {
	padding: 5px 5px 0px 5px;
	background-color: white;
	height: 20px;
	text-align: right;
}

.frame-detail-header-button {
	background-color: white;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	color: #757575;
	cursor: pointer;
}

.frame-detail-header-button:hover {
	background-color: #e8e8e8;
}

.swipe-translate {
	transition: transform 0.5s;
}

.swipe-translate-in {
	transform: translatex(0%);
}

.swipe-translate-out-left {
	transform: translatex(-100%);
}

.swipe-translate-out-right {
	transform: translatex(100%);
}

.hidden {
	display: none;
}

.no-padding {
	padding: 0px;
}

.no-padding h1 {
	padding-left: 25px;
}

.overflow-hidden {
	overflow: hidden;
}

.ui-selectcheckboxmenu-multiple.ui-selectcheckboxmenu.ui-widget.ui-state-default.ui-corner-all {
    background: unset;
}

.ui-datatable.borderless thead th,
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
}


.tp-header-hidden .ui-treetable-scrollable-header-box{
	display: none;
}



.overviewTableUpdate[max-width~="400px"] .tp-mobile-hidden-inline,
.overviewTableUpdate[max-width~="400px"] .tp-mobile-hidden-cell,
.overviewTableUpdate[max-width~="400px"] .tp-mobile-hidden-flex{
	display : none;
}
			
.overviewTableUpdate[max-width~="400px"] .tp-mobile-show-cell{
	display:table-cell;
}

.overviewTableUpdate[max-width~="400px"] .tp-mobile-show-inline{
	display:inline;
}
.overviewTableUpdate[max-width~="400px"] .tp-mobile-show-flex{
	display:flex;
}
                            
            .overviewTableUpdate[max-width~="300px"] .tpColumnIcon.tp-column-no-title{
	display:table-cell;
}

.overviewTableUpdate[max-width~="300px"] .tpColumnIcon.tp-column-no-title{
	display : none;
}
                            
            .overviewTableUpdate[max-width~="200px"] .tp-column-no-title{
	display:table-cell;
}

.overviewTableUpdate[max-width~="200px"] .tp-column-no-title{
	display : none;
}

@media screen and (max-width : 1024px)  {
	.tp-mobile-hidden,
	.tp-mobile-hidden-inline,
	.tp-mobile-hidden-flex,
	.tp-mobile-hidden-cell{
		display:none;
	}
	
	.tp-mobile-show{
		display:block;
	}
	.tp-mobile-show-inline{
		display:inline;
	}
	.tp-mobile-show-flex{
		display:flex;
	}
	
	.tp-mobile-show-cell{
		display:table-cell;
	}
	
	.tableDialogMobile .ui-dialog-titlebar{
		width: 90%;
	}
	.tableDialogMobile .ui-dialog-title{
		width: 100%
	}
	.tableDialogMobile button{
		float: right;
	}
	.leaflet-control-zoomslider{
		display:none;
	}
	
	.ui-tooltip {
		visibility:hidden;
	}
	
	.menu-bar > ul > li > a > .ui-menuitem-text{
  		display: none !important
	}
	
	.ui-tabs-nav > li > a {
    	padding: 10px 5px;
    	font-size: 90%;
	}
}

@media screen and (min-width : 1025px)  {
	.tp-mobile-hidden{
		display:block;
	}
	.tp-mobile-hidden-inline{
		display:inline;
	}
	.tp-mobile-hidden-flex{
		display:flex;
	}
	.tp-mobile-hidden-cell{
		display:table-cell;
	}
	
	
	/** only show on mobile **/
	.tp-mobile-show,
	.tp-mobile-show-inline,
	.tp-mobile-show-flex,
	.tp-mobile-show-cell{
		display:none;
	}
}


/**
	map animation classes
**/
.mobileMapSettings{
	display:none;
}

@media screen and (max-width : 640px)  {
	#SideFrameResizer > .resizer-handler{
		display: none;
	}
	
	.mobileMapSettings{
		display:block;
	}	
	
	.mobileNoneSettings{
		display:none;
	}	
	
	.left-out-pos{
		left : -640px;
	}
	
	.left-in-pos{
		left : 0px;
	}
	
	
	.right-out-pos{
		left : 640px;
	}
	
	.right-in-pos{
		left : 0px;
	}
}

.fade-out-map {
  	animation: fadeOutMap ease 1.5s;
  	-webkit-animation: fadeOutMap ease 1.5s;
  	-moz-animation: fadeOutMap ease 1.5s;
  	-o-animation: fadeOutMap ease 1.5s;
  	-ms-animation: fadeOutMap ease 1.5s;
}

@keyframes fadeOutMap {
  	0% {
    	opacity:1;
  	}
  	100% {
    	opacity:0;
  	}
}

.fade-in-map {
  	animation: fadeInMap ease 1.5s;
  	-webkit-animation: fadeInMap ease 1.5s;
  	-moz-animation: fadeInMap ease 1.5s;
  	-o-animation: fadeInMap ease 1.5s;
  	-ms-animation: fadeInMap ease 1.5s;
}

@keyframes fadeInMap {
  	0% {
    	opacity:0;
  	}
  	100% {
    	opacity:1;
  	}
}


.left-out-map {
	animation: leftOutMap ease 1.5s;
  	-webkit-animation: leftOutMap ease 1.5s;
  	-moz-animation: leftOutMap ease 1.5s;
  	-o-animation: leftOutMap ease 1.5s;
  	-ms-animation: leftOutMap ease 1.5s;
}
				
.left-in-map {
	animation: leftInMap ease 1.5s;
  	-webkit-animation: leftInMap ease 1.5s;
  	-moz-animation: leftInMap ease 1.5s;
  	-o-animation: leftInMap ease 1.5s;
  	-ms-animation: leftInMap ease 1.5s;
}
				
@keyframes leftOutMap {
	0%   {left: 0px}
	100% {left: -640px;}
}
				
				
@keyframes leftInMap {
	0%   {left: -640px}
	100% {left: 0px;}
}

.right-out-map {
	animation: rightOutMap ease 1.5s;
  	-webkit-animation: rightOutMap ease 1.5s;
  	-moz-animation: rightOutMap ease 1.5s;
  	-o-animation: rightOutMap ease 1.5s;
  	-ms-animation: rightOutMap ease 1.5s;
}
				
.right-in-map {
	animation: rightInMap ease 1.5s;
  	-webkit-animation: rightInMap ease 1.5s;
  	-moz-animation: rightInMap ease 1.5s;
  	-o-animation: rightInMap ease 1.5s;
  	-ms-animation: rightInMap ease 1.5s;
}
				
@keyframes rightOutMap {
	0%   {right: 0px}
	100% {right: 640px;}
}
				
				
@keyframes rightInMap {
	0%   {right: 640px}
	100% {right: 0px;}
}



.right-divider-left{
	animation: rightDividerLeft ease 1.5s;
  	-webkit-animation: rightDividerLeft ease 1.5s;
  	-moz-animation: rightDividerLeft ease 1.5s;
  	-o-animation: rightDividerLeft ease 1.5s;
  	-ms-animation: rightDividerLeft ease 1.5s;
}
				
.right-divider-right {
	animation: rightDividerRight ease 1.5s;
  	-webkit-animation: rightDividerRight ease 1.5s;
  	-moz-animation: rightDividerRight ease 1.5s;
  	-o-animation: rightDividerRight ease 1.5s;
  	-ms-animation: rightDividerRight ease 1.5s;
}
				
@keyframes rightDividerLeft {
	0%   {width: 100%;}
	100% {width: 0%;}
}
				
				
@keyframes rightDividerRight {
	0%   {width: 0%;}
	100% {width: 100%;}
}


.tp-column-no-title > .ui-column-title{
 	display:none;
}

.ui-tabs-scrollable .ui-tabs-nav {
    width: 50000px;
}