/*######################################################################################

    Copyright (c) 2007-2024 NIT-MREZA D.O.O. All rights reserved.

    This work is the property of the company NIT-Mreza d.o.o. and may without express
    written permission not to be copied, modified, distributed or be published.

    Codename: Quantura
    Filename: %FILENAME%
    Last updated: %LAST_UPDATED%
    Description:

  ######################################################################################*/

/*--- Header ----------------------------------------------------------*/

.header {
	position: relative;
	height: 55px;
	margin-left: auto; margin-right: auto;
	border-bottom: 0;
    box-shadow: 0 3px 4px 0 rgba(0,0,0,.2), 0 3px 3px -2px rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
}


.header .status {
	z-index:1;
	right: 0px;
	position: absolute;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;	
	float: right;
	color: #eeeeee;	
    font-weight: normal;										   
	margin-top: 4px;
	padding-right: 5px;
}

.header .status a {
	text-decoration: none;
	color: #eeeeee;
}

.header .status a:hover {
	color: #357AE8;
}

.header select {
	font-size: 11px;
	height: 18px;
	padding: 0px;
}

.header .block {
	float: right;
	padding-left: 5px;	
	padding-right: 5px;		
	font-size: 12px;
}

.header .logo {
	float: left;
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	color: #EFEFEF;
	width: 176px;
	line-height: 55px;
	padding-left: 42px;
  	background-repeat:  no-repeat;
  	background-position:  10px 15px;
  	background-size: 24px 24px;
  	background-image: url("../svg/logo.svg");
}

.header .title {
	font-family: 'Roboto', sans-serif;
	font-size: 31px;
	color: #FFFFFF;
	padding-top: 35px;
	width: 338px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.header .subtitle {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: normal; 
	color: #999999;
	width: 338px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.header .msgbox {
	width: 610px;
	margin-left: auto;
	margin-right: auto;
}

.header .inputbox {
	width: 340px;
	padding: 5px;
	border-bottom: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.header .inputbox input {
	height: 15px;
}

.header .btnbox {
	width: 350px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

.header .iconbox {
	width: 350px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.header .customer {
	width: 350px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 15px;
	color: #999999;
}

.header .information {
	width: 350px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 11px;
	color: #999999;
}



.header .txt {
	float: right;
	line-height: 42px;
	margin-right: 20px;
	color: #FFFFFF;
	font-size: 15px;	
}

.header #btn {
	float: right;
	margin-top: 15px;
	margin-right: 10px;
}

/*--- Login ----------------------------------------------------------*/

.logBox {
	width: 490px;
	border: 1px solid;	
	border-color: #DBDBDB #DBDBDB #DBDBDB #DBDBDB;		
	background-color: #F6F6F6;	
	margin-left: auto; margin-right: auto;
}

.logBox #login {	
	margin-top: 20px;
	margin-left: 74px;
	margin-right: 74px;	
	padding-bottom: 30px;
}

.logBox #logout {	
	font-size: 15px;
	margin-top: 40px;
	margin-left: 74px;
	margin-right: 74px;	
	padding-bottom: 60px;
}


/*--- Logo ----------------------------------------------------------*/

.bCL_logo {
	width: 128px;
    height: 128px;    
	margin: 0 auto;    
    background-image: url("../svg/logo.svg");
}

.bCL_clearLogo {
	background: none;
}

.bCL_loadingLogo {
	margin: 0 auto;	
	top: 35px;
	left: calc(50% - 64px);	
	position: absolute;
	width: 128px;
	height: 128px;
	background-image: url("../svg/logo.svg");
	animation: spin 1s;
	z-index:99999;	
}

#bCL_loader {
	display: none;
}

#bCL_fader {
	display: block;
	position: fixed;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background:#000000;
	opacity: 0.0;
	filter:Alpha(Opacity=0);	
	z-index:99998;
}

/*--- Infobar ----------------------------------------------------------*/
#pci {
	margin-left: auto; margin-right: auto;
	height: 40px;
	line-height: 42px;
	overflow: hidden;	
	border-bottom: 1px solid #E0E0E0;
}

#pci .page-layout {
	overflow: hidden;	
	height: 40px;
	background: #F6F6F6;
}

#pci .title1 {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;			
	overflow: hidden;	
	float: left;
	padding-left: 13px;
	width: 201px;
	color: #000000;
	font-weight: 400;
	background: #F6F6F6;
	border-right: 1px solid #E0E0E0;			
	height: 40px;
}

#pci .filter1 {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;			
	overflow: hidden;	
	float: left;
	padding-left: 13px;
	width: 201px;
	color: #000000;
	font-weight: 400;
	background: #F6F6F6;
	border-right: 1px solid #E0E0E0;			
	height: 40px;
}

#pci .filter1 svg {
	margin-top: 8px;
	margin-right: 5px;	
	width: 24px;
	padding: 0px;
	float: left;
	fill: rgba(0,0,0,0.54);
}


#pci .boxLeft {
	float: left;
	padding-left: 24px;	
}

#pci .boxRight {
	float: right;
	padding-left: 10px;
	margin-right: 0px;
	margin-top: 0px;
	line-height: 23px;
}



#pci .menu_left {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;	
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
	padding-top: 1px;
	color: #357AE8;
	cursor: default;	
}

#pci .menu_left li {
	float: left;
	list-style-type: none;
	padding: 0 10px;
	margin: 0;
	background: url(../elements/arrow_right.png) no-repeat left;
}

#pci .menu_left li.firstElement {
	padding-left: 0;
	background: transparent;
}

#pci .menu_left a {
	color: #666666;
}

#pci .menu_right li {
	float: left;
 	cursor: pointer;
    cursor: hand;
	padding: 0px 10px 0px 34px;    	
	border: 1px solid transparent;	
}

#pci .menu_right li:hover  {
	border: 1px solid #129BED;
	background-color: #79C7F4;
}

#pci .title2 {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;			
	overflow: hidden;		
	float: left;
	padding-left: 13px;
	width: 201px;
	color: #FFFFFF;
	font-weight: 400;
}

#pci .filter2 {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;			
	overflow: hidden;	
	float: left;
	padding-left: 13px;
	width: 201px;
	color: #FFFFFF;
	font-weight: 400;
	height: 40px;
}

#pci .filter2 svg {
	margin-top: 8px;
	margin-right: 5px;	
	width: 24px;
	padding: 0px;
	float: left;
	fill: rgba(255,255,255,1);
}

#pci .title3 {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;			
	overflow: hidden;		
	float: left;
	padding-left: 10px;
	width: 830px;
	color: #FFFFFF;
	font-weight: 400;
}

#pci .page-layout2 {
	overflow: hidden;	
	height: 40px;
	background: #F6F6F6;		
}

#pci .page-layout2 a {
	color: #EFEFEF;
}

#pci .page-layout2 .menu_left {
	color: #EFEFEF;
}

#pci .page-layout2 .menu_right {
	color: #FFFFFF;
}

#pci .page-layout2 .btn {
	color: #FFFFFF;
}

#pci .page-layout3 {
	background-color: #3D3D3D;	
	height: 40px;
}

#pci .page-layout3 .btn {
	color: #FFFFFF;
}

#pci .page-layout3 .btn:hover {
	border: 1px solid transparent;
	background-color: #DE061A;
	color: #FFFFFF;
}

#pci .page-layout3 .ml {
	float: left;
	padding-left: 10px;
}

#pci .page-layout3 .mr {
	float: right;
	padding-right: 2px;
	margin-top: 2px;
}


/*--- Content ----------------------------------------------------------*/
#pcc {
	margin-left: auto; margin-right: auto;
	margin: 0px;
	background: #f6f6f6;	
	height: -moz-calc(100% - 85px);
	height: -webkit-calc(100% - 85px);
	height: -o-calc(100% - 85px);
	height: calc(100% - 85px);	
}

#pcc #page-layout {
	padding: 20px 20px 20px 20px;
	border-top: 1px solid #DBDBDB;				
	background-color: #f6f6f6;	
	overflow: hidden;	
}


/*--- Content ----------------------------------------------------------*/

#bOut1 {
	margin-left: auto; margin-right: auto;
	height: 100%;
	width: 100%;
}

#bOut1 #bLC_1 {
	padding: 10px 0px 30px 0px;
	/*background-color: #F6F6F6;*/
	border-right: 1px solid #E0E0E0;
	width: 214px;	
	height: -moz-calc(100%);
	height: -webkit-calc(100%);
	height: -o-calc(100%);
	height: calc(100%);
	float: left;
	
	height: -moz-calc(100% - 136px);
	height: -webkit-calc(100% - 136px);
	height: -o-calc(100% - 136px);
	height: calc(100% - 136px);
	
	overflow-x: hidden;
    overflow-y: auto;	
}

#bOut1 #bLC_1 h6 {
    color: black;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

#bLC_1::-webkit-scrollbar-track,
.cbLCScroll::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#bLC_1::-webkit-scrollbar,
.cbLCScroll::-webkit-scrollbar {
	width: 4px;
	background-color: #F5F5F5;
}

#bLC_1::-webkit-scrollbar-thumb,
.cbLCScroll::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #CCCCCC;
}

#bLC_1_fade {
	display: none;
	z-index:10;
	position: fixed;
	width: 214px;
	height: -moz-calc(100% - 96px);
	height: -webkit-calc(100% - 96px);
	height: -o-calc(100% - 96px);
	height: calc(100% - 96px);
	top:96px;
	left:0px;
	background: rgba(255,255,255,0.502);
}

#bLC_2_fade {
	display: none;
	z-index:10;
	position: fixed;
	width: 214px;
	height: -moz-calc(100% - 96px);
	height: -webkit-calc(100% - 96px);
	height: -o-calc(100% - 96px);
	height: calc(100% - 96px);
	top:96px;
	left:214px;
	background: rgba(255,255,255,0.502);
}

#bOut1 #bRC_1 {
	background-color: #FFFFFF;			
	height: -moz-calc(100% - 96px);
	height: -webkit-calc(100% - 96px);
	height: -o-calc(100% - 96px);
	height: calc(100% - 96px);
	overflow: auto;
}

#bOut1 #dataContent1 {
	padding: 24px;
	overflow: hidden;
}

#bOut1 #bLC_1 .b-search,
#bOut1 #bLC_1 .b-print,
#bOut1 #bLC_1 .b-reset,
#bOut1 #bLC_1 .b-export,
#bOut1 #bLC_1 .b-import,
#bOut1 #bLC_1 .sb-grey,
#bOut1 #bLC_1 .sb-green,
#bOut1 #bLC_1 .sb-blue,
#bOut1 #bLC_1 .bb-green,
#bOut1 #bLC_1 select {
	width: 175px;
}

#bOut1 #bLC_1 input {
	width: 165px;
}

/*--- Content ----------------------------------------------------------*/
#bOut2 {
	margin-left: auto; margin-right: auto;
	height: 100%;
	width: 100%;
}

#bOut2 #bLC_2 {
	padding: 10px 0px 30px 0px;
	background-color: #F6F6F6;
	border-right: 1px solid #E0E0E0;
	width: 214px;	
	height: -moz-calc(100% - 80px);
	height: -webkit-calc(100% - 80px);
	height: -o-calc(100% - 80px);
	height: calc(100% - 80px);
	float: left;
	overflow-x: hidden;
    overflow-y: auto;
}

#bOut2 #bRC_2 {
	background-color: #FFFFFF;			
	height: -moz-calc(100% - 40px);
	height: -webkit-calc(100% - 40px);
	height: -o-calc(100% - 40px);
	height: calc(100% - 40px);
	overflow: auto;
}

#bOut2 #dataContent2 {
	padding: 24px;
	overflow: hidden;
}

/*
#bOut2 #BOXA {
	padding: 10px 10px 30px 10px;	
	border-left: 1px solid #DBDBDB;		
	border-right: 1px solid #DBDBDB;				
	border-bottom: 1px solid #DBDBDB;
	background-color: #FFFFFF;	
	overflow: hidden;	
}

#bOut2 #BOXB {
	padding: 10px 10px 30px 5px;	
	border: 1px solid #DBDBDB;		
	background-color: #FFFFFF;	
	overflow: hidden;	
}
*/


/*--- Content ----------------------------------------------------------*/
#bOut3 {
	margin-left: auto; margin-right: auto;
	width: 100%;
	height: 100%;	
}

#bOut3 #bCC_3 {
	background-color: #FFFFFF;
	height: -moz-calc(100% - 40px);
	height: -webkit-calc(100% - 40px);
	height: -o-calc(100% - 40px);
	height: calc(100% - 40px);
	overflow: auto;
}

#bOut3 #dataContent3 {
	padding: 14px;
	overflow: hidden;
}

/*
#bOut3 #BOXA {
	padding: 10px 10px 30px 5px;	
	border-left: 1px solid #DBDBDB;		
	border-right: 1px solid #DBDBDB;				
	border-bottom: 1px solid #DBDBDB;
	background-color: #FFFFFF;	
	overflow: hidden;	
}

#bOut3 #BOXC {
	padding: 10px 10px 30px 10px;	
	border-left: 1px solid #DBDBDB;		
	border-right: 1px solid #DBDBDB;				
	border-bottom: 1px solid #DBDBDB;
	background-color: #FFFFFF;	
	overflow: hidden;	
}

#bOut3 #BOXB {
	padding: 10px 10px 30px 5px;	
	border: 1px solid #DBDBDB;		
	background-color: #FFFFFF;	
	overflow: hidden;	
}
*/

/*--- Content ----------------------------------------------------------*/
#bOut4 {
	margin-left: auto; margin-right: auto;
	width: 100%;
	height: 100%;	
}

#bOut4 #bCC_4 {
	background-color: #FFFFFF;
	height: -moz-calc(100% - 40px);
	height: -webkit-calc(100% - 40px);
	height: -o-calc(100% - 40px);
	height: calc(100% - 40px);
	overflow: auto;
}

#bOut4 #dataContent4 {
	padding: 14px;
	overflow: hidden;
}

/*--- Content ----------------------------------------------------------*/
#bOut5 {
	margin-left: auto; margin-right: auto;
	margin: 0px;
	overflow: hidden;	
}

#bOut5 #bCC_5 {
	overflow: hidden;	
}

#bOut5 #dataContent5 {
	padding: 5px;
}

#bOut5 #dataContent6 {
	padding: 10px;
}

#bOut5 #dataContent7 {
	padding: 0px;
}

#bOut5 h1 {
	margin: 5px 0px 0px 0px;
	color: #357AE8;
	text-transform: uppercase;;
	font: 400 17px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

#bOut5 h2 {
	margin: 5px 0px 0px 0px;
	color: #333333;
	font: 500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

#bOut5 #dataContent5 #css_padding {
	padding: 10px;
}

#bOut5 h5 {
	font-size: 14px;
	color: #333333;
}

#bOut5 h6 {
	font-size: 13px;
	padding: 10px 0px 0px 0px;	
}

/*--- Box ---------------------------------------------------------*/
#BOXA {	
	padding: 12px;	
	margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #fff;	
	overflow: hidden;	
}

#BOXC {
	padding: 12px;	
	margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #fff;	
	overflow: hidden;		
}

#BOXB {
	padding: 12px;	
	margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #fff;	
	overflow: hidden;	
}

#BOXT {
	margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #fff;	
	overflow: hidden;	
}

#BOXD {
	padding: 12px;	
	margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #DCDCDC;
    border-radius: 2px;
    background: #FAFAFA;	
	overflow: hidden;	
}

#BOXE {
	padding: 12px;	
	margin-bottom: 28px;
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #F2F2F2;
	overflow: hidden;	
}

#BOXI {
	float: left;
    background: #fff;	
	overflow: hidden;	
	padding: 7px 14px 7px 0px;
	max-height: 40px;
	overflow-y: auto;
	font-size: 14px;
}

#BOXV {
	float: left;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    background: #fff;	
	overflow: hidden;	
	padding: 7px;
	width: 580px;
	min-height: 180px;
	max-height: 180px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.4em;
}

/*--- Splash ---------------------------------------------------------*/

#boxSplash {
	margin-left: auto; margin-right: auto;
	margin: 0px;
	overflow: hidden;	
	background-color: #FFFFFF;
	/*background: #FFFFFF url(../site/content_left.jpg) repeat-y left;*/
	border-right: 1px solid #CCCCCC;
}

#boxSplash #boxContentColumn {
	padding: 0px;
	border-left: 1px solid #CCCCCC;		
	border-top: 1px solid #CCCCCC;				
	background-color: #FFFFFF;	
	overflow: hidden;	
}


/*--- Content ---------------------------------------------------------*/

#boxProcess {
	margin-left: auto; margin-right: auto;
	margin: 0px;
	overflow: hidden;	
}

#boxProcess #boxColumn {
	overflow: hidden;	
	padding: 5px;
}

#boxProcess #popColumn {
	overflow: hidden;	
	padding: 10px 10px 10px 10px;
}

/*--- Box Left ---------------------------------------------------------*/
.leftBox {
	margin-left: 10px;	
	
	height: -moz-calc(100% - 106px);
	height: -webkit-calc(100% - 106px);
	height: -o-calc(100% - 106px);
	height: calc(100% - 106px);
	
	overflow-x: hidden;
    overflow-y: auto;
    background-color: #FF00FF;
}

.cbLC {
	margin-left: 10px;	
}

.cbLCScroll {
	margin-left: 10px;
	
	height: -moz-calc(100% - 18px);
	height: -webkit-calc(100% - 18px);
	height: -o-calc(100% - 18px);
	height: calc(100% - 18px);
	
	overflow-x: hidden;
    overflow-y: auto;
	
}

#gml_2 {
	height: -moz-calc(100% - 100px) !important;
	height: -webkit-calc(100% - 100px) !important;
	height: -o-calc(100% - 100px) !important;
	height: calc(100% - 100px) !important;
}

#gml_3 {
	height: -moz-calc(100% - 140px) !important;
	height: -webkit-calc(100% - 140px) !important;
	height: -o-calc(100% - 140px) !important;
	height: calc(100% - 140px) !important;
}

#gml_4 {
	height: -moz-calc(100% - 180px) !important;
	height: -webkit-calc(100% - 180px) !important;
	height: -o-calc(100% - 180px) !important;
	height: calc(100% - 180px) !important;
}

/*--- Box Left ---------------------------------------------------------*/
.filterBox {
	margin-left: 15px;
}

/*--- Form Layout ----------------------------------------------------------*/
.form-layout {
	position: relative;
	background-color: #F6F6F6;
	border: 1px solid #DBDBDB;
	padding: 20px;
	/*border-radius: 4px 4px 4px 4px;*/
}

/*--- Screen ----------------------------------------------------------*/

.plugin_block {	
	position: relative;
	float: left;
	margin-bottom: 20px;	
	margin-right: 20px;		
	width: 580px;
}


/*--- Dashboard -------------------------------------------*/
.dashboard #title {
	text-align: left;	
	padding: 0px 5px 0px 5px;	
	font-weight: bold;
	height: 23px;
	line-height: 23px;		
	font-size: 13px;	
	white-space:nowrap;		
}

.dashboard {
	box-shadow: 2px 2px 10px grey;
	border-left: 1px solid #DBDBDB;
	border-bottom: 1px solid #DBDBDB;
	border-right: 1px solid #DBDBDB;
}

.dashboard #chart_option {
	overflow: hidden;
	padding: 3px;
	background-color: #FFFFFF;
}


.DBPlugin #title {
	text-align: left;	
	padding: 0px 5px 0px 5px;	
	font-weight: bold;
	height: 23px;
	line-height: 23px;		
	font-size: 13px;	
	white-space:nowrap;		
}

.DBPlugin #chart1 {
	box-shadow: 2px 2px 10px grey;
	border-left: 1px solid #DBDBDB;
	border-bottom: 1px solid #DBDBDB;
	border-right: 1px solid #DBDBDB;
}

.DBPlugin #chart2 {
	box-shadow: 2px 2px 10px grey;
}

.DBPlugin #board1 {
	background-color: #FFFFFF;
	box-shadow: 2px 2px 10px grey;
}

.DBPlugin .tile li {
	background-color: #FFFFFF;
}


.DBPlugin .ui-datepicker, .ui-datepicker-header {
	border: 0px;
	font-size: 10.8px;
}


/*--- Counter -------------------------------------------------------*/

#SL{
	float: right;
	font-size: 11px;
	padding: 0 10px 0 10px;
}

#SL_POP {
	display: none;
}

/*--- CSS Popup Fade -------------------------------------------------------*/

#fade {
	background: rgba(0,0,0,0.502); 
	position: fixed; 
	width: 100%;
	height: 100%;
	filter:alpha(opacity=70);
	opacity: .70;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /*--IE 8 Transparency--*/
	left: 0;
	z-index: 10;
}

/*--- CSS Popup System -------------------------------------------------------*/

#popupSystem {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;	
}

#popupContentSystem {
    position: relative;
    margin-left: auto; margin-right: auto;
    background-color: #f6f6f6;
    border: 5px solid #DBDBDB;
    top: 100px;
	padding: 10px 20px 60px 20px;
	z-index: 100;	
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

img.popupClose {
	position: absolute;
	right: -16px;
	top: -16px;
	width: 24px;
    height: 24px;
	background: transparent url(../icons/24x24/office/delete.png) no-repeat center center;	
}

/*--- CSS Popup Container L2 -------------------------------------------------------*/
/*
#css_fade_CL2 {
	display: none;
	z-index:21;
	position: fixed;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background: rgba(0,0,0,0.502);
}

#css_Warp_CL2 {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    z-index: 22;			
}

#css_popupContent_CL2 #img_close_CL2 {	
	position: absolute;
	right: 10px;
	top: 8px;
	width: 24px;
	height: 24px;
	fill: rgba(0,0,0,0.65);
	padding: 7px;
	margin: 5px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;		
}

#css_popupContent_CL2 #img_close_CL2:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}


#css_popupContent_CL2 #img_back_CL2 {	
	width: 24px;
	height: 24px;
	fill: rgba(0,0,0,0.65);
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;	
	float: left;
	padding: 7px;
	margin: -7px 5px 0px -10px;
}

#css_popupContent_CL2 #img_back_CL2:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}
*/

/*--- CSS Popup Container L3 -------------------------------------------------------*/
/*
#css_fade_CL3 {
	display: none;
	z-index:31;
	position: fixed;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background: rgba(0,0,0,0.502);
}

#css_Warp_CL3 {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    z-index: 32;			
}

#css_popupContent_CL3 #img_close_CL3 {	
	position: absolute;
	right: 10px;
	top: 8px;
	width: 24px;
	height: 24px;
	fill: rgba(0,0,0,0.65);
	padding: 7px;
	margin: 5px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;		
}

#css_popupContent_CL3 #img_close_CL3:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}
*/

/*--- CSS Popup Container L3 -------------------------------------------------------*/
/*
#css_fade_CL4 {
	display: none;
	z-index:41;
	position: fixed;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background: rgba(0,0,0,0.502);
}

#css_Warp_CL4 {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    z-index: 42;			
}

#css_popupContent_CL4 #img_close_CL4 {	
	position: absolute;
	right: 10px;
	top: 8px;
	width: 24px;
	height: 24px;
	fill: rgba(0,0,0,0.65);
	padding: 7px;
	margin: 5px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;		
}

#css_popupContent_CL4 #img_close_CL4:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}
*/

/*--- CSS Layer -------------------------------------------------------*/
.fade-layer {
	display: none;
	position: fixed;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background: rgba(0,0,0,0.502);
	z-index:11;
}

.wrapper-layer  {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index:12;
}

#lock-1 { z-index:11; }
#warp-1 { z-index:12; }
#lock-2 { z-index:21; }
#warp-2 { z-index:22; }
#lock-3 { z-index:31; }
#warp-3 { z-index:32; }
#lock-4 { z-index:41; }
#warp-4 { z-index:42; }
#lock-5 { z-index:51; }
#warp-5 { z-index:52; }

#lock-top { z-index:9998; }
#warp-top { z-index:9999; }

.site-layer {
    z-index: 800;	
    position: relative;
    margin-left: auto; margin-right: auto;
    width: 400px;
	background-color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24);    
  	top: 20%;
  	transform: translateY(-20%);    
}

.processPOP .site-layer {
	top:30%;
}

.site-layer h1 {
	margin: 0px;
	color: #333333;
	font: 500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

.site-layer h2 {
	margin: 0px;
}

.site-layer h3 {
	color: #333333;
	font: 500 15px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

.site-layer .svg-close {	
	position: absolute;
	right: 10px;
	top: 8px;
	width: 24px;
	height: 24px;
	fill: rgba(0,0,0,0.65);
	padding: 7px;
	margin: 5px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;		
}

.site-layer .svg-close:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}

.site-layer .svg-back {	
	width: 24px;
	height: 24px;
	fill: rgba(0,0,0,0.65);
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;	
	float: left;
	padding: 7px;
	margin: -7px 5px 0px -10px;
}

.site-layer .svg-back:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}


/*--- CSS Popup Confirm -------------------------------------------------------*/
/*
#css_fade,
.css_fade {
	display: none;
	z-index:11;
	position: fixed;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	background: rgba(0,0,0,0.502);
}

#css_popupWarp,
.css_popupWarp  {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    z-index: 12;			
}


#css_popupContent,
.css_popupContent,
#css_popupContent_CL2,
.css_popupContent_CL2,
#css_popupContent_CL3,
.css_popupContent_CL3,
#css_popupContent_CL4,
.css_popupContent_CL4 {
    z-index: 20;	
    position: relative;
    margin-left: auto; margin-right: auto;
    width: 400px;
	background-color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24);    
  	top: 20%;
  	transform: translateY(-20%);    
}

.processPOP #css_popupContent,
.processPOP .css_popupContent,
.processPOP #css_popupContent_CL2,
.processPOP .css_popupContent_CL2,
.processPOP #css_popupContent_CL3,
.processPOP .css_popupContent_CL3,
.processPOP #css_popupContent_CL4,
.processPOP .css_popupContent_CL4 {
	top:30%;
}

#css_popupContent h1,
.css_popupContent h1,
#css_popupContent_CL2 h1,
.css_popupContent_CL2 h1,
#css_popupContent_CL3 h1,
.css_popupContent_CL3 h1,
#css_popupContent_CL4 h1,
.css_popupContent_CL4 h1 {
	margin: 0px;
	color: #333333;
	font: 500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

#css_popupContent h2,
.css_popupContent h2,
#css_popupContent_CL2 h2,
.css_popupContent_CL2 h2,
#css_popupContent_CL3 h2,
.css_popupContent_CL3 h2,
#css_popupContent_CL4 h2,
.css_popupContent_CL4 h2 {
	margin: 0px;
}

#css_popupContent h3,
.css_popupContent h3,
#css_popupContent_CL2 h3,
.css_popupContent_CL2 h3,
#css_popupContent_CL3 h3,
.css_popupContent_CL3 h3,
#css_popupContent_CL4 h3,
.css_popupContent_CL4 h3 {
	color: #333333;
	font: 500 15px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

#css_popupContent #img_close,
.css_popupContent .img_close,
#css_popupContent_CL2 #img_close,
.css_popupContent_CL2 .img_close,
#css_popupContent_CL3 #img_close,
.css_popupContent_CL3 .img_close,
#css_popupContent_CL4 #img_close,
.css_popupContent_CL4 .img_close {	
	position: absolute;
	right: 10px;
	top: 8px;
	width: 24px;
	height: 24px;
	fill: rgba(0,0,0,0.65);
	padding: 7px;
	margin: 5px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;		
}

#css_popupContent #img_close:hover,
.css_popupContent .img_close:hover,
#css_popupContent_CL2 #img_close:hover,
.css_popupContent_CL2 .img_close:hover,
#css_popupContent_CL3 #img_close:hover,
.css_popupContent_CL3 .img_close:hover,
#css_popupContent_CL4 #img_close:hover,
.css_popupContent_CL4 .img_close:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}
*/

#overlayContentRight {
	z-index: 100;
    border-right: transparent;    
	background-color: #FFFFFF;
    box-shadow: -3px 0 10px 0 rgba(0,0,0,0.24);    
	position: fixed;
	right: 0;
	top: 95px;   
    background-color: rgb(255, 255, 255);
    border-radius: 1px;
    width: 100%;
    height: calc(100% - 95px);
    max-width: 800px;
    overflow: hidden;
    display: block;
}

#overlayContentRight h1 {
	margin: 0px;
	padding-left: 72px;
	color: #333333;
	font: 500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

#overlayContentRight h2 {
	margin: 0px;
}

#overlayContentRight h3 {
	color: #333333;
	font: 500 15px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

#overlayContentRight h4 {
	color: #333333;
	font: 500 15px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
}

#overlayContentRight #img_close_overlay {	
	position: absolute;
	left: 10px;
	top: 8px;
	width: 24px;
	height: 24px;
	fill: #333333;
	padding: 7px;
	margin: 5px;
	cursor: pointer;
	-webkit-border-radius: 20px;
	border-radius: 20px;		
}

#overlayContentRight #img_close_overlay:hover {
	fill: #4285F4;	
    -webkit-border-radius: 20px;
    border-radius: 20px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}

#overlayContentRight #img_print_overlay {	
	position: absolute;
	right: 10px;
	top: 8px;
	width: 48px;
	height: 48px;
	fill: #333333;
	padding: 7px;
	margin: 5px;
	cursor: pointer;
	-webkit-border-radius: 40px;
	border-radius: 40px;		
}

#overlayContentRight #img_print_overlay:hover {
	fill: #4285F4;	
    -webkit-border-radius: 40px;
    border-radius: 40px;	
	transition: 0.3s ease all; 
	-moz-transition: 0.3s ease all; 
	-webkit-transition: 0.3s ease all;
	background-color: rgba(0,0,0, 0.1 );
}

#overlayContentRight #btn_action_overlay {	
	position: absolute;
	right: 60px;
	top: 20px;
	height: 28px;
	width: 100px;
	border: 0px;
	border-bottom: #eee 1px solid;
}

#overlay_1_content {
	max-height: calc(100% - 64px);
	overflow-y: auto;
}


#overlay_1_content h4 {
	letter-spacing: 0.5px;
	color: rgba(0,0,0,0.87);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin: 20px 0 0 0;    
}

#overlay_1_content h5 {
	color: rgba(0,0,0,0.54);
	font-size: 12px;
	line-height: 18px;
	margin: 0px;
	padding: 0px;
}

#overlay_1_content .b3-info {
    color: rgba(0,0,0,0.87);
    font-size: 15px;
    line-height: 24px;
    padding: 0px;
    margin: 0px;
}


#css_padding {
	padding: 20px;
}

#css_padding_3k {
	padding: 0px 20px 20px 20px;
}

#css_padding_5k {
	padding: 0px 40px 20px 20px;
}

#css_header {
}

#css_header_line {
	border-bottom: 1px solid #e1e1e1;
	box-shadow: 0px 5px 5px -5px #e1e1e1;	
	margin-bottom: 5px;
}

#css_header_FL {
	float: left;
	padding: 0px 0px 10px 20px;
}

#css_header_FL h3 {
	margin: 0px;
}


#css_header_FR {
	float: right;
	padding: 0px 7px 0px 0px;
}

#css_header_SML {
	float: left;
	padding: 10px 0px 10px 10px;
}

#css_header_SML h3 {
	margin: 0px;
}

#css_header_SMR {
	float: right;
	padding: 7px 7px 0px 0px;
}

#css_footer_SML {
	float: left;
	padding: 0px 7px 0px 0px;
}

#css_footer_SMR {
	float: right;
	padding: 0px 7px 0px 0px;
}

#css_left {
	/*background-color: #F6F6F6;*/
	width: 214px;	
	max-height: 500px;
	height: -moz-calc(100%);
	height: -webkit-calc(100%);
	height: -o-calc(100%);
	height: calc(100%);
	float: left;
	overflow-x: hidden;
    overflow-y: auto;
}

#css_left::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#css_left::-webkit-scrollbar {
	width: 4px;
	background-color: #F5F5F5;
}

#css_left::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #CCCCCC;
}

#css_left h3 {
	padding: 0px 10px 0px 20px;	
	margin: 14px 0px 7px 0px;
}

#css_right {
	border-left: 1px solid #E0E0E0;	
	overflow: auto;
}



#css_content {
	height: auto;
	max-height: 400px;
	overflow-y: auto;
}

#css_content h3 {
	font-size: 17px;
	margin-top: 0px;
}

#css_content h6 {
	font-size: 13px;
	margin: 20px 0px 12px 0px;
}

#css_content #line {
	float: left;
	border-bottom: 1px solid #DBDBDB;
}

#css_content .img_svg {
    float: right;
	cursor: pointer;
	cursor: hand;	
	fill: rgba(0,0,0,0.54);	
}

#css_content .img_copy {
    float: right;
	cursor: pointer;
	cursor: hand;	
	fill: rgba(0,0,0,0.54);	
}

#css_content #img_view {
    float: right;    
	cursor: pointer;
	cursor: hand;	
	fill: rgba(0,0,0,0.54);	
	margin-right: 10px;
}

#css_content #img_url {
    float: right;
	cursor: pointer;
	cursor: hand;	
	fill: rgba(0,0,0,0.54);	
	margin-right: 10px;
}

#css_content input {
	border: 0px;
	border-bottom: 1px solid #DBDBDB;	
	font-size: 16px;
    height: 24px;
    line-height: 24px;
}

#css_content input[type=password] {
	border: 0px;
	border-bottom: 1px solid #DBDBDB;	
	font-size: 16px;
    height: 24px;
    line-height: 24px;
}	

#css_content input[type=number] {
	border: 0px;
	border-bottom: 1px solid #DBDBDB;	
	font-size: 16px;
    height: 24px;
    line-height: 24px;
}

#css_content select {
	border: 0px;
	border-bottom: 1px solid #DBDBDB;	
	font-size: 16px;
    height: 25px;
    line-height: 25px;
}

#css_content textarea {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
    padding: 6px;
    line-height: 1.4em;
	word-wrap:break-word;word-break:break-all;
	border: 1px solid #DBDBDB;
}


#css_content input[type=checkbox] + label {
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-checkbox-e.svg");
	vertical-align:middle;
	height: 16px;	
	line-height:18px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	cursor: pointer;
}

#css_content input[type=checkbox]:checked + label {
   background-image: url("../svg/ui-checkbox-c.svg");
   font-weight: bold;
}

#css_content input[type=checkbox]:disabled + label {
	background-image: url("../svg/ui-checkbox-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_content input[type=checkbox]:checked:disabled + label {
	background-image: url("../svg/ui-checkbox-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}

#css_content input[type=radio] + label {
	padding-left: 30px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-radio-e.svg");
	vertical-align:middle;
	height: 20px;	
	line-height:22px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	cursor: pointer;
	margin-right: 20px;	
}

#css_content input[type=radio]:checked + label {
   background-image: url("../svg/ui-radio-c.svg");
   font-weight: bold;
}

#css_content input[type=radio]:disabled + label {
	background-image: url("../svg/ui-radio-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_content input[type=radio]:checked:disabled + label {
	background-image: url("../svg/ui-radio-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}


#css_content textarea:focus {  
  border-color:transparent;
  box-shadow: 0 2px 2px -2px #129BED;
  border: 1px solid #129BED;
 -webkit-transition: all 0.20s;
 -moz-transition: all 0.20s;
 -ms-transition: all 0.20s;
 -o-transition: all 0.20s; 
  outline-style:none;
 }

#css_content select:focus,
#css_content input[type=password]:focus,
#css_content input[type=number]:focus,
#css_content input[type=text]:focus,
#css_content input[type=url]:focus {  
  border-color:transparent;
  box-shadow: 0 2px 2px -2px #129BED;
  border-bottom: 1px solid #129BED;
 -webkit-transition: all 0.20s;
 -moz-transition: all 0.20s;
 -ms-transition: all 0.20s;
 -o-transition: all 0.20s; 
  outline-style:none;
 }

#css_content input.noLine,
#css_content textarea.noLine  {
	border-color:transparent;
	outline:none;
	box-shadow:none;
}

#css_content input.noLine:focus,
#css_content textarea.noLine:focus  {
	border-color:transparent;
	box-shadow: none;
	outline-style:none;
}

#css_content .has_error {
  	border-color:transparent;
  	box-shadow: 0px 2px 3px -2px rgba(255,0,0,0.6);	
  	background-color: transparent;
	border-bottom: 1px solid #FF9494;
   -webkit-transition: all 0.20s;
   -moz-transition: all 0.20s;
   -ms-transition: all 0.20s;
   -o-transition: all 0.20s; 
   outline: none;		
}

#css_content .has_error input[type=select]:focus,
#css_content .has_error input[type=text]:focus   {
  	border-color: transparent !important;
  	box-shadow: 0px 2px 3px -2px rgba(255,0,0,0.6) !important;	
  	border-bottom: 1px solid rgba(255,0,0,0.6);
   -webkit-transition: all 0.20s;
   -moz-transition: all 0.20s;
   -ms-transition: all 0.20s;
   -o-transition: all 0.20s; 
   outline-style:none;
}

#css_content .btn_18_blue {
	margin-left: -5px;
}

#css_print {
	height: auto;
	max-height: 600px;
	overflow-y: auto;
}


#css_print h6 {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	height: 32px;
	line-height: 32px;
}

#css_print input[readonly] {
	background-color: #F1F3F4;
	color: #000000;
}

#css_print input {
	width: 95%;
	font-size: 15px;
	height: 17px;
	padding: 6px;
	border-radius: 4px;
	background-color: #F1F3F4;
	border-color:transparent;
}

#css_print input[type=number] {
	font-size: 15px;
	width: 60px;
	height: 17px;
	padding: 6px;
	border-radius: 4px;
	background-color: #F1F3F4;
	border-color:transparent;
}

#css_print select {
	font-size: 15px;
	width: 100%;
	height: 30px;
	padding: 2px;
	border-radius: 4px;
	background-color: #F1F3F4;
	border-color:transparent;
}

#css_print input[type=checkbox] + label {
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-checkbox-e.svg");
	vertical-align:middle;
	height: 16px;	
	line-height:18px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	cursor: pointer;
}

#css_print input[type=checkbox]:checked + label {
   background-image: url("../svg/ui-checkbox-c.svg");
   font-weight: bold;
}

#css_print input[type=checkbox]:disabled + label {
	background-image: url("../svg/ui-checkbox-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_print input[type=checkbox]:checked:disabled + label {
	background-image: url("../svg/ui-checkbox-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}

#css_print input[type=radio] + label {
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-radio-e.svg");
	vertical-align:middle;
	height: 16px;	
	line-height:18px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	cursor: pointer;
	margin-right: 20px;	
}

#css_print input[type=radio]:checked + label {
   background-image: url("../svg/ui-radio-c.svg");
   font-weight: bold;
}

#css_print input[type=radio]:disabled + label {
	background-image: url("../svg/ui-radio-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_print input[type=radio]:checked:disabled + label {
	background-image: url("../svg/ui-radio-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}

#css_print textarea:focus,
#css_print select:focus,
#css_print input[type=number]:focus,
#css_print input[type=text]:focus,
#css_print input[type=url]:focus {  
  border-color:transparent;
  box-shadow: 0 2px 2px -2px #129BED;
  border-bottom: 1px solid #129BED;
 -webkit-transition: all 0.20s;
 -moz-transition: all 0.20s;
 -ms-transition: all 0.20s;
 -o-transition: all 0.20s; 
  outline-style:none;
 }

#css_print .f-process {
	width: 30px;
	height: 30px;
}

#css_mail {
	height: auto;
	max-height: 600px;
	overflow-y: auto;
}

#css_mail h2 {
    margin: 5px 0px 0px 0px;
    color: #333333;
    font: 500 20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
}
    
#css_mail h5 {
	font-size: 11px;
	float: right;
	height: 20px;
	padding: 5px 20px 0px 0px;
	margin: 0px;
}

#css_mail img {
	float: right;
	margin-top: 5px;
}

#css_mail h6 {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	height: 32px;
	line-height: 32px;
}

#css_mail .b-box {
	float: left;
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	height: 28px;
	line-height: 30px;
	width: 150px;	
	text-align: center;
	border-radius: 2px;
	margin-right: 15px;
	border: 1px solid #CCCCCC;
}

#css_mail hr {
	width: calc(100% + 40px);
	padding: 0px;
	margin: 0px 0px 0px -20px;
}

#css_mail input[readonly] {
	background-color: ##E5E5E5;
	color: ##666666;
}

#css_mail input {
	width: 95%;
	font-size: 15px;
	height: 17px;
	padding: 5px 5px 6px 5px;
	border-radius: 2px;
}

#css_mail input[type=text] {
	font-size: 15px;
	border: 1px solid;
	border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;	
	height: 17px;
	padding: 5px 5px 6px 5px;
	word-wrap:break-word;word-break:break-all;
}	

#css_mail textarea {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
    padding: 6px;
    line-height: 1.4em;
    border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;	
	word-wrap:break-word;word-break:break-all;
}


#css_mail select {
	font-size: 15px;
	width: 100%;
	height: 30px;
	padding: 2px;
	border-radius: 2px;
}

#css_mail input[type=checkbox] + label {
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-checkbox-e.svg");
	vertical-align:middle;
	height: 16px;	
	line-height:18px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	cursor: pointer;
}

#css_mail input[type=checkbox]:checked + label {
   background-image: url("../svg/ui-checkbox-c.svg");
   font-weight: bold;
}

#css_mail input[type=checkbox]:disabled + label {
	background-image: url("../svg/ui-checkbox-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_mail input[type=checkbox]:checked:disabled + label {
	background-image: url("../svg/ui-checkbox-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}

#css_mail input[type=radio] + label {
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-radio-e.svg");
	vertical-align:middle;
	height: 16px;	
	line-height:18px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	cursor: pointer;
	margin-right: 20px;	
}

#css_mail input[type=radio]:checked + label {
   background-image: url("../svg/ui-radio-c.svg");
   font-weight: bold;
}

#css_mail input[type=radio]:disabled + label {
	background-image: url("../svg/ui-radio-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_mail input[type=radio]:checked:disabled + label {
	background-image: url("../svg/ui-radio-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}



#css_export {
	height: 400px;
}

#css_export input[type=checkbox] + label {
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-checkbox-e.svg");
	vertical-align:middle;
	height: 16px;	
	line-height:18px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	cursor: pointer;
}

#css_export input[type=checkbox]:checked + label {
   background-image: url("../svg/ui-checkbox-c.svg");
   font-weight: bold;
}

#css_export input[type=checkbox]:disabled + label {
	background-image: url("../svg/ui-checkbox-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_export input[type=checkbox]:checked:disabled + label {
	background-image: url("../svg/ui-checkbox-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}

#css_export input[type=radio] + label {
	padding-left: 25px;
	background-repeat:no-repeat;
	background-position: 0 0;	
	background-image: url("../svg/ui-radio-e.svg");
	vertical-align:middle;
	height: 16px;	
	line-height:18px;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	cursor: pointer;
	margin-right: 20px;	
}

#css_export input[type=radio]:checked + label {
   background-image: url("../svg/ui-radio-c.svg");
   font-weight: bold;
}

#css_export input[type=radio]:disabled + label {
	background-image: url("../svg/ui-radio-ed.svg");
	color: #cccccc;
	cursor: default;
}

#css_export input[type=radio]:checked:disabled + label {
	background-image: url("../svg/ui-radio-cd.svg");
	color: #cccccc;
	font-weight: bold;
	cursor: default;
}


#css_forms {
	height: auto;
	max-height: 431px;
	overflow-y: auto;
}

#css_forms::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#css_forms::-webkit-scrollbar {
	width: 4px;
	background-color: #F5F5F5;
}

#css_forms::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #CCCCCC;
}

#css_forms #yCL {
	width: 200px;
	float: left;
}

#css_forms #yCR {
	float: left;
	margin-top: 2px;
}

#css_forms h3 {
	font-size: 17px;
	margin-top: 0px;
}

#css_forms h6 {
	float: left;
	width: 150px;
	font-size: 13px;	
	font-weight: 400;
	margin: 7px 0px 2px 0px;
}


#css_forms input[type=text],
#css_forms input[type=password] {
	border: 1px solid #DBDBDB;
	font-size: 14px;
    height: 15px;
    line-height: 20px;
    padding: 8px;
}

#css_forms select {
	border: 1px solid #DBDBDB;
	font-size: 14px;
    height: 33px;
}

#css_forms select:focus,
#css_forms textarea:focus,
#css_forms input[type=password]:focus,
#css_forms input[type=number]:focus,
#css_forms input[type=text]:focus,
#css_forms input[type=url]:focus {  
  box-shadow: 0 0 2px #129BED;
  border: 1px solid #129BED;
 -webkit-transition: all 0.20s;
 -moz-transition: all 0.20s;
 -ms-transition: all 0.20s;
 -o-transition: all 0.20s; 
 outline: none;		
}	


#css_footer {
	height: 69px;
    left: 0;
    bottom: 0;
}

#css_footer_line {
	height: 69px;
	border-top: 1px solid #DBDBDB;	
    left: 0;
    bottom: 0;
}

#css_footer_bottom {
	position: absolute;
    width: 100%;
	height: 69px;
    left: 0;
    bottom: 0;
}

#css_footer .sb-blue,
#css_footer_line .sb-blue,
#css_footer_bottom .sb-blue {
	margin-right: 20px;
}

#css_center {
	text-align: center;
}




/*--- CSS Popup Confirm -------------------------------------------------------*/

#popupConfirm {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;	
}

#popupContentConfirm {
    position: relative;
    margin-left: auto; margin-right: auto;
    background: #ffffff;
    border: 3px solid #CCCCCC;
    top: 250px;
	width: 360px;
	padding: 10px 20px 20px 20px;
	z-index: 100;	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;		
}



/*--- Footer ----------------------------------------------------------*/

.footer {
	margin-left: auto; margin-right: auto;
	overflow: hidden;	
	/*background-color: #F7F7F7;*/
}


/*--- Debitor ----------------------------------------------------------*/
.debitor {
	float: left;
	color: #BBBBBB;
	font-size: 11px;
	padding-left: 5px;
}

/*--- Version ----------------------------------------------------------*/

.version {	
	float: right;
	padding-right: 5px;
    font-size: 11px;
	color: #BBBBBB;
}


/*--- Icon -------------------------------------------------*/

.icon {
	border: 1px solid;
	border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;				
}

.icon:hover {
	background-color: #79C7F4;
	border: 1px solid #129BED;
}

.b16 {
	padding: 5px;	
}

.b32 {
	padding: 8px;	
}

.b64 {
	padding: 16px;	
}


/*--- Titel Block  -------------------------------------------*/

.title_block {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;			
	text-align: left;
	height: 24px;
	line-height: 24px;
	color: #666666;
	font-weight: bold;		
	margin-bottom: 10px;
	width: 100%;
}

.title_block img {
	margin-right: 8px;
}

.title_block svg {
	margin-right: 8px;
}

.title_block #element_icon {
	float: left;
}

.title_block #element_txt {
	float: left;
	width:90%;
	margin-top: 1px;	
}

.title_block #dummy {
	float: left;
	height: 10px;
	padding-right: 20px;
}

.title_block select {
	font-size: 9px;	
}

.title_block .arrow {
	margin-top: 7px;
	float: right;
	width: 15px;
}

.plugin_close {
	position: absolute;
	right: -5px;
	top: -5px;
}


.headline {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;	
	height: 16px;		
	line-height: 18px;		
	text-align: left;
	color: #666666;
	font-weight: bold;		
	padding-bottom: 5px;
	margin-bottom: 5px;
	width: 100%;
	text-transform: uppercase;;
	letter-spacing: 2px;
}

.headline img {
	float: left;
	width: 16px;
	height: 16px;	
	margin-right: 12px;
}

.headline svg {
	float: left;
	margin-right: 12px;
	width: 16px;
	height: 16px;
	fill: #129BED;
}
/*--- Query Block  -------------------------------------------*/

.query_block {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;			
	text-align: left;
	height: 28px;
	line-height: 28px;
	color: #666666;
	font-weight: normal;		
	border-bottom: 1px solid #eeeeee;	
	margin-bottom: 2px;
}

.query_block img {
	vertical-align: middle;
	margin-right: 8px;
}

.query_block select {
	font-size: 9px;
}

/*--- Titel Block  -------------------------------------------*/

.title_touch {
	font-family: 'Roboto', sans-serif;
	font-size: 21px;				
	text-align: left;
	height: 40px;
	line-height: 40px;
	color: #666666;
	font-weight: normal;		
	border-bottom: 1px solid #eeeeee;	
	margin-bottom: 15px;
}

.title_touch img {
	vertical-align: middle;
	margin-right: 8px;
}

.title_touch_done {
	text-align: left;
	height: 40px;
	line-height: 40px;
	font-size: 20px;	
	color: #999999;
	font-weight: normal;		
	border-bottom: 1px solid #dddddd;	
	margin-bottom: 15px;
}

.title_touch_done img {
	vertical-align: middle;
	margin-right: 8px;
}

/*--- IFrame ---------------------------------------------------------*/
.iframe {
	border-left: 1px solid #d9d9d9;		
	border-right: 1px solid #d9d9d9;	
	border-bottom: 1px solid #d9d9d9;		
}

.iframe4 {
	border: 1px solid #d9d9d9;		
}

.main_iframe {
	border-left: 1px solid #CCCCCC;	
	border-right: 1px solid #CCCCCC;		
}

.iframe_popup {
	border: 1px solid #d9d9d9;	
}

#myIF {
	border: 0px;
	overflow-y: scroll;
	overflow: -moz-scrollbars-vertical;
    overflow: scroll;
}

/*--- Records --------------------------------------------------*/

.records_aktiv {
	cursor: not-allowed;
	border-left: 0px;
	background-color: #FF9494;
}

.records_open {
	color: #37912B;
	font-weight: normal;	
}


/*---  Select Box no Border & Background --------------------------------------------------*/
.no_data_box {
	height: 60px;
	line-height: 60px;
	width: 500px;
	color: #666666;
	font-size: 19px;
	font-weight: bold;	
	border: 2px solid #DBDBDB;
	background-color: #EEEEEE;		
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;					
	margin: 90px 0px 0px 0px;
}

.no_content_box {
	height: 50px;
	line-height: 50px;
	width: 500px;
	color: #666666;
	font-size: 18px;
	font-weight: bold;	
	border: 2px solid #DBDBDB;
	background-color: #EEEEEE;		
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;					
	margin: 90px 0px 0px 0px;
}

/*--- Process Position ---------------------------------------------------------*/
.main_summe {
	margin-left: auto; margin-right: auto;
	height: 27px;
	line-height: 27px;
	overflow: hidden;
	border-left: 1px solid #DBDBDB;
	border-right: 1px solid #DBDBDB;
	border-bottom: 1px solid #DBDBDB;		
	background-color: #EEEEEE;
}

.main_summe .ml {
	float: left;
	margin-left: 5px;
	padding: 3px;	
	height: 22px;
	line-height: 22px;		
}

.main_summe .block {
	padding-left: 10px;
}


.main_summe #element {
	float: left;
	margin-right: 4px;
}

.main_summe select {
	font-size: 12px;
	height: 22px;
	padding: 0px;
}

.main_summe .btn {
	height: 22px;
}

.main_summe .mr {
	float: right;
	margin-right: 15px;	
}

.main_summe .mr .infoblock li {
	float: right;
	margin-top: 2px;
	padding-left: 7px;
	padding-right: 5px;	
	line-height: 22px;
	height: 22px;					
	background-color: #FFFFFF;	
	border: 1px solid #DBDBDB;
	margin-right: 2px;
}

.main_summe .mr .infoblock .dummy {
	/* background-color: #F3F3F3; */
	background-color: transparent;
	float: right;
	width: 7px;
	height: 14px;
	border: 0px;
}

/*--- DIV Boxes -------------------------------------------------*/
.DBox {
	overflow: hidden;
	font-size: 13px;  	
	font-family: 'Roboto', sans-serif;
	border: 1px solid #DBDBDB;
	background-color: #FFFFFF;
}

.DBox #element {
	float: left;
	padding: 3px 0px 3px 10px;
}

.DBox #element img {
	vertical-align: middle;
}

.DSBox {
	overflow: hidden;
	font-size: 13px;  	
	font-family: 'Roboto', sans-serif;
	background-color: #FFFFFF;
	border: 1px solid #DBDBDB;
	padding: 5px;
}

.DSBox #element {
	float: left;
	padding: 2px 0px 2px 10px;
}

.DSBox #element img {
	vertical-align: middle;
	margin-right: 8px;
}


/*-- small Thumbnail -------------------------------------------------------------------*/
.editThumbnail {
	position: relative;
	float: left;
	min-width: 385px;
	padding: 14px;
	background-color: #FFFFFF;
	border: 1px solid #DBDBDB;
}


/*-- small Thumbnail -------------------------------------------------------------------*/

.smallThumbnail {
	position: relative;
	float: left;
	padding-right: 20px;	
	padding-bottom: 20px;
}

.smallThumbnail .thumbnail {
	width: 74px;
	height: 74px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid;
	border-color: #E6E6E6 #CCCCCC #CCCCCC #E6E6E6;
	padding: 0; 
	margin: 0;
}

.smallThumbnail .thumbnail:hover  {
	border: 1px solid #b7e7fc;
	background-color: #ddf2fd;
}

* html .smallThumbnail div.thumbnail {
	float: left; /* if not table-cells, you must float them to get them side by side */
	font-size: 74px; /* you must find IE's magic number */
}

.smallThumbnail .toolbar {
	width: 76px;
}

.smallThumbnail .infoIcon {
	position: relative;
	float: right;
	border: 1px solid;
	border-color: #E6E6E6 #CCCCCC #CCCCCC #E6E6E6;
}


.smallThumbnail .info {
	font-size: 9px;
}

/*--- medium Thumbnail -------------------------------------------------*/

.mediumThumbnail {
	position: relative;
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;	
}

.mediumThumbnail .thumbnail {
	width: 134px;
	height: 134px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid #e0e0e0;
	background-color: #FFFFFF;
	padding: 0; 
	margin: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;					
}

.mediumThumbnail #activ {
	border: 1px solid #00CC00;
}

.mediumThumbnail .thumbnail:hover  {
	background-color: #F5F5F5;
}

* html .mediumThumbnail div.thumbnail {
	float: left; /* if not table-cells, you must float them to get them side by side */
	font-size: 134px; /* you must find IE's magic number */
}

.mediumThumbnail .bl {
	float: left;
	font-size: 11px;		
	width: 84px;
	height: 40px;
	overflow: hidden;			
}

.mediumThumbnail .br {
	float: left;
	font-size: 11px;		
	width: 52px;
	height: 40px;	
}

.mediumThumbnail .infoIcon {
	cursor: pointer;
	cursor: hand;		
	position: relative;
	float: right;
	padding: 3px;
	margin: 2px 0px 2px 2px;
	border: 1px solid;
	border-color: #c0c0c0 #d9d9d9 #d9d9d9 #d9d9d9;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;	
}

.mediumThumbnail .infoIcon:hover  {
	fill: #4285f4;
	background: rgba(0,0,0,0.10);
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition:.5s;		
}

.mediumThumbnail .filesize {
	font-size: 11px;	
	color: #999999;
	height: 20px;	
	float: right;
	width: 50px;
	text-align: right;	
}

/*-- small Thumbnail -------------------------------------------------------------------*/

.userThumbnail {
	float: left;
}

.userThumbnail .thumbnail {
	width: 102px;
	height: 101px;
	line-height: 101px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid;
	border-color: #E6E6E6 #CCCCCC #CCCCCC #E6E6E6;
	padding: 0; 
	margin: 0;
}

.userThumbnail .thumbnail:hover  {
	border: 1px solid #b7e7fc;
	background-color: #ddf2fd;
}

* html .userThumbnail div.thumbnail {
	float: left; /* if not table-cells, you must float them to get them side by side */
	font-size: 101px; /* you must find IE's magic number */
}

.userThumbnail .info {
	font-size: 9px;
}

/*---  Box Sorting --------------------------------------------------*/

#box1 li {
	border: 1px solid transparent;		
	width: 350px;
	height: 140px;
	margin-bottom: 20px; 
	cursor: move;		
}


#box2 {
	overflow: hidden;
	margin-bottom: 30px;
}

#box2 li {
	float: left;	
	border: 1px solid transparent;
	width: 350px;
	height: 140px;
	margin-right: 20px; 
	margin-bottom: 20px; 	
	cursor: move;		
}

ul#box3 {
}

#box3 li {
	border: 1px solid transparent;
	width: 350px;
	height: 140px;
	margin-bottom: 20px; 
	cursor: move;		
}

.box_arrow_down {
	border: 1px solid #000000;
	width: 24px;
	height: 24px;
	background: transparent url(../icons/24x24/w10/sort_down.png) no-repeat center bottom;
}

.boxLayout {
	width: 330px;
	height: 90px;
	padding: 10px;	
	border: 1px solid #DBDBDB;	
	background-color: #FFFFFF;
	cursor: default;		
}

/*---  B-side --------------------------------------------------*/
	
.bside {
	background:#f5f5f5;
	border:1px solid #e5e5e5;
	border-radius:4px;
	margin: 5px 5px;
	padding:10px;
	overflow: hidden;
	float: left;
}

.bside ul{
	margin-left:0;
	padding-top:0
	list-style-type:none;
	margin:0;
}

.bside h1{
	margin: 0 0 10px 0;
}

.bside h2{
	font-weight: normal;
}

.bside h4{
	margin: 0 0 10px 0;
}

.bbox {	
	float: left;
	text-align: left;
	border: 1px solid #DBDBDB;
	padding: 3px 5px 3px 5px;
	background-color: #F1F1F1;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	overflow: hidden;
	margin-right: 5px;
}

.notification_g1 {
	background:#E0F3E1;
	border-color:#66CC6B;
}

.notification_y1 {
	background:#FFEFB2;
	border-color:#FDD981;
}

.notification_r1 {
	background:#fbba9c;
	border-color:#D9655A;
}

/*---  V-side --------------------------------------------------*/
.uside {
	background:#f5f5f5;
	border:1px solid #e5e5e5;
	border-radius:0px;
	padding:10px;
	overflow: hidden;
	font-size: 17px;
}

/*---  V-side --------------------------------------------------*/
.vside {
	background:#f5f5f5;
	border:1px solid #e5e5e5;
	border-radius:4px;
	padding:10px;
	overflow: hidden;
}

.vside ul{
	margin-left:0;
	padding-top:0
	list-style-type:none;
	margin:0;
}

.vside h1{
	margin: 0 0 10px 0;
}

.vside h2{
	font-weight: normal;
}

.vside h4{
	margin: 0 0 10px 0;
}

/*--- Xmas -------------------------------------------------*/

ul.xmas {
	margin: 0px;
	padding-bottom: 20px;
	overflow: hidden;
}

ul.xmas li {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;	
	font-size: 24px;
	font-weight: bold;
	color: #eeeeee;
	width: 104px;
	height: 69px;
	line-height: 69px;
    float: left;
	/*font-size: 0.95em;*/
	font-family: 'Srisakdi', cursive;
    text-align: center;
	/*background-color: #f7f7f7;*/
	border: 1px solid #cccccc;
	
	border-image-slice: 100 100 100 100;
	border-image-width: 20px 20px 20px 20px;
	border-image-outset: 5px 5px 5px 5px;
	border-image-repeat: round round;
	border-image-source: url("../site/xmas_border.svg"); 

	margin: 21px;
 	cursor: default;	
}

ul.xmas li:hover  {
	color: #FBE04D;
	background: none;		
}

ul.xmas #txt {
	border: 1px solid #FF0000;
	margin: 0px;
}

ul.xmas #hyperlink {
 	cursor: pointer;
    cursor: hand;
}

ul.xmas #current {
 	cursor: pointer;
    cursor: hand;
	color: #FBE04D;   
	background-color: #112E53;	
	border-image-slice: 100 100 100 100;
	border-image-width: 20px 20px 20px 20px;
	border-image-outset: 5px 5px 5px 5px;
	border-image-repeat: round round;
	border-image-source: url("../site/xmas_border.svg"); 
	
}

/*--- Loading Block  -------------------------------------------*/

.loading_block {
	text-align: left;
	height: 30px;
	line-height: 30px;
	font-size: 17px;	
	color: #000000;
	font-weight: normal;		
}

.loading_block .pic {
	float: left;
	margin-right: 8px;	
}

.loading_block .text {
	float: left;
	height: 30px;
	line-height: 30px;
}

.loading_block .loading {
	width: 20px;
	height: 30px;
	float: left;	
	margin-right: 8px;	
}

/*---  Level --------------------------------------------------*/
.level_header {
	float: left;
	text-align: left;	
	padding-left: 5px;	
 	cursor: pointer;
    cursor: hand;
	font-weight: normal;
	height: 22px;
	line-height: 22px;	
	font-size: 13px;	
	color: #0474ca;
	border: 1px solid;	
	border-color: #c3c3c3 #c3c3c3 #c3c3c3 #c3c3c3;
	background: url(../site/3d_gray_25px.jpg) repeat-x;
}

.level_content1 {
	float: left;
	text-align: left;	
	padding-left: 5px;	
	font-weight: normal;
	height: 22px;
	line-height: 22px;	
	font-size: 13px;	
	border-bottom: 1px solid;	
	border-color: #80B6DD;
	background: #A2C9E6;
	color: #000000;
}

.level_content2 {
	float: left;
	text-align: left;	
	padding-left: 5px;	
	font-weight: normal;
	height: 22px;
	line-height: 22px;	
	font-size: 13px;	
	border-bottom: 1px solid;	
	border-color: #c3c3c3;
	background: #A6C918;	
}

.level_content3 {
	float: left;
	text-align: left;	
	padding-left: 5px;	
	font-weight: normal;
	height: 22px;
	line-height: 22px;	
	font-size: 13px;	
	border-bottom: 1px solid;	
	border-color: #c3c3c3;
	background: #f5f5f5;
}

/*---  Avatar Bild --------------------------------------------------*/
.avatar_40 {
	width: 40px;
	height: 40px;
	border: 1px solid #999999;
}

.avatar_24 {
	width: 24px;
	height: 24px;
	border: 1px solid #999999;
}

/*--- Preview ----------------------------------------------------------*/
.imgToolTip {
	background-color: #FFFFFF;
	border: 1px solid #999999;
	padding: 5px;
}

.ph {
	width: auto;
}
	
.ph li {
	cursor: default;
	float: left;
	padding: 0px 5px;
	border: 1px solid #e5e5e5;
	background:#f5f5f5;
	margin-right: 5px;
	margin-bottom: 5px;
	font-size: 13px;
	color:#008000;
	font:13px/1.54 "courier new",courier,monospace;
	white-space: pre-wrap; 	
}

.phfix {
	width: auto;
}
	
.phfix li {
	cursor: default;
	float: left;
	width: 160px;
	padding: 2px 5px;
	border: 1px solid #e5e5e5;
	background:#f5f5f5;
	margin-right: 5px;
	margin-bottom: 5px;
	font-size: 13px;
	color:#008000;
	font:13px/1.54 "courier new",courier,monospace;
	white-space: pre-wrap; 	
}

/*--- Boot ----------------------------------------------------------*/
#boot h1 {
	font-size: 28px;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	color: #666666;
}

#boot h2 {
	font-size: 17px;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	color: #666666;
}

#myBoot {
	border-left: 5px solid #3D3D3D;
	border-right: 5px solid #3D3D3D;
	border-bottom: 5px solid #3D3D3D;
}

/*--- Counter ----------------------------------------------------------*/
.dotCircle {
	display: inline-block;
	width: 8px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' viewBox='0 0 200 200'%3E%3Cpath fill='%231aa260' d='M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0'%3E%3C/path%3E%3C/svg%3E") no-repeat left center;    
	margin-top: -16px;
}

.redCircle {
	margin-left: 7px;
    display: inline-block;
    min-width: 10px;
    padding: 2px 5px ;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	color: #FFFFFF;
	background-color: #de5246;
    font-size: 11px;
    margin-top: -3px;
}

.greenCircle {
	margin-left: 7px;
    display: inline-block;
    min-width: 10px;
    padding: 2px 5px ;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	color: #FFFFFF;
	background-color: #1aa260;
    font-size: 11px;
    margin-top: -3px;
}

.numberCircle {
	margin-left: 7px;
    display: inline-block;
    min-width: 10px;
    padding: 2px 5px ;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	color: #FFFFFF;
	background-color: #AAAAAA;
    font-size: 11px;
    margin-top: -3px;
}



/*--- Counter ----------------------------------------------------------*/
.badgesCircle {
	margin-left: 7px;
    display: inline-block;
    min-width: 10px;
    padding: 1px 5px ;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
	color: #FFFFFF;
	background-color: #357AE8;
    border-radius: 10px;
    font-size: 11px;
    margin-top: -3px;
}

/*--- Animation ---------------------------------------------------------*/

@keyframes spin {
   from {transform:rotate(0deg);}
   to {transform:rotate(359deg);}
}