body {margin: 0px; font-family: 'Roboto', Arial, Helvetica, sans-serif;}
table {margin: 0px; padding: 0px; border-spacing: 0px; border-collapse: collapse; }
td {margin: 0px; padding: 0px;}
.page-margin{margin: 15px;}

#holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto; display: flex; align-items: center; justify-content: center;}
#holder.hover { border: 10px dashed #0c0; }
#holder img { display: block; margin: 10px auto; }
#holder p { margin: 10px; font-size: 14px; }

.ui.segment.tab {
	margin: 0px !important;
	padding: 0px !important;
	border: none !important;
}

.organizer-menu-item { display: inline-block; vertical-align: middle; height: 32px; }
.organizer-menu-item:before { content:'';display:inline-block;width:0px;height:100%;vertical-align:middle; }
.organizer-menu-item .item { display:inline-block;padding-left:0.3em;padding-right:0.3em; }
.organizer-menu-item.item.active { background-color: #cfcfcf !important; }

.modalless-panel { 
	position: absolute; 
	left: 100px; 
	top: 100px; 
	display: inline-block; 
	z-index: 999;
}

.overlay-panel {
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.9);
}

.overlay-panel-header {
	padding:12px 16px 12px 16px;
	color:gray;
	background-color: lightgray;
	cursor: move;
}

.overlay-panel-content {
	padding: 16px;
}

.overlay-panel-content td { text-align: center; }

.popover-button-collection { 
	margin-top: 10px; 
	width: 100%; 
	display: flex; 
	justify-content: flex-end; 
}

.custom-card {
	background: #fff;
	border-radius: 2px;
	display: inline-block;
	height: 300px;
	margin: 1rem;
	position: relative;
	width: 300px;
}
.custom-card-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); }
.custom-card-1:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
.custom-card-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }
.custom-card-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }
.custom-card-4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
.custom-card-5 { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); }

label { font-size: 1em !important; }

.dock-panel-container-fluid { display: block; height: 100%; line-height: 100%; }
.dock-panel-container-fluid:before { content:'';display:inline-block;width:0px;height:100%;vertical-align:middle; }
.organizer-header2 { font-size: 16pt; font-weight: bold }
.organizer-title:hover {
	cursor: pointer;
	color: rgba(0, 0, 0, 0.622);
}

.mouse-hover { cursor:pointer }

/* */
.white { color: white; }

.valignMiddle { vertical-align: middle; }

.paddingLeft4 { padding-left: 4px; }
.paddingLeft6 { padding-left: 6px; }
.paddingLeft8 { padding-left: 8px; }
.paddingLeft12 { padding-left: 12px; }

.paddingTop4 { padding-top: 4px; }
.paddingTop6 { padding-top: 6px; }
.paddingTop8 { padding-top: 8px; }
.paddingTop10 { padding-top: 10px; }

.paddingRight12 { padding-right: 12px; }
.paddingRight24 { padding-right: 24px; }

.organizer-fa5 { font-size: 9pt; }

.marginTop0 { margin-top: 0px!important; }
.listItemMargin { margin-bottom: 10px; }

/* resource-list */
/*
.resource-list .item { display: flex !important; }
.resource-list .item i { 
	display: inline-block !important;
	background-color: gray;
	color: #f0f0f0 !important;
	border-radius: 100%; 
	vertical-align: middle !important; 
	min-width: 32px !important; 
	min-height: 32px !important; 
	padding: 0px !important;
	line-height: 32px !important;
}
.resource-list .item.active i { color: white !important; }
.resource-list .item .description { font-size: 0.75em; }
*/

/* Resource Categories */
.resource-category-title {padding-bottom:12px;}
.resource-category-children {padding-left:24px;}

/* Calendar */
.calendar-panel { background-color: #EFEFEF; }
.calendar-control-panel { background-color: #EFEFEF; border:solid 1px #efefef;}
.calendar-control-panel-title { background-color: #d0d0d0; color: #3f3f3f; font-size: 0.9em; font-weight: bold; padding: 4px 6px 4px 6px; }
.calendar-control-panel-body { padding: 18px 16px 26px 16px; }


.action-button { width: 100px !important; height: 40px !important; }
.action-button-mini { 
	display: inline-block; 
	width: 80px; 
	height: 28px; 
	margin: 0px 6px 6px 0px; 
	line-height: 100%; 
	text-align: left; vertical-align: top; 
	white-space: nowrap; 
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 0.8em;
	background-color: white;
}
.action-button-shevron { display: inline-block; vertical-align: middle; width: 6px; height: 100%; margin-right:6px; }
.action-button-mini:before { content:'';display:inline-block;width:0px;height:100%;vertical-align:middle; }

/*  */
.cell-span {
	background-color: white;
	border-left: 1px solid lightgrey !important;
	border-right: 1px solid lightgrey !important;
	border-bottom: 1px solid lightgrey !important;
}

.cell-label { display: flex; }
.cell-label-day  { flex-grow: 8; padding-left: 8px; }
.cell-label-date { flex-grow: 2  }
.cell-label-week { flex-grow: 1; padding-right: 6px; text-align: right; color: #666666; font-size: 0.8em; }

.cell-label-free {
	background-color: lightgoldenrodyellow !important;
}

.cell-context-am {
	border: none !important;
	border-top:solid 1px transparent !important;
}

.cell-context-pm {
	border: none !important;
	border-bottom:solid 1px transparent !important;
}

.cell-context-value {
	text-align: center;
	z-index: 1 !important;
}

.finger-cursor:hover { cursor: pointer }  
.cell-content-100pc-height {
	height: 100%;
	display: flex;
}

.max-width-30vw { max-width: 30vw }
.max-width-15vw { max-width: 15vw }
.max-width-10vw { max-width: 10vw }

.limited-height-cell {
	max-height     : 30vh;
	vertical-align : top;
	overflow       : hidden;
}

/* colored cells */
/* Note: these background-colors are also declared in a const file, with the shared components.
	If a value is added/modified here, the change should be replicated in src/client/components/common/constants.js */
.cell-context-aqua { background-color: #00FFFF !important; color: black; }
.cell-context-red {	background-color: #ff0000 !important; color: white; }
.cell-context-blue { background-color: #0000ff !important; color: white; }
.cell-context-green { background-color: #008000 !important; color: white; }
.cell-context-coral { background-color: #ff7f50 !important; color: black; }
.cell-context-olive { background-color: #92D050 !important; color: black; }
.cell-context-teal { background-color: #008080 !important; color: white; }
.cell-context-purple { background-color: #800080 !important; color: white;}
.cell-context-yellow { background-color: #ffff00 !important; color: black; }
.cell-context-lightgreen { background-color: #CCFFCC !important; color: black; }
.cell-context-brown { background-color: #a52a2a !important; color: white; }
.cell-context-lightgray { background-color: #d3d3d3 !important; color: black; }
.cell-context-black { background-color: #000000 !important; color: white; }
.cell-context-navy { background-color: #000080 !important; color: white; }
.cell-context-orange { background-color: #ffa500 !important; color: black; }
.cell-context-lime { background-color: #00ff00 !important; color: black; }
.cell-context-darkred {background-color: #8b0000 !important; color: white; }
.cell-context-today {background-color: #fde8ce !important; color: black; }
.cell-context-cyan {background-color: #00ffff !important; color: black; }
.cell-context-palegreen {background-color: #98fb98 !important; color: black; }
.cell-context-moccasin {background-color: #ffd58e !important; color: black; }
.cell-context-lightblue {background-color: #add8e6 !important; color: black; }
.cell-context-lightyellow {background-color: #ffffe0 !important; color: black; }
.cell-context-magenta {background-color: #ff00ff !important; color: black; }
.cell-context-darkmagenta {background-color: #8b008b !important; color: white; }
.cell-context-darksalmon {background-color: #e9967a !important; color: black; }
.cell-context-lightcyan {background-color: #e0ffff !important; color: black; }
.cell-context-dodgerblue {background-color: #3699ff !important; color: black; }
.cell-context-mustard {background-color: #f9c001 !important; color: black; }
.cell-context-conifergreen {background-color: #92d050 !important; color: black; }
.cell-context-darkrose {background-color: #f51b78 !important; color: white; }
.cell-context-electricpink {background-color: #f500ff !important; color: white; }
.cell-context-scarlet {background-color: #f43304 !important; color: white; }
.cell-context-eggplant {background-color: #800080 !important; color: white; }
.cell-context-darkolive {background-color: #808000 !important; color: white; }
.cell-context-steelblue {background-color: #4f81bd !important; color: white; }
.cell-context-electricgreen {background-color: #51ff00 !important; color: black; }
.cell-context-pinegreen {background-color: #248000 !important; color: white; }
.cell-context-violet {background-color: #cc01ff !important; color: white; }
.cell-context-rose {background-color: #f53399 !important; color: white; }
.cell-context-lilac {background-color: #9999ff !important; color: black; }
.cell-context-mint {background-color: #99ffcc !important; color: black; }
.cell-context-royalblue {background-color: #1b00ff !important; color: white; }
.cell-context-lemon {background-color: #feff00 !important; color: black; }
.cell-context-textonly { color: black; }
.cell-context-textonly-red { color: #ff0000; }

/* colored dropdown dots */
.dot-aqua [role="alert"]::before { background-color: #00FFFF }
.dot-red [role="alert"]::before {	background-color: #ff0000 }
.dot-blue [role="alert"]::before { background-color: #0000ff }
.dot-green [role="alert"]::before { background-color: #008000 }
.dot-coral [role="alert"]::before { background-color: #ff7f50 }
.dot-olive [role="alert"]::before { background-color: #92D050 }
.dot-teal [role="alert"]::before { background-color: #008080 }
.dot-purple [role="alert"]::before { background-color: #800080 }
.dot-yellow [role="alert"]::before { background-color: #ffff00 }
.dot-lightgreen [role="alert"]::before { background-color: #CCFFCC }
.dot-brown [role="alert"]::before { background-color: #a52a2a }
.dot-lightgray [role="alert"]::before { background-color: #d3d3d3 }
.dot-black [role="alert"]::before { background-color: #000000 }
.dot-navy [role="alert"]::before { background-color: #000080 }
.dot-orange [role="alert"]::before { background-color: #ffa500 }
.dot-lime [role="alert"]::before { background-color: #00ff00 }
.dot-darkred [role="alert"]::before {background-color: #8b0000 }
.dot-today [role="alert"]::before {background-color: #fde8ce }
.dot-cyan [role="alert"]::before {background-color: #00ffff }
.dot-palegreen [role="alert"]::before {background-color: #98fb98 }
.dot-moccasin [role="alert"]::before {background-color: #ffd58e }
.dot-lightblue [role="alert"]::before {background-color: #add8e6 }
.dot-lightyellow [role="alert"]::before {background-color: #ffffe0 }
.dot-magenta [role="alert"]::before {background-color: #ff00ff }
.dot-darkmagenta [role="alert"]::before {background-color: #8b008b }
.dot-darksalmon [role="alert"]::before {background-color: #e9967a }
.dot-lightcyan [role="alert"]::before {background-color: #e0ffff }
.dot-dodgerblue [role="alert"]::before {background-color: #3699ff }
.dot-mustard [role="alert"]::before {background-color: #f9c001 }
.dot-conifergreen [role="alert"]::before {background-color: #92d050 }
.dot-darkrose [role="alert"]::before {background-color: #f51b78 }
.dot-electricpink [role="alert"]::before {background-color: #f500ff }
.dot-scarlet [role="alert"]::before {background-color: #f43304 }
.dot-eggplant [role="alert"]::before {background-color: #800080 }
.dot-darkolive [role="alert"]::before {background-color: #808000 }
.dot-steelblue [role="alert"]::before {background-color: #4f81bd }
.dot-electricgreen [role="alert"]::before {background-color: #51ff00 }
.dot-pinegreen [role="alert"]::before {background-color: #248000 }
.dot-violet [role="alert"]::before {background-color: #cc01ff }
.dot-rose [role="alert"]::before {background-color: #f53399 }
.dot-lilac [role="alert"]::before {background-color: #9999ff }
.dot-mint [role="alert"]::before {background-color: #99ffcc }
.dot-royalblue [role="alert"]::before {background-color: #1b00ff }
.dot-lemon [role="alert"]::before {background-color: #feff00 }
.dot-textonly [role="alert"]::before { background-color: #797979; }

.dropdown-divider-element { background-color: #d6d6d6; }

.schedule-date { background-color: #e8e8e8; margin-bottom: 6px !important; }

.ui.popup.schedule-item-popup { background-color: #DFDFDF; }
.ui.top.popup.schedule-item-popup:before { background-color: #DFDFDF !important; }
.ui.bottom.popup.schedule-item-popup:before { background-color: #DFDFDF !important; }
.ui.top.popup.schedule-item-popup:after { background-color: #DFDFDF !important; }
.ui.top.bottom.schedule-item-popup:after { background-color: #DFDFDF !important; }

.lookup { margin: 0px !important; }
.lookup .button { line-height: 100% !important; padding-right: 12px !important; }
.lookup .button:before {content:'';display:inline-block;width:0px;height:100%;vertical-align:middle;}

.backGray1 {
	background: rgba(239,239,239,1);
	background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(192,192,192,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(239,239,239,1)), color-stop(100%, rgba(192,192,192,1)));
	background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(192,192,192,1) 100%);
	background: -o-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(192,192,192,1) 100%);
	background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(192,192,192,1) 100%);
	background: linear-gradient(to bottom, rgba(239,239,239,1) 0%, rgba(192,192,192,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#c0c0c0', GradientType=0 );	
}

.backGray2 {
	background: rgba(239,239,239,1);
	background: -moz-linear-gradient(bottom, #9c9c9c 0%, #efefef 100%);
	background: -webkit-gradient(left bottom, left top, color-stop(0%, #9c9c9c), color-stop(100%, #efefef));
	background: -webkit-linear-gradient(bottom, #9c9c9c 0%, #efefef 100%);
	background: -o-linear-gradient(bottom, #9c9c9c 0%, #efefef 100%);
	background: -ms-linear-gradient(bottom, #9c9c9c 0%, #efefef 100%);
	background: linear-gradient(to top, #9c9c9c 0%, #efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9c9c', endColorstr='#efefef', GradientType=0 );	
}

.organizer-users-user-menu { background-color: #EEEEEE; background: linear-gradient(to right, rgba(189,189,189,1) 0%, rgba(238,238,238,1) 100%); }

/* */
.organizer-list-table td { padding: 4px; }
.organizer-list-table-item { display:flex; align-items: center; padding: 3px 4px 3px 4px; }
.organizer-list-table-item.selected { background-color: #dfdfdf; }
.organizer-list-table-item i {
	color: grey;
}
.organizer-list-table-item-content-header { font-size: 1em; font-weight: 700; line-height: 1.14285714em; }
.organizer-list-table-item-content-description { font-size: 1em; line-height: 1.14285714em; }

/* */
.organizer-toolbar { padding: 1px; height:36px; background-color: #f2f2f2; display: flex; align-items: center; }
.organizer-toolbar button { margin-right: 2px!important; }
.organizer-toolbar .organizer-toolbar-item { display: flex; align-items: center; vertical-align: middle; margin-right: 2px; height:34px; }

.ui.two.column.grid { padding-left: 5px; }

.resource.grid { border: solid 1px #f2f2f2 !important; padding: 10px; border-radius: 10px; background-color: #f2f2f2; margin-bottom: 10px; }

.resource-active-toggle { display: flex; flex-direction: column; align-items: flex-start; }

.resource-delete-at-label { font-size: 12px; color: #666; margin-top: 0; line-height: 14px; }

.resource-list-header { padding: 10px 15px; border-top: 1px solid #ddd; }

.resource.header { margin-top: 14px; padding-left: 2px; margin-bottom: 10px ;}

.resource.header.fix { margin-top: -5px !important; }

.listItem { display: flex!important; align-items: center; }

.costButton { margin-top: 8px }

.calendarButton { margin-top: 20px }

.entry-Button { width: 110px; margin-bottom: 5px }
.entry-apply-container { margin-bottom: 8px }

.userControlBar { width: 50% }

.filter-input-field { width: 80%; height: 60%}

/*abscence field dots*/
.absence-icon [role="alert"]::before {
	content : "";
	height: 12px;
	width: 12px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 10px;
}

.login-loader {
	height: 100%;
	border-style: none !important;
}

#root {
	height: 100%
}

.ag-theme-balham .ag-cell {
    line-height: 22px!important;
}

.ag-cell-content {
	max-height: 100%;
	white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
		display: inline-block;
}

.logout-button {
	background: inherit !important;
}

.passenger_cell .ag-theme-balham .ag-root-wrapper {
	border: none;
}

.keyInfo-listItem {
	margin-bottom: 15px;
}

.space-between-flex-container {
	display: flex;
	justify-content: space-between;
}

.flex-3-right-align {
	flex: 3;
	text-align: right;
}
.flex-2-left-margin {
	flex: 2;
	margin-left: 20px;
}

.flex-row-wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.tag-spacing {
	margin-right: 2px;
	margin-bottom: 2px;
}

.user-tag-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.user-tag-button {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.user-tag-tooltip {
	position: fixed;
	left: 0;
	top: 100%;
	margin-top: 4px;
	background: var( --user-tag-tooltip-bg, #1a1a1a );
	color: var( --user-tag-tooltip-color, #ffffff );
	font-size: 12px;
	line-height: 1.2;
	padding: 4px 6px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.2 );
	z-index: 99999;
}

.pdf {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	margin: 0, auto;
  }

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

/* Matrix cell hover and selection styles - transparent overlays */
.matrix-cell-am:hover::after,
.matrix-cell-pm:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  z-index: 1;
}

.matrix-cell-am-selected::after,
.matrix-cell-pm-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
background-color: rgba(0, 123, 255, 0.1);
	border: 1px solid rgba(0, 123, 255, 0.4);
  pointer-events: none;
  z-index: 1;
}
/* Selection overlay container */
.matrix-selection-overlay {
	position: absolute;
	pointer-events: none;
	z-index: 10;
}

/* Corner handle base styles - quarter circle borders only */
.matrix-selection-handle {
	position: absolute;
	width: 12px;
	height: 12px;
	background-color: transparent;
	border: 2px solid #007bff;
	pointer-events: auto;
	cursor: pointer;
	opacity: 0.9;
	transition: all 0.2s ease;
	z-index: 11;
	/* Improve touch targets for mobile */
		touch-action: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	/* Larger touch targets on mobile devices */
	@media (hover: none) and (pointer: coarse) {
		.matrix-selection-handle {
			width: 16px;
			height: 16px;
		}
}

/* Corner handle hover state */
.matrix-selection-handle:hover {
	width: 14px;
	height: 14px;
}

/* Corner handle active/dragging state */
.matrix-selection-handle:active,
.matrix-selection-handle.dragging {
	width: 16px;
	height: 16px;
}

.matrix-selection-handle.top-left {
	border-radius: 12px 0 0 0;
	border-right: transparent;
	border-bottom: transparent;
	cursor: nw-resize;
}

.matrix-selection-handle.top-right {

	border-radius: 0 12px 0 0;
	border-left: transparent;
	border-bottom: transparent;
	cursor: ne-resize;
}

.matrix-selection-handle.bottom-left {
	border-radius: 0 0 0 12px;
	border-right: transparent;
	border-top: transparent;
	cursor: sw-resize;
}

.matrix-selection-handle.bottom-right {
	border-radius: 0 0 12px 0;
	border-left: transparent;
	border-top: transparent;
	cursor: se-resize;
}