BODY.modal-open { overflow: hidden; }
BODY.modal-open.page-overflow .page-container { overflow-y: visible !important; }

body.reports
{
	font: 16px Open Sans;
	width: 210mm;	
	overflow: hidden; 
}

SELECT { -moz-appearance: none; }

/********************************************/
/******REMOVE SCROLL IN INPUT NUMBER*********/
/********************************************/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number]
{ 
	-moz-appearance: textfield; 
	/* set all input number alignment */
	text-align: right;
}

.page-footer 
{
	background-color: #b1c5e1;
    padding-top: 6px;
    border-top: 1px solid #2a4b7a !important;
    color: #2a4b7a;
}

.scroll-to-top { bottom: 35px; right: 100px; }

.page-sidebar-menu-closed .NeoMenuHeading
{
	height: 2px !important; 
	padding: 0 !important; 
	margin: 5px !important; 
	background-color: #5b9bd1 !important;
	opacity: 0.3;
}

.datepicker-inline { width: 100%; }

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu { width: auto; max-width: 350px; max-height: calc(100vh - 150px); overflow-y: auto; }
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu > li.title { padding: 13px; font-weight: bold; background-color: #efefef; }
.page-content-wrapper .page-content { padding: 20px; background-color: white; margin-bottom: 53px; position: relative; }
.page-content-wrapper .page-content.rare
{
	height: 100vh;
	background-color: white; 
    margin: 0px !important;
    position: relative;
}

.note-editor.note-frame { border: 1px solid lightgray; }
.panel .panel-body { font-size: 14px; }

.page-container.rare { margin: 0 !important; padding: 0 !important; height: 100vh; overflow: hidden; }
.page-container.rare .hide-rare { display: none; }
.page-container.rare .portlet-title
{ 
	position: fixed; 
	left: 20px; top: 0px; 
	width: -moz-calc( 100% - 40px ); width: -webkit-calc( 100% - 40px ); width: calc( 100% - 40px ); 
}
.page-container.rare .portlet-body 
{ 
	position: fixed; 
	left: 20px; top: 50px; 
	width: 90%; width: -moz-calc( 100% - 40px ); width: -webkit-calc( 100% - 40px ); width: calc( 100% - 40px ); 
	height: 90%; height: -moz-calc( 100vh - 150px ); height: -webkit-calc( 100vh - 150px ); height: calc( 100vh - 150px ); 
	overflow: auto;
}

.page-container.rare .portlet-body::-webkit-scrollbar 
{ 
	height: 0px;  /* remove horizontal scrollbar space */
}

.page-container.rare .portlet-body.vsm { top: 75px; } 

.actions.btn-set { border-top: 1px solid #eee; padding-top: 20px; display: block; position: sticky; bottom: 30px; padding-bottom: 20px; background: var( --background-light ) !important; z-index: 2; }
.actions.btn-set.top-margin { margin-top: 10px; position: sticky; bottom: 30px; padding-bottom: 20px; background: var( --background-light ) !important; z-index: 2; }
.page-container.rare .portlet-body .actions.btn-set
{
	position: fixed;
    bottom: 20px;
    left: 20px;
    padding-top: 20px;
    z-index: 8;
    width: 90%; width: -moz-calc( 100% - 40px ); width: -webkit-calc( 100% - 40px ); width: calc( 100% - 40px ); 
}

.page-container.rare .portlet-body .Block_00_34 { position: absolute; top: 0; left: 0; width: 100%; height: 34%; }
.page-container.rare .portlet-body .Block_34_66 { position: absolute; top: 34%; left: 0; width: 100%; height: 66%; } 
.page-container.rare .portlet-body .Block_PX_00_350 { position: absolute; top: 0; left: 0; width: 100%; height: 350px; } 
.page-container.rare .portlet-body .Block_PX_350_REST { position: absolute; top: 350px; left: 0; width: 100%; height: 50%; height: -moz-calc( 100% - 350px ); height: -webkit-calc( 100% - 350px ); height: calc( 100% - 350px ); } 

.NeoMaximize:hover { opacity: 1; color: #5b9bd1; text-decoration: none; }
.NeoMaximize:before { font-family: 'Simple-Line-Icons'; content: "\e057"; font-size: 16px; text-decoration: none; }
.NeoMinimize:before { font-family: 'Simple-Line-Icons'; content: "\e058"; font-size: 16px; text-decoration: none; }
.NeoMinimize, .NeoMaximize { color: #959595; cursor: pointer; position: absolute; opacity: 0.4; text-decoration: none; }
.NeoMinimize { top: 47px;  right: 20px; z-index: 1; } .NeoMaximize { top: 20px;  right: 20px; }
.NeoEdited { right: 50px; color: #959595; position: absolute; opacity: 0.4; text-decoration: none; display: none; }
.NeoEdited.maximized { top: 46px; } .NeoEdited.maximized:before { font-family: 'Simple-Line-Icons'; content: "\e060"; text-decoration: none; font-size: 17px; }
.NeoEdited.minimized { top: 17px; } .NeoEdited.minimized:before { font-family: 'Simple-Line-Icons'; content: "\e060"; text-decoration: none; font-size: 19px; }

::-webkit-scrollbar 
{
    width: 0px;  /* remove vertical scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

* { -ms-overflow-style: none; scrollbar-width: unset; }

.disabled { color: lightgray; }

.reports .header { font: 25px Open Sans; }
input.noclear::-ms-clear { display: none; }
h4.narrow, h5.narrow, h6.narrow { margin-top: 0px; margin-bottom: -5px; }

.reports .overlapping
{
	width: 10px; height: 10px;
	border: 3px solid lightgray;
	border-radius: 10px;
	background-color: gray;
	margin: 2px;
	align: left;
	float: right;
}

.neo_wordwrap 
{ 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

div.boxMultiline
{
	font-size: 11px;
	font-weight: bold;
}

div.neo_page_blocks_iframe_wrapper
{
	width: 100%; 
	overflow: hidden;
}

iframe.neo_page_blocks_iframe
{
	width: 100%; 
}

div.neo_page_blocks_actions
{
	position: absolute; 
	top: 182px; left: 0px; 
	padding: 5px; 
	background-color: white; 
	border-top: 1px solid lightgray; 
	border-right: 1px solid lightgray;
}

td.timeframe_green_border_top
{
	background-color: #1fc8b0; 
	border-top: 1px dashed black; 
	border-left: 1px solid gray; 
	border-right: 1px solid gray; 
	cursor: pointer;
}

td.timeframe_green
{
	background-color: #1fc8b0; 
	border-left: 1px solid gray; 
	border-right: 1px solid gray; 
	cursor: pointer;
}

td.timeframe_green_bottom
{
	background-color: #1fc8b0; 
	border-bottom: 1px solid gray; 
	border-left: 1px solid gray; 
	border-right: 1px solid gray;
}

td.timeframe_green_bottom_dashed
{
	background-color: #1fc8b0; 
	border-bottom: 1px dashed black; 
	border-left: 1px solid gray; 
	border-right: 1px solid gray;
}

td.timeframe_green_bottom_end
{
	background-color: #1fc8b0; 
	border-bottom: 1px solid gray; 
	border-left: 1px solid gray; 
	border-right: 1px solid gray;
}

td.timeframe_gray
{
	background-color: lightgray; 
	border-bottom: 1px dashed black; 
	border-left: 1px solid gray; 
	border-right: 1px solid gray;
}

td.timeframe_gray_top
{
	background-color: lightgray; 
	border-top: 1px dashed black; 
	border-left: 1px solid gray; 
	border-right: 1px solid gray;
}

input.newsletterSeries
{
	width: 50px; height: 25px;
	text-align: center; 
	border: 1px solid lightgray; 
	font-size: 14px; 
	padding-bottom: 4px; 
	padding-top: 1px;
	margin: 4px 4px 0px 0px;
}

select.newsletterSeries
{
	width: 30px; height: 25px;
	text-align: center; 
	border: 1px solid lightgray; 
	font-size: 14px; 
	padding: 2px; 
	margin: 4px 4px 0px 0px;
}

div.newsletterSeries
{
	float:left;
	border: 1px solid lightgray; 
	width: 130px; 
	background: #f0f0f0; 
	padding: 3px 10px;
	margin: 2px 4px 2px 0px;
}

div.trafficeLight
{
	width: 40px;
	height: 40px;
	-webkit-border-radius: 30px !important;
  	-moz-border-radius: 30px !important;
  	border-radius: 30px !important;
  	border: 2px solid #dddddd;
	background-color: #eeeeee;
	margin: 2px;
}

.ellipsed
{
	overflow: hidden;
    wrap: no-wrap;
    word-wrap: no-wrap;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.menu_ellipsed
{
	overflow: hidden;
    wrap: no-wrap;
    word-wrap: no-wrap;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.table_header
{
	white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    margin: 0; padding: 0;
    color: #5a5a5a; 
    overflow: hidden;
    text-decoration: none;
    width: -moz-calc( 100% - 20px );
   	width: -webkit-calc( 100% - 20px );
   	width: calc( 100% - 20px );
}

.table_header_sort
{
	color: lightgray;
    position: absolute;
    top: 1px;
    right: 10px;
}

.table_header_icon
{
	color: lightgray;
    position: absolute;
    top: 0;
    left: 0px;
}

.table_header_spinner
{
	color: lightgray;
    position: absolute;
    top: 0;
    right: 10px;
}

.table_cell_content
{
	padding-left: 3px; 
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    width: -moz-calc( 100% - 22px );
   	width: -webkit-calc( 100% - 22px );
   	width: calc( 100% - 22px );
}
div.trafficeLightRedOn
{
	border: 2px solid #B40404;
	background-color: #FF0000;
}

div.trafficeLightYellowOn
{
	border: 2px solid #AEB404;
	background-color: #D7DF01;
}

div.trafficeLightGreenOn
{
	border: 2px solid #04B404;
	background-color: #01DF01;
}

div.newsletterHistoryProcessbar
{
	width: 100%;
	-webkit-border-radius: 6px !important;
  	-moz-border-radius: 6px !important;
  	border-radius: 6px !important;
  	border: 1px solid #c0c0c0;
	background-color: #eeeeee;
	padding: 2px;
}

div.newsletterHistoryProcessbarProcess
{
	height: 10px;
	-webkit-border-radius: 6px !important;
  	-moz-border-radius: 6px !important;
  	border-radius: 6px !important;
  	background-color: lightgreen;
	overflow: hidden;
}

img.NeoDynamicImageLoadingMiddle
{
	border: 1px solid lightgray;
	-webkit-border-radius: 10px !important;
  	-moz-border-radius: 10px !important;
  	border-radius: 10px !important;
	background-color: #ffffff;
	padding: 35px;
}

img.NeoDynamicImageLoading16
{
	border: 1px solid lightgray;
	-webkit-border-radius: 10px !important;
  	-moz-border-radius: 10px !important;
  	border-radius: 10px !important;
	background-color: #ffffff;
	padding: 0px;
}

img.NeoDynamicImageLoading32
{
	border: 1px solid lightgray;
	-webkit-border-radius: 10px !important;
  	-moz-border-radius: 10px !important;
  	border-radius: 10px !important;
	background-color: #ffffff;
	padding: 8px;
}

img.NeoDynamicImageLoading66
{
	border: 1px solid lightgray;
	-webkit-border-radius: 10px !important;
  	-moz-border-radius: 10px !important;
  	border-radius: 10px !important;
	background-color: #ffffff;
	padding: 24px;
}

img.NeoDynamicImageLoading96
{
	border: 1px solid lightgray;
	-webkit-border-radius: 10px !important;
  	-moz-border-radius: 10px !important;
  	border-radius: 10px !important;
	background-color: #ffffff;
	padding: 35px;
}

img.NeoDynamicImageLoading128
{
	border: 1px solid lightgray;
	-webkit-border-radius: 10px !important;
  	-moz-border-radius: 10px !important;
  	border-radius: 10px !important;
	background-color: #ffffff;
	padding: 51px;
}

.dont-break-out 
{

  	/* These are technically the same, but use both */
  	overflow-wrap: break-word;
  	word-wrap: break-word;
	-ms-word-break: break-all;
 	/* This is the dangerous one in WebKit, as it breaks things wherever */
  	word-break: break-all;
  	/* Instead use this non-standard one: */
  	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
  	-ms-hyphens: auto;
  	-moz-hyphens: auto;
  	-webkit-hyphens: auto;
  	hyphens: auto;
}

div.releasesBlocks
{
	width: 70px; 
	float: left; 
	text-align: center; 
	padding: 5px 0px;
	margin: 10px 5px 0px 5px; 
	background-color: #ffffff;	
}

div.releasesBlocks_selected
{
	width: 70px; 
	float: left; 
	text-align: center; 
	padding: 5px 0px;
	margin: 10px 5px 0px 5px; 
	background-color: #FFD700;	
}

div.column, div.column_disabled, div.column_moved, div.column_helper_visible, div.column_helper_invisible, div.column_last_selected
{
	outline: none; 
	position:absolute;
	border: 1px solid lightgray;
	left: 10px;  z-index: 0;
	border-radius: 15px !important; 
	width: 300px; height: 25px; 
	font-family: Verdana,Helvetica,VERDANA,sans-serif;
	color: #000000; font-weight: bold;
	font-size: 10px; padding: 6px 10px;
	text-align: left;
	background-color: #f0f0f0;
}

div.column_container div
{
	position: absolute; 
	left: 15px; top: 5px; width: 50%;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */	
}

div.column_container input
{
	position: absolute; 
	border-radius: 5px; 
	right: 70px; top: 1px; width: 30%;
	margin: 0px; padding: 0px; height: 21px;
}

div.column_container select
{
	position: absolute; 
	width: 50px;
    right: 10px; top: 3px;
}

div.column_moved
{
	z-index: 9999;
	border: 1px solid darkgray;
	background-color: #c0c0c0
}

div.column_helper_visible
{
	font-family: Verdana,Helvetica,VERDANA,sans-serif;
	color: #e6e6e6; font-weight: bold;
	border: 1px solid #e6e6e6;	
	background-color: #ffffff;
	display: block;
}

div.column_helper_invisible
{
	display: none;
}

div.column_last_selected
{
	border: 1px solid #97b59d;	
	background-color: #acd7b4
}

div.buttons
{
	height: 30px; font-size: 11px; 
	font-family: VERDANA; 
}

DIV.neo-uploader.dropover
{
	background-color: #e9f0ea;
}

DIV.neo-uploader-progress-border
{
	border: 1px dotted lightgray;
	border-top: 0;
    background: #f4f4f4;
    color: gray;
    padding: 10px;
    position: relative;
}

DIV.neo-uploader-progress-text
{
	position: absolute;
    left: 0px; top: 0px; width: 100%;
    padding: 7px;
    height: 30px;
	font-family: Verdana,Helvetica,VERDANA,sans-serif;
	font-size: 11px;
}

IMG.neo-uploader-img
{
	margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40%;
}

DIV.neo-uploader-progress
{
	background-color: #f6c058;
	position: absolute;
    left: 0px; top: 0px; width: 0px;
    height: 20px;
    display: none;
    text-align: right;
}

DIV.preview
{
	width: 100%; 
	border: 1px solid lightgray;
	border-left: 0;
	padding: 20px;
}

DIV.preview IFRAME
{
	width: 100%; 
	height: 100%;
	min-height: 800px;
	border: 0;
	overflow: hidden;
}

table.radios INPUT
{
	margin: 0 !important;	
}

table.radios LABEL
{
	margin-right: 10px;
    margin-left: 5px;
    font-weight: bold;
}

.institution img 
{
	width: 100%;
}

.matrix_column
{
	position: absolute; 
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
}

.matrix_column.top
{
	border-top: 1px solid gray;
}

.matrix_column.left
{
	border-left: 1px solid gray;
}

.align-middle
{
	position: absolute;
	top: -moz-calc( 50% - 9px );
   	top: -webkit-calc( 50% - 9px );
   	top: calc( 50% - 9px );
   	width: 100%; left: 0;
   	text-align: center;
}

/* org chart style */
DIV.orgchart { position: relative; }
DIV.orgchart DIV.pointer IMG { width: 50px;}
DIV.orgchart DIV.pointer 
{ 
	position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 200px;
    height: 130px;
    z-index: 99999;
    right: 0;
    margin: auto;
    border: 1px solid #cacea8;
    background: #f5facc;
    border-radius: 10px !important;
    bottom: 0;
    padding: 20px;
    text-align: center;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: #50542a 3px 3px 3px;
    -moz-box-shadow: #50542a 3px 3px 3px;
    box-shadow: 3px 3px 3px #50542a;
}

.org
{
  	width: 100%;
  	overflow: hidden; 
  	cursor: grab; 
  	cursor: -o-grab; 
  	cursor: -moz-grab; 
  	cursor: -webkit-grab; 
}
 
.org-chart-node
{
	font-size: 1em; 
	border: 1px solid lightgray;
    cursor: default; border: 2px solid #b5d9ea;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: rgba( 0, 0, 0, 0.5 ) 3px 3px 3px;
    -moz-box-shadow: rgba( 0, 0, 0, 0.5 ) 3px 3px 3px;
    box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.5 );
    background-color: #edf7ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#edf7ff), to(#cde7ee));
}

.org-chart-node.true
{
	background-color: #fff3ed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff3ed), to(#eed4cd));
}

.org-chart-node.google-visualization-orgchart-nodesel
{
	border: 2px solid #e3ca4b;
    background-color: #fff7ae;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff7ae), to(#eee79e));
}

.org-chart-node-content
{
	padding: 0px;
	overflow: hidden; wrap: no-wrap; word-wrap: no-wrap;
    white-space: nowrap; text-overflow: ellipsis;
    text-align: center; vertical-align: middle; 
}

.org-chart-node-content.institution
{
	width: 150px;
}

.org-chart-node-content.institution.true
{
	width: 150px;
}

.org-chart-node-content.person
{
	min-width: 80px;
}

.DataEditingBox
{
	position: absolute; 
	left: 20px; right: 20px; 
	max-width: 600px; 
	margin: auto;
}

.NeoLayerButton
{
	position: absolute; 
	right: 4px; top: 10px; 
	width: 40px; text-align: center; 
	border: 1px solid lightgray; 
	border-radius: 5px !important; 
	padding: 10px;
	overflow: hidden;
/* 	-webkit-box-shadow: #50542a 4px 4px 4px; */
/*     -moz-box-shadow: #50542a 4px 4px 4px; */
/*     box-shadow: 4px 4px 4px #50542a; */
    background-color: white;
    z-index: 1;
}

.NeoLayerButton .batch
{
    position: absolute;
    left: -9px;
    top: -5px;
    border-radius: 10px !important;
    background-color: red;
    border: 1px solid #ffd6d6;
    min-width: 18px;
    font-size: 9px;
    padding: 2px 5px 2px 5px;
    color: white;
    display: none;
}

.NeoLayerButton.max
{
	padding: 0px;
}

.NeoLayerButtonLink
{
	padding: 10px;
	display: inline-block;
}

.NeoLayerButton.green, .NeoLayerButton.max.green
{
	background-color: #35aa47;
	color: white;
	border: 1px solid #20772d; 
/* 	-webkit-box-shadow: #10561a 4px 4px 4px; */
/*     -moz-box-shadow: #10561a 4px 4px 4px; */
/*     box-shadow: 4px 4px 4px #10561a; */
}

.NeoLayerButton.blue, .NeoLayerButton.max.blue
{
	background-color: #18abff;
	color: white;
	border: 1px solid #0e8fd8; 
/* 	-webkit-box-shadow: #064d75 4px 4px 4px; */
/*     -moz-box-shadow: #064d75 4px 4px 4px; */
/*     box-shadow: 4px 4px 4px #064d75; */
}

.NeoLayerButton.gray, .NeoLayerButton.max.gray
{
	background-color: lightgray;
	color: black;
	border: 1px solid gray; 
/* 	-webkit-box-shadow: gray 4px 4px 4px; */
/*     -moz-box-shadow: gray 4px 4px 4px; */
/*     box-shadow: 4px 4px 4px gray; */
}

.NeoContentDialog
{
	position: absolute; display: none;
	top: 0px; right: 0px; left: 0px; bottom: 0px; 
	max-width: 450px; height: 850px; max-height: 80%; 
	margin: auto;
	background-color: white;
	border: 1px solid lightgray; 
	border-radius: 5px !important; 
	padding: 20px;
	overflow: hidden;
	-webkit-box-shadow: #50542a 6px 6px 6px;
    -moz-box-shadow: #50542a 6px 6px 6px;
    box-shadow: 6px 6px 6px #50542a;
    z-index: 6;
}

.QmDynamicDialogField
{
	display: none;
}

.NeoTreeInlineDialog
{
	position: absolute;
    left: 647px;
    top: 104px;
    width: 250px;
    z-index: 9;
    border: 1px solid lightgray;
    background-color: white;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: #50542a 3px 3px 3px;
    -moz-box-shadow: #50542a 3px 3px 3px;
    box-shadow: 3px 3px 3px #50542a;
    border-radius: 10px !important;
    padding: 10px;
    display: none;
}

.NeoTreeManagementStatus
{
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 1px;
}

.NeoTableTreeButtons
{
	position: absolute;
    top: 35px;
    left: 0;
    width: 10px;
    border: 1px solid gray;
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
    padding: 6px 3px;
    overflow: hidden;
    background-color: white;
    opacity: 0.3;
    z-index: 1;
    text-align: center;
}

.NeoTableTreeButtons:hover
{
	width: 31px;
    -webkit-box-shadow: #50542a 4px 4px 4px;
    -moz-box-shadow: #50542a 4px 4px 4px;
    box-shadow: 4px 4px 4px #50542a;
    background-color: white;
    border: 1px solid lightgray;
    opacity: 1;
}

.NeoTableTreeButtons I.fa
{
	color: gray; 
	cursor: pointer;
	margin: 0px 5px;
}

.NeoTableTreeButtons I.fa:hover
{
	color: #18abff; 
}

.NeoTreeManagementStatus.Red { background-color: #ff4b4b; border: 1px solid #e23131; }
.NeoTreeManagementStatus.Yellow { background-color: #eef100; bordeR: 1px solid #c3c503;}
.NeoTreeManagementStatus.Green { background-color: #2CB42C; border: 1px solid #168e16; }
.NeoTreeManagementStatus.Gray { background-color: #d3d5d8; border: 1px solid #B9BABD; }

.NeoProjectFormColumns, .NeoProjectFormDetails, .NeoProjectFormNote
{
	width: 90%; 
	width: -moz-calc( 100% - 50px );
	width: -webkit-calc( 100% - 50px );
	width: calc( 100% - 50px );
}

.NeoProjectFormHeader
{
	background-color: #f4f4f4; 
	margin-bottom: 1px; 
	border-left: 5px solid #a3a3a3;
	padding-top: 7px;
    padding-bottom: 7px;
}

.NeoProjectFormFunctionHeader
{
	background-color: #dcffd8; 
	margin-bottom: 1px; 
	border-left: 5px solid #285623;
}

.NeoProjectFormRow
{
	margin-left: 0;
	margin-right: 0;
}

.NeoProjectFormRow DIV
{
	padding-left: 0;
	padding-right: 0;
}

.NeoProjectFormButton
{
	width: 100%;
	height: 20px;
	font-size: 12px;
	padding: 0;
    text-align: left;
	color: #e3e3e3 !important;
	border: none !important;
    background-color: white !important;
}

.NeoProjectFormButton:hover
{
	color: white !important;
	background-color: #4b8df8 !important;
	border: none !important;
	padding: 0 5px;
}

A.NeoProjectFormField
{
	font-size: 12px !important;
	min-height: 20px !important;
	padding: 2px 0px !important;
	margin: 0 !important;
	border: none !important;
	cursor: pointer;
	color: #333;
	text-decoration: none;
	display: block;
}

DIV.NeoProjectFormRowColors
{
	width: 70%; 
	margin: auto; 
	height: 16px; 
	border-radius: 5px !important; 
	border: 1px solid #ececec; 
}

DIV.NeoDropDownList
{
	position: absolute; 
	left: 0px; width: 100%; 
	max-height: 150px; 
	border: 1px solid gray;
	background: #eef4fd;
	z-index: 1;
	overflow: auto;
}

DIV.NeoDropDownList DIV
{
	cursor: pointer;
	padding: 2px;
}

DIV.NeoDropDownList DIV:hover
{
	background: #87d4ff;
}

A.NeoProjectFormField.center
{
	text-align: center;
}

A.NeoProjectFormField.left
{
	text-align: center;
}

A.NeoProjectFormField.red
{
	color: red;
}

A.NeoProjectFormField.blue
{
	color: blue;
}

A.NeoProjectFormField IMG.classification
{
	padding: 0px 5px !important;
}	

A.NeoProjectFormField:hover
{
	background-color: lightgray;
}

HR.default { margin: 8px 0; }

SELECT.form-control { height: 34px; }
SELECT.form-control:disabled
{
	appearance: none;
	background-image: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 0.5rem; /* adjust spacing */
}

.form-control.freebie { border: 0 !important; border-bottom: var( --border ) !important; background-color: transparent !important; }
.form-control.no-border-right { border-right: none; }
.form-control.no-border-left { border-left: none; }
.form-control.splitted-150, .splitted-150 { width: 150px; }
.form-control.splitted-150-rest, .splitted-150-rest 
{ 
	width: 95%; 
	width: -moz-calc( 100% - 150px );
	width: -webkit-calc( 100% - 150px );
  	width: calc( 100% - 150px );
}
.form-control.splitted-200, .splitted-200 { width: 200px; }
.form-control.splitted-200-rest, .splitted-200-rest 
{ 
	width: 95%; 
	width: -moz-calc( 100% - 200px );
	width: -webkit-calc( 100% - 200px );
  	width: calc( 100% - 200px );
}
.form-control.splitted-100, .splitted-100 { width: 100px; }
.form-control.splitted-100-rest, .splitted-100-rest 
{ 
	width: 95%; 
	width: -moz-calc( 100% - 100px );
	width: -webkit-calc( 100% - 100px );
  	width: calc( 100% - 100px );
}
.form-control.splitted-75, .splitted-75 { width: 75px; }
.form-control.splitted-75-rest, .splitted-75-rest
{ 
	width: 95%; 
	width: -moz-calc( 100% - 75px );
	width: -webkit-calc( 100% - 75px );
  	width: calc( 100% - 75px );
}
.form-control.splitted-50, .splitted-50 { width: 50px; }
.form-control.splitted-50-rest, .splitted-50-rest
{ 
	width: 95%; 
	width: -moz-calc( 100% - 50px );
	width: -webkit-calc( 100% - 50px );
  	width: calc( 100% - 50px );
}
.form-control.splitted-35, .splitted-35 { width: 35px; }
.form-control.splitted-35-rest, .splitted-35-rest
{ 
	width: 95%; 
	width: -moz-calc( 100% - 35px );
	width: -webkit-calc( 100% - 35px );
  	width: calc( 100% - 35px );
}

/* special quattro split */
.form-control.quattro-splitted-75 { width: 75px; }
.form-control.quattro-splitted-75-rest 
{ 
	width: 95%; 
	width: -moz-calc( 50% - 75px );
	width: -webkit-calc( 50% - 75px );
  	width: calc( 50% - 75px );
}

/* special tripple split */
.form-control.tripple-splitted-30p { width: 30%; }
.form-control.tripple-splitted-30p-rest { width: 40%; }
.form-control.splitted-60p, .splitted-60p { width: 60%; }
.form-control.splitted-60p-rest, .splitted-60p-rest { width: 40%; }
.form-control.splitted-75p, .splitted-75p { width: 75%; }
.form-control.splitted-75p-rest, .splitted-75p-rest { width: 25%; }

INPUT.ajax { font-style: italic; color: lightgray; }
TEXTAREA.ajax { font-style: italic; color: lightgray; }
SELECT.ajax { font-style: italic; color: lightgray; }

INPUT.form-control.small
{
	font-size: 12px !important;
	height: 20px !important;
	padding: 0 5px !important;
	margin: 0 !important;
	border: none !important;
}

INPUT.form-control.small.centered
{
	text-align: center;
}

INPUT.form-control.small.right
{
	text-align: right;
}

INPUT.form-control.small.colored
{
	background-color: lightgray !important;
}

INPUT.form-control.small.transparent
{
	background: none !important;
}

INPUT.form-control.small.method
{
	background-color: #ececec !important;
}

TEXTAREA { resize: vertical; }
TEXTAREA.fixed { resize: none; }
TEXTAREA.form-control.small
{
	font-size: 12px !important;
	min-height: 20px !important;
	padding: 0 5px !important;
	margin: 0 !important;
	border: none !important;
	resize: none;
    overflow: hidden;
}

DIV.form-control.wysiwyg 
{ 
	overflow: hidden; 
	width: 100%; min-height: 200px; 
	border: var( --border ) !important; 
	padding: 20px;
}

/* some overwriting from metronic */
@media ( max-width: 480px ) 
{ 
	.login .content { width: 90%; } 
	.DataEditingBox { top: 43px;  }
}
@media ( min-width: 992px ) 
{ 
	.page-sidebar { width: 215px; } 
	.DataEditingBox { top: 13px;  }
}
@media ( max-width: 991px ) 
{ 
	.page-sidebar 
	{ 
		width: 94%; 
		width: -moz-calc( 100% - 40px );
   		width: -webkit-calc( 100% - 40px );
   		width: calc( 100% - 40px );
	} 
	
	.DataEditingBox { top: 13px;  }
}
@media ( max-width: 767px ) 
{ 
	.page-sidebar 
	{ 
		width: 98%; 
		width: -moz-calc( 100% - 20px );
   		width: -webkit-calc( 100% - 20px );
   		width: calc( 100% - 20px );
	} 
	.DataEditingBox { top: 13px;  }
}

/* Media query for the Project Risk Form */
@media (max-width: 1200px) 
{
	.fullWidthHeader
	{
		display:none;
	}
	.smHeader
	{
		display:block;
	}
	
	.DataEditingBox { top: 13px;  }
}
@media (min-width: 1200px) 
{
	.smHeader
	{
		display:none;
	}
	
	.DataEditingBox { top: 13px;  }
}

@media (min-width:1768px)
{
	.table-header
	{
		font-size:13px;
	}
}
@media (max-width:1768px)
{
	.table-header
	{
		font-size:10px;
	}
}
.hiddenTableAddBtn
{
	display:none;
}
.showTableAddBtn:hover .hiddenTableAddBtn
{
	display:block;
}

DIV.placeHolder  font
{
	color: lightgray;
}

DIV.placeHolder:hover  font
{
	color:#333;
}

.showTableScroll::-webkit-scrollbar {
    background: #e2e2e2;
    width: 12px;
}
.showTableScroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 16px rgb(224, 224, 224);
    border-radius: 1px;
}
.showTableScroll::-webkit-scrollbar-thumb {
    border-radius: 1px;
    -webkit-box-shadow: inset 0 17px rgb(156, 154, 154);
}

@media print {
	body {
		-webkit-print-color-adjust: exact !important;
	}
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
		.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
		float: left;
	}
	.col-md-12 {
		width: 100%;
	}
	.col-md-11 {
		width: 91.66666667%;
	}
	.col-md-10 {
		width: 83.33333333%;
	}
	.col-md-9 {
		width: 75%;
	}
	.col-md-8 {
		width: 66.66666667%;
	}
	.col-md-7 {
		width: 58.33333333%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-5 {
		width: 41.66666667%;
	}
	.col-md-4 {
		width: 33.33333333%;
	}
	.col-md-3 {
		width: 25%;
	}
	.col-md-2 {
		width: 16.66666667%;
	}
	.col-md-1 {
		width: 8.33333333%;
	}
}

.neo_status_report_header
{
	background-color: #B14021 !important; 
	color: white; 
	padding: 1px;
}
.neo_status_report_content
{
	color: black; 
	padding: 6px; 
	background-color: #efefef !important;
}

.neo_import_modal_body
{
	bottom: 60px;
    top: 60px;
    overflow-y: auto !important;
    position: absolute;
    width: 100%;
}

.neo_import_modal_header
{
	height: 60px;
}

.neo_import_modal_footer
{
	bottom: 0px;
    height: 60px;
    position: absolute;
    width: 100%;
}

.neo_toggle_password
{
	color: #565656;
	margin-right: 10px;
    float: right;
    margin-left: -25px;
    margin-top: -25px;
    position: relative;
    cursor: pointer;
}

option.RiskDialogFailures[value^=red_]
{
	color: red;
}

option.RiskDialogFailures[value^=blue_]
{
	color: blue;
}

option.ConntrollingDialogFailures[data-color=red]
{
	color: red;
}

option.ConntrollingDialogFailures[data-color=blue]
{
	color: blue;
}

input::-ms-clear, input::-ms-reveal {
    display: none;
}

.NeoFormHideScrollbar
{
	overflow: auto;
	-ms-overflow-style: none; 
	scrollbar-width: none;
}

.task_priority.top
{
	border-top: 1px solid black;
	display: flex;
}

.task_priority_header
{
	background-color: #e0dddd;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black; 
    text-align: left;
    width: 145px;  
    padding: 7px;
    overflow: hidden; 
    wrap: no-wrap; 
    word-wrap: no-wrap; 
    white-space: nowrap; 
    text-overflow: ellipsis;
}

.task_priority_details
{
	border-right: 1px solid black;
	border-bottom: 1px solid black;
    text-align: center;
    width: 10%;    
    padding: 7px;
}

.task_priority_checked
{
	background: #7d7d7d;
	color: white !important; 
}

.NeoSideMenuToggle
{
	display: inline-block;    
	cursor: pointer;
	font-size: 28px; 
	color: gray;
}

@media (max-width: 991px)
{
	.NeoSideMenuToggle{ display: none }
}

@media (min-width: 992px) 
{
	.page-sidebar-closed .page-content-wrapper .page-content  { margin-left: 74px !important; }
	.page-sidebar-closed .page-content-wrapper .page-content.rare  { margin-left: 0px !important; }
}

.MarkSelection{ float: left; width: 100px; text-align: center; margin: 10px 0; padding: 10px 5px; overflow-wrap: break-word; height: 120px; }
.MarkSelection.selected { background-color: #a1d8f7; }
.page-header.navbar { background: #ffffff; }
.page-header.navbar .page-logo .logo-default { margin: 10px 0px; height: 55px; }
.portlet.light { padding: 0px; }
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle { background-color: #eee; }
.control-label { overflow: hidden; wrap: no-wrap; word-wrap: no-wrap; white-space: nowrap; text-overflow: ellipsis; margin-bottom: -2px; margin-top: 5px; }
.control-label.hidden { display: none; }
.control-label.opaque30 { opacity: 0.3; }
.form-group.thin { margin-bottom: 2px; }
Font.resp { font-size: 1em; }
.neo-dialog-600{ width: 600px !important; margin-left: -300px !important; }
.jstree-default .jstree-ellipsis .jstree-anchor { width: 90%; width: -webkit-calc( 100% - 24px ); width: -moz-calc( 100% - 24px ); width: calc( 100% - 24px ); }
.jstree-default .jstree-clicked { background-color: #b1e1fd; }
.jstree-default > .jstree-striped { display: block; }
.vakata-context li > a { line-height: 1.6em; }
.vakata-context, .vakata-context ul { box-shadow: 5px 5px rgba(22, 22, 22, 0.3); padding: 10px; border: 1px solid #a29e9e; }
table.google-visualization-orgchart-table { border-collapse: separate; }
.modal-backdrop, .modal-backdrop.fade.in { opacity: 0.2; }
.jstree-grid-separator-regular { border-color: transparent !important; border-style: none !important; }
.jstree-grid-separator { border-width: 0 !important;}
.jstree-grid-header-regular { background-color: transparent !important; }
.jstree-grid-header-cell { padding: 5px; font-weight: bold; }
.jstree-grid-cell { padding-left: 5px !important; }
.jstree-grid-wrapper { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==) left top repeat; background-size: 100% 48px; background-position: 0 -3px; }
#treea_chart g text { font-family: "Open Sans", sans-serif !important; font-size: 13px !important; }
.control-label.medium { font-size: 12px !important; }
.portlet-sortable-placeholder { padding: 10px; margin-bottom: 10px; border: 1px dashed #86c3d2; background-color: #dff9ff; }
.portlet-sortable.navigation { background-color: #ffffff; color: #a94442; border: 1px solid lightgray; }
.portlet-sortable.navigation.danger { color: #ff8000; border-color: #800040; background-color: #ff0000; }
.page-sidebar .page-sidebar-menu > li > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a  { padding: 2px 15px; }
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a  { min-height: 26px; }

.page-sidebar .page-sidebar-menu > li.heading > a.menu 
{ 
	border-left: none !important; 
	background-color: transparent;
	padding-left: 0px !important;
	margin-top: -2px !important;
	margin-left: 0px !important;
}

/* deletables */
A.deletable { cursor: pointer; }
A.deletable.exists, A.deletable.deleted:hover { color: #2c2c2c; text-decoration: none; }
A.deletable.exists:hover, A.deletable.deleted { color: red; text-decoration: line-through;  }

/* adjusting bootstrap spacings between blocks */
.row.narrow { margin-right: -5px; margin-left: -5px; }
.row.narrow DIV[class^='col-'] { padding-right: 5px; padding-left: 5px; }
.row.narrower { margin-right: -2px; margin-left: -2px; }
.row.narrower.invitations { margin-bottom: 5px; }
.row.narrower DIV[class^='col-'] { padding-right: 2px; padding-left: 2px; }
.row.equal { display: flex; flex-wrap: wrap; }
.row.equal .form-group { height: calc( 100% - 40px); }
.row.equal .form-group .input-group { height: 100%; }
.row.iterable { margin-right: 10px; margin-left: 10px; }
.row.iterable DIV[class^='col-'] { padding-right: 5px; padding-left: 5px; }

/* remove mandatory when block disabled */
.disabled .form-group.mandatory .control-label:after { opacity: 0; }

.NeoTreeButtons
{
	position: absolute;
    top: -24px;
    right: 13px;
    border: 1px solid gray;
    border-top-right-radius: 5px !important;
    border-top-left-radius: 5px !important;
    padding: 0px 3px;
    overflow: hidden;
    background-color: white;
    opacity: 0.3;
    z-index: 9994;
    text-align: center;
    height: 23px;
    border-bottom: 0;
    -webkit-box-shadow: #50542a 3px -2px 5px;
    -moz-box-shadow: #50542a 3px -2px 5px;
    box-shadow: 3px -2px 5px #50542a;
}

.NeoTreeButtons:hover { opacity: 1; }
.NeoTreeButtons I.fa
{
	color: gray; 
	cursor: pointer;
	margin: 5px 5px;
}

.NeoTreeButtons I.fa:hover
{
	color: #18abff; 
}

.jstree-node { position: relative; }
.jstree-node .jstree-permissions { position: absolute; right: 2px; top: -2px; }
.jstree-node .jstree-permissions IMG { margin: 0 2px; }
.jstree-node .jstree-roles { position: absolute; right: 2px; top:0; }

.actions.btn-set .btn { margin-right: 4px; }
.actions.btn-set .fr { float: right; }
.actions.btn-set SELECT.form-control { max-width: 300px; display: unset; padding: 2px 10px 5px 10px; }

/* overwritten theme disabled button colors */
SPAN.btn,
.btn.disabled, 
.btn.disabled:hover, 
.btn.disabled:focus, 
.btn.disabled:active, 
.btn.disabled.active, 
.btn[disabled], 
.btn[disabled]:hover, 
.btn[disabled]:focus, 
.btn[disabled]:active, 
.btn[disabled].active, 
fieldset[disabled] .btn, 
fieldset[disabled] .btn:hover, 
fieldset[disabled] .btn:focus, 
fieldset[disabled] .btn:active, 
fieldset[disabled] .btn.active
{ background-color: #dadada !important; color: #868686 !important; }

.btn.rounded 
{
	border-radius: 3px !important; 
	padding: 2px 8px;
}

.modal .DropDownFilter 
{
	width: 100%; 
	border: 1px solid lightgray; 
	border-bottom: 0; 
	height: 65px; 
	padding: 15px; 
	position: relative;
}

.modal .DropDownFilter IMG.SearchSpinner, .SearchSpinner
{
	position: absolute;
    right: 35px;
    top: 24px;
    width: 16px;
    height: 16px;
    display: none;
    z-index: 2; 
}

.modal .DialogContent
{
	overflow: auto; 
	padding: 10px;
	border: 1px solid lightgray; 
}

.modal .MarkAll 
{
	width: 100%;
    border: 1px solid lightgray;
    border-bottom: 0;
    height: 40px;
    padding: 10px;
    position: relative;
    font-weight: bold;
}

.modal .Deselect 
{
	width: 100%;
    border: 1px solid lightgray;
    border-bottom: 0;
    height: 40px;
    position: relative;
    font-weight: bold;
    padding-left: 16px;
    padding-top: 6px;
}

.modal .MarkAll IMG.SearchSpinner
{
	position: absolute;
    right: 14px;
    top: 12px;
    width: 16px;
    height: 16px;
   	display: none;
    z-index: 2;
}

.modal .SearchFilter 
{
	width: 100%; 
	border: 1px solid lightgray; 
	border-top: 0; 
	min-height: 65px; 
	padding: 15px; 
	position: relative;
}

.modal .SearchFilter IMG.SearchSpinner
{
	position: absolute; 
    right: 24px;
    top: 24px;
    width: 16px;
    height: 16px;
    display: none;
    z-index: 2; 
}

.modal .AmountSpinner
{
    position: absolute;
    right: 12px;
    top: 18px;
    z-index: 99;
    display: none;
}

.modal .odd { border-bottom: 1px solid lightgray; background-color: #f7f7f7; padding: 11px 1px; line-height: 13px; }
.modal .even { border-bottom: 1px solid lightgray; padding: 11px 1px; line-height: 13px; }
.modal .highlight { border-bottom: 1px solid lightgray; background-color: #ffd9b3; padding: 11px 1px; line-height: 13px; }

.modal-body.scrollable > SPAN,
.modal-body.scrollable > DIV { overflow-y: auto; overflow-x: hidden; }
.modal-body.vh60 > SPAN,
.modal-body.vh60 > DIV{ display: block; height: 60vh; }
.modal-body.vh50 > SPAN,
.modal-body.vh50 > DIV{ display: block; height: 50vh; }
.modal-body.vh45 > SPAN,
.modal-body.vh45 > DIV{ display: block; height: 45vh; }

.modal-submenu .portlet { margin-bottom: -27px; }
.modal-submenu .portlet .portlet-title { border: 0; }

SELECT OPTION:disabled { color: lightgray; }
SELECT OPTION[disabled="disabled"] { color: lightgray; }

.riskCell
{
	width: 70px;
	height: 70px;
	text-align: center;
	font-size: 15px;
	border: 2px solid white;
	font-weight: bold;
}

.riskCell.verylow { background: rgb(84, 130, 53); color: white; }
.riskCell.low { background: rgb(112, 173, 71); color: white; }
.riskCell.medium { background: rgb(255, 192, 0); color: gray; }
.riskCell.high { background: rgb(237, 125, 49); color: white; }
.riskCell.veryhigh { background: rgb(227, 0, 27); color: white; }

.riskYAxis
{
	width: 70px;
	height: 70px;
	position: absolute; 
	top: -10px; 
	right: 10px;
	text-align: right;
}

.riskXAxis
{
	width: 70px;
	height: 30px;
	text-align: center;
	border: 2px solid white;
}

.riskYLegend
{
	transform: rotate( 270deg );
	text-transform: uppercase;
	font-weight: bold;	 
}

.riskXLegend
{
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;	
}

.caption.submenu 
{ 
	padding: 16px 20px 1px 0px !important; 
    font-weight: 300 !important;
}
.caption.submenu::first-letter { text-transform: uppercase !important; }

.caption.breadcrumb 
{ 
	padding: 4px 20px 1px 7px !important;
    color: #5C9ACF !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

.portlet-title.tabbable-line.second 
{ 
	top: 41px !important; 
	height: 26px !important; 
	overflow: hidden;
    min-height: 26px;
}

/* milestone chart */
.mst-container
{
	position: relative;
	height: 300px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

.mst-timeline
{
	position: absolute;
	bottom: 0px;
    width: 100%;
	z-index: 2;
}

.mst-timeline .mst-block
{
	float: left;
	height: 45px;
	vertical-align: top;
	text-align: center;
	padding: 5px 0; 
	background-image: linear-gradient(#1BB7E1, #61D1F0, #1BB7E1);
	color: #BEEDFA;
	font-size: 12px;
	font-weight: bold;
	border-right: 1px solid #61D1F0;
}
.mst-timeline .mst-block.first { margin-left: -30px; width: 30px; border-top-left-radius: 30px !important; border-bottom-left-radius: 30px !important; }
.mst-timeline .mst-block.last { margin-right: -30px; width: 30px; border-top-right-radius: 30px !important; border-bottom-right-radius: 30px !important; }

.mst-diamond
{
	position: absolute;
	bottom: 35px;
	transform-origin: bottom left;
	transform: rotate(-45deg);
	background-color: red;
	width: 15px; height: 15px;
	z-index: 3;
}

.mst-line
{
	position: absolute;
	bottom: 45px; width: 1px; 
	display: inline-block;
	border-left: 1px dotted red;
	z-index: 1;
}

.mst-text
{
	position: absolute;
	bottom: 45px; width: 150px;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	margin-left: -75px;
	z-index: 2;
}

.mst-date
{
	position: absolute;
	bottom: 45px; width: 70px;
	font-size: 11px;
	text-align: center;
	margin-left: -35px;
	margin-top: 15px;
	z-index: 3;
}

.mst-content
{
	background-color: white;
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { margin-left: -9px; }
DIV.radio, DIV.checker { margin-bottom: 4px; margin-right: 4px; }
TABLE.radio TD { padding-left: 20px; }
.radio label { padding-left: 0; }
.page-sidebar .page-sidebar-menu > li.active > a > .selected, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > .selected
{
	right: -3px;
    top: 0px;
}
.page-sidebar .page-sidebar-menu .group-collapse .menu-items > li.active > a { display: block; }

SPAN.note.block { display: block; }
SPAN.form-group.block { display: block; }
.form-group .bordered { border: 1px dotted lightgray; } 

.modal-header .btn { margin-right: 3px; }
.portlet > .portlet-title > .nav-tabs > li.active > a, .portlet > .portlet-title > .nav-tabs > li:hover > a { background: none; }
.heading.NeoMenuHeading H3 { border-bottom: 1px solid #e8e8e8; padding-bottom: 4px !important; }

.btn.task { width: 100%; }

/* progress bar */
.neo-progress { border: 1px solid lightgray; margin-bottom: 20px; padding: 3px; }
.neo-progress .percent { display: block; text-align: center; background-color: #2e90e4; color: #c8d5e0; height: 28px; padding: 5px 0px; }

.group-header-collapse { cursor: pointer; margin-block-end: 0 !important; }
.group-header-collapse:before 
{
	font-family: "Glyphicons Halflings";
	float: left;
	font-size: 20px;
	content: "\e080";
	margin-top: 0px;
	margin-right: 5px;
	transition: all 0.5s;
}

.group-header-collapse.active:before 
{
	-webkit-transform: rotate( 90deg );
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
}

.group-header-collapse SPAN.hint { font-size: 12px; opacity: 0.6; margin-top: 10px; }
.group-header-collapse.active SPAN.hint { display: none; }
.group-collapse .row
{
	margin: 12px -15px 0px 0px;
    border-left: 20px solid;
    border-color: #f5f5f5;
}

.group-collapse > DIV.form-group 
{
	margin: 12px -0px 0px 0px;
	padding-left: 15px;
    border-left: 20px solid #f5f5f5;
}

.NeoMenuHeading .collapser:before 
{
    font-family: "Glyphicons Halflings";
    float: right;
    font-size: 9px;
    content: "\e080";
    margin-top: 2px;
    margin-right: 2px;
}

.NeoMenuHeading.closed { margin-bottom: -21px !important; }
.NeoMenuHeading .collapser.loading:before { content: "\e165"; }
.NeoMenuHeading .collapser.opened:before { -webkit-transform: rotate( 90deg ); -moz-transform: rotate( 90deg ); transform: rotate( 90deg ); }
.NeoMenuHeading .collapser.closed:before { -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); transform: rotate( 0deg ); }
.NeoMenuHeading .collapser A { text-decoration: none; }
.NeoMenuHeadingEntry { transition: all 0.5s; }
.NeoMenuHeadingEntry.opened { display: block !important; }
.NeoMenuHeadingEntry.closed { display: none !important; }

.skill-filter-area
{
	display: block;
	width: 100%;
	min-height:105px;
	max-height: 150px;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid lightgray;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	margin-bottom: 15px;
	overflow: scroll;
}

.skill-filter-component
{
	float: left;
	width: 150px;
	min-height: 65px;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	margin: 12px;
	box-shadow: 6px 7px 7px;
}

.skill-filter-component-close
{
	float: right;
	height: 20px;
	width: 20px;
	background-color: red;
	border-radius: 50% !important;
	margin-right: -9px;
	margin-top: -9px;
	text-align: center;
	text-decoration: none !important;
	font-weight: bold;
	font-size: 13px;
	color: white !important;
}

.skill-filter-component-detail
{
	height: 50%;
	width: 100%;
	text-align: center;
}

.skill-filter-component-ratings
{
	font-size:17px; 
	margin-top: 10px; 
	margin-left: 11px;
}

.stars { color: lightgray !important;  }
.stars:hover { color: yellow !important;  }
.stars-checked { color: yellow !important; }

.institution-persons
{
	padding: 10px 20px; 
	background-color: #F8F8F8;
}

.import-profile
{
	width: 100%;
	min-height: 115px;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	margin-top: 5px;
}

.import-profile .profile-name
{
	display: inline;
	margin: 10px;
}

.import-profile .profile-details
{
	margin-left: 40px;
}

/* Session CSS Class */
.session-header { background-color: #f9f9f9; }
.session-row { background-color: #f9f9f9; }

/* Tender Quotation Overview CSS Class */
TABLE.quotation-overview 
{ 
	width: 100%; 
	table-layout: fixed; 
	border-collapse: separate;
}

H3.quotation-overview { margin-bottom: 0 !important; }  
H3.form-section .sub { font-size: -moz-calc( 100% - 10px ); font-size: -webkit-calc( 100% - 10px ); font-size: calc( 100% - 10px ); }

.modal H3.form-section 
{
    margin: 30px 0px 25px 0px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

TABLE.quotation-overview TH  { border-bottom: 1px dashed lightgray; padding-top: 20px; padding-bottom: 4px;}
TABLE.quotation-overview TH.menu  { padding-top: 4px; }
TABLE.quotation-overview TD { padding: 4px; }
TABLE.quotation-overview TD.bordered { border-left: 1px dotted lightgray; }
TABLE.quotation-overview TH.bordered { border-left: 1px dotted lightgray; }
TABLE.quotation-overview TR.bordered { border-left: 1px dotted lightgray; }
TABLE.quotation-overview TD.summary { border-top: 1px solid lightgray; }
TABLE.quotation-overview TD.gross { background-color: #e9eaf2; }
TABLE.quotation-overview TD.odd { background-color: #f5f5f5; }
TABLE.quotation-overview TD.even { background-color: #f7f6ed; }
TABLE.quotation-overview TD.highlight { background-color: #ffd9b3; }
TABLE.quotation-overview TD.net { font-size: 18px !important; font-weight: bold; }
TABLE.quotation-overview TD.gross { font-size: 22px !important; font-weight: bold; background-color: #bcbfd8; }
TABLE.quotation-overview TD.totals { font-weight: bold; }
TABLE.quotation-overview TD.right { padding-right: 10px; text-align: right; }
.quotation-overview-header
{ 
	width: 100%;
    padding-right: 6px;
    padding-left: 6px;
    display: block;
}
.quotation-overview-scrollable { overflow-x: auto; scrollbar-width: auto; }
.quotation-overview-scrollable::-webkit-scrollbar { width: 0px; background: #f1f1f1; }
.quotation-overview-scrollable::-webkit-scrollbar-track { background: #e8e8e8; }
.quotation-overview-scrollable::-webkit-scrollbar-thumb { background: #d4d4d4; }
.quotation-overview-scrollable::-webkit-scrollbar-thumb:hover { background: #c5c5c5; }

/* help css */
.portlet > .portlet-title > .nav-tabs > LI.help > SPAN { color: #d8cabe; font-weight: 600; font-size: 1.1em; padding: 8px 10px; padding-bottom: 3px; margin: 5px 0 0 1px; display: block;}
.portlet > .portlet-title > .nav-tabs > LI.help > A { color: #ff8000; font-weight: 600; font-size: 1.1em; padding-bottom: 3px; }
.portlet > .portlet-title > .nav-tabs > LI.help > A > I { color: #ff8000; }
.portlet > .portlet-title > .nav-tabs > LI.help:hover { border-bottom-color: #ff8000; }
.modal .modal-header .help { float: right; }
.modal .modal-header .help A, .modal .modal-header .help I { color: #ff8000; cursor: pointer; }
.modal .modal-header .help SPAN { color: #b79e88; cursor: default; }


/* TASK SUBTASK */
ul.subtask-section
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.subtask-section li 
{
	padding: 5px 0 5px 0;
	border-bottom: 1px solid lightgray;
}

.releases A.versions
{
	width: 80px; 
	float: left; 
	text-align: center; 
	padding: 15px 0px 15px 0px;
	font-size: 11px;
	cursor: pointer;
	text-decoration: none;
	position: relative;
}

.releases A.versions IMG { width: 50px; margin-bottom: 5px; }
.releases A.versions IMG.star
{
	position: absolute;
    width: 24px; top: 2px; right: 3px;
    margin-bottom: 0px; 
}

.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { opacity: 0.2; }
.modal.in .modal-dialog { margin: 0; width: 100%; }
.modal.in .modal-dialog .checkbox input[type=checkbox], 
.modal.in .modal-dialog .checkbox-inline input[type=checkbox], 
.modal.in .modal-dialog .radio input[type=radio], .radio-inline input[type=radio] { left: 10px; }
.modal.in .modal-dialog .checkbox > label, 
.modal.in .modal-dialog .form-horizontal .checkbox > label { margin-left: 25px; }

.placeholders { overflow: auto; margin-top: 10px; background-attachment: local !important; }
.placeholders .neofield { padding: 3px; cursor: pointer; }

.form-control.form_date:after { content: "aa" }
.form-control.radio_line_direction TD { padding-top: 2px; padding-right: 15px; }
.form-control.checkbox_line_direction TD { padding-top: 2px; padding-right: 15px; }
.form-control.opaque30 { opacity: 0.3; }

/***************************************************/
/***************************************************/
/***************** ADDITIONALS *********************/
/***************************************************/
/***************************************************/
.additionals-container { height: 200px; padding-right: 5px; }
.additionals-container .ui-resizable-e { width: 15px; }
.additionals-container .placeholder { height: 1px; width: 1px; float: left; opacity: 0.4; margin: 5px; }
.additionals-wrapper { float: left; overflow: hidden; height: 37px; position: relative; }
.additionals-block
{ 
	position: absolute; 
	text-align: center;
	font-size: 12px; 
	top: 0; left: 0; 
	width: 100%; height: 100%; 
	padding: 5px 10px; 
	overflow: hidden; 
	cursor: pointer; 
	position: relative; 
	border-left: 5px solid transparent;  
	border-top: 5px solid transparent;  
}

/***************************************************/
/***************************************************/
/***************** OVERRIDE LAYOUT *****************/
/***************************************************/
/***************************************************/
/* Good For iPad */
@media (max-width: 991px) 
{
  .page-header.navbar { position: fixed; }
  .page-content-wrapper .page-content { top: 75px; }
  .page-content-wrapper { transform: translate(0, 0); }
  .page-sidebar { top: 47px; } 
  .page-logo { width: 70px !important; }
  .top-menu { z-index: -1; }
}

/* Good for devices like iPhone 6/7/8 */
@media (max-width: 767px) 
{
	.page-header.navbar { height: 135px; }
	.page-header.navbar .top-menu { position: absolute; right: 0; margin-top: 60px !important; }
	.page-header.navbar .page-logo { padding: 0 10px 0 10px; }
	.page-header.navbar .top-menu .navbar-nav > li.dropdown-user { padding: 0px; }
	.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle { padding: 25px 2px 2px 2px; }
	.page-content-wrapper .page-content { overflow: initial; top: 135px /* This is needed to make child div's sticky property work */ }
	.page-header.navbar .top-menu .navbar-nav .dropdown > ul.dropdown-menu 
	{ 
		/* align dropdown menu in center */
		position:fixed;
		top: 135px;
		left: 0;
	 	margin: auto;
	}
	.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu:before { display: none !important; }
	.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu:after { display: none !important; }
	.page-sidebar { top: 60px; }
	.page-logo { width: 70px !important; }
	.top-menu { z-index: -1; }
}

/***************************************************/
/***************************************************/
/***************** CONTEXT MENU ********************/
/***************************************************/
/***************************************************/
.contextmenu .dropdown-menu li > a, 
.contextAddMenu .dropdown-menu li > a, 
.contextSavemenu .dropdown-menu li > a, 
.contextFilterMenu .dropdown-menu li > a, 
.contextDeleteMenu .dropdown-menu li > a
{ 
	margin: 0 !important; 
	padding: 5px 30px 5px 10px; 
}
.contextmenu .dropdown-menu, 
.contextAddMenu .dropdown-menu, 
.contextSavemenu .dropdown-menu, 
.contextFilterMenu .dropdown-menu, 
.contextDeleteMenu .dropdown-menu 
{
	font-family: "Open Sans", sans-serif; 
	box-shadow: 5px 5px rgb(48 42 62 / 50%); 
	font-size: 13px; font-weight: 300;
}
.contextmenu A::hover, 
.contextAddMenu A::hover, 
.contextSavemenu A::hover, 
.contextFilterMenu A::hover, 
.contextDeleteMenu A::hover
{   
	outline: none !important;
    background-image: none !important;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
} 

.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu 
{
	top: 0; left: 100%;
	margin-top: -6px; margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu { display: block; }
.dropdown-submenu > a:after { content: "\f138"; margin-top: -2px; }

.project-plan-arrangement 
{ 
	height: 50vh; 
	width: 100%; 
	background-color: white; 
	padding: 5px; 
	border: 1px solid lightgray;
	overflow-y: auto; 
	overflow-x: hidden;
}

.plan-arrangement-placeholder
{
	display: block;
	height: 30px;
}

.project-plan-arrangement .working-package-block
{
	display: block;
	height: 30px; 
	width: 100%; 
	background-color: grey; 
	padding: 5px; 
}

.project-plan-arrangement .working-package-block .working-package { font-weight: 800; }

/******** PROJECT CALCULATIONS ***************/
.project-calculations-scrollable, .tender-calculations-scrollable { overflow-x: auto; scrollbar-width: auto; }
.project-calculations-scrollable::-webkit-scrollbar, .tender-calculations-scrollable::-webkit-scrollbar { width: 0px; background: #f1f1f1; }
.project-calculations-scrollable::-webkit-scrollbar-track, .tender-calculations-scrollable::-webkit-scrollbar-track { background: #e8e8e8; }
.project-calculations-scrollable::-webkit-scrollbar-thumb, .tender-calculations-scrollable::-webkit-scrollbar-thumb { background: #d4d4d4; }
.project-calculations-scrollable::-webkit-scrollbar-thumb:hover, .tender-calculations-scrollable::-webkit-scrollbar-thumb:hover { background: #c5c5c5; }
.project-calculations-header, .tender-calculations-header
{ 
    padding-right: 6px;
    padding-left: 6px;
    display: block;
}
.project-calculations-header.right, .tender-calculations-header.right{ padding-right: 6px; text-align: right; }
TABLE.project-calculations, TABLE.tender-calculations
{  
	width: 100%; 
	table-layout: fixed;
	border-collapse: collapse;
	margin-top: -1px;
}

TABLE.project-calculations TD, TABLE.tender-calculations TD { text-overflow: ellipsis; }
TABLE.project-calculations TH, TABLE.tender-calculations TH { padding-top: 20px; padding-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
TABLE.project-calculations TH.bordered, TABLE.tender-calculations TH.bordered { border-left: 1px dotted lightgray; }
TABLE.project-calculations TR.bordered, TABLE.tender-calculations TR.bordered { border-left: 1px dotted lightgray; }
TABLE.project-calculations TR.bordered-bottom, TABLE.tender-calculations TR.bordered-bottom { border-bottom: 1px dotted lightgray; }
TABLE.project-calculations TD, TABLE.tender-calculations TD { padding: 4px; }
TABLE.project-calculations TD.bordered, TABLE.tender-calculations TD.bordered { border-left: 1px dotted lightgray; }
TABLE.project-calculations TD.bordered-top,  TABLE.tender-calculations TD.bordered-top { border-top: 1px dotted lightgray; }
TABLE.project-calculations TD.right, TABLE.tender-calculations TD.right { padding-right: 10px; text-align: right; }
TABLE.tender-calculations TD.editable { padding-right: 4px; }
TABLE.project-calculations TD.summary, TABLE.tender-calculations TD.summary { font-size: 18px !important; font-weight: bold; }
TABLE.project-calculations TD.summary-total, TABLE.tender-calculations TD.summary-total { font-size: 22px !important; font-weight: bold; }
H3.project-calculations, H3.tender-calculations { margin-top: 15px !important; margin-bottom: 0 !important; }  
A.project-calculations, A.tender-calculations { text-decoration: none; float: right; margin-right: 3px; }
SELECT.project-calculations, SELECT.tender-calculations { width: 100%; border: 0; background-color: transparent !important; border-bottom: 1px dashed lightgray; }
INPUT.project-calculations, INPUT.tender-calculations { width: 100%; text-align: right; border: 0; background-color: transparent !important; border-bottom: 1px dashed lightgray; }
HR.project-calculations, HR.tender-calculations { margin: 1px 0 1px 0; border-top: 1px dotted lightgray; }

.filter-button { margin-right: 4px; margin-bottom: 4px; }
DIV.row DIV.border-right { border-right: 1px dotted #efefef; }

/********* JOURNAL *********/
TABLE.journal-signature TD, TABLE.journal-packages TD { border-bottom: 1px dotted lightgray !important; }

.project-configuration-fields 
{ 
	display: block; 
	border: 1px dotted lightgray;
	background-color: black; 
	padding-left: 2px; 
	padding-bottom: 2px;
}

/***************************/
/******** VSM CSS **********/
/***************************/
.vsm { opacity: 0; }
.vsm > DIV { display: inline-block; position: absolute; overflow: auto; }
.vsm > DIV#VsmTree { left: 0; top: 0; width: 30%; height: 60vh; }
.vsm > DIV#VsmContent { left: 35%; top: 0; width: 65%; height: 60vh; overflow: hidden; }
.vsm > DIV#VsmContent > DIV#VsmContentDetails { height: 100%; overflow: auto; }
.vsm > DIV#VsmContent > DIV#VsmContentDetails .actions.btn-set 
{
	position: absolute !important;
    bottom: 0px !important; left: 0px !important;
    padding: 10px; width: 100%; margin: 0px;
    background-color: var( --background-lighter ) !important;
    border-bottom-color: var( --background-light ) !important;
    border-top-color: var( --lines ) !important;
    z-index: 2;
}
.vsm > DIV#VsmResources { left: 0; bottom: 0; width: 30%; height: 40vh; }
.vsm > DIV#VsmNavigation { left: 30%; bottom: 0; width: 40%; height: 40vh; }
.vsm > DIV#VsmLogging { left: 70%; bottom: 0; width: 30%; height: 40vh; }
.vsm > DIV.dragger { position: absolute; background-color: lightgray; opacity: 0.2; z-index: 2; }
.vsm > DIV.dragger.ui-draggable-dragging { background-color: red; opacity: 1;  }
.vsm > DIV.dragger.vertical { width: 10px; cursor: e-resize; }
.vsm > DIV.dragger.horizontal { width: 100%; height: 10px; cursor: n-resize; }
.page-container .portlet-body.vsm { height: 800px; position: relative; }
.page-container.rare .portlet-body.vsm { height: calc( 100vh - 75px ); position: fixed; }

.vsm-resources { display: none; }
.vsm-navigation-focus-container
{
	height: 30px; 
	width: 100%; 
	padding: 3px 0 0 10px; 
	cursor: pointer;
	border-bottom: var(--border);
}
.vsm-navigation-focus
{
	color: white; 
	font-size: 17px; 
	font-weight: 400; 
	cursor: pointer;
}
.vsm-spinner 
{	
	display: none;
	position: absolute;
	right: 0;
	margin: 5px;
	z-index: 1;
	width: 50px;
	height: 50px;
	border: 10px solid #000000;
	border-radius: 50% !important;
	border-top: 10px solid #FFFFFF;
	-webkit-animation: spin 0.5s linear infinite;
	animation: spin 0.5s linear infinite;
}
.vsm-spinner.active { display: block; }
@-webkit-keyframes spin 
{
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin 
{ 
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/***************************/
/******** KANBAN CSS *******/
/***************************/
.kanban-header
{
	display: flex;
	flex-direction: row;
	align-items: stretch; 
	width: 100%; 
	gap: 10px; 
	z-index: 1;
	padding-bottom: 10px;
}
.kanban-header > DIV 
{  
	flex: 1;
	text-align: center;
	font-weight: 700;
	background-color: #efefef;
	padding: 10px;
	font-size: 14px;
	font-weight: normal;
	height: 80px;
}
.kanban-status-slider { width: 80%; margin: 8px auto 5px auto; }
.kanban-status-slider .ui-slider-handle { outline: none !important; }
.kanban-status-slider.ui-slider-horizontal .ui-slider-handle { top: -4px; }
.kanban-status-filter .kanban_filter_days { font-size: 16px; font-weight: bold; }
.kanban-status-slider-tooltip 
{ 
	position: absolute;
    top: 20px;
}
.kanban-status-filter
{
	font-size: 10px;
	font-weight: 700;
}
.kanban-status-slider > DIV { background: none; }
.kanban-container
{
	display: flex;
	flex-direction: row;
	align-items: stretch; 
	width: 100%; 
	gap: 10px;
}
.kanban-container > DIV
{
	flex: 1;
	font-weight: 700;
	background-color: #efefef;
	padding: 10px;
	font-size: 14px;
	font-weight: normal;
	overflow-y: scroll;
}
.kanban-items-container.active { border: 1px dashed black; background-color: #c8e9f7; }
.kanban-items
{
	position: relative;
	height: 120px; 
	width: 100%; 
	padding: 10px;
	margin-bottom: 5px;
	background-color: white;
}

.kanban-items .text { font-size: 12px; }
.kanban-items .responsibility-bubble
{
	position: absolute;
	bottom: 5px; right: 5px;
	height: 25px; width: 25px; 
	background-color: #efefef; 
	border-radius: 50% !important;
	text-align: center;
	line-height: 25px;
	font-size: 10px;
	font-weight: 900;
}
.kanban-items .workflow-status
{
	position: absolute;
	top: 5px; right: 5px;
	height: 25px; width: 25px;
    text-align: center; padding-top: 2px;
	background-color: #efefef; 
	border-radius: 50% !important;
}
.kanban-items .workflow-status.done { background-color: #ccf1d8;  }
.kanban-items .workflow-status.in-progress { background-color: #fcf8e3;  }
.kanban-items .next-step
{
	position: absolute;
	top: 5px; right: 5px;
	height: 25px; width: 25px;
    text-align: center; padding-top: 2px;
	background-color: #ff0000; 
	border-radius: 50% !important;
}
.kanban-items .resources
{
	position: absolute;
	top: 5px; right: 5px;
	height: 25px; width: 25px;
    text-align: center; padding-top: 2px;
	background-color: #ff0000; 
	border-radius: 50% !important;
}
.kanban-items .resources.done { background-color: #ccf1d8; }
.kanban-items .disabled
{
	position: absolute;
	top: 5px; right: 5px;
	height: 25px; width: 25px;
	text-align: center; 
	padding-top: 2px;
	background-color: #fcf8e3; 
	border-radius: 50% !important;
}

.kanban-items > SPAN { display: block; }
.kanban-item-spinner
{
	display: none;
    position: absolute;
    left: 5px;
    bottom: 5px;
}
.kanban-item-spinner.active { display: block; }

.vsm > DIV#VsmResources .link { display: inline-block; position: relative; text-decoration: none; padding: 10px; }
.vsm > DIV#VsmResources .link .badge { border-radius: 20px !important; position: absolute; top: 0; right: 15px; min-width: 20px; min-height: 20px; }
.vsm > DIV#VsmResources .SearchSpinner { display: none; position: absolute; top: 100px; left: 35px;}

/********* INPUT SUBLINES ********/
.InputMessageInfo { color: #3badcf; font-size: 12px; }
.InputMessageWarning { color: #ff8000; font-size: 12px; }
.InputMessageDanger { color: #ff0000; font-size: 12px; }
.InputMessageDanger.invalid { display : none; }

/***************************/
/**** MEDIA GENERATOR ******/
/***************************/
.media_generator .template { position: relative; height: 180px; margin-bottom: 10px; }
.media_generator .template .hint { padding-top: 50px; }
.media_generator .template .side.left { left: 5px; width: calc( 50% - 6px ); top: 0; bottom: 0; }
.media_generator .template .side.right { right: 5px; width: calc( 50% - 6px ); top: 0; bottom: 0; }
.media_generator .template .side
{
	position: absolute; 
	background: #eeeeee; 
	border: 1px solid lightgray; 
	text-align: center;
	font-size: 11px;
	height: 120px;
}

.media_generator .template .title
{
	position: absolute; 
	height: 58px; bottom: 0; left: 5px; 
	width: calc( 100% - 10px );
	text-align: center; 
	text-overflow: ellipsis; 
	overflow: hidden; 
	white-space: nowrap; 
	background: #eeeeee; 
	padding: 5px; 
	border: 1px solid lightgray; 
	font-size: 11px;
}

.media_generator .template .fancybox IMG
{
	position: absolute; 
	left: 0; right: 0; top: 0; bottom: 0;
	margin: auto; max-width: 100%; max-height: 100%;
}

.page-content.rare DIV.neo-dashboard-section 
{ 
	position: sticky; 
	top: 0;
	background-color: white;
	z-index: 1; 
}

/***************************************************/
/***************** WIDGETS *************************/
/***************************************************/
.widgets { height: 60vh; overflow: auto; }
.widgets .canvas .placeholder { float: left; opacity: 0.6; }
.widgets .canvas .widget { float: left; overflow: hidden; position: relative; }
.widgets .widget INPUT.order { display: none; position: absolute; top: 10px; right: 140px; width: 20px; height: 20px; border: var( --border ) !important; text-align: center; }
.widgets .widget INPUT.width { display: none; position: absolute; top: 10px; right: 162px; width: 20px; height: 20px; border: var( --border ) !important; text-align: center; }
.widgets .widget INPUT.active { display: none; position: absolute; top: 10px; right: 182px; width: 20px; height: 20px; border: var( --border ) !important; text-align: center; }
.widgets .canvas .widget INPUT.btn { position: absolute; top: 10px; right: 10px; height: 20px; font-size: 10px; cursor: pointer; padding: 2px 5px; }
.widgets .canvas .widget a.btn { position: absolute; top: 10px; right: 10px; height: 20px; font-size: 10px; cursor: pointer; padding: 2px 5px; }
.widgets .canvas .widget INPUT.btn.blue { display: none; }
.widgets .repository .widget { float: left; overflow: hidden; opacity: 0.5; position: relative; }
.widgets .repository .widget INPUT.btn { position: absolute; top: 10px; right: 10px; height: 20px; font-size: 10px; cursor: pointer; padding: 2px 5px; }
.widgets .repository .widget INPUT.btn.red { display: none; }
.widgets .repository { clear: both; }
.widgets .canvas .widget DIV.content { margin: 5px; padding: 12px 14px; height: 60px; border: var( --border ) !important; background-color: var( --background-lighter ) !important; }
.widgets .repository .widget DIV.content { margin: 5px; padding: 12px 14px; height: 60px; border: var( --border ) !important; }
.widgets .canvas .widget DIV.content { cursor: move; }
.widgets .canvas .placeholder DIV.content { margin: 5px; padding: 20px; height: 60px; background-color: var( --background ) !important; }
.widgets .canvas .ui-resizable-e { width: 15px; }

.layout-report-issue 
{
	position: fixed; 
	display: block; 
	height: 32px; 
	width: 32px; 
	right: 12px; 
	bottom: 47px; 
	border: 2px solid grey;
	border-radius: 50% !important; 
	text-align: center; 
	line-height: 30px; 
	opacity: 0.7;
	z-index: 999999999;
	cursor: pointer;
}
.layout-report-issue:hover { opacity: 100%; }

/***************************************************/
/***************** PRICING *************************/
/***************************************************/
.PriceBlock { position: relative; }
.PriceBlock IMG.PriceSpinner
{
	position: absolute;
    left: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    display: none;
    z-index: 3; 
}

/**********************************/
/************ SLIDER **************/
/**********************************/
.text.range .ui-slider-horizontal { height: 16px; z-index: 2; }
.text.range .ui-slider .ui-slider-handle { color: #333333; }
.text.range .ui-slider .ui-widget-header { background: #f5c335; }
.text.range .ui-slider .ui-slider-handle { width: 40px; height: 15px; outline: none; font-size: 10px; text-align: center; margin-left: -20px; overflow: visible; z-index: 4; border-radius: 2px !important; }
.text.range .ui-slider SPAN.ui-slider-handle:nth-of-type(1) { top: -8px; } 
.text.range .ui-slider SPAN.ui-slider-handle:nth-of-type(2) { top: 8px; } 
.text.range .ui-slider DIV.hours { position: absolute; width: 1px; background-color: #ff0000; height: 3px; z-index: 4; margin-left: -1px; } 
.text.range .ui-slider DIV.hours.top { top: -3px; }
.text.range .ui-slider DIV.hours.bottom { top: 15px; }
.text.range .ui-slider DIV.hours.middle { top: 6px; }
.text.range .ui-slider DIV.hours.zero { top: 0px; height: 15px; } 
.text.range .ui-slider DIV.minutes
{
    position: absolute;
    width: 1px;
    height: 100%;
    
    bottom: 0;
}
.text.range .ui-slider DIV.minutes.blocked { z-index: 3; background-color: #f0701a; }
.text.range .ui-slider DIV.minutes.scheduled { z-index: 2; background-color: #07e020; }

/* some styles for displaying range in jsf forms */
.text.range.details .ui-slider-horizontal  { height: 34px; }
.text.range.details .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 1; }
.text.range.details .ui-slider SPAN.ui-slider-handle:nth-of-type(1) { top: -1px; } 
.text.range.details .ui-slider SPAN.ui-slider-handle:nth-of-type(2) { top: 18px; } 
.text.range.details .ui-slider DIV.hours { height: 11px; } 
.text.range.details .ui-slider DIV.hours.top { top: -1px; }
.text.range.details .ui-slider DIV.hours.bottom { top: 15px; }
.text.range.details .ui-slider DIV.hours.middle { top: 10px; }
.text.range.details .ui-slider DIV.hours.zero { top: 0px; height: 33px; } 

/* disabled slider */
.text.range.disabled .ui-slider .ui-slider-handle { color: #a9a9a9; }
.text.range.disabled .ui-slider .ui-widget-header { background: #b7b7b7; }
.text.range.disabled .ui-slider DIV.hours { height: 11px; background-color: #a7a7a7; } 

/**********************************/
/********* SALES SUMMARY **********/
/**********************************/
DIV.sales { padding: 7px; }
DIV.sales:nth-child( odd ) { background-color: #ffffff; }
DIV.sales:nth-child( even ) { background-color: #f2f6f9; }
DIV.sales.line { border-top-color: #eee; border-top: 1px solid; }
DIV.sales.bottom-line { border-bottom-color: #eee; border-bottom: 1px solid; }
DIV.sales.highlight { background-color: #ffd9b3; }
DIV.sales.sum { font-weight: bold; }
DIV.sales.current { font-weight: bold; font-size: 20px; }
DIV.sales.current.positive { background-color: #f4ffdd; color: #008000; }
DIV.sales.current.negative { background-color: #ffdde8; color: #620020;  }
DIV.sales.current.balanced { background-color: #c0c0c0; color: #000000; }

TABLE.sales { width: 100%; table-layout: fixed; }
TABLE.sales TD { padding: 8px; vertical-align: top; }
TABLE.sales TD.small { font-size: 12px; padding: 0px 8px; }
TABLE.sales TD.sum { font-size: 16px; font-weight: bold; }
TABLE.sales TD.item_sum { font-size: 14px; font-weight: bold; }
TABLE.sales TD.type { text-align:right; }
TABLE.sales TD.amount { text-align:right; }
TABLE.sales TD.bold { font-weight: bold; }
TABLE.sales TD.actions { border-top: 1px solid black; }
TABLE.sales TD.spacer { font-size: 7px; padding: 0; }
TABLE.sales TD.current { font-weight: bold; font-size: 20px; border-top: 6px double black; }
TABLE.sales TD.current.positive { background-color: #f4ffdd; color: #008000; }
TABLE.sales TD.current.negative { background-color: #ffdde8; color: #620020;  }
TABLE.sales TD.current.balanced { background-color: #c0c0c0; color: #000000; }
TABLE.sales TD DIV.batch { width: 15px; height: 15px; background-color: #007BFF; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; border-radius: 4px !important; }
TABLE.sales TBODY:nth-child( odd ) { background-color: #ffffff; }
TABLE.sales TBODY:nth-child( even ) { background-color: #f2f6f9; }
TABLE.sales .line { border-top-color: #eee; border-top: 1px solid; }
TABLE.sales .batch { width: 15px; height: 15px; background-color: #007BFF; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; border-radius: 4px !important; }
TABLE.sales .capitalize-first:first-letter { text-transform: uppercase; }
TABLE.sales .capitalize-first { text-transform: lowercase; display: block; }

/**********************************/
/********* BENEFITS TABLE *********/
/**********************************/
TABLE.benefits { width:100%; table-layout: fixed; }
TABLE.benefits TR { height: 30px; }
TABLE.benefits TD { padding: 5px; }
TABLE.benefits TR.odd { background-color: #f5f5f5; }
TABLE.benefits TR.even { background-color: #f7f6ed; }
TABLE.benefits TR.highlight { background-color: #ffd9b3; }

/**********************************/
/********* CUSTOMER RADIO *********/
/**********************************/
TABLE.customer-radio TD { display: grid; grid-template-columns: 30px auto; }

/*************************************/
/************* SHOP ******************/
/*************************************/
DIV.shop-container 
{
	position: relative;
	height: 60vh;
	border: 1px solid lightgray; 
	overflow: auto;
}
DIV.shop-container A.shop-item
{
	display: block;
	height: 300px; 
	width: 100%; 
	border: 1px solid lightgray; 
	margin-bottom: 10px; 
	padding: 10px;
}
DIV.shop-container A.shop-item > DIV.image-container
{
	height: 80%; 
	width: 100%; 
	border: 1px solid lightgray;
}
DIV.shop-container A.shop-item > DIV.image-container > IMG
{
	width: 100%; 
	height: 100%; 
	object-fit: contain;
}
DIV.shop-container A.shop-item > DIV.image-container > IMG.placeholder { object-fit: none; }
DIV.shop-container A.shop-item > DIV.item-details
{
	margin-top: 10px;
	width: 100%; 
}
DIV.shop-container A.shop-item > DIV.item-details > SPAN.item-name
{
	font-weight: 600;
    display: block;
}

/**********************************/
/********* Category Media *********/
/**********************************/
.media-thumbnail-container { background-color: white; min-height: 80vh; }
.media-thumbnail-container.overflow { min-height: 50vh !important; overflow: auto; height: 50vh; }
.media-thumbnail-container::-webkit-scrollbar { display: none; }
.media-thumbnail-container .redirect { color:gray; position: absolute; top: 11px; }
.media-thumbnail-container .redirect i { color:gray; font-size: 17px; }
.media-thumbnail DIV DIV SPAN, .media-thumbnail .download  { top: -23px !important; right: 12px !important;}
.media-thumbnail-container DIV.row DIV { margin-bottom: 5px; }
.media-thumbnail { background-color: #eee; padding-bottom: 20px;}
.media-thumbnail DIV DIV  { background-color: #eee !important; border: none !important; padding: 10px !important; }
.media-thumbnail .title { position: absolute; bottom: 10px; padding: 0px 10px; font-size:11px; height: 20px; text-overflow: ellipsis; overflow: hidden; width: 95%;}
.media-thumbnail .media_uploader DIV SPAN { margin-right: 3px; }
.media-thumbnail .checker { margin-top: 10px !important; margin-left: 10px !important; }
.media-thumbnail-footer { display: block; border-bottom: 20px solid white !important; border-bottom-color: white !important;  border-top: 1px solid lightgray; border-top-color: lightgray;  height: 69px; padding: 10px; background-color: #eee; position: sticky; bottom: 33px; z-index: 3; }
.media_uploader IMG.media_uploader_placeholder, .neo-uploader-placeholder IMG.media_uploader_placeholder { position: absolute; top: -moz-calc( 50% - 20px ); top: -webkit-calc( 50% - 20px ); top: calc( 50% - 20px ); left: 0; right: 0; margin: auto; }
.media_uploader SPAN.media_uploader_placeholder, .neo-uploader-placeholder IMG.media_uploader_placeholder { color: #c0c4cc; font-size: 12px; position: absolute; top: -moz-calc( 50% + 20px ); top: -webkit-calc( 50% + 20px ); top: calc( 50% + 20px ); left: 20%; right: 20%; margin: auto; }
.page-content.rare .media-thumbnail-footer { position: sticky; bottom: 0px; width: 100%; z-index: 2; height: 50px; border-top: 1px solid lightgray; border-top-color: lightgray; border-bottom: 1px solid lightgray; border-bottom-color: lightgray; }
.media-thumbnail-footer .btn { margin-right: 4px; }
.neo-media-thumbnail .media-thumbnail-container .note-info { font-size: 13px !important; }
.neo-media-thumbnail { white-space: nowrap; font-size: 0; -ms-overflow-style: auto; position: relative; white-space-collapsing: discard; }
.neo-media-thumbnail.dropover { position: relative; }
.neo-media-thumbnail.dropover DIV.dropper { position: absolute; font-size: 13px; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0.8; color: black; z-index: 5; border: 1px dotted #c0c0c0; background-color: #eee; pointer-events: none; }
.media-thumbnail-footer .columns { float: right; text-decoration: none; color: lightgray; padding-top: 7px; font-size: 14px; }
DIV.media-thumbnail-footer DIV.neo-uploader-progress-border { border: 1px dotted lightgray; position: absolute; width: 100%; left:0px; bottom: 49px; z-index: 10; background: #f4f4f4; color: gray; padding: 10px; }
DIV.media-thumbnail-footer DIV.neo-uploader-progress { height: 20px }

.neo-thumbnail-navigation .left { position: absolute; left: 10px; top: 10px; }
.neo-thumbnail-navigation .center SPAN.number { padding: 5px; }
.neo-thumbnail-navigation .center SPAN.number B { font-weight: bold; font-size: 20px; }
.neo-thumbnail-navigation .center DIV.max { position: absolute; right: 10px; top: -16px; font-size: 11px; color: gray; }
.neo-thumbnail-navigation .right { position: absolute; right: 10px; top: 10px; }
.neo-thumbnail-navigation 
{  
    position: absolute;
    right: 50px; bottom: 131px; width: 350px;
    text-align: center;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 10px !important;
    box-shadow: 5px 5px rgb(48 42 62 / 31%);
    margin: auto;
    display: inline;
    padding: 3px 40px;
}

/***************************************/
/********** MEMBERSHIP STATUS **********/
/***************************************/
DIV.membership-status 
{ 
	height: 55vh; 
	width: 100%; 
	padding: 10px 0px; 
}
DIV.membership-status DIV.membership-status-details 
{ 
	height: 7vh; 
	width: 100%; 
	border: 1px solid lightgrey; 
	border-bottom: 0 !important; 
	padding: 10px;
}
DIV.membership-status DIV.membership-status-benefits
{
	height: 25vh;
	width: 100%; 
	border: 1px solid lightgrey; 
	border-bottom: 0 !important; 
	padding: 10px; 
	overflow: auto;
}
DIV.membership-status DIV.membership-status-benefits-text
{
	height: 20vh;
	width: 100%; 
	border: 1px solid lightgrey; 
	border-top: 0 !important; 
	padding: 10px;
}

.ConnectionMessage .loader { position: relative; }
.ConnectionMessage .loader IMG.SearchSpinner
{
	position: absolute;
	right: 25px;
	width: 18px;
	height: 18px;
	z-index: 2; 
}

/******* SCROLLABLE MODAL BODY *********/
DIV.modal DIV.modal-body DIV.scrollable 
{ 
	height: 45vh; /* default */
	overflow-y: auto; 
	overflow-x: hidden; 
} 

/********* VSM RESOURCES *********/
DIV.resource-header
{
	position: sticky; 
	top: 0px;
	display: flex; 
	flex-direction: row; 
	align-items: stretch; 
	width: 100%; 
	gap: 5px; 
	z-index: 1;
	padding-bottom: 5px;
	height: 10%;
}
DIV.resource-header > DIV.header
{
	text-align: center;
	background-color: #efefef;
	padding: 15px;
	font-size: 13px;
	font-weight: 700;
}
DIV.resource-container 
{
	display: flex; 
	flex-direction: row; 
	align-items: stretch; 
	height: 90%;
	width: 100%; 
	gap: 5px; 
	font-size: 13px;
	font-weight: 700;
}
DIV.resource-container > DIV.resource-category
{
	position: relative;
	background-color: #efefef;
	height: 100%;
	padding: 10px;
	overflow: auto;
}
DIV.resource-container > DIV.resource-category > A.btn
{
	height: 40px;
	width: 100%;
	padding: 10px;
}
DIV.resource-container > DIV.resource-category > DIV.dropdown.resource-category-button
{
	display: flex; 
	flex-direction: row; 
	align-items: stretch;  
	height: 40px;
	width: 100%; 
	margin-bottom: 5px;
}
DIV.resource-container > DIV.resource-category > DIV.dropdown.resource-category-button A { text-align: left; }
DIV.resource-container UL.dropdown-menu.resource-category-actions
{
	top: 80%;
	right: 0;
	left: unset;
}
DIV.resource-container UL.dropdown-menu.resource-category-actions > LI { border-bottom: 1px solid lightgray; }
DIV.resource-container UL.dropdown-menu.resource-category-actions > UL > LI.btn { text-align: left; }
DIV.resource-container UL.dropdown-menu.resource-category-actions:before { right: 7px; left: unset; }
DIV.resource-container UL.dropdown-menu.resource-category-actions:after { right: 8px; left: unset; }

/********* CMS CONTENT *********/
TABLE.variations, 
TABLE.matrix
{
	width: 100%;
	table-layout: fixed;
}
TABLE.variations TD, 
TABLE.overview TD, 
TABLE.matrix TD
{
	border: 0; 
	padding-right: 2px;
	padding-bottom: 2px;
}

TABLE.variations TD .btn, 
TABLE.overview TD .btn, 
TABLE.matrix TD .btn
{
	width: 100%;
	min-height: 40px;
	margin: 0;
	overflow: hidden;
    wrap: no-wrap;
    word-wrap: no-wrap;
    white-space: nowrap;
    text-overflow: ellipsis;
}

TABLE.overview TH,
TABLE.overview TD
{
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 2px;
	padding-right: 5px;
} 

TABLE.overview TH.centered,
TABLE.overview TD.centered
{
	text-align: center;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 2px;
	padding-right: 5px;
} 

TABLE.overview TR.even { background: var( --table-rows-even ); }
TABLE.overview TR.odd  { background: var( --table-rows-odd ); }

TABLE.matrix TD .btn
{
	font-weight: bold; 
	width: 100%;
	height: 100%;
	cursor: default;
}

TABLE.matrix TD A.btn
{
	cursor: pointer;
}

TABLE.matrix TD A.btn.title,
TABLE.matrix TD SPAN.btn
{
	cursor: default;
}

TABLE.matrix TD A.title
{
	position: relative; 
	background-image: linear-gradient( to bottom left, var( --button-disabled ) 49%, white 50%, var( --button-cancel ) 51% ) !important;
}

TABLE.matrix TD A.title SPAN
{
	font-size: 11px; 
	font-weight: bold; 
	position: absolute;
}

TABLE.matrix TD A.title SPAN.row
{
	bottom:5px; 
	left: 30px;
}

TABLE.matrix TD A.title SPAN.column
{
	top:5px; 
	right: 30px; 
}

/********* MASONRY *********/
.masonry { column-count: 2; column-gap: 10px; font-size: 11px; }
.masonry IMG { width: 100%; display: block; }
.masonry DIV.checker,
.image-block DIV.checker { position: absolute; left: 1px; top: 5px; }
.masonry FIGURE > IMG { grid-row: 1 / -1; grid-column: 1; }
.masonry FIGURE A,
.image-block FIGURE A { color: black; text-decoration: none; }
.masonry FIGURE 
{
	margin: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	margin-bottom: 10px;
	break-inside: avoid;
	overflow: hidden;
	position: relative;
	background: var( --background-lighter ) !important; 
}

.masonry FIGCAPTION 
{
	grid-row: 2;
	grid-column: 1;
	background-color: rgba( 255,255,255,.7 );
	padding: .2em .5em;
	justify-self: start;
}

@media ( min-width:  480px ) { .masonry { column-count: 3; } }
@media ( min-width:  767px ) { .masonry { column-count: 4; } }
@media ( min-width:  991px ) { .masonry { column-count: 5; } }
@media ( min-width: 1200px ) { .masonry { column-count: 6; } }
@media ( min-width: 1768px ) { .masonry { column-count: 8; } }


/********* MASONRY *********/
.image-block 
{ 
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: flex-start;
   font-size: 11px; 
}
.image-block IMG { display: block; height: 150px; }
.image-block FIGURE 
{
	display: flex;
	margin: 5px;
	break-inside: avoid;
	overflow: hidden;
	position: relative;
	background: var( --background-lighter ) !important; 
	vertical-align: top;
	
}
.image-block FIGCAPTION 
{
	background-color: rgba( 255,255,255,.7 );
	padding: .2em .5em;
	position: absolute;
	bottom:0;
	left:0;
	margin-top: 5px;
}


.ui-sortable-placeholder { background-color: red; visibility: visible; }

/************ INSTANCES OVERVIEW *************/
DIV.instance 
{
	width: 100%;
	overflow: auto;
}

DIV.instance ::-webkit-scrollbar 
{
    background: #e2e2e2;
    width: 12px;
}

A.resource.btn.default SPAN { color: #333333 !important; }
A.resource.btn.default { background-color: #ffffff !important; }
A.resource.btn SPAN.text { display: inline-block; max-width: 90%; }
A.resource.btn SPAN.icon { float: right; line-height: 20px; font-size: 18px !important; }

/********* INLINE DATE *********/
.inline-date-container
{
	display: flex;
}

.inline-date-calendar
{
	width: 200px;
	margin-right: 25px;
}

.inline-calendar-listener
{
	flex: auto;
}

/****** U18 DETAILS SIGNITURE ******/
img.u18-signature
{
	height: 265px;
	width: 100%;
	object-fit: contain;
	border: 1px dotted rgb(204, 204, 204);
	display: block;
}

/****** Lingual styles *******/
IMG.lingual { height: 24px; width: 24px; opacity: 0.25; filter: grayscale( 100% ); }
IMG.lingual:hover { opacity: 1; filter: none; }

/****** EVENT RATINGS ******/
DIV.event-ratings-container { height: 34px; padding: 5px; }
DIV.event-ratings-container DIV.event-ratings { display: inline-block; }
DIV.event-ratings-container DIV.event-ratings SPAN.event-ratings-star { font-size: 20px; margin: 4px 5px 0px 10px; color: lightgray; }
DIV.event-ratings-container DIV.event-ratings SPAN.event-ratings-star.checked { color: yellow !important; -webkit-text-stroke: 1px #CCCC00; }

TABLE.openai-questions DIV.radio { margin-right: 10px !important; }
TABLE.openai-questions LABEL { display: initial !important; }

/* COPY CLIENT */
#CopyClientDialog TABLE .control-label { margin-bottom: 2px; height: 19px; }

/********************************************/
/****** SUMMERNOTE STYLE ********************/
/********************************************/
.note-holder-custom { display: none; }
.note-palette .note-color-select { display: none; }
.note-color-palette { padding: 5px; border: 1px solid #b9b9b9; width: 100%; }
.note-popover .popover-content .note-color-palette div .note-color-btn, .note-editor .note-toolbar .note-color-palette div .note-color-btn { width: 19px; }


/********************************************/
/*********** TIME PICKER ********************/
/********************************************/
.bootstrap-timepicker-minute,
.bootstrap-timepicker-hour { padding: 0px !important; }

.sale_dialog_buttons 
{
	margin-top: 5px; 
	margin-bottom: 5px; 
	padding-top: 7px; 
	background: none !important;
	border-top: 1px solid #eee;
	display: block;
	padding-bottom: 20px;
}
.sale_dialog_buttons .btn { margin-right: 4px; }

DIV.sale-bookable-articles
{
	position: relative;
	width: 100%; 
	margin-bottom: 10px;
}
DIV.sale-bookable-articles > DIV.checker
{
	position: absolute; 
	top: 5px;
}
DIV.sale-bookable-articles > DIV.item-description
{
    width: 100%;
    background-color: var(--background) !important;
    opacity: 0.9;
    padding: 5px;
}

IFRAME.launcher
{
	right: 500px !important;
}

.AreaShape{
	display:inline-block;
	width:auto;
	height:100px;
	position: absolute;
	left: 10px;
	top: 10px;
	cursor: move;
	border-radius: 0px !important;
	border: 1px dotted var(--lines);
}

.Preview .AreaShape{
	border: none;
}

.AreaShape SVG * {
	fill-opacity: 0.8;
}

.AreaShape SVG,
.AddShape .Holder SVG{
	width:100%;
	height:100%;
	vertical-align: top;
}

  .modal .AreaShape .ui-resizable-handle {
	position: absolute;
	background: #ccc;
	width: 7px;
	height: 7px;
	z-index: 90;
}
  .modal .AreaShape .ui-resizable-n {
	top: -5px;
	left: 50%;
	margin-left: -5px;
	cursor: n-resize;
}
.modal .AreaShape .ui-resizable-e {
	right: -5px;
	top: 50%;
	margin-top: -5px;
	cursor: e-resize;
}
.modal .AreaShape .ui-resizable-s {
	bottom: -5px;
	left: 50%;
	margin-left: -5px;
	cursor: s-resize;
}
  .modal .AreaShape .ui-resizable-w {
	left: -5px;
	top: 50%;
	margin-top: -5px;
	cursor: w-resize;
}
.modal .AreaShape .ui-resizable-ne {
	right: -5px;
	top: -5px;
	cursor: 	esize;
}
	.modal .AreaShape .ui-resizable-se {
	bottom: -5px;
	right: -5px;
	cursor: se-resize;
}
	.modal .AreaShape .ui-resizable-sw {
	bottom: -5px;
	left: -5px;
	cursor: sw-resize;
}
.modal .AreaShape .ui-resizable-nw {
	left: -5px;
	top: -5px;
	cursor: nw-resize;
}

.AddShape .Holder 
{
	height: 20px;
	width: auto;
	pointer-events: none;
}

.AddShape .Holder SVG > *
{
	fill: white;
}

.neo-uploader .alt-text
{
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.neo-uploader img.hidden
{
	display: none;
}

.neo-uploader img.hidden + .alt-text
{
	display: block;
}

/********************************************/
/*********** LOGISTIC MODULE ****************/
/********************************************/
.inline_search .form-control.filter
{
	border: 0 !important;
    border-bottom: var(--border) !important;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.inline_search .form-control.filter.favorites
{
	padding-bottom: 3px !important;
    padding-top: 24px !important;
}

.inline_search IMG.spinner
{
	position: absolute;
    top: 21px; right: 15px;
    display: none;
    z-index: 2;
}

/**********************************/
/********* INVOICE FEES TABLE *********/
/**********************************/
TABLE.invoice_items { width:100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
TABLE.invoice_items TBODY TR { border-bottom: var( --border ); }
TABLE.invoice_items TD,
TABLE.invoice_items TH { padding: 5px; text-align: left; }
TABLE.invoice_items TD H5,
TABLE.invoice_items TH H5 { font-weight: bold; }
TABLE.invoice_items TR.odd { background-color: #f5f5f5; }
TABLE.invoice_items TR.even { background-color: #f7f6ed; }
TABLE.transaction_types { display: table; width: 100%; }
TABLE.transaction_types TR:nth-child(even) { background-color: #f5f5f5; border-bottom: var( --border ); }
TABLE.transaction_types TR:nth-child(odd) { background-color: #f7f6ed; border-bottom: var( --border ); }
TABLE.transaction_types TR:last-child { border-bottom: none; }
TABLE.transaction_types TD { padding: 5px; }

/**********************************/
/** JQUERY UI DIALOG **************/
/**********************************/
.ui-dialog { width: 90% !important; max-width: 1000px !important; }
.ui-dialog.ui-widget { padding: 0; border-radius: 10px !important; box-shadow: 6px 6px 12px gray; background: white; } 
.ui-dialog.ui-widget *:not(.fa):not([class^="icon-"]):not([class*=" icon-"]) { font-family: "Open Sans", sans-serif !important; }
.ui-dialog .ui-dialog-title { font-weight: 500; padding: 10px 0px; font-size: 14px; }
.ui-dialog-titlebar-close::before, .ui-dialog-titlebar-close::after { content: ""; position: absolute; left: 9px; top: 3px; height: 14px; width: 2px; background-color: #000; }
.ui-dialog-titlebar-close::before { transform: rotate( 45deg ); }
.ui-dialog-titlebar-close::after { transform: rotate( -45deg ); }
.ui-dialog .ui-dialog-titlebar-close { right: 15px; top: 50%; border-radius: 3px !important; border: 0; }

/*********************************/
/********* EVENT WIDGETS *********/
/*********************************/
.event-widget
{ 
	display: flex; 
	flex-flow: column;
	height: 300px; 
	border: 1px solid lightgray; 
	padding: 10px; 
}
.event-widget .widget-title { font-size: 14px; flex: 0 1 auto; }
.event-widget .widget-body { flex: 1 1 auto; }
TABLE.cashier-summary TR.odd { background-color: #f5f5f5; }
TABLE.cashier-summary TR.even { background-color: #f7f6ed; }

/*********************************/
/**** JSF h:selectOneRadio *******/
/*********************************/
.form-group TABLE.nobr { table-layout: fixed; width: 100%; }
.form-group TABLE.nobr TD { white-space: nowrap; /* Prevents wrapping */ }
.form-group TABLE.nobr DIV { margin-top: -9px; }
.form-group TABLE.nobr TD > LABEL 
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    padding-right: 10px;
    width: calc( 100% - 18px );
    margin-bottom: 0;
}

/*********************************/
/**** Notes Messages Block *******/
/*********************************/
.messages .note { margin: 0 0 10px 0; }
.messages .note:last-child { margin-bottom: 20px; }

/*********************************/
/**** Form Field buttons *********/
/*********************************/
.input-group A.open
{
    background-color: var(--button-blue);
    color: white !important;
    position: absolute;
    right: 5px;
    top: 6px;
    /* width: 20px; */
    height: 22px;
    z-index: 2;
    border: var(--border);
    border-radius: 5px !important;
    padding: 1px 10px;
    text-decoration: none;
}

/*********************************/
/**** logistics table grid *******/
/*********************************/
.logistics.table 
{
    display: grid;
    grid-template-columns: auto 100px;
    width: 100%; margin-bottom: 0px;
    border: var( --border ) !important;
    position: absolute; bottom: 0px; 
    background-color: var( --input-disabled-background ) !important;
    border-bottom: 0 !important;
}

.logistics.table .line { display: contents; }
.logistics.table .cell { padding: 5px 16px; border-bottom: var( --border ) !important; }

/* Override global scrollbar hiding */
.scrollable::-webkit-scrollbar {
    width: 8px; /* or any other width */
    background: #f1f1f1;
}

/* fee arrow */
.OutgoingBilling
{
	position: absolute; 
	left: 17%; width: 33%;
	padding: 5px;
}

.OutgoingIncoming
{
	position: absolute;
	left: 17%; width: 66%;
	padding: 5px;
}

.BillingIncoming
{
	position: absolute;
	left: 50%; width: 33%;
	padding: 5px;
}

.BillingOutgoing
{
	position: absolute;
	left: 17%; width: 33%;
	padding: 5px;
}

.IncomingBilling
{
	position: absolute;
	left: 50%; width: 33%;
	padding: 5px;
}

.IncomingOutgoing
{
	position: absolute;
	left: 17%; width: 66%;
	padding: 5px;
}

INPUT.form-control.LogisticArrows
{
	display: unset;
    margin: auto;
    text-align: center;
    height: 22px;
    margin-bottom: 6px;
    font-size: 13px;
    border:  0;
}

INPUT.form-control.LogisticArrows.left
{
	width: 50px;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    background: transparent; 
}

INPUT.form-control.LogisticArrows.right
{
	width: 50px;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    background: transparent; 
}

INPUT.form-control.LogisticArrows.center
{
	width: 100px;
    font-weight: bold;
}

DIV.LogisticFeesRows
{
	height: 100px; 
	padding: 5px; position: relative;
} 

DIV.LogisticFeesRows > INPUT
{
	width: 80%;
    border: var(--border) !important;
    text-align: center;
    margin-top: 50%;
} 

DIV.LogisticFeesRows > IMG.arrow
{
    position: absolute;
    top: 10px;
    z-index: 1;
    width: 200%;
    height: 30px;
    left: -50%;
    opacity: 0.4;
} 


DIV.LogisticFeesRows > IMG.arrow.right {  transform: rotate(5deg); }
DIV.LogisticFeesRows > IMG.arrow.left {  transform: rotate(355deg); }

DIV.LogisticFeesBackground
{
	border: var( --border ); 
	background: repeating-linear-gradient(var(--table-rows-odd), var(--table-rows-odd) 100px, var(--table-rows-even) 100px, var(--table-rows-even) 200px) !important;
} 

.no-portlet-title .portlet-title { display: none; }

/***********************************************/
/**** show scrollable for specific elements ****/
/***********************************************/
.ace_scrollbar::-webkit-scrollbar-thumb { background: #888; width: 20px; }
.ace_scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }

/***********************************************/
/**** buttons in text fields *******************/
/***********************************************/
A.btn.dotted.m { right: 32px; }
A.btn.dotted.p { right: 5px; }
A.btn.dotted
{
	position: absolute;
    z-index: 2;
    width: auto;
    padding: 3px 5px 2px 5px;
    border-radius: 4px !important;
    top: 5px;
    text-align: center;
    font-size: 13px;
}

/***********************************************/
/**** employment *******************************/
/***********************************************/
#phases .phase { height: 60px; border: var( --border ) !important; padding: 10px; margin-bottom: 5px; cursor: s-resize; }
#phases.ui-sortable .ui-sortable-placeholder { height: 60px; border: var( --border ) !important; visibility: visible !important; padding: 10px; margin-bottom: 5px; background: #ffe9a8 !important; }
#phases .phase:nth-child(odd) { background-color: var( --table-rows-even ); }
#phases .phase:nth-child(even) { background-color: var( --table-rows-odd ); }
#phases .phase:hover { background-color: var( --table-rows-highlight ); }

/***********************************************/
/**** neo mood tab (events + cms instances) ****/
/***********************************************/
.neo-mood-hr-divider { margin-top: 6px; margin-bottom: 18px; }
.neo-mood-row-lg { margin-bottom: 18px; }
.neo-mood-row-md { margin-bottom: 12px; }
.neo-mood-row-sm { margin-bottom: 8px; }
.neo-mood-row-xs { margin-bottom: 6px; }
.neo-mood-section-spacer { margin-bottom: 18px; }
.neo-mood-section-spacer-top { margin-top: 12px; }
.neo-mood-section-heading { margin-bottom: 2px; }
.neo-mood-section-hr { margin-top: 0; }
.neo-mood-section-hr--mb8 { margin-top: 0; margin-bottom: 8px; }
.neo-mood-section-hr--mb0 { margin-top: 0; margin-bottom: 0; }
.neo-mood-flyer-preview-well
{
	padding: 0;
	overflow: hidden;
	min-height: 180px;
}
.neo-mood-flyer-preview-well--padded { padding: 20px; }
.neo-mood-flyer-preview-image
{
	width: 100%;
	height: auto;
	max-height: 100%;
}
.neo-mood-flyer-preview-image--ghost { opacity: 0.1; }
.neo-mood-readonly-textarea
{
	height: 80px;
	resize: none;
}
.neo-mood-readonly-textarea--spaced
{
	height: 80px;
	resize: none;
	margin-top: 8px;
}
.neo-mood-progress-compact { margin-top: 0; margin-bottom: 0; }
.neo-mood-color-name { margin-top: 4px; }
.neo-mood-block-label { margin-bottom: 6px; }
.neo-mood-field-gap { margin-top: 8px; }
.neo-mood-element-chip
{
	display: block;
	margin: 6px;
	border-radius: 5px !important;
	padding: 5px 15px;
	border: var( --border ) !important;
}
.neo-mood-color-picker-trigger
{
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.neo-mood-json-textarea
{
	height: 1000px;
	font-family: Consolas, Monaco, monospace;
	font-size: 11px;
}
/**** neo mood theme preview (icon + decor motifs) ****/
/* Self-contained flyer element preview styles for neo Event/Mood tab.
   Each .theme-decor--{slug} class renders a recognizable motif shape. */

.neo-mood-theme-preview {
  position: relative;
  overflow: hidden;
  min-height: 140px;
}

.neo-mood-theme-preview--decor {
  min-height: 240px;
}

.neo-mood-theme-preview--icons {
  min-height: 72px;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  box-sizing: border-box;
}

.neo-mood-theme-preview--icons .theme-icon-row {
  position: static;
  left: auto;
  bottom: auto;
  max-width: none;
  width: 100%;
}

.neo-mood-theme-preview .theme-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.neo-mood-theme-preview .theme-decor__item {
  position: absolute;
  display: block;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--theme-accent, #fff);
  opacity: 0.105;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--theme-glow, var(--theme-accent, #fff)) 70%, transparent));
}

.neo-mood-theme-preview--decor .theme-decor__item:nth-child(1) { left: 7%; top: 16%; transform: rotate(-10deg); }
.neo-mood-theme-preview--decor .theme-decor__item:nth-child(2) { right: 10%; top: 18%; transform: rotate(14deg); color: var(--theme-accent-2, var(--theme-accent, #fff)); }
.neo-mood-theme-preview--decor .theme-decor__item:nth-child(3) { left: 18%; top: 42%; transform: rotate(8deg); }
.neo-mood-theme-preview--decor .theme-decor__item:nth-child(4) { right: 18%; top: 48%; transform: rotate(-12deg); color: var(--theme-accent-2, var(--theme-accent, #fff)); }
.neo-mood-theme-preview--decor .theme-decor__item:nth-child(5) { left: 8%; bottom: 18%; transform: rotate(16deg); }
.neo-mood-theme-preview--decor .theme-decor__item:nth-child(6) { right: 8%; bottom: 15%; transform: rotate(-8deg); }

.neo-mood-theme-preview--decor .theme-decor__item {
  opacity: 0.34 !important;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--theme-glow, var(--theme-accent, #fff)) 55%, transparent));
}

.neo-mood-theme-preview .theme-icon-row {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
  color: var(--theme-accent-ui, var(--theme-accent, #fff));
}

.neo-mood-theme-preview .theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}

.neo-mood-theme-preview .theme-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

/* red-brush — angled paint stroke */
.neo-mood-theme-preview .theme-decor--red-brush {
  width: clamp(118px, 16vw, 240px);
  height: clamp(16px, 2.2vw, 30px);
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent, currentColor 12%, currentColor 84%, transparent),
    repeating-linear-gradient(110deg, transparent 0 7px, rgba(0, 0, 0, 0.32) 8px 10px);
  clip-path: polygon(0 28%, 82% 0, 100% 42%, 12% 100%);
}

/* date-tile — calendar tile with cross divider */
.neo-mood-theme-preview .theme-decor--date-tile {
  width: clamp(52px, 6vw, 82px);
  height: clamp(42px, 5vw, 66px);
  border: 1px solid currentColor;
  background:
    linear-gradient(currentColor 0 24%, transparent 24%),
    linear-gradient(90deg, transparent 48%, currentColor 49% 51%, transparent 52%);
}

/* member-bar — horizontal membership strip */
.neo-mood-theme-preview .theme-decor--member-bar {
  width: clamp(118px, 16vw, 240px);
  height: clamp(10px, 1.4vw, 18px);
  color: var(--theme-text, var(--theme-accent, #fff));
  opacity: 0.08;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, currentColor 12%, currentColor 84%, transparent);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}

/* stage-glow — floor spotlight glow */
.neo-mood-theme-preview .theme-decor--stage-glow {
  width: clamp(120px, 18vw, 260px);
  height: clamp(120px, 18vw, 260px);
  border-radius: 999px;
  background: radial-gradient(circle at center, currentColor, transparent 64%);
  opacity: 0.09;
}

/* palm-leaf — frond with ribbed leaf veins */
.neo-mood-theme-preview .theme-decor--palm-leaf {
  width: clamp(90px, 12vw, 170px);
  height: clamp(110px, 14vw, 210px);
  background:
    repeating-linear-gradient(82deg, transparent 0 9px, currentColor 10px 12px, transparent 13px 20px);
  clip-path: ellipse(32% 48% at 50% 50%);
  opacity: 0.085;
}

/* ice-cube — tilted cube with facet highlights */
.neo-mood-theme-preview .theme-decor--ice-cube {
  width: clamp(42px, 5vw, 74px);
  height: clamp(42px, 5vw, 74px);
  border: 1px solid currentColor;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 54%),
    color-mix(in srgb, currentColor 8%, transparent);
  transform: rotate(18deg);
}

/* splash — water splash droplets */
.neo-mood-theme-preview .theme-decor--splash {
  width: clamp(90px, 11vw, 160px);
  height: clamp(70px, 9vw, 130px);
  background:
    radial-gradient(circle at 16% 52%, currentColor 0 6%, transparent 7%),
    radial-gradient(circle at 38% 22%, currentColor 0 5%, transparent 6%),
    radial-gradient(circle at 62% 70%, currentColor 0 7%, transparent 8%),
    radial-gradient(circle at 78% 32%, currentColor 0 4%, transparent 5%);
}

/* sunglasses — dual lenses with bridge */
.neo-mood-theme-preview .theme-decor--sunglasses {
  width: clamp(88px, 10vw, 150px);
  height: clamp(34px, 4vw, 58px);
  background:
    radial-gradient(ellipse at 28% 50%, currentColor 0 32%, transparent 34%),
    radial-gradient(ellipse at 72% 50%, currentColor 0 32%, transparent 34%),
    linear-gradient(currentColor, currentColor) center / 24% 3px no-repeat;
}

/* tape-strip — diagonal hazard tape */
.neo-mood-theme-preview .theme-decor--tape-strip {
  width: clamp(118px, 16vw, 240px);
  height: clamp(16px, 2.2vw, 30px);
  border-radius: 2px;
  background:
    repeating-linear-gradient(-45deg, currentColor 0 8px, transparent 8px 16px);
  clip-path: polygon(0 28%, 82% 0, 100% 42%, 12% 100%);
}

/* big-x — crossed X mark */
.neo-mood-theme-preview .theme-decor--big-x {
  width: clamp(78px, 10vw, 150px);
  height: clamp(78px, 10vw, 150px);
  background:
    linear-gradient(45deg, transparent 42%, currentColor 43% 57%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, currentColor 43% 57%, transparent 58%);
}

/* halftone — dotted halftone patch */
.neo-mood-theme-preview .theme-decor--halftone {
  width: clamp(100px, 14vw, 210px);
  height: clamp(80px, 10vw, 150px);
  background-image: radial-gradient(circle, currentColor 0 2px, transparent 2.5px);
  background-size: 12px 12px;
  clip-path: polygon(0 12%, 100% 0, 82% 100%, 8% 86%);
}

/* smiley — face with eyes and smile arc */
.neo-mood-theme-preview .theme-decor--smiley {
  width: clamp(62px, 7vw, 100px);
  height: clamp(62px, 7vw, 100px);
  border: 2px solid currentColor;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 38%, currentColor 0 5%, transparent 6%),
    radial-gradient(circle at 66% 38%, currentColor 0 5%, transparent 6%),
    radial-gradient(ellipse at 50% 64%, transparent 0 38%, currentColor 39% 43%, transparent 44%);
}

/* beer-glass — pint glass silhouette */
.neo-mood-theme-preview .theme-decor--beer-glass {
  width: clamp(44px, 5vw, 78px);
  height: clamp(90px, 11vw, 160px);
  border: 2px solid currentColor;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, transparent 0 18%, currentColor 19% 100%);
  opacity: 0.08;
}

/* flag-bars — angled flag stripes */
.neo-mood-theme-preview .theme-decor--flag-bars {
  width: clamp(118px, 15vw, 220px);
  height: clamp(54px, 6vw, 92px);
  background:
    linear-gradient(currentColor 0 30%, transparent 30% 36%, currentColor 36% 66%, transparent 66% 72%, currentColor 72%);
  clip-path: polygon(0 0, 96% 8%, 100% 100%, 4% 92%);
}

/* football — ball with seam lines */
.neo-mood-theme-preview .theme-decor--football {
  width: clamp(62px, 8vw, 112px);
  height: clamp(62px, 8vw, 112px);
  border: 2px solid currentColor;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 47%, currentColor 48% 52%, transparent 53%),
    linear-gradient(transparent 47%, currentColor 48% 52%, transparent 53%);
}

/* gold-smoke — soft smoke plume */
.neo-mood-theme-preview .theme-decor--gold-smoke {
  width: clamp(120px, 18vw, 260px);
  height: clamp(90px, 13vw, 190px);
  background:
    radial-gradient(ellipse at 50% 80%, currentColor 0 18%, transparent 70%),
    radial-gradient(circle at 30% 40%, currentColor 0 8%, transparent 50%),
    radial-gradient(circle at 70% 35%, currentColor 0 6%, transparent 45%);
  opacity: 0.075;
}

/* gold-confetti — scattered confetti dots */
.neo-mood-theme-preview .theme-decor--gold-confetti {
  width: clamp(120px, 18vw, 260px);
  height: clamp(90px, 13vw, 190px);
  background:
    radial-gradient(circle at 18% 28%, currentColor 0 4%, transparent 5%),
    radial-gradient(circle at 46% 68%, currentColor 0 3%, transparent 4%),
    radial-gradient(circle at 76% 30%, currentColor 0 5%, transparent 6%),
    radial-gradient(circle at 55% 45%, currentColor 0 2%, transparent 3%),
    radial-gradient(circle at 88% 72%, currentColor 0 3%, transparent 4%);
  opacity: 0.075;
}

/* crown-mark — crown silhouette */
.neo-mood-theme-preview .theme-decor--crown-mark {
  width: clamp(72px, 9vw, 130px);
  height: clamp(54px, 7vw, 100px);
  background: currentColor;
  clip-path: polygon(0 100%, 0 32%, 26% 60%, 50% 0, 74% 60%, 100% 32%, 100% 100%);
}

/* spotlight — cone beam from top */
.neo-mood-theme-preview .theme-decor--spotlight {
  width: clamp(120px, 18vw, 260px);
  height: clamp(120px, 18vw, 260px);
  background: radial-gradient(ellipse at 50% 0%, currentColor 0 22%, transparent 72%);
  opacity: 0.09;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

/* heart-line — heart outline with trailing lines */
.neo-mood-theme-preview .theme-decor--heart-line {
  width: clamp(120px, 15vw, 220px);
  height: clamp(44px, 6vw, 82px);
  background:
    radial-gradient(circle at 43% 42%, currentColor 0 10%, transparent 11%),
    radial-gradient(circle at 57% 42%, currentColor 0 10%, transparent 11%),
    linear-gradient(45deg, transparent 38%, currentColor 39% 49%, transparent 50%),
    linear-gradient(-45deg, transparent 38%, currentColor 39% 49%, transparent 50%),
    linear-gradient(currentColor, currentColor) left 50% / 38% 2px no-repeat,
    linear-gradient(currentColor, currentColor) right 50% / 38% 2px no-repeat;
}

/* --------------------------------------------------------------------------
   Extended flyer element library — generated from 85 current event flyers.
   Compatible with existing .theme-decor--{slug} rendering.
   All motifs use currentColor and existing theme variables.
   -------------------------------------------------------------------------- */

/* disco-ball — mirror ball with tile grid */
.neo-mood-theme-preview .theme-decor--disco-ball {
  width: clamp(72px, 9vw, 150px);
  height: clamp(72px, 9vw, 150px);
  border-radius: 999px;
  border: 2px solid currentColor;
  background:
    linear-gradient(90deg, transparent 47%, currentColor 48% 52%, transparent 53%),
    linear-gradient(transparent 47%, currentColor 48% 52%, transparent 53%),
    repeating-linear-gradient(0deg, transparent 0 15px, currentColor 16px 17px),
    repeating-linear-gradient(90deg, transparent 0 15px, currentColor 16px 17px),
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.26), transparent 28%);
  opacity: 0.105;
}

/* vinyl-record — large circular record with center label */
.neo-mood-theme-preview .theme-decor--vinyl-record {
  width: clamp(96px, 14vw, 240px);
  height: clamp(96px, 14vw, 240px);
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 8%, currentColor 9% 12%, transparent 13% 25%, currentColor 26% 27%, transparent 28% 42%, currentColor 43% 44%, transparent 45% 60%, currentColor 61% 62%, transparent 63%),
    radial-gradient(circle at center, currentColor 0 100%);
  opacity: 0.085;
}

/* cassette-tape — retro cassette silhouette */
.neo-mood-theme-preview .theme-decor--cassette-tape {
  width: clamp(110px, 15vw, 230px);
  height: clamp(64px, 8vw, 126px);
  border: 2px solid currentColor;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 52%, transparent 0 11%, currentColor 12% 15%, transparent 16%),
    radial-gradient(circle at 70% 52%, transparent 0 11%, currentColor 12% 15%, transparent 16%),
    linear-gradient(currentColor, currentColor) center 30% / 62% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 76% / 42% 3px no-repeat;
}

/* speaker-stack — stacked speaker boxes */
.neo-mood-theme-preview .theme-decor--speaker-stack {
  width: clamp(72px, 9vw, 140px);
  height: clamp(120px, 16vw, 250px);
  border: 2px solid currentColor;
  background:
    radial-gradient(circle at 50% 24%, transparent 0 13%, currentColor 14% 16%, transparent 17%),
    radial-gradient(circle at 50% 72%, transparent 0 18%, currentColor 19% 21%, transparent 22%),
    linear-gradient(currentColor, currentColor) 50% 50% / 80% 2px no-repeat;
}

/* headphones — headphone arc with ear cups */
.neo-mood-theme-preview .theme-decor--headphones {
  width: clamp(88px, 11vw, 180px);
  height: clamp(80px, 10vw, 160px);
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(currentColor, currentColor) left 18% bottom / 18% 44% no-repeat,
    linear-gradient(currentColor, currentColor) right 18% bottom / 18% 44% no-repeat;
}

/* rock-guitar — diagonal electric guitar silhouette */
.neo-mood-theme-preview .theme-decor--rock-guitar {
  width: clamp(94px, 13vw, 220px);
  height: clamp(120px, 16vw, 260px);
  background:
    radial-gradient(ellipse at 35% 70%, currentColor 0 18%, transparent 19%),
    radial-gradient(ellipse at 55% 58%, currentColor 0 15%, transparent 16%),
    linear-gradient(32deg, transparent 0 43%, currentColor 44% 49%, transparent 50%),
    linear-gradient(32deg, transparent 0 58%, currentColor 59% 63%, transparent 64%);
  clip-path: polygon(22% 100%, 10% 82%, 35% 60%, 66% 0, 76% 4%, 48% 66%, 66% 88%, 48% 100%);
}

/* lightning-bolt-bg — large angular bolt */
.neo-mood-theme-preview .theme-decor--lightning-bolt-bg {
  width: clamp(52px, 7vw, 120px);
  height: clamp(110px, 14vw, 230px);
  background: currentColor;
  clip-path: polygon(54% 0, 8% 54%, 42% 54%, 28% 100%, 92% 39%, 56% 39%);
}

/* laser-fan — fanned club laser beams */
.neo-mood-theme-preview .theme-decor--laser-fan {
  width: clamp(150px, 23vw, 360px);
  height: clamp(110px, 15vw, 250px);
  background:
    linear-gradient(18deg, transparent 47%, currentColor 48% 49%, transparent 50%),
    linear-gradient(0deg, transparent 49%, currentColor 50% 51%, transparent 52%),
    linear-gradient(-18deg, transparent 47%, currentColor 48% 49%, transparent 50%),
    linear-gradient(-36deg, transparent 47%, currentColor 48% 49%, transparent 50%),
    linear-gradient(36deg, transparent 47%, currentColor 48% 49%, transparent 50%);
  clip-path: polygon(8% 100%, 50% 0, 92% 100%);
}

/* laser-lines — parallel diagonal neon beams */
.neo-mood-theme-preview .theme-decor--laser-lines {
  width: clamp(150px, 22vw, 340px);
  height: clamp(70px, 9vw, 150px);
  background: repeating-linear-gradient(-18deg, transparent 0 16px, currentColor 17px 20px, transparent 21px 38px);
  clip-path: polygon(0 20%, 100% 0, 92% 80%, 4% 100%);
}

/* neon-grid — perspective synthwave grid */
.neo-mood-theme-preview .theme-decor--neon-grid {
  width: clamp(150px, 22vw, 360px);
  height: clamp(90px, 12vw, 200px);
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, currentColor 19px 21px),
    repeating-linear-gradient(90deg, transparent 0 24px, currentColor 25px 27px);
  transform: perspective(300px) rotateX(58deg) rotate(-4deg);
  opacity: 0.095;
}

/* equalizer-bars — music equalizer block */
.neo-mood-theme-preview .theme-decor--equalizer-bars {
  width: clamp(120px, 16vw, 260px);
  height: clamp(82px, 10vw, 170px);
  background:
    linear-gradient(currentColor, currentColor) 5% 100% / 8% 38% no-repeat,
    linear-gradient(currentColor, currentColor) 20% 100% / 8% 72% no-repeat,
    linear-gradient(currentColor, currentColor) 35% 100% / 8% 50% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 100% / 8% 92% no-repeat,
    linear-gradient(currentColor, currentColor) 65% 100% / 8% 62% no-repeat,
    linear-gradient(currentColor, currentColor) 80% 100% / 8% 82% no-repeat,
    linear-gradient(currentColor, currentColor) 95% 100% / 8% 44% no-repeat;
}

/* sound-wave — rounded waveform line */
.neo-mood-theme-preview .theme-decor--sound-wave {
  width: clamp(150px, 22vw, 340px);
  height: clamp(70px, 9vw, 140px);
  background:
    radial-gradient(ellipse at 8% 50%, currentColor 0 3%, transparent 4%),
    radial-gradient(ellipse at 20% 50%, currentColor 0 8%, transparent 9%),
    radial-gradient(ellipse at 36% 50%, currentColor 0 14%, transparent 15%),
    radial-gradient(ellipse at 54% 50%, currentColor 0 20%, transparent 21%),
    radial-gradient(ellipse at 74% 50%, currentColor 0 12%, transparent 13%),
    radial-gradient(ellipse at 92% 50%, currentColor 0 5%, transparent 6%);
}

/* crowd-silhouette — hands and heads crowd strip */
.neo-mood-theme-preview .theme-decor--crowd-silhouette {
  width: clamp(160px, 24vw, 380px);
  height: clamp(70px, 9vw, 150px);
  background:
    radial-gradient(circle at 9% 78%, currentColor 0 7%, transparent 8%),
    radial-gradient(circle at 24% 72%, currentColor 0 8%, transparent 9%),
    radial-gradient(circle at 44% 76%, currentColor 0 7%, transparent 8%),
    radial-gradient(circle at 66% 70%, currentColor 0 9%, transparent 10%),
    radial-gradient(circle at 84% 78%, currentColor 0 7%, transparent 8%),
    linear-gradient(80deg, transparent 0 12%, currentColor 13% 16%, transparent 17%),
    linear-gradient(-75deg, transparent 0 40%, currentColor 41% 44%, transparent 45%),
    linear-gradient(currentColor, currentColor) bottom / 100% 28% no-repeat;
}

/* checkerboard — angled checker pattern */
.neo-mood-theme-preview .theme-decor--checkerboard {
  width: clamp(110px, 15vw, 240px);
  height: clamp(90px, 12vw, 190px);
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25% 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25% 75%, currentColor 75%);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  clip-path: polygon(0 10%, 100% 0, 88% 100%, 8% 92%);
}

/* retro-shapes — Memphis style dots, arcs and bars */
.neo-mood-theme-preview .theme-decor--retro-shapes {
  width: clamp(140px, 20vw, 320px);
  height: clamp(100px, 14vw, 230px);
  background:
    radial-gradient(circle at 20% 24%, currentColor 0 8%, transparent 9%),
    radial-gradient(circle at 78% 72%, currentColor 0 6%, transparent 7%),
    linear-gradient(35deg, transparent 0 38%, currentColor 39% 43%, transparent 44%),
    linear-gradient(-20deg, transparent 0 58%, currentColor 59% 64%, transparent 65%),
    radial-gradient(ellipse at 54% 42%, transparent 0 18%, currentColor 19% 22%, transparent 23%);
}

/* memphis-pattern — playful 90s pattern field */
.neo-mood-theme-preview .theme-decor--memphis-pattern {
  width: clamp(140px, 20vw, 320px);
  height: clamp(100px, 14vw, 230px);
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, currentColor 19px 21px, transparent 22px 36px),
    radial-gradient(circle at 20% 30%, currentColor 0 4%, transparent 5%),
    radial-gradient(circle at 80% 65%, currentColor 0 5%, transparent 6%);
  clip-path: polygon(5% 0, 100% 14%, 88% 100%, 0 82%);
}

/* arcade-pixels — pixelated blocks */
.neo-mood-theme-preview .theme-decor--arcade-pixels {
  width: clamp(120px, 16vw, 260px);
  height: clamp(90px, 12vw, 190px);
  background:
    linear-gradient(currentColor,currentColor) 10% 20%/14% 16% no-repeat,
    linear-gradient(currentColor,currentColor) 24% 36%/14% 16% no-repeat,
    linear-gradient(currentColor,currentColor) 52% 18%/14% 16% no-repeat,
    linear-gradient(currentColor,currentColor) 66% 34%/14% 16% no-repeat,
    linear-gradient(currentColor,currentColor) 38% 64%/14% 16% no-repeat,
    linear-gradient(currentColor,currentColor) 80% 68%/14% 16% no-repeat;
}

/* graffiti-tag — loose spray tag lines */
.neo-mood-theme-preview .theme-decor--graffiti-tag {
  width: clamp(150px, 22vw, 350px);
  height: clamp(80px, 11vw, 170px);
  background:
    radial-gradient(circle at 16% 72%, currentColor 0 3%, transparent 4%),
    radial-gradient(circle at 78% 24%, currentColor 0 4%, transparent 5%),
    linear-gradient(18deg, transparent 0 18%, currentColor 19% 23%, transparent 24%),
    linear-gradient(-12deg, transparent 0 35%, currentColor 36% 40%, transparent 41%),
    linear-gradient(32deg, transparent 0 56%, currentColor 57% 61%, transparent 62%);
  clip-path: polygon(0 42%, 18% 20%, 34% 68%, 52% 12%, 72% 76%, 100% 30%, 86% 100%, 4% 90%);
}

/* paper-tear — torn paper edge strip */
.neo-mood-theme-preview .theme-decor--paper-tear {
  width: clamp(150px, 22vw, 350px);
  height: clamp(34px, 5vw, 72px);
  background: currentColor;
  clip-path: polygon(0 16%, 8% 30%, 17% 18%, 25% 38%, 34% 14%, 44% 34%, 56% 18%, 68% 42%, 78% 20%, 88% 34%, 100% 18%, 100% 82%, 0 100%);
}

/* sticker-badge — tilted badge sticker */
.neo-mood-theme-preview .theme-decor--sticker-badge {
  width: clamp(76px, 10vw, 150px);
  height: clamp(76px, 10vw, 150px);
  background: currentColor;
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 31%, 100% 43%, 80% 55%, 91% 78%, 66% 75%, 50% 100%, 35% 76%, 9% 84%, 20% 59%, 0 43%, 21% 31%, 18% 8%, 39% 18%);
}

/* ticket-stub — admission ticket with notched sides */
.neo-mood-theme-preview .theme-decor--ticket-stub {
  width: clamp(112px, 15vw, 240px);
  height: clamp(58px, 7vw, 118px);
  border: 2px solid currentColor;
  background:
    linear-gradient(90deg, transparent 45%, currentColor 46% 48%, transparent 49%),
    repeating-linear-gradient(0deg, transparent 0 8px, currentColor 9px 10px);
  clip-path: polygon(0 0, 44% 0, 47% 12%, 50% 0, 100% 0, 100% 36%, 92% 50%, 100% 64%, 100% 100%, 50% 100%, 47% 88%, 44% 100%, 0 100%, 0 64%, 8% 50%, 0 36%);
}

/* starburst — comic promo burst */
.neo-mood-theme-preview .theme-decor--starburst {
  width: clamp(90px, 12vw, 190px);
  height: clamp(90px, 12vw, 190px);
  background: currentColor;
  clip-path: polygon(50% 0, 58% 32%, 85% 12%, 70% 43%, 100% 50%, 70% 57%, 85% 88%, 58% 68%, 50% 100%, 42% 68%, 15% 88%, 30% 57%, 0 50%, 30% 43%, 15% 12%, 42% 32%);
}

/* sun-rays — radial summer rays */
.neo-mood-theme-preview .theme-decor--sun-rays {
  width: clamp(130px, 18vw, 300px);
  height: clamp(130px, 18vw, 300px);
  border-radius: 999px;
  background: repeating-conic-gradient(from 0deg, currentColor 0deg 8deg, transparent 8deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 27% 100%);
          mask: radial-gradient(circle, transparent 0 26%, #000 27% 100%);
}

/* tropical-flower — hibiscus-like flower */
.neo-mood-theme-preview .theme-decor--tropical-flower {
  width: clamp(86px, 11vw, 170px);
  height: clamp(86px, 11vw, 170px);
  background:
    radial-gradient(ellipse at 50% 18%, currentColor 0 20%, transparent 21%),
    radial-gradient(ellipse at 82% 48%, currentColor 0 20%, transparent 21%),
    radial-gradient(ellipse at 62% 84%, currentColor 0 20%, transparent 21%),
    radial-gradient(ellipse at 28% 76%, currentColor 0 20%, transparent 21%),
    radial-gradient(ellipse at 17% 40%, currentColor 0 20%, transparent 21%),
    radial-gradient(circle at 50% 52%, currentColor 0 10%, transparent 11%);
}

/* wave-lines — flowing beach/water lines */
.neo-mood-theme-preview .theme-decor--wave-lines {
  width: clamp(150px, 22vw, 360px);
  height: clamp(80px, 11vw, 170px);
  background:
    radial-gradient(ellipse at 25% 45%, transparent 0 36%, currentColor 37% 40%, transparent 41%),
    radial-gradient(ellipse at 52% 55%, transparent 0 36%, currentColor 37% 40%, transparent 41%),
    radial-gradient(ellipse at 78% 45%, transparent 0 36%, currentColor 37% 40%, transparent 41%);
}

/* pool-ripple — concentric water ripples */
.neo-mood-theme-preview .theme-decor--pool-ripple {
  width: clamp(130px, 18vw, 300px);
  height: clamp(90px, 12vw, 200px);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, transparent 0 18%, currentColor 19% 21%, transparent 22% 38%, currentColor 39% 41%, transparent 42% 58%, currentColor 59% 61%, transparent 62%);
}

/* foam-bubbles — foam / soap bubbles */
.neo-mood-theme-preview .theme-decor--foam-bubbles {
  width: clamp(130px, 18vw, 300px);
  height: clamp(90px, 12vw, 200px);
  background:
    radial-gradient(circle at 20% 40%, transparent 0 8%, currentColor 9% 11%, transparent 12%),
    radial-gradient(circle at 38% 64%, transparent 0 11%, currentColor 12% 14%, transparent 15%),
    radial-gradient(circle at 60% 34%, transparent 0 7%, currentColor 8% 10%, transparent 11%),
    radial-gradient(circle at 78% 66%, transparent 0 13%, currentColor 14% 16%, transparent 17%);
}

/* snowflake — crystalline snow star */
.neo-mood-theme-preview .theme-decor--snowflake {
  width: clamp(82px, 11vw, 170px);
  height: clamp(82px, 11vw, 170px);
  background:
    linear-gradient(currentColor,currentColor) center / 8% 100% no-repeat,
    linear-gradient(60deg, transparent 0 45%, currentColor 46% 54%, transparent 55%),
    linear-gradient(-60deg, transparent 0 45%, currentColor 46% 54%, transparent 55%);
}

/* flame — flame silhouette */
.neo-mood-theme-preview .theme-decor--flame {
  width: clamp(70px, 9vw, 150px);
  height: clamp(110px, 14vw, 240px);
  background: currentColor;
  clip-path: polygon(50% 0, 72% 24%, 62% 42%, 86% 62%, 78% 88%, 50% 100%, 22% 88%, 14% 60%, 36% 42%, 30% 20%);
}

/* skull-mark — skull head with eyes */
.neo-mood-theme-preview .theme-decor--skull-mark {
  width: clamp(80px, 10vw, 160px);
  height: clamp(90px, 11vw, 180px);
  border-radius: 48% 48% 38% 38%;
  background:
    radial-gradient(circle at 36% 42%, transparent 0 9%, currentColor 10% 13%, transparent 14%),
    radial-gradient(circle at 64% 42%, transparent 0 9%, currentColor 10% 13%, transparent 14%),
    linear-gradient(currentColor,currentColor) center 82% / 42% 12% no-repeat,
    currentColor;
  -webkit-mask: radial-gradient(circle at 36% 42%, transparent 0 10%, #000 11%), radial-gradient(circle at 64% 42%, transparent 0 10%, #000 11%);
}

/* chain-link — linked chain segments */
.neo-mood-theme-preview .theme-decor--chain-link {
  width: clamp(150px, 20vw, 330px);
  height: clamp(54px, 7vw, 110px);
  background:
    radial-gradient(ellipse at 22% 50%, transparent 0 25%, currentColor 26% 32%, transparent 33%),
    radial-gradient(ellipse at 50% 50%, transparent 0 25%, currentColor 26% 32%, transparent 33%),
    radial-gradient(ellipse at 78% 50%, transparent 0 25%, currentColor 26% 32%, transparent 33%);
}

/* diamond-mark — faceted diamond */
.neo-mood-theme-preview .theme-decor--diamond-mark {
  width: clamp(80px, 10vw, 170px);
  height: clamp(70px, 9vw, 150px);
  border: 2px solid currentColor;
  background:
    linear-gradient(55deg, transparent 48%, currentColor 49% 51%, transparent 52%),
    linear-gradient(-55deg, transparent 48%, currentColor 49% 51%, transparent 52%),
    linear-gradient(90deg, transparent 48%, currentColor 49% 51%, transparent 52%);
  clip-path: polygon(18% 0, 82% 0, 100% 32%, 50% 100%, 0 32%);
}

/* champagne-bubbles — premium rising bubbles */
.neo-mood-theme-preview .theme-decor--champagne-bubbles {
  width: clamp(90px, 12vw, 200px);
  height: clamp(140px, 18vw, 320px);
  background:
    radial-gradient(circle at 24% 84%, transparent 0 5%, currentColor 6% 8%, transparent 9%),
    radial-gradient(circle at 48% 66%, transparent 0 4%, currentColor 5% 7%, transparent 8%),
    radial-gradient(circle at 70% 48%, transparent 0 6%, currentColor 7% 9%, transparent 10%),
    radial-gradient(circle at 38% 30%, transparent 0 3%, currentColor 4% 6%, transparent 7%),
    radial-gradient(circle at 62% 14%, transparent 0 5%, currentColor 6% 8%, transparent 9%);
}

/* curtain-drape — theater/club curtain folds */
.neo-mood-theme-preview .theme-decor--curtain-drape {
  width: clamp(160px, 24vw, 390px);
  height: clamp(110px, 16vw, 250px);
  background:
    repeating-linear-gradient(90deg, currentColor 0 8px, transparent 9px 24px),
    radial-gradient(ellipse at 50% 0, currentColor 0 22%, transparent 70%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 76% 72%, 60% 100%, 42% 70%, 25% 100%, 8% 74%);
}

/* lips-mark — pop/glam lip silhouette */
.neo-mood-theme-preview .theme-decor--lips-mark {
  width: clamp(100px, 14vw, 220px);
  height: clamp(52px, 7vw, 110px);
  background:
    radial-gradient(ellipse at 34% 40%, currentColor 0 28%, transparent 29%),
    radial-gradient(ellipse at 66% 40%, currentColor 0 28%, transparent 29%),
    radial-gradient(ellipse at 50% 68%, currentColor 0 36%, transparent 37%);
  clip-path: polygon(0 48%, 18% 22%, 50% 34%, 82% 22%, 100% 48%, 78% 82%, 50% 92%, 22% 82%);
}

/* paint-splatter — energetic splash mark */
.neo-mood-theme-preview .theme-decor--paint-splatter {
  width: clamp(120px, 17vw, 280px);
  height: clamp(90px, 13vw, 220px);
  background:
    radial-gradient(circle at 42% 50%, currentColor 0 22%, transparent 23%),
    radial-gradient(circle at 22% 34%, currentColor 0 9%, transparent 10%),
    radial-gradient(circle at 70% 28%, currentColor 0 7%, transparent 8%),
    radial-gradient(circle at 78% 72%, currentColor 0 10%, transparent 11%),
    radial-gradient(circle at 18% 76%, currentColor 0 5%, transparent 6%);
}

/* diagonal-speed-lines — fast angled motion streaks */
.neo-mood-theme-preview .theme-decor--diagonal-speed-lines {
  width: clamp(160px, 24vw, 380px);
  height: clamp(70px, 9vw, 150px);
  background: repeating-linear-gradient(-12deg, transparent 0 12px, currentColor 13px 16px, transparent 17px 32px);
  clip-path: polygon(0 18%, 100% 0, 82% 100%, 0 78%);
}


/* =========================================================
   THEME ICON LIBRARY
   Icons are CSS masks. Render with:
   <span class="theme-icon theme-icon--heart"></span>
   Color is inherited from currentColor / --theme-accent-ui.
   ========================================================= */

.neo-mood-theme-preview .theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}

.neo-mood-theme-preview .theme-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--theme-icon-mask) center / contain no-repeat;
  mask: var(--theme-icon-mask) center / contain no-repeat;
}

.neo-mood-theme-preview .theme-icon svg {
  display: none;
}

.neo-mood-theme-preview .theme-icon--age-18 {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M8%209v6M7%2010l1-1%201%201M12%209h3a2%202%200%200%201%200%204h-3v-4zM12%2013h3a2%202%200%200%201%200%204h-3v-4z%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--ball {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c3%203%203%2015%200%2018M12%203c-3%203-3%2015%200%2018%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--beer {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h9v12a2%202%200%200%201-2%202H9a2%202%200%200%201-2-2V7z%22%2F%3E%3Cpath%20d%3D%22M16%2010h2a3%203%200%200%201%200%206h-2M7%207c1-3%203-3%205-1%202-2%204-1%204%201%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--bolt {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%204%2014h7l-1%208%2010-13h-7V2z%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--bus {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2010h14M8%2018v2M16%2018v2M8%2014h.1M16%2014h.1%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--calendar {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4M16%203v4M4%2010h16M8%2014h3M13%2014h3M8%2017h3%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--camera {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h4l2-3h4l2%203h4v11H4V8z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--cassette {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2016h8M10%2012h4%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--champagne {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8l-1%207a3%203%200%200%201-6%200L8%203z%22%2F%3E%3Cpath%20d%3D%22M12%2013v7M9%2021h6M17%204l2-2M18%208h3%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--cocktail {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h14l-7%208-7-8z%22%2F%3E%3Cpath%20d%3D%22M12%2012v8M8%2020h8M17%204l2-2%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--confetti {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019l4-12%208%208-12%204z%22%2F%3E%3Cpath%20d%3D%22M14%204l1%202M19%206l-2%201M18%2012l3%201M10%203l1%202%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--crown {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208l5%204%204-7%204%207%205-4-2%2011H5L3%208z%22%2F%3E%3Cpath%20d%3D%22M5%2019h14%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--disc {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M12%205v2M12%2017v2M5%2012h2M17%2012h2%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--disco-ball {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M12%204v16M4%2012h16M6.5%207.5h11M6.5%2016.5h11M9%204.5c-2%204-2%2011%200%2015M15%204.5c2%204%202%2011%200%2015%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--dj {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2017h16M6%2017V8h12v9%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2213%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2213%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%203v3M15%203v3M8%203h8%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--drink {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h14l-2%207a5%205%200%200%201-10%200L5%203z%22%2F%3E%3Cpath%20d%3D%22M12%2015v6M8%2021h8%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--equalizer {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2020V10M10%2020V4M15%2020v-7M20%2020V7%22%2F%3E%3Cpath%20d%3D%22M3%2020h19%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--fire {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022c4%200%207-3%207-7%200-3-2-5-5-8%200%203-2%204-3%205%200-3-2-5-4-7%200%205-2%207-2%2010%200%204%203%207%207%207z%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--flamingo {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%2020v-7a5%205%200%201%201%205-5%22%2F%3E%3Cpath%20d%3D%22M18%208c0%203-3%204-5%205M13%2020H8M13%2013c-4%200-6%202-6%205%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--flower {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%204c2%202%202%204%200%206-2-2-2-4%200-6zM12%2020c-2-2-2-4%200-6%202%202%202%204%200%206zM4%2012c2-2%204-2%206%200-2%202-4%202-6%200zM20%2012c-2%202-4%202-6%200%202-2%204-2%206%200z%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--gamepad {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%209h10a4%204%200%200%201%204%204v3a3%203%200%200%201-5%202l-2-2h-4l-2%202a3%203%200%200%201-5-2v-3a4%204%200%200%201%204-4z%22%2F%3E%3Cpath%20d%3D%22M8%2013h4M10%2011v4M16%2013h.1M18%2015h.1%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--group {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2020a7%207%200%200%201%2014%200%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--guitar {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204l5%205-3%203-5-5%203-3z%22%2F%3E%3Cpath%20d%3D%22M12%207%206%2013a4%204%200%201%200%205%205l6-6%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2216%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--headphones {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2013a8%208%200%200%201%2016%200%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--heart {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6c-1.8-1.7-4.6-1.5-6.2.3L12%207.8%209.4%204.9C7.8%203.1%205%202.9%203.2%204.6%201.1%206.6%201%2010%203%2012.1l9%208.5%209-8.5c2-2.1%201.9-5.5-.2-7.5z%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--karaoke {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014%204%2019l1%201%205-5%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%229%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M17%206l2-2M12%208h4M12%2011h3%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--laser {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020%2021%204M5%205l14%2014M4%2012h16M12%204v16%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--leaf {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%204c-7%200-12%204-13%2010-.5%203%201.5%205%204.5%204.5C17.5%2017.5%2021%2011%2020%204z%22%2F%3E%3Cpath%20d%3D%22M7%2017c4-5%208-7%2013-13%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--location {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6%207-12a7%207%200%200%200-14%200c0%206%207%2012%207%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--mask {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208c5-3%2011-3%2016%200v4c0%204-3%207-8%207s-8-3-8-7V8z%22%2F%3E%3Cpath%20d%3D%22M8%2012h3M13%2012h3M9%2016c2%201%204%201%206%200%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--microphone {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019v3M8%2021h8%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2010a7%207%200%200%200%2014%200%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--music {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5l11-2v13%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--palm {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022c1-6%201-11%200-16%22%2F%3E%3Cpath%20d%3D%22M12%206C8%202%204%203%203%207c4-1%207%200%209%203%22%2F%3E%3Cpath%20d%3D%22M12%206c4-4%208-3%209%201-4-1-7%200-9%203%22%2F%3E%3Cpath%20d%3D%22M12%207c-3%200-5%202-6%205%203-1%205-1%207%201%22%2F%3E%3Cpath%20d%3D%22M12%207c3%200%205%202%206%205-3-1-5-1-7%201%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--shield {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3%208-8%209-5-1-8-4-8-9V6l8-3z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-5%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--skull {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a7%207%200%200%200-7%207v4l3%203v3h8v-3l3-3v-4a7%207%200%200%200-7-7z%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2211%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M12%2014v2M9%2020v-2M15%2020v-2%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--snowflake {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v20M4%206l16%2012M20%206%204%2018M8%204l4%204%204-4M8%2020l4-4%204%204%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--spark {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l1.8%206.2L20%2010l-6.2%201.8L12%2018l-1.8-6.2L4%2010l6.2-1.8L12%202z%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--speaker {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%2212%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--star {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.7%205.5%206.1.9-4.4%204.3%201%206.1L12%2016.9l-5.4%202.9%201-6.1-4.4-4.3%206.1-.9L12%203z%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--sun {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M4.9%204.9%207%207M17%2017l2.1%202.1M2%2012h3M19%2012h3M4.9%2019.1%207%2017M17%207l2.1-2.1%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--ticket {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209a2%202%200%200%201%200-4h16v4a2%202%200%200%200%200%204v4H4v-4a2%202%200%200%201%200-4z%22%2F%3E%3Cpath%20d%3D%22M9%208v8%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--trophy {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%204h8v5a4%204%200%200%201-8%200V4z%22%2F%3E%3Cpath%20d%3D%22M6%206H4a3%203%200%200%200%203%205M18%206h2a3%203%200%200%201-3%205M12%2013v5M8%2021h8%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--vinyl {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%207a7%207%200%200%201%2010%2010M17%207A7%207%200%200%200%207%2017%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--vip {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16l-2%2010H6L4%207z%22%2F%3E%3Cpath%20d%3D%22M8%207l2-4h4l2%204%22%2F%3E%3C%2Fsvg%3E");
}

.neo-mood-theme-preview .theme-icon--wave {
  --theme-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2015c3-5%206-5%209%200s6%205%209%200%22%2F%3E%3Cpath%20d%3D%22M3%2019c3-3%206-3%209%200s6%203%209%200%22%2F%3E%3C%2Fsvg%3E");
}