body {
		background-color: #495057 !important;
		font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-feature-settings: normal;
		font-variation-settings: normal;				
		border: 0;
		margin:0;
		padding:0;
	}
	
	/*******************************************************************************************
	 * HEADER
	 *******************************************************************************************/
	.header {
		width:100%; 
        height:110px;
		background-color: #212121 !important; 
	}
	.header-content {
		background-color: rgba(255,255,255, 0);
		margin:auto;
		display: block;
		height:100%;
        width: 80%;
	}
	.header-logo-div {
		display: inline-block;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain; 
		background-image: url("sysimg/treeoflife.png");
		width: 100px;
		height: 100%;
	}
	.header-text-div {
		display: inline-block;
		width: inherit;
		height: 100%;
		vertical-align:top;
		margin-top:50px;
	}
/*	.header-menu-div {
		position: relative;
		margin-top:50px;
		width:100%;
	}*/
    .header-menu-item { font-size: 18px; margin: 25px 10px; padding: 10px 10px; width:auto; height:40px; }
	/*******************************************************************************************
	 * SQL
	 *******************************************************************************************/
    .sqlbody {
        overflow:auto; 
        height:550px;
        width:900px;
    }
    .sqltext {
        display:inline-block;
        vertical-align:top;  
    }
    .sqlcommanddiv {
        display:inline-block;        
    }
    .sqlcommand {
        resize:none; 
        color:gray;
    }
    .sqlstartbutton {
        vertical-align:top;         
    }
    .sqlresultdiv {
        border:1px solid gray;
        width:100%; 
        height:auto; 
        max-height:460px;
        padding:5px;
        display:none;
		font: 0.7em "Arial", serif;
        overflow:auto;
    }
    .sqltable {
        border-collapse: collapse;
        border:1px solid lightgray;
    }
    .sqltable td {
        border:1px solid lightgray;
        padding: 3px; 
    }
	/*******************************************************************************************
	 * LOGIN
	 *******************************************************************************************/
	.login {
		padding: 5px;
		position: absolute;
		top: 28%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 14px;
		width:220px;
		text-align: center;
	}
	.login input {
		margin: 5px;
		border: 0;
		margin: 0;
		border-radius: 0;
		vertical-align:top;
		margin-top:5px;
		width:150px;
	}		
	
	.login input:focus{
		outline: none;
	}
	
	.login img {
		border:1px solid gray;
		margin: 0;
		width: 20px;
		height: 20px;
		vertical-align:top;
	}
	.login .login-field {
		margin: 5px;
		display: inline-block;
		background-color: #fff;
		border: 1px solid gold;
		border-radius: 5px;
	}
	.login-submit {
		text-align: center;
		margin: 10px;
	}
	.login-submit input {
		cursor: pointer;
		height:25px;
	}
	.login-as-guest a {
		font-size: 12px;
		color: #fff;
		margin: 10px;
	}
	
	.login-head {
		text-align: right;
		margin: 15px;
		font-size: 20px;
		color: #B4E11D;
	}
	.login-field-img {
		width: 28px;
		height: 25px;
		display: inline-block;
		background-position: 3px 1px;
		/*background-origin: content-box;*/
		background-repeat: no-repeat;
		background-size: contain; 
	}
	.login-field-img-user {
		background-image: url("/sysimg/user_simple_green.png");
	}
	
	.login-field-img-pw {
		background-image: url("/sysimg/user_padlock_green.png");
	}
	/*******************************************************************************************
	 * NEW ELEMENTS
	 *******************************************************************************************/
    .newelements-clear-btn {
        width:20px; 
    }
    .newelements-clear-btn:hover {
        border:1px solid gray;
        border-radius: 10px;
        cursor:pointer;
    }
	/*******************************************************************************************
	 * CONTENT
	 *******************************************************************************************/
	.content {
		/*position: fixed;*/
		position: absolute;
		top: 110px;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
		padding:2px;
	}
	.content-bg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-position: center top;
		background-repeat: no-repeat;
		background-size: contain; 
		background-image: url("sysimg/treeoflife.png");
		/*background-image: linear-gradient(rgba(0,0,0,0.05), rgba(255,255,255,0.05)), url("sysimg/treeoflife1.png");		*/
		opacity: 0.05;
/*		width:inherit;
		height:inherit;*/
	}
	.setup-content {
		top: 0;		
	}
	/*******************************************************************************************
	 * ERROR
	 *******************************************************************************************/
	#error {
		color: red;
		border: 1px solid red;
		font-size: 12px;
		background-color: #fff;
		height:50px;
		padding-top:10px;
		padding-bottom:10px;
		text-align: center;
		word-wrap: break-word;      /* IE 5.5-7 */
		white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
		white-space: pre-wrap;      /* current browsers */		
	}
	/*******************************************************************************************
	 * MESSAGE
	 *******************************************************************************************/
	#mess {
		color: green;
		border: 1px solid green;
		font-size: 12px;
		background-color: #fff;
		height:20px;
		text-align: center;
		word-wrap: break-word;      /* IE 5.5-7 */
		white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
		white-space: pre-wrap;      /* current browsers */		
	}
	/*******************************************************************************************
	 * DROPDOWN MENU
	 *******************************************************************************************/
	.dropdown {
		overflow: hidden;
		display: inline-block;
		margin-left:30px;
	}
	.dropdown-right {
		float: right;
	}
	.dropdown .dropbtn {
		font-size: 16px;  
		border: none;
		outline: none;
		color: white;
		padding: 8px 16px;
		background-color: inherit;
		font-family: inherit;
		margin: 0;
	}
	.header a:hover, .dropdown:hover .dropbtn {
		background-color: red;
	}
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1000;
	}
	.dropdown-content-right {
		float:right;
	}
	.dropdown-content a {
		float: none;
		color: #7b8379;
		padding: 8px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
		font-size: 13px;
		
	}

	.dropdown-content a:hover {
		background-color: #ddd;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}
	/*******************************************************************************************
	 * DIALOG (MODAL FRAME)
	 *******************************************************************************************/
	.dialog {
		border: 1px solid #9a9998; 
		padding:5px; 
		border-radius: 3px;
		overflow: hidden;
		background-color:white;
	}
	.input-field {
		padding: 5px 10px;
		margin: 0 0;
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		/*font-size: 15px;*/
		color: #6f6765;		
		font: italic 0.8em "Fira Sans", serif;
	}
	.dialog-header {
		border: 1px solid lightgray;
		border-radius: 3px;
		padding:5px;
		background-color: khaki;
		color: gray;
		margin-bottom: 10px;
	}
	.dialog-header-icon {
		vertical-align: top;
		height: 25px;
	}
	.dialog-header-icon-right {
		vertical-align: top;
		height: 25px;
		float:right;
		cursor:pointer;
	}	
	.dialog-buttons-div {
		/*position: absolute;
		bottom:1px;
		left: 0;
		right: 0;
		top: auto;*/
		
		float: right;
		margin:5px; 
		margin-right: 7px; 
		text-align:right;  
	}	
	.button {
		padding:5px 10px; 
		margin:5px;
		cursor: pointer;
	}
	.dialog-chp-img {
		float:left;  
		width: 90px;		
		height: 90px;		
		background-position: center top;
		background-repeat: no-repeat;
		background-size: contain; 
		background-image: url("sysimg/padlock1.png");
	}
	
	.dialog-background {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.6);
	}
	.dialog-background-noalfa {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0);
	}
	
	.dialog-text {
		color: #6f6765;
		font: italic 1.0em "Fira Sans", serif;
	}
	#INPUT, .url-edit {
		width: 300px;
	}
	#INPUT, .address-edit {
		width: 300px;
	}
	#INPUT, .tel-edit {
		width: 200px;
	}
	#INPUT, .name-edit {
		width: 200px;
	}
	/*******************************************************************************************
	 * BACKUP DIALOG
	 *******************************************************************************************/
    .backup-dialog {
        font-family: "Times New Roman", serif;
        font-size: 10px;
        width:400px;
        height: 200px;
    }
    .backup-dialog-body {
		overflow:auto; 
		height:100px;
		border:1px solid gray;
    }    
	/*******************************************************************************************
	 * LOG INFO DIALOG
	 *******************************************************************************************/
    .loginfo-dialog {
        font-family: "Times New Roman", serif;
        font-size: 10px;
        width:1000px;
    }
	.loginfo-table {
		border-collapse:collapse;
	}
	.loginfo-table TD {
		padding: 5px;
		border: 1px solid lightgray;
	}
    .loginfo-dialog-body {
		overflow:auto; 
		height:600px;
		border:1px solid gray;
    }    
	/*******************************************************************************************
	 * CHP DIALOG
	 *******************************************************************************************/
	.chp-text {
		display:block;
		width: 280px;
	}
	.chp-text SPAN {
		text-align: right;
		display:inline-block;
		width: 100px;
		color:  #6f6765;
	}
	.chp-text INPUT[type="password"] {
		width: 160px;
	}
	/*************************************************************
	 *	FAMILY
	 ************************************************************/
    .dialog-familymaintenance { 
        width:100%; 
        max-height: 800px; 
    }    
	.family-div {
		width:700px;
		margin:15px;
		padding:10px;
		color: #6f6765; /*#B4E11D;*/
	}
    
	/*************************************************************
	 *	SEARCHING
	 ************************************************************/
    .dialog-searching { 
        width:100%; 
        max-height: 800px; 
    }    
    
	.searching-input-search-icon	{
		width:30px;
		display:inline-block;
		vertical-align: middle;
		border: 1px solid gray;
		border-radius: 5px;
		cursor:pointer;
		margin: 0;
	}
	
	.searching-input {
		display:inline-block;
		margin: 0;
	}
	
	.searching-input-div {
		width:auto;
		height:auto;
        font-size:13px; 
        margin:10px;
	}
	

	.searching-tags {
		width: auto;
        height: 300px;
		/*border: 1px solid brown;*/
		margin:3px;
		overflow-y: auto; 
		overflow-x: hidden;
	}
	
	.searching-tags-txt {
		font-weight: bold;
		font-style: italic;		
        vertical-align: top;
        margin-right: 10px;
		display: inline;
	}	
	.searchCBDIV {
		display: inline;
		margin-right: 10px;
		border: solid 1px lightgray;
	}
	/*******************************************************************************************
	 * UPLOAD
	 *******************************************************************************************/
	.upload-media-div {
		width:auto;
		margin:15px;
		padding:10px;
		color: #6f6765; /*#B4E11D;*/
	}
	.upload-media-input {
		margin-bottom:10px;
	}
	.upload-media-div SPAN {
		margin-right: 10px;
	}
	/*******************************************************************************************
	 * MAINTENANCE
	 *******************************************************************************************/
	.media-maintenance-table {
		width:100%; 
		border-collapse:collapse;
		color: #f9f9f9;
	}
	.media-maintenance-table tr:nth-child(even){
		background-color: #545b61; /*#f2f2f2;   #495057 */
	}

	.media-maintenance-table tr:hover {
		background-color: #686f75;
		cursor: pointer;
	}
	.maintCol_1 { max-width:140px; text-align:center; display:none;}
	.maintCol_2 { max-width:60px; text-align:center; }
	.maintCol_3 { max-width:100px; text-align:center; }
	.maintCol_4 { max-width:150px; text-align:center; }
	.maintCol_5 { max-width:150px; text-align:center; }
	.maintCol_6 { max-width:150px; text-align:center; }
	.maintCol_7 { max-width:150px; text-align:center; }
	.maintUpperItemsDIV { margin:3px; white-space: nowrap; }
	.maintContentDIV { border:1px solid lightgray; overflow-y:auto; margin:66px 10px 2px 9px; position:absolute; bottom:0;left:0;top:0;right:0; }
	.maintDialog { height: 570px; width: 880px;	}
	.text-column { width:40%; text-align: center; }
	.maintGroupDialog { height: 520px; width: 880px; } 
    /*.maintGroupDialogWithoutImages { height: 520px; width: 480px; }*/
	.maintGroupIMGColumn { width:40%; vertical-align:top; }
	.maintGroupIMGColumnDIV { position:relative; width:365px; height:455px; }
	.maintGroupIMG { border:1px solid gray; width:345px;height:auto; }
	
	/*******************************************************************************************
	 * PERMISSIONS
	 *******************************************************************************************/
	.permission-dialog {
		width:700px;
		height:500px;
		font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-feature-settings: normal;
		font-variation-settings: normal;				
	}
	.permission-table {
		border-collapse: collapse;
		border: 1px solid lightgray;
		font-size:12px;
		width:100%;
	}
	.permission-table th {
		vertical-align:middle;
		border: 1px solid lightgray;
	}
	.permission-table th img {
		width: 20px;
		cursor: pointer;
		float: right;
	}
	.permission-table img:hover {
		border: 1px solid lightgray;
		border-radius:10px;
	}	
	.permission-groups {
		width:40%;
	}
	.permission-persons {
		width:60%;
	}
    .permission-user-list-dialog {
        width:200px;
        height: auto;
        font-size:11px;
    }
    .sql-command-list-dialog {
        width:700px;
        height: auto;
        font-size:11px;
    }
    .tags-list-dialog {
        width:250px;
        height: auto;
        font-size:11px;
    }
    .albums-list-dialog {
        width:350px;
        height: auto;
        font-size:11px;
    }
    .error-list-dialog {
        width:250px;
        height: auto;
        font-size:11px;
    }
    .fulluserlist {
		width:180px;
        display: inline-block;
        border:1px solid gray;
        border-radius:3px;
        margin:3px; 
        padding:3px; 
        cursor: pointer;
    }
    .fullsqlcommandlist {
		width:680px;
        display: inline-block;
        border:1px solid gray;
        border-radius:3px;
        margin:3px; 
        padding:3px; 
        cursor: pointer;
    }
    .fulltaglist {
		width:230px;
        display: inline-block;
        border:1px solid gray;
        border-radius:3px;
        margin:3px; 
        padding:3px; 
        cursor: pointer;
    }
    .fullalbumlist {
		width:334px;
        display: inline-block;
        border:1px solid gray;
        border-radius:3px;
        margin:3px; 
        padding:3px; 
        cursor: pointer;
    }
    .fullerrorlist {
		width:232px;
        display: inline-block;
        border:1px solid gray;
        border-radius:3px;
        margin:3px; 
        padding:3px; 
        cursor: pointer;
    }
    .userlist {
        display: inline-block;
        border:1px solid gray;
        border-radius:3px;
        margin:3px; 
        padding:3px; 
        cursor: pointer;
    }
    
    .grouplist {
        display: block;
        border:1px solid gray;
        border-radius:3px;
        margin:3px; 
        padding:3px; 
        background-color: white; 
        cursor: pointer;
    }
    .selected-group-item {
        background-color: #00cc66;
    }
    .grouplist:hover {
        /*background-color: #ccc; */
    }    
    .grouplist img {
        width: 13px;
        float: right;
        margin-right: 5px;
        margin-left: 2px;
    }
    .userlist img {
        width: 13px;
        float: right;
        margin-right: 2px;
        margin-left: 15px;
    }
	/*******************************************************************************************
	 * SERVER INFO
	 *******************************************************************************************/
	.dialog-serverinfo {
            width:540px;
            height:550px;
            font-family: "Times New Roman", serif;
            font-size: 12px;
            overflow: hidden;
	} 
	/*******************************************************************************************
	 * MAINTENANCE EDITOR
	 *******************************************************************************************/
	.mediamaintenanceedit-table {
		width:100%;
	}	
	.mediamaintenanceedit-table td {
		/*border: 1px solid gray;*/
	}	
	
	.mediamaintenanceedit-table input[type='text'] {
		width:300px;
	}	
	
	.media-maintenanceedit-table-img {
		width: 100%;
        max-height: 100%;
		border: 1px solid gray;
		box-shadow: 8px 8px 5px rgba(0,0,0,0.4);
		display: none; 	
	}
	.media-maintenanceedit-table-img-gif {
		/*width: 100%;*/
		height: auto;
        
		/*border: 1px solid gray;
		box-shadow: 8px 8px 5px rgba(0,0,0,0.4);*/
        
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50px;        
	}
    .media-maintenanceedit-table-img360 {
        width:100%; 
        height:230px; 
        border: 1px solid gray;	
        box-shadow: 8px 8px 5px rgba(0,0,0,0.4);
    }
    
	.mediamaintenanceedit-details-table {
		border-collapse: collapse;
		font-size: 11px;
	}
	
	
	.mediamaintenanceedit-details-table td { 
		border: 1px solid #d7d4d4;
	}
	
	.column-left {
		text-align: right;
		padding-right:5px;
		padding-left:5px;
		font-size:14px;
	}
	.column-right {
		text-align: left;
		padding-right:5px;
		padding-left:5px;
        /*max-width: 150px;*/
	}
	/*******************************************************************************************
	 * MOBIL MENU
	 *******************************************************************************************/
	.overlay {
		width: 0;
		height: 100%;
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.95);
		overflow: hidden;
		transition: 0.4s;
	}
	.rmm-overlay {
		width: 0;
		height: 100%;
		position: fixed;
		z-index: 5;
		right: 0;
		top: 0;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.95);
		overflow: hidden;
		transition: 0.4s;
	}
	
	.overlay-content {
		margin: 10px;
		margin-top: 60px;
	}
	
	.overlay-content-item {
		float: right;
		padding: 5px;
		font-size: 20px;
		font-style: normal;
		color: #f7f5f5;
		width: 210px;
		text-align: right;
	}
	
	.overlay-content-item-rmm {
		float: left;
		text-align: left;
	}
	
	.overlay .closeBtnDIV {
		margin-right:10px;
		float: right;
		font-size: 40px;
		color: #fff;
	}

	.rmm-overlay .rmmCloseBtnDIV {
		float: left;
		margin-left:10px;
		font-size: 40px;
		color: #fff;
	}
	
	.overlay-content-sep {
		padding: 0;
		margin: 0;
		width: 100%;
		border-top: 1px solid #fff;
	}	
	
	.openbtn {
		font-size:30px;
		left: 0px;
		top: 0px;
		font-style: normal;
	}
	/*******************************************************************************************
	 * ALBUM
	 *******************************************************************************************/
	.album-row {
		display: block;
		width:100%;
	}
	.album-column {
		float: left;
		padding: 10px;
		margin: 2px;
	}
	.album-left {
		border: 1px solid #d3d3d3;
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		width: 25rem;
		overflow: auto;
	}
	.album-right {
		border: 1px solid #d3d3d3;
		overflow-y: auto;
		position: absolute;
		bottom: 0;
		top: 0;
		right: 0;
		left:25rem;
		margin-left:3px;
	}
	/*******************************************************************************************
	 * ITEM
	 *******************************************************************************************/
	.itemDIV {
		display: block;
		color: #bfbfbf;
		margin: 0;
		padding: 0;
		border: 0;
		cursor:pointer;
	}
    
	.itemDIV:hover{
        color: gold;
	}
	.itemDIV .item {
		width: auto;
		max-width: 270px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;		
		display: inline-block;
		vertical-align: top;
	}
	.itemDIV .element {
		width: auto;
		display: inline-block;
		vertical-align: top;
	}
	
    .activeItemDIV {
		display: block;
        background-color:#999999;
        color:gold;
        border: 1px solid gold;
        border-radius: 2px;
    	cursor:pointer;
	}
	.activeItemDIV .item {
		width: auto;
		max-width: 270px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;		
		display: inline-block;
		vertical-align: top;
	}
	.activeItemDIV .element {
		width: auto;
		display: inline-block;
		vertical-align: top;
	}

	
	
	
	
	
	/*******************************************************************************************
	 * TIMELINE
	 *******************************************************************************************/
	* {
	  box-sizing: border-box;
	}	 
	/*.timeline-row:after {*/
	.timeline-row {
		display: block;
		width:100%;
	}
	.timeline-column {
		float: left;
		padding: 10px;
		margin: 2px;
	}
	
	.left {
		border: 1px solid #d3d3d3;
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
        width: 16rem;
		overflow: auto;
	}

	.right {
		border: 1px solid #d3d3d3;
		overflow-y: auto;
		position: absolute;
		bottom: 0;
		top: 0;
		right: 0;
		left:16rem;
		margin-left:3px;
	}

            
	AUDIO {
		width: 350px; 
		margin-top: 20px;
	}
	.show-media {
		position: absolute;
		top: 50%;
		left: 50%;
		max-height: 90%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		margin: 0;
		/*resize: both;*/
	}
	
	
	
	
	
	
	
	
	
	
	
	/*.timeline-row {
		content: "";
		display: table;
		clear: both;
		display: flex;
		height: 750px;
		/*border: 1px solid red;*/
		/*background-color: rgb(0,0,0, 0.5);*
	}*/
	
	.timeline-columnL-func {
		width: auto;
		height: 27px;
		/*border: 1px solid brown;*/
		margin: 2px;
		margin-bottom: 5px;  
	}
	
	.timeline-columnL-func-order-btn {
		width: 25px;
		border: 1px lightgray solid;
		cursor: pointer;
	}
	.timeline-columnL-func-order-btn:hover {
		border: 1px gray solid;
	}
		
	.timeline-columnL {
		/*float: left;*/
		width: 20%;
		height: 740px;
		margin: 2px;
		/*border: 1px solid brown;*/
		background-color: white;
	}

	.timeline-columnR {
		float: left;
		width: 76%;
		height: 720px;
		padding-bottom: 20px;
		display: inline-block; 
		position: relative; 
		margin: 2px;
		overflow: hidden; 
		/*overflow-y: scroll;
		overflow-x: hidden;*/
		/*border: 1px solid brown;*/
		background-color: white;
	}
	
	.timeline-timelinediv {
		overflow-y: scroll;
		width:100%;
		height:95%;
	}
	

	.timeline-setIMGs {
		width:100%;
		height:100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		/*box-shadow: 8px 8px 5px rgba(0,0,0,0.5); 
		
		/*transform-origin: 50% 65%;
		transition: transform 5s, filter 3s ease-in-out;*/
		/*filter: brightness(150%);
		transform-origin: 0 0;
		z-index: 1;*/
		
		
		transition: transform .5s, visibility .5s ease-in;		
		/*transform-origin: 50% 65%;
		transition: transform 0.5s, filter 0.5s ease-in-out;
		/*filter: brightness(90%);*/
		
	}

	.timeline-button-div {
		width:100%;
		position: absolute;
		bottom: 0;
		left: 0;		
		margin:auto;
		text-align: center;
		z-index: 100;
	}
	
	.timeline-button {
		width:50px;
		cursor: pointer;
	}
	
/*	.timeline-icons {
		height: 20px;
		width: auto;
		vertical-align: bottom;
		margin-left: 10px;
		margin-right: 10px;
	}*/
	
	#timeLineHeadLine {
		font-family: "Arial Narrow", Arial, sans-serif;
		font-size: 30px;
		/*height: 30px;*/
		margin:5px;
	}
	
	#timeline {
		font-family: Arial, Helvetica, sans-serif;
		border-collapse: collapse;
		border: none;
		width:100%;
	}
	
	#timeline_clock_icon {
		width: 20px;
		vertical-align: middle;
		margin-left: 20px;
		margin-right: 1px;
	}
	

	.timeline-img-thumbnail-div {
		position: relative;
		display: none;
		vertical-align: top;
		cursor: pointer;
		margin: 5px;	
		width: auto;
		height:100px;
		padding: 2px;
		border: 5px 5px 5px 10px;
		background-color: lightgray; /*rgb(0 0 0 / 50%)*/ 
		box-shadow: 10px 10px 5px rgb(0, 0, 0, 40%);
	}
    
    .timeline-img-thumbnail-div-miss {
		position: relative;
		display: none;
		vertical-align: top;
		cursor: pointer;
		margin: 5px;	
		width: auto;
		height:100px;
		padding: 2px;
		border: 5px 5px 5px 10px;
		background-color: red; /*rgb(0 0 0 / 50%)*/ 
		box-shadow: 10px 10px 5px rgb(0, 0, 0, 40%);
    }
    
	
	.timeline-img-thumbnail-img-landscape {
		width: 100%;
		height: 80px;	
		/*border: 1px solid gray;*/
		margin-bottom:13px; 
        object-fit: contain; 
	}	
    
	.timeline-img-thumbnail-img-portrait {
		width: auto;
		height: 80px;	
		border: 1px solid gray;
		margin-bottom:13px;
	}	
	
	.timeline-img-thumbnail-details {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	.timeline-info-img {
		width: 20px;
		height: 20px;
		margin: 10px;
		display: none;
	}
    
	.timeline-type-img {
		position: absolute;
		bottom: 0;
		left: 0;
		width: auto;
		height:14px;
		margin-left: 4px;
		margin-bottom: 2px;
   }
	
	.timeline-maintenance-img {
		position: absolute;
		bottom: 0;
		right: 0;
		width: auto;
		height:16px;
		margin-right: 4px;
		margin-bottom: 1px;
   }
	.timeline-maintenance-img:hover {
        border: 1px solid gray;
        border-radius:10px;
    }
	
	.timeline-img-thumbnail-video {
		width: 100%;
		height: auto;
		max-height: 80px;
	}
	
	.timeline-img-thumbnail-video360 {
		width: 100%;
		padding-bottom: 15px;
	}
	
	.timeline-img-thumbnail-typeimg {
		width: 35px;
		vertical-align: middle;
	}
	
	.timeline-img-thumbnail-typetext {
		font-size: 14px;
		margin-left:5px;
	}

	.timeline-headline-span {
		font-size:40px;
		vertical-align: middle;
	}
	.timeline-control-div {
		width: 100%;
	}
	
	.timeline-img-once-div {
		width: 100%;
		max-height: 750px;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin: 0;
	}
	.timeline-img-once-img {
		margin:15px;
		max-height: 680px;
		max-width: 95%;
		border: 1px solid black;	
		border-radius: 5px;
		box-shadow: 8px 8px 5px rgb(0, 0, 0, 40%);
	/*div > img {*/
		/*display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		min-height: 100%;
		min-width: 100%;
		transform: translate(-50%, -50%);*/
	}
	
	.timeline-img-once-video {
		width: 90%;
		height: auto;
		margin-bottom:10px;
		border: 1px solid black; 
		border-radius: 5px; 
		box-shadow: 8px 8px 5px rgb(0, 0, 0, 40%);
	}
	
	
	#timelinepanorama {
		margin:15px;
		max-height: 680px;
		max-width: 95%;
		width:1000px;
		height:700px;
		border: 1px solid black; 
		border-radius: 5px; 
		box-shadow: 8px 8px 5px rgb(0, 0, 0, 40%);
	}
	/*******************************************************************************************
	 * PROFIL EDITOR
	 *******************************************************************************************/
	.profil-edit-left-column {
		text-align:right;
		padding-right:10px;
	}