* {
	margin: 0px;
	padding: 0px;
}
@font-face {
	font-family: "Agrandir";
	src:url("../Font/Agrandir-Regular.otf") format("opentype");
}
@font-face {
	font-family: "AgrandirBold";
	font-weight: bold;
	src:url("../Font/Agrandir-TextBold.otf") format("opentype");
}
@font-face {
    font-family: 'Reckless Neue Bold';
    src: local('Reckless Neue Bold'), local('Reckless-Neue-Bold'),
        url('../Font/RecklessNeue-Bold.woff2') format('woff2'),
        url('../Font/RecklessNeue-Bold.woff') format('woff'),
        url('../Font/RecklessNeue-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Reckless Neue';
    src: local('Reckless Neue'), local('Reckless-Neue'),
        url('../Font/RecklessNeue.woff2') format('woff2'),
        url('../Font/RecklessNeue.woff') format('woff'),
        url('../Font/RecklessNeue.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
:root {
	--secondary-white: #ffffff;
	--secondary-black: #04171D;
	--secondary-orange: #ff6e30;
	--StdBack: #EAF2f2;
	--Citrus: #E6FF83;
	--Ocean: #CFE8FF;
	--Sorbet: #FFC0A6;
	--Citrus2: #B2D22F;
	--Citrus3: #CCFF00;
	--Sorbet2: #ff9265;
	--Sorbet3:	#FD5834;
	--Ocean2: #85C4FF;
	--Ocean3: #4EAAFF; 
	--HazyWhite2: #C9D9D9;
	--HazyWhite3: #8DAEAE;
	--DeepTeal3: #6D8188;
}
.OceanBack
{
	background-color: var(--Ocean);
}
.WhiteBack
{
	background-color: var(--secondary-white);
	border-radius: 20px;
	border: 1px solid var(--secondary-black);
	padding:12px;
}
html, body {
	
	margin:0px;
	padding: 0px;
	width: 100%;
	height: 100%; 
	color: var(--secondary-black);
	line-height:20px;
	font-size:13px;
	font-family: 'OpenSansRegular';
	background:#EAF2f2;
	background-repeat:repeat-x;
	text-align:left;
	min-height: 100%;
}
.Border-Radius20
{
	border-radius: 20px;
}
.BackStd
{
	background: var(--StdBack);
}
.BorderColorBlack
{
	border:1px solid var(--secondary-black);
	color: var(--secondary-black);
}
.TopBack
{
	margin-top: 10px;
	background-image: url("../images/blurback.png");
	-webkit-box-shadow: 0px 0px 6px -1px rgba(0,0,0,0.33); 
	box-shadow: 0px 0px 6px -1px rgba(0,0,0,0.33);
	width:100%;
    
}
.LoginBox
{
    position:absolute;
    width: 350px;
    background-color: var(--StdBack);
    padding:20px;
    border-radius: 20px;
    border:1px solid var(--secondary-black);
    left: 30%;
    margin-top: 200px;
    margin-left: -50px;
    z-index:9999;
}
.LoginBoxR
{
    position:absolute;
    max-width: 700px;
    background-color: var(--StdBack);
    padding:20px;
    border-radius: 20px;
    border:1px solid var(--secondary-black);
    left: 30%;
    margin-top: 200px;
    margin-left: -50px;
    z-index:9999;
}
/* Für Bildschirme kleiner als 768px (z. B. Tablets) */
@media (max-width: 768px) {
    .LoginBoxR {
        left: 20%; /* Weniger Abstand links */
        margin-left: -30px; /* Weniger negativer Abstand */
        max-width: 90%; /* Breite anpassen */
		margin-top: 100px;
    }
}

/* Für Bildschirme kleiner als 480px (z. B. Smartphones) */
@media (max-width: 480px) {
    .LoginBoxR {
        left: 0%; /* Noch weniger Abstand links */
        margin-left: 5px; /* Kein negativer Abstand */
        max-width: 95%; /* Breite anpassen */
        padding: 15px; /* Weniger Padding für kleine Displays */
		margin-top: 80px;
    }
}
.flexbox-Index {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	height: 115%;
	min-height: 100%;
    margin-top:-90px;
}

.flex-ContLeft {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	width:40%;
	height: 100%;
	min-height: 100%;
	background: var(--StdBack);
    align-items: center;
}

.flex-ContRight {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	width:60%;
	height: 100%;
	min-height: 100%;
	background-image: url("../images/Header.jpg");
}
.RectBack
{
	background-image: url("../images/Rectangle510.svg");
	Background-size: cover;
	background-repeat: no-repeat;
    border-bottom-right-radius: 40px;
    z-index:7777;
}
.RectBackLeft
{
	background-image: url("../images/FooterBack.png");
	Background-size: cover;
	background-repeat: no-repeat;
    border-bottom-left-radius: 40px;
    z-index:7778;
}

@media screen and (max-width: 400px) {
	.LoginBox {
        left: 5%;
        margin-left: 0px;
	}
  }
.form-white
{
    background-color: #ffffff;
    border: 1px solid var(--secondary-black);
    border-radius: 15px;
    padding: 7px;
}
.IconDashboard
{
	background-image: url('../images/EMG-PortalIcons-Dashboard.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconDashboard:hover
{
	background-image: url('../images/EMG-PortalIcons-Dashboard-Hover.svg');
}
.IconContacts
{
	background-image: url('../images/EMG-PortalIcons-Contacts.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconContacts:hover
{
	background-image: url('../images/EMG-PortalIcons-Contacts-Hover.svg');
}
.IconCalendar
{
	background-image: url('../images/EMG-PortalIcons-Calander.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconCalendar:hover
{
	background-image: url('../images/EMG-PortalIcons-Calander-Hover.svg');

}
.IconExpat
{
	background-image: url('../images/EMG-PortalIcons-Expatriate.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconExpat:hover
{
	background-image: url('../images/EMG-PortalIcons-Expatriate-Hover.svg');
}
.IconCases
{
	background-image: url('../images/EMG-PortalIcons-Cases.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconCases:hover
{
	background-image: url('../images/EMG-PortalIcons-Cases-Hover.svg');
}
.IconFolder
{
	background-image: url('../images/EMG-PortalIcons-Files.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconFolder:hover
{
	background-image: url('../images/EMG-PortalIcons-Files-Hover.svg');
}
.IconToDo
{
	background-image: url('../images/EMG-PortalIcons-ToDoList.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconToDo:hover
{
	background-image: url('../images/EMG-PortalIcons-ToDoList-Hover.svg');
}
.IconArticle
{
	background-image: url('../images/EMG-PortalIcons-Article.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconArticle:hover
{
	background-image: url('../images/EMG-PortalIcons-Article-Hover.svg');
}
.IconStatistic
{
	background-image: url('../images/EMG-PortalIcons-Stats.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconStatistic:hover
{
	background-image: url('../images/EMG-PortalIcons-Stats-Hover.svg');
}
.IconConf
{
	background-image: url('../images/EMG-PortalIcons-Settings.svg');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.IconConf:hover
{
	background-image: url('../images/EMG-PortalIcons-Settings-Hover.svg');
}
.IconWorld
{
	background-image: url('../images/IconWorld.png');
	Background-size: cover;
	background-repeat: no-repeat;
	width:30px;
	height:28px;
}
.Main
{
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
h1, .h1 {
	font-size: 2rem;
	color: var(--secondary-black);

  }
  
  h2, .h2 {
	font-size: 1.7rem;

  }
.H1Big
{
	font-size: 70pt;
	margin-left:5px;
	margin-top:30px;
	margin-bottom: 30px;
	letter-spacing: -1.5%;
	line-height: 85%;
	font-family: "AgrandirBold";
}
.H1Medium
{
	font-size: 35pt;
	margin-left:5px;
	margin-top:30px;
	margin-bottom: 30px;
	letter-spacing: -1.5%;
	line-height: 85%;
	font-family: "AgrandirBold";
}
@media screen and (max-width: 300px) {
	.H1BIG {
	  font-size: 40px;
	}
  }
a 
{
	color: #3e68b4;
	text-decoration: dotted;
}
a:hover
{
	color:#8a0e19;
}
.TopNav:hover{
	color: #ff6e30;
}
.CCBox
{
	max-width: 800px;
	border-radius: 25px;
	border: 0px solid var(--secondary-black);
	padding:15px;
}
.CCBoxWhiteLabel
{
	border-radius	: 	25px;
	border			: 	1px solid var(--secondary-black);
	padding			:	7px;
	background		: 	var(--secondary-white);
}
.FlexFrame
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width:100%;
    flex-flow: wrap;  
	gap:35px;
}
.FlexRow
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width:100%;
    flex-flow: wrap;  
}
.FlexWrap
{
	flex-wrap: wrap;
}
.JustifyCenter
{
	justify-content: center;
}
.JustifyContentSpaceBetween
{
	justify-content: space-between;
}
.SpaceAround
{
	gap: 25px;
}
.bgemggray
{
	background: var(--secondary-black);
}
.bgemgyellow
{
	background: #ff6e30;
}
.FooterTop
{
	background: var(--StdBack);
	border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
	width:100%;
	height:40px;
	margin-top: 0px;
	position:absolute;
}
.FooterLeiste
{
	width: 100%;
	clear:both;
	height:20px; 
	margin-top:20px;
	margin-bottom: -5px;
}
#Footer
{
	width:100%;
	height:230px;
	margin-bottom:-10px;
	padding:0px;
	background: var(--secondary-black);
    position:relative;
}
.dashbox
{
	text-align:center;
	color:#ffffff;
	float:left;
	width:230px;
	font-size:14pt;
	cursor:pointer;
	height:65px;
	padding:7px;
	line-height: 26px;
	opacity: 1;
	transition: 0.3s;
	border-radius: 3px 3px 3px 3px;
	background: #04171D;
}
.Circle 
{
	width: 20px;
	height: 20px;
	color: #ffffff;
	background-color:#8a0e19;
	border-radius: 9px 9px 9px 9px;
	position: absolute;
	margin-left:17px;
	margin-top:-18px;
}
.FlexBoxRow
{
	display: flex;
	flex-direction: row;
}
.FlexBoxColumn
{
	display: flex;
	flex-direction: column;
}
.BackGreen
{
	background:#b4ba55;
	color:#cccccc;
}
.BackGrey
{
	background:#a7a7a7;
	color:#cccccc;
}
.BackGreyLight
{
	background:#a7a7a7;
	color:#e6e4e4;
}
.BackWhite
{
	background:#ffffff;
}
.dashbox:hover
{
	background: #ff6e30;;
	transition: 0.3s;
}
.black_overlay
 {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 110%;
	height: 380%;
	background-color: black;
	z-index:3001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
 }
 .inline_head
{
 float:left;
 width:380px;
 text-align:left;
 padding:3px;
 cursor:pointer;
}
.inline_head:hover
{
 background:#d6e2e8;
}
.loaderSmall {
	color: #ffffff;
	font-size: 90px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	margin: 72px auto;
	position: relative;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
	animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  }
  .GesLine
  {
	  padding:3px;
	  color:#666666;
	  background: #e2e3e5;
	  cursor: pointer;
	  height:23px;
  }
  .GesLine:hover
  {
	  background: #f1f1f1;
  }
#zuord
{
	top:50%;
	left:50%;
	z-index:3200;
	min-width:1160px;
	height:630px;
	display:none;
	margin-top:-290px;
	margin-left:-600px;
	position:fixed;
	text-align:center;
	overflow:auto;
	overflow-y: scroll;
	overflow-x: hidden;
}
 #update { 
	position:fixed; 
	top:50%; left:50%; 
	margin-top:-100px;
	z-index:3010;
	height:100px; 
	width:400px;
	padding:10px 5px 15px 23px; 
	font-weight:bold; 
	color:#ffffff;
	font-size:14pt;
	} 
	.loader,
	.loader:before,
	.loader:after {
	  background: #ffffff;
	  -webkit-animation: load1 1s infinite ease-in-out;
	  animation: load1 1s infinite ease-in-out;
	  width: 1em;
	  height: 4em;
	}
	.loader {
	  color: #298ad5;
	  text-indent: -9999em;
	  margin: 88px auto;
	  position: relative;
	  font-size: 11px;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}
	.loader:before,
	.loader:after {
	  position: absolute;
	  top: 0;
	  content: '';
	}
	.loader:before {
	  left: -1.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	.loader:after {
	  left: 1.5em;
	}
	@-webkit-keyframes load1 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 0;
		height: 4em;
	  }
	  40% {
		box-shadow: 0 -2em;
		height: 5em;
	  }
	}
	@keyframes load1 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 0;
		height: 4em;
	  }
	  40% {
		box-shadow: 0 -2em;
		height: 5em;
	  }
	}
.FontColorYellow
{
	color: #fcce01;
}
.FontColorYellowDark
{
	color: #7e6702;
}
.FontColorDark
{
	color: #383838;
}
.FontColorRed
{
	color: #dd2c2c;
}
.SmallFont
{
	font-size: 10px;
}
.CalLabelCell
{
	margin-bottom: 0;
	border-radius: 0.25rem;
	color:#414040;
	font-size: 10px;
	padding:1px;
	padding-left: 3px;
	overflow: hidden;
	margin-top:1px;
}
.CalLabelCellCanvas
{
	margin-bottom: 0;
	border-radius: 0.25rem;
	color:#414040;
	font-size: 14px;
	padding:1px;
	padding-left: 3px;
	overflow: hidden;
	margin-top:1px;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
.line
{
	width:100%;
	background:#f1f1f1;
	height:40px;
	margin-top:3px;
	padding:7px;
	font-size:18px;
  	transition: 0.5s;
}
.line:hover
{
	background:#cccccc;
	cursor:pointer;
	transition:opacity 2s linear;
	opacity: 1;
}
.LineJournal
{
	width:100%;
	height: 25px;
	background:#ffffff;
  	transition: 0.5s;
	margin-top:2px;
}
.LineJournal:hover
{
	background:#cccccc;
	cursor:pointer;
	transition:opacity 2s linear;
	opacity: 1;
}
.main_inline_doks
{
	background:#f8f7f7;
	width:1200px;
	cursor:pointer;
}
.main_inline_doks:hover
{
	background:#c9f2ff;
}
.zeile_bearb
{
	background:#f1f1f1;
	height:25px;
	margin-top:3px;
}
.zeile_bearb:hover
{
	background:#c9f2ff;
}
.line_bearb
{
	width:100%;
	background:#f1f1f1;
	height:25px;
	margin-top:3px;
  	transition: 0.5s;
}
.line_bearb:hover
{
	background:#cccccc;
	cursor:pointer;
	transition:opacity 2s linear;
	opacity: 1;

}
.print_options
{
	margin-left:7px;
	padding:7px;
	cursor:pointer;
	float:left;
}
.print_options:hover
{
	background:#f1f1f1;
}
.CursorPointer
{
	cursor:pointer;
}
.TextAlignLeft
{
	text-align: left;
}
.TextAlignRight
{
	text-align: right;
}
.AuftragFelder
{
	width: 250px;
	padding: 5px;
	margin-top:3px;
}
.WorkerFelder
{
	margin-top:3px;
}
.BorderTop
{
	border-top:1px solid #cccccc;
}
.BorderRight
{
	border-right:1px solid #cccccc;
}
.BorderRounded
{
	border-radius: 5px;
}
.DisplayNone
{
	display:none;
}
.DisplayBlock
{
	display: block;
}
.DisplayInline
{
	display: inline;
}
.PaddingSmall
{
	padding: 0rem 0.3rem;
}
.Padding0
{
	padding:0px;
}
.Padding2
{
	padding:2px;
}
.Padding3
{
	padding:3px;
}
.Padding5
{
	padding:5px;
}
.Padding6
{
	padding:6px;
}
.Padding7
{
	padding:7px;
}
.Padding10
{
	padding:10px;
}
.Padding20
{
	padding:20px;
}
.alert-danger
{
	background-color: #ee7782;
	color:#8a0e19;
}
.OverFlowHidden
{
	overflow: hidden;
}
.OverFlowScroll
{
	overflow-y: scroll;
}
.ClearBoth
{
	clear:both;
}
.clearflex{
    width:100%;
}
.WorkFlowHeader
{
	padding:15px;
	font-size:18px;
	cursor:pointer;
	height: 60px;
}
.WorkFlowHeader:hover
{
	background: #f6d9af;
	border-radius: 10px;
}
.WorkflowContainer
{
	background: #ffffff;
	border-radius: 10px;
}
.HeadSymb
{
	font-size:20px;
	margin-bottom: 5px;
}
.Step 
{
	background: var(--secondary-white);
	font-size: 14px;	
	float:left;
	text-align: center;
	cursor: pointer;
	border: 1px solid var(--secondary-black);
	border-radius: 10px;
	color: var(--secondary-black);
}
.Step:hover
{	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.52); 
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.52);
}
.StepActive
{
	background: var(--secondary-orange);
	font-size: 14px;	
	float:left;
	text-align: center;
	cursor: pointer;
	border: 1px solid var(--secondary-black);
	border-radius: 10px;
	color: var(--secondary-black);
}
.switch {
	position: relative;
	display: inline-block;
	width: 54px;
	height: 28px;
  }
  
  .switch input { 
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider {
	background-color: #76be02;
  }
  
  input:focus + .slider {
	box-shadow: 0 0 1px #76be02;
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }
.FloatLeft
{
	float:left;
}
.TextRight
{
	text-align:right;
}
.TextLeft
{
	text-align:left;
}
.TextCenter
{
	text-align:center;
}
.TextSize12
{
	font-size: 12px;
}
.TextSize18
{
	font-size: 18px;
}
.TextSize20
{
	font-size: 20px;
}
.LineHeight16
{
	line-height: 16px;
}
.LineHeight18
{
	line-height: 18px;
}
.LineHeight22
{
	line-height: 22px;
}
.DisplayInline
{
	display:inline;
}
.MargLeft0
{
	margin-left:0px;
}
.MargLeft3
{
	margin-left:3px;
}
.MargLeft5
{
	margin-left:5px;
}
.MargLeft15
{
	margin-left:15px;
}
.MargLeft15Responsive
{
	margin-left:15px;
}
.MargRight10
{
	margin-right:10px;
}
.MargTop-2
{
	margin-top:-2px;
}
.MargTop0
{
	margin-top:0px;
}
.MargTop2
{
	margin-top:2px;
}
.MargTop5
{
	margin-top:5px;
}
.MargTop9
{
	margin-top:9px;
}
.MargTop10
{
	margin-top:10px;
}
.MargTop20
{
	margin-top:20px;
}
.MargTop25
{
	margin-top:25px;
}
.MargTop30
{
	margin-top:30px;
}
.MargTop35
{
	margin-top:35px;
}
.MargTop40
{
	margin-top:40px;
}
.MargTop50
{
	margin-top:50px;
}
.MargTop60
{
	margin-top:60px;
}
.MargLeft2
{
	margin-left:2px;
}
.MargLeft5
{
	margin-left:5px;
}
.MargLeft10
{
	margin-left:10px;
}
.MargLeft20
{
	margin-left:20px;
}
.MargLeft30
{
	margin-left:30px;
}
.MargLeft40
{
	margin-left:40px;
}
.MargBottom0
{
	margin-bottom:0px;
}
.MargBottom10
{
	margin-bottom:10px;
}
.MargBottom20
{
	margin-bottom:20px;
}
.MargBottom40
{
	margin-bottom:40px;
}
.W10
{
	width:10px;
}
.W20
{
	width:20px;
}
.W30
{
	width:30px;
}
.W32
{
	width:32px;
}
.W40
{
	width:40px;
}
.W50
{
	width:50px;
}
.W70
{
	width:70px;
}
.W80
{
	width:80px;
}
.W100
{
	width:100px;
}
.W150
{
	width:150px;
}
.W170
{
	width:170px;
}
.W175
{
	width:175px;
}
.W180
{
	width:180px;
}
.W200
{
	width:200px;
}
.W250
{
	width:250px;
}
.W300
{
	width:300px;
}
.W320
{
	width:320px;
}
.W350
{
	width:350px;
}
.W370
{
	width:370px;
}
.W390
{
	width:390px;
}
.W400
{
	width:400px;
}
.W450
{
	width:450px;
}
.W500
{
	width:500px;
}
.W600
{
	width:600px;
}
.WM600
{
	max-width:600px;
}
.W650
{
	width:650px;
}
.W700
{
	width:700px;
}
.WM700
{
	max-width:700px;
}
.W750
{
	width:750px;
}
.W800
{
	width:800px;
}
.W830
{
	width:830px;
}
.W850
{
	width:850px;
}
.W900
{
	width:900px;
}
.W1100
{
	width:1100px;
}
.W1200
{
	width:1200px;
}

.W100P
{
	width:100%;
}
.H10
{
	height:10px;
}
.H20
{
	height:20px;
}
.H25
{
	height:25px;
}
.H30
{
	height:30px;
}
.H35
{
	height:35px;
}
.H40
{
	height:40px;
}
.H45
{
	height:45px;
}
.H43
{
	height:43px;
}
.H50
{
	height:50px;
}
.H60
{
	height:60px;
}
.H70
{
	height:80px;
}
.H80
{
	height:80px;
}

.H100
{
	height:100px;
}
.H120
{
	height:120px;
}
.H200
{
	height:200px;
}
.H250
{
	height:250px;
}
.H300
{
	height:300px;
}
.H400
{
	height:400px;
}
.H450
{
	height:450px;
}
.H500
{
	height:500px;
}
.H550
{
	height:550px;
}
.H600
{
	height:600px;
}
.H650
{
	height:650px;
}
.H700
{
	height:700px;
}
.H750
{
	height:750px;
}
.H800
{
	height:800px;
}
.MH70
{
	min-height:70px;
}
.MH100P
{
	min-height: 100%;
}
.HAuto
{
	height:auto;
}
.FontSize10
{
	font-size:10px;
}
.FontSize12
{
	font-size:12px;
}
.FontSize14
{
	font-size:14px;
}
.FontSize16
{
	font-size: 16px;
}
.FontSize18
{
	font-size: 18px;
}
.FontSize22
{
	font-size: 22px;
}
.FontSize24
{
	font-size: 24px;
}
.FontSize26
{
	font-size: 26px;
}
.FontSize35
{
	font-size:35px;
}
.AutoSelect
{
	padding:4px;
	background:#f1f1f1;
	border-radius: 5px 5px 5px 5px;
	margin-left:5px;
	float:left;
}
.AutoSelectActive
{
	padding:4px;
	background:#94b402;
	border-radius: 5px 5px 5px 5px;
	margin-left:5px;
	float:left;
}
.Green
{
	background:rgb(3, 163, 3);
}
.BackgroundGrey
{
	background: #F2F4F7;
}
.HoverGrey:hover
{
	color:#ff6e30;
}
.CircleOK
{
	color:#5c8b02;
	font-size: 10px;
	margin-top:0px;

}
.WorkflowOpen
{
	background:#cccccc;
	color:#666666;
	border-color: #cccccc;
	border-radius: 10;
	width:200px;
	height:30px;
	text-align: center;
	margin-top: 3px;
	margin-left: 3px;
	float:left;
}
.WorkflowOpen:hover
{
	background:#ff6e30;
	border-color: #ff6e30;
	transition: 0.4s;
}
.btnOrange
{
	border-radius:17px;
	padding:7px;
	color: var(--secondary-black);
	background-color: var(--secondary-orange);
	border-color: var(--secondary-black);
	border: 1px solid;
}
.btn-primary
{
	background-color: var(--secondary-black);
	border-color: var(--secondary-black);
	border-radius:17px;
}
.btn-primary:hover
{
	background-color: #ff6e30;
	border-color: #d37913;
}
.btn-success
{
	border-radius:17px;
}
.btn-warning
{
	border-radius:17px;
}
.btn-secondary
{
	border-radius:17px;
}
.CitrusBadge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	background: var(--Citrus);
	padding:1px;
	width: 80px;
	font-size:9px;
	text-align: center;
}
.Citrus2Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	background: var(--Citrus2);
	padding:1px;
	width: 80px;
	font-size:9px;
	text-align: center;
}
.Citrus3Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	background: var(--Citrus3);
	padding:1px;
	width: 80px;
	font-size:9px;
	text-align: center;
}
.OrangeBadge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--secondary-orange);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.SorbetBadge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--Sorbet);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.Sorbet2Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--Sorbet2);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.Sorbet3Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--Sorbet3);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.WhiteBadge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--secondary-white);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.HazyWhite2Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--HazyWhite2);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.HazyWhite3Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--HazyWhite3);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.OceanBadge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--Ocean);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.Ocean2Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--Ocean2);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.Ocean3Badge
{
	border-radius: 10px;
	border: 1px solid var(--secondary-black);
	padding:1px;
	background: var(--Ocean3);
	width: 80px;
	font-size:9px;
	text-align: center;
}
.Frame
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    flex-flow: wrap;  
	flex-wrap: wrap;
	row-gap: 10px;
}
.EvBox
{
	padding:5px;
	border: 1px solid #284781;
	text-align: center;
	background:#f1f1f1;
	margin-left: 7px;
	cursor:pointer;
}
.EvBox:hover
{
	background:#516997;
}
.EvBoxActive
{
	padding:5px;
	border: 1px solid #6bc449;
	text-align: center;
	background:#6bc449;
	margin-left: 7px;
	-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.62); 
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.62);
}
/* (A) UPLOAD ZONE */
#upzone {
	width:450px;
	height: 80px; 
	background: #f1f1f1;
	border:3px dashed #cccccc;
	padding: 2px;
	text-align:center;
  }
  #upzone.highlight {
	background: rgb(184, 14, 2);
	opacity: 2;
	transition: 0.4s;
  }
  
  /* (B) UPLOAD FORM */
  #upform {
	display: none;
  }
  .upzone {
	width: 450px; 
	height: 80px; 
	background: #f1f1f1;
	border:3px dashed #cccccc;
	padding: 2px;
	text-align:center;
  }
  .upzone.highlight {
	background: rgb(184, 14, 2);
	opacity: 2;
	transition: 0.4s;
  }
  
  /* (B) UPLOAD FORM */
  .upform {
	display: none;
  }
.Transition
{
	transition: color .35s ease-in-out,background-color .35s ease-in-out,border-color .35s ease-in-out,box-shadow .15s ease-in-out;
}
.drop-down-select-list 
{ 
	display: none;
	position: absolute;
	z-index: 1; 
	text-align: left;
	margin-top: 0px; 
	margin-left: 10px; 
	padding: 0px; 
	background-color: #ffffff; 
	width:250px;
	overflow-y:hidden;
	overflow-x: hidden;
	box-shadow: 2px 10px 18px 1px rgba(16, 24, 40, 0.25);
	border-radius: 5px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
} 
.drop-down-select-list-li 
{ 
	margin-left:0px;
	display: inline-block; 
	min-height: 30px; 
	min-width: 280px; 
	width: 100%; 
	padding: 5px 15px 5px 35px; 
	padding-left:10px;
	background-color: #ffffff; 
	background-position: left 10px center; 
	background-repeat: no-repeat; 
	font-size: 16px; 
	text-align: left; 
	color: #666666; 
	opacity: 0.7; 
	box-sizing: border-box; 
	cursor:pointer;
	overflow: hidden;
}
.drop-down-select-list-li:hover
{ 
	background-color: #f1f1f1; 
}
.drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }
.newslide
{
	display:none;
	background:#ffffff;
	box-shadow: inset 0 0 1em #ffffff, 0 0 1em #666666;
	width:1100px;
	padding:20px;
	position:absolute;
	margin-top:0px;
	margin-bottom:50px;
	border-radius: 7px 7px 7px 7px;
}
.PermissionHead
{
	background:#f1f1f1;
	font-weight:bold;
	font-size:20px;
	padding:3px;
	width:1120px;
}
.PermissionLine
{
	padding:3px;
	width:1050px;
	float:left;
	margin-left:15px;
}
.PermissionCell
{
	float:left;
	text-align: left;
}
.list-group {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	border-radius: 0.25rem;
  }
  .list-group-item-head {
	position: relative;
	display: block;
	padding: 0.65rem 1.25rem;
	background-color: #f1f1f1;
	border: 1px solid rgba(0, 0, 0, 0.125);
	font-weight:bold;
	font-size: 20px;
	margin-top:3px;
	cursor:pointer;
	float:left;
  }
  .list-group-item {

	float:left;
	margin-left:15px;
	position: relative;
	display: block;
	padding: 0.55rem 1.1rem;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
	cursor:pointer;
  }
  .list-group-item-action {
	width: 100%;
	color: #495057;
	text-align: inherit;
  }
  
  .list-group-item:hover, .list-group-item-action:focus {
	z-index: 1;
	color: #495057;
	text-decoration: none;
	background-color: #f8f9fa;
  }
  .back-to-top
  {
	  color:#666666;
	  text-align:right;
	  position: fixed;
	  bottom:20px;
	  right:20px;
	  padding:1em;
	  font-size:45px;
	  float:right;
  }
  .InfoI4
  {
	  display:none;
	  width:500px;
	  padding:7px;
	  color:#666666;
	  border:0px solid #b4ba55;
	  position:absolute;
	  border-radius: 4px 4px 4px 4px;
	  background-image: linear-gradient(to top, #ffffff 9%, #ffffff 95%);
	  -webkit-transition: left .5s ease-in;
	  -moz-transition: left .5s ease-in;
	  -o-transition: left .5s ease-in;
	  -ms-transition: left .5s ease-in;
	  transition: 0.3s;
	  box-shadow: 10px 10px 15px rgb(58, 58, 58);
  }
.CalBackHead
  {
	color:#f1f1f1;
	padding:10px;
	background:#ff6e30;
	font-size: 16px;
	font-weight: bold;
  }
.CalBack
{
	background:#f1f1f1;
	padding:10px;
}
.CalBack:hover
{
	background: #b6c1d6;
	-webkit-transition: left .5s ease-in;
	-moz-transition: left .5s ease-in;
	-o-transition: left .5s ease-in;
	-ms-transition: left .5s ease-in;
	transition: 0.5s;
}
.SpecialDay
{
	background: #dddddd;
}
.CalToday
{
	border:2px solid #ce626b;
}
.ui-datepicker-header
{
	color: #6985b9;
}
.ui-datepicker-calendar
{
	color: #6985b9;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
	color: #6985b9;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
	color: #6985b9;
}
.ui-datepicker-month
{
	display: block;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	width:250px;
	float:left;
}
.ui-datepicker-year
{
	display: block;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	width:100px;
	float:left;
}
.Shaddow 
{
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.62); 
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.62);
}
@media screen and (max-width : 1000px) 
{
.upzone {
	width:95%;
	}
.W650{
	width:90%;
}
.W500{
	width:90%;
}
}