/* Minification failed. Returning unminified contents.
(252,28): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn-hover'
(269,29): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn-hover'
(271,28): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn-hover'
(280,48): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn'
(280,75): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn-hover'
(288,47): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn'
(288,74): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn-hover'
(734,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(735,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(736,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(737,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(738,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(739,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(740,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(751,28): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn'
(752,29): run-time error CSS1039: Token not allowed after unary operator: '-clevr-blue-btn'
(753,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text-color'
(757,33): run-time error CSS1030: Expected identifier, found '.'
(757,34): run-time error CSS1030: Expected identifier, found 'inner-txt'
(757,43): run-time error CSS1031: Expected selector, found ')'
(757,43): run-time error CSS1025: Expected comma or open brace, found ')'
(770,29): run-time error CSS1039: Token not allowed after unary operator: '-notification-sent-btn'
(771,28): run-time error CSS1039: Token not allowed after unary operator: '-notification-sent-btn'
 */
h1 {
    font-size: 22px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5, h6 {
    font-size: 14px;
}

[v-cloak] {
    display: none;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 1.0s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

#canvas_element
{
  width:100%;
  height:100%;
  z-index:-1;
}

img.menu-icon:focus {
    outline: 1px solid navy;
}

.offscreen {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}


button.send-email-button {
    background-color: #ECEEEE;
    border: solid 1px #CCC;
    padding: 0 20px;
    line-height: 25px;
    vertical-align: middle;
    text-align: center;
    font-weight:bold;
    cursor: pointer;
}

    button.send-email-button:hover {
        background-color: #F0F0F6;
    }

div.plaintext
{
  border:none;
	margin:1px;
}

div.datatext
{
  border:none;
	margin:1px;
}

div.delay_splash
{
  visibility: hidden;
  z-index:999999999;
  position:fixed;
  top:45%;
  width:100%;
}

div.screen
{
  visibility: hidden;
  background-color:White;
  z-index:9999;
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  opacity:0.75;
}

.splash-screen-clevr {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: #FFF;
    opacity: 0.75;
}

.splash-spinner-box-clevr {
    visibility: hidden;
    z-index: 999999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-clevr {
    border: 0.25em solid #0076bb; /* Blue */
    border-right-color: transparent;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hover-background-gainsboro:hover {
    background-color: gainsboro;
}

.pointerCursor {
    cursor: pointer;
}

.ui-tabs-nav .ui-tabs-active:focus-visible {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    background: #e8f0fe !important; /* Light blue background */
    border: 1px solid #007bff; /* Solid blue border */
    border-top-left-radius: 5px; /* Top left radius */
    border-top-right-radius: 5px; /* Top right radius */
    border-bottom-left-radius: 0; /* No radius on bottom left */
    border-bottom-right-radius: 0; /* No radius on bottom right */
}

/* nesting jquery tabs */
.ui-widget .ui-widget { font-size: 1em; }

@keyframes spinit {

    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.4);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.spinit {
    animation-name: spinit;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn ease 1s;
}

div.bannerAlerts {
    position: fixed;
    top: 77px;
    padding: 14px;
    width: 100%;
    color: #e1e4e6;
    background-color: #dc3545;
    z-index: 99;
    text-align: center;
    font-weight: bold;
}

div.bulkDataGridCell {
    padding: 6px;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
}

div.bulkDataGridCellTop {
    border-top: 1px solid gray;
    position: sticky;
    top: 0px;
    font-weight: bold;
    background-color: gainsboro;
    margin-bottom: 4px;
}

div.bulkDataGridCellRight {
    border-right: 1px solid gray;
    margin-right: 4px;
}

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

div.bulkDataGridCellFirstAlternate {
    background-color: aliceblue;
}

.p-3 {
    padding: 3px;
}


/* Custom Type Button */
.clevr-custom-type-btn:hover,
.clevr-custom-type-btn:focus,
.clevr-custom-type-btn:active {
    background-color: var(--clevr-blue-btn-hover);
}

/* Button - Notification */
/* Sent */ /* Re-add when notifiation custom type added
.clevr-custom-type-btn.notification-btn-sent:hover,
.clevr-custom-type-btn.notification-btn-sent:focus,
.clevr-custom-type-btn.notification-btn-sent:active {
    border: thin solid var(--notification-sent-btn-hover);
    background-color: var(--notification-sent-btn-hover);
}*/

/* Button - Tab Navigation */
.prev-tab-btn:focus,
.prev-tab-btn:active,
.next-tab-btn:focus,
.next-tab-btn:active {
    border: thin solid var(--clevr-blue-btn-hover);
    background: none;
    background-color: var(--clevr-blue-btn-hover);
}

.prev-tab-btn,
.next-tab-btn {
    transition: background-position .5s ease-out;
}

.prev-tab-btn {
    background: linear-gradient(to right, var(--clevr-blue-btn) 50%, var(--clevr-blue-btn-hover) 50%) left;
    background-size: 200%;
}
.prev-tab-btn:hover {
    background-position: 100% 0;
}

.next-tab-btn {
    background: linear-gradient(to left, var(--clevr-blue-btn) 50%, var(--clevr-blue-btn-hover) 50%) right;
    background-size: 200%;
}
.next-tab-btn:hover {
    background-position: 0 -100%;
}
img.rightButton
{
	margin-top:-0.2em;
	margin-right:-0.11em;
}

img.pagingButton
{
  margin-bottom:-0.6em;
}

img.pagingButtonDisabled
{
  margin-bottom:-0.6em;
	opacity: .45;
	filter: alpha(opacity=45);
}

.hoverbutton
{
  display:inline-block;
  width:100%;
  height:100%;
  border: 1px solid #D0D0D0;
  margin: 0px 1px;
  cursor: pointer; 
  *cursor:hand;
  *zoom:1;
  background-color: #fff;
  padding:2px 4px 5px 4px;
  font-size:8pt;
  	opacity: 0.9;
	filter: alpha(opacity=90);
	
  	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
}

.hoverbutton:hover
{
  background-color: #F0F0F0;
    opacity: 0.7;
	filter: alpha(opacity=70);
		-moz-border-radius-bottomright: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
}


@-moz-document url-prefix() {
.hoverbutton
{
  border: 1px solid #D0D0D0;
  margin: 0px 1px;
  cursor: pointer; 
  opacity: 0.9;


  background-color: #fff;
  padding:2px 4px 5px 4px;
  font-size:10px;
  
  display:inline-block;
  	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-topleft: 8px;
}

.hoverbutton:hover
{
  background-color: #F0F0F0;
    	opacity: 90;
    -moz-border-radius-bottomright: 8px;
	-moz-border-radius-topleft: 8px;

}

}



/* tables */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
	border-spacing:1px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #ECEEEE;

	font-size: 8pt;
	padding: 4px 4px 4px 20px;
}
table.tablesorter thead tr .header {
	background-image: url(../images/bg.gif);
	background-repeat: no-repeat;
	background-position: center left;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}

table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(../images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}


body{	background:#fff;}

form.formular {
	font-family: tahoma, verdana, "sans-serif";
	font-size: 12px;
	padding: 20px;
	border: 1px solid #A5A8B8;

	width:300px;
	margin-left:300px;
}

.formular fieldset {
	margin-top: 20px;
	padding : 15px;
	border: 1px solid #B5B8C8;
	
}

.formular legend {
	font-size: 12px;
	color: #15428B;
	font-weight: 900;
}

.formular fieldset label {
	float: none;
	text-align: inherit;
	width: auto;
}

.formular label span {
	color: #000;
}

.formular input, .formular select, .formular textarea {
	display : block;
	margin-bottom: 5px;
}

.formular .text-input {
	width: 250px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
	
}
.formular textarea {
	width: 250px;
	height:70px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
	
}
.formular .infos {
	background: #FFF;
	color: #333;
	font-size: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.formular span.checkbox, .formular .checkbox {
	display: inline;
}

.formular .submit {
	background: url('/img/form/button-bg.png') repeat-x;
	border: 1px solid #AAA;
	padding: 4px;
	margin-top: 20px;
	float: right;
	text-decoration: none;
	cursor:pointer;
}

.formular hr {
	clear: both;
	visibility: hidden;
}

.formular .fc-error {
	width: 350px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 12px;
	margin-bottom: 15px;
	background: #FFEAEA;
}


select.requiredFields {
    background-image: url( '../images/required.png' ) !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    /*-moz-appearance: none;
	-webkit-appearance: none;*/
}

textarea.requiredFields {
	background-image: url( '../images/required.png' ) !important;
	background-repeat:  no-repeat !important;
	background-position:  right top !important;
}

span.requiredFieldLabels{
	background-image: url( '../images/requiredLabel.png' ) !important;
	background-repeat: no-repeat !important;
	background-position: right top !important;
	padding-right: 15px;
}

.requiredFields{
	background-image: url( '../images/required.png' ) !important;
	background-repeat: no-repeat !important;
	background-position: right top !important;
	padding-right: 13px;
}

#progressBar {
    width: 240px;
    height: 16px;
    border: 1px solid #AAA;
    background-color: #fff;
    position: relative;
}
 
#progressBar div {
        height: 100%;
        color: #333;
        text-align: right;
        line-height: 16px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: #DDD;
}

	
	.inputContainer{position:relative; float:left;}
	.formError {
			position:absolute;
			top:300px; left:300px;
			display:block;
			z-index:5000;
			cursor:pointer;
		}
			#debugMode{
				background:#000;
				position:fixed;
				width:100%; height:200px;
				top:0; left:0;
				overflow:scroll;
				opacity:0.8;
				display:block;
				padding:10px;
				color:#fff;
				font-size:14px;
				z-index:100000;
			}
		
			.ajaxSubmit{ padding:20px; background:#55ea55;border:1px solid #999;display:none}
			.formError .formErrorContent {
				width:100%; 
				background:#ee0101;
				color:#fff;
				width:150px;
				font-family:tahoma;
				font-size:11px;
				border:2px solid #ddd;
				box-shadow: 0px 0px 6px #000;
				-moz-box-shadow: 0px 0px 6px #000;
				-webkit-box-shadow: 0px 0px 6px #000;
				padding:4px 10px 4px 10px;
				border-radius: 6px;
				-moz-border-radius: 6px;
				-webkit-border-radius: 6px;
			}
			.greenPopup .formErrorContent {background:#33be40;}
			
			.blackPopup .formErrorContent {background:#393939;color:#FFF;}
			
			.formError .formErrorArrow{
				width:15px;
				margin:-2px 0 0 13px;
				z-index:5001;
			}
			.formError .formErrorArrowBottom{top:0;margin:-6px;}
			
				.formError .formErrorArrow div{
					border-left:2px solid #ddd;
					border-right:2px solid #ddd;
					box-shadow: 0px 2px 3px #444;
					-moz-box-shadow: 0px 2px 3px #444;
					-webkit-box-shadow: 0px 2px 3px #444;
					font-size:0px; height:1px; background:#ee0101;margin:0 auto;line-height:0px; font-size:0px; display:block;
				}
					.formError .formErrorArrowBottom div{
						box-shadow: none;
						-moz-box-shadow: none;
						-webkit-box-shadow: none;
					}
					
				.greenPopup .formErrorArrow div{background:#33be40;}
				.blackPopup .formErrorArrow div{background:#393939;color:#FFF;}

				.formError .formErrorArrow .line10{width:15px;border:none;} 
				.formError .formErrorArrow .line9{width:13px;border:none;} 
				.formError .formErrorArrow .line8{width:11px;} 
				.formError .formErrorArrow .line7{width:9px;} 
				.formError .formErrorArrow .line6{width:7px;} 
				.formError .formErrorArrow .line5{width:5px;} 
				.formError .formErrorArrow .line4{width:3px;} 
				.formError .formErrorArrow .line3{width:1px;
					border-left:2px solid #ddd;
					border-right:2px solid #ddd;
					border-bottom:0px solid #ddd;} 
				.formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;}
				.formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;}  
/** Simple modifications needed for DropDownCheckList to take advantage of ThemeRoller settings */
.ui-dropdownchecklist .ui-widget-content
, .ui-dropdownchecklist .ui-widget-header {
	border:solid 1px #ccc;
	padding-bottom:0px;
	margin-bottom:0px;
	border-bottom:none !important;
}
.ui-dropdownchecklist-indent {
	padding-left: 7px;
}
/* Font size of 0 on the -selector and an explicit medium on -text required to eliminate 
   descender problems within the containers and still have a valid size for the text */
.ui-dropdownchecklist-selector-wrapper
, .ui-widget.ui-dropdownchecklist-selector-wrapper {
	vertical-align: middle;
	font-size: 0px;
}
.ui-dropdownchecklist-selector {
	padding: 1px 2px 2px 2px;
	font-size: 0px;
}
.ui-dropdownchecklist-text {
	font-size: 12px;
}
.ui-dropdownchecklist-item
, .ui-dropdownchecklist-item input {
    vertical-align: middle;
}
.ui-dropdownchecklist-group {
	padding: 1px 2px 2px 2px;
}


.ui-dropdownchecklist-item.ui-state-default
{
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom:solid 1px #ccc !important;
	background: none !important;
	color: #000 !important;
	background-color: #FFF !important;
	
} 


.ui-dropdownchecklist-item.ui-state-default:hover
{
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom:solid 1px #ccc !important;
	background: none !important;
	color: #000 !important;	
	background-color: #FFF !important;
} 

.ui-dropdownchecklist.ui-dropdownchecklist-dropcontainer-wrapper.ui-widget
{
	border:none !important;
}


.ui-dropdownchecklist.ui-dropdownchecklist-selector-wrapper.ui-widget
{
	background: none !important;
	color: #000 !important;	
	background-color: #FFF !important;
	height:21px !important;
	border:none !important;
}

.ui-dropdownchecklist-selector.ui-state-default 
{
	background: none;
	color: #000 !important;	
	background-color: #FFF !important;
	height:14px !important;
	border:solid 1px #CCC;
}

ui-autocomplete
{
	background-color:#fc0 !important;
}


:root {
    --clevr-blue-btn: #0076BB;
    --clevr-blue-btn-faded: #5DA8D4;
    --clevr-blue-btn-hover: #165173;
    --notification-sent-btn: #71b05a;
    --notification-sent-btn-faded: #A9C0A1;
    --notification-sent-btn-hover: #5b8a4a;
    --btn-text-color: #fff;
}

/* Custom Type Containers */
.clevr-custom-type-container {
    border: thin solid silver;
}

/* Custom Type Buttons */
.clevr-custom-type-btn {
    cursor: pointer;
    background-color: var(--clevr-blue-btn);
    border: thin solid var(--clevr-blue-btn);
    color: var(--btn-text-color);
    font-weight: bold;
}

.clevr-custom-type-btn:not(:has(.inner-txt)) {
    display: flex;
    justify-content: center;
    align-items: center;
}

.clevr-custom-type-btn > .inner-txt {
    text-align: center;
}

/* Button - Notification */
/* Sent */
.clevr-custom-type-btn.notification-btn-sent {
    border: thin solid var(--notification-sent-btn);
    background-color: var(--notification-sent-btn);
}

/* Button - Tab Navigation */
.clevr-custom-type-btn:not(.nav-tab-btn) {
    border-radius: 2px;
}

.prev-tab-btn,
.next-tab-btn {
    min-width: 150px;
    min-height: 25px;
}

@supports (clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%)) {
    .prev-tab-btn {
        clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
    }

    .next-tab-btn {
        clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    }
}