.program-note{
	font-family:Arial;
	color: #666666;
	background-color: #ffffff;
	text-align:left;
	font-size:12px; }

/* TEAL PALETTE */

.teal-0 {color:#ffffff; background-color:#19599a;}
.teal-0-on {color:#ffffff; background-color:#19599a; opacity:.5}

.teal-1 {color: #ffffff; background-color: #19719a;}
.teal-1:hover {background-color: #479bc2;}

.teal-1-on {color: #ffffff; background-color: #339ccc;}
.teal-1-on:hover {background-color: #339ccc;}

.teal-2 {color: #ffffff; background-color: #168aad;}
.teal-2-on {color: #ffffff; background-color: #168aad; opacity:.5}

.teal-3 {color:#ffffff; background-color: #34a0a4;}
.teal-3:hover {background-color: #7ecbce;}

.teal-3-on {color: #ffffff; background-color: #7ecbce;}
.teal-3-on:hover {background-color: #34a0a4;}

.teal-4 {color: #ffffff; background-color: #52b69a;}
.teal-4-on {color: #ffffff; background-color: #52b69a; opacity:.5}

.teal-5 {color: #ffffff; background-color: #76c893;}
.teal-5-on {color: #ffffff; background-color: #76c893; opacity:.5}

.teal-6 {color: #ffffff; background-color: #99d98c;}
.teal-6-on {color: #ffffff; background-color: #99d98c; opacity:.5}

/* STICKY */

.sticky-bottom {
	position: sticky;
	position: -webkit-sticky;
	bottom: 0;
	}

.sticky-top {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	}

/* DESIGN.ASP */

.design-submit {
	margin:2px;
	padding:10px;
	color:#ffffff;
	background-color:#32b832;
	border:2px red solid;
	font-size:24px;
	border-radius: 7px;
	}

.design-submit:hover {background-color: #5fd35f;}

.object-button {
	width:44px;
	padding:10px;
	font-size:20px;
	background-color:#19719a;
	color:#ffffff;
	border-radius:7px;
	border:2px #ffffff solid;
	cursor: pointer; }

.object-button:hover {background-color: #479bc2;}

.design-button {
	width:44px;
	padding:10px;
	font-size:20px;
	background-color:#34a0a4;
	color:#ffffff;
	border-radius:7px;
	border:2px #ffffff solid;
	cursor: pointer; }

.design-button:hover {background-color: #7ecbce;}

.design-button-on {
	width:44px;
	margin:2px;
	padding:10px;
	font-size:20px;
	background-color:#a3dadc;
	color:#ffffff;
	border-radius:6px;
	border:2px #ffffff solid;
	cursor: default; }

.modal-button {
	width:40px;
	margin:1px;
	padding:10px;
	background-color:#34a0a4;
	color:#ffffff;
	font-size:16px;
	border-radius:50%;
	border:2px #ffffff solid;
	cursor: default;
	transition: transform .1s;
	}

.modal-button:hover {
	-ms-transform: scale(1.07);
	-webkit-transform: scale(1.07);
	transform: scale(1.07);
	}

.modal-button-on {
	width:40px;
	padding:10px;
	background-color:#a3dadc;
	color:#ffffff;
	font-size:16px;
	border-radius:50%;
	border:2px #ffffff solid;
	cursor: default;
	transition: transform .1s;
	}

.x-modal-button {
	width:44px;
	margin:4px 0 4px 4px;
	padding:10px;
	background-color:#34a0a4;
	color:#ffffff;
	font-size:20px;
	border-radius:50%;
	border:2px #ffffff solid;
	cursor: default;
	transition: transform .1s;
	}

.x-modal-button:hover {
	-ms-transform: scale(1.07); /* IE 9 */
	-webkit-transform: scale(1.07); /* Safari 3-8 */
	transform: scale(1.07);
	}

.x-modal-button-off {
	width:44px;
	margin:4px 0 4px 4px;
	padding:10px;
	background-color:#c5ebed;
	color:#ffffff;
	font-size:20px;
	border-radius:50%;
	border:2px #ffffff solid;
	cursor: default;
	}

.x-path-button {
	width:44px;
	margin:4px 0 4px 4px;
	padding:10px;
	background-color:#34a0a4;
	color:#ffffff;
	font-size:20px;
	border-radius:50%;
	border:2px #ffffff solid;
	cursor: default;
	}

.x-path-button:hover {
	background-color:#7ecbce;
	}

.x-path-button-on {
	width:44px;
	margin:4px 0 4px 4px;
	padding:10px;
	background-color:#a3dadc;
	color:#ffffff;
	font-size:20px;
	border-radius:50%;
	border:2px #ffffff solid;
	cursor: default; }

.design-undo-button {
	padding: 11px;
	background-color:#32b832;
	color:#ffffff;
	font-size:22px;
	border:none;
	cursor: pointer;
	transition: transform .1s;
	}

.design-undo-button:hover {
	background-color: #5fd35f;
	}

/* DESIGN FORM */

.design-form-button-text {
	padding: 0 0 0 10px;
	vertical-align:3px;
	font: Arial;
	font-size: 18px;
	color: #ffffff;
	cursor: default;
	}

.design-form-text {
	font: Arial;
	font-size: 16px;
	color: #595959;
	cursor: default;
	}

.design-submit-button {
	padding: 10px;
	font: Arial;
	font-size: 24px;
	color: #ffffff;
	background-color: #32b832;
	border-radius: 7px;
	border: none;
	cursor: pointer;
	}

.design-submit-button:hover {
	background-color: #5fd35f;
	}

.design-form-input {
	font: Arial;
	font-size:16px;
	padding: 8px;
	color: #595959;
	border: 2px solid #cccccc;
	border-radius:6px;
	outline: none;}

.design-form-input:hover {
	border: 2px solid #168aad;
	}

.design-form-input:focus {
	color: #666666;
	background-color: #f6fcfe;
	border: 2px solid #168aad;
	outline: none;}

/* EDIT FORM */

.edit-form input[type=button] {
	font: Arial;
	font-size:15px;
	padding: 10px;
	color:#ffffff ;
	background-color:#168aad ;
	border-radius:6px;
	border: none;
	}

.edit-form input[type=submit] {
	font: Arial;
	font-size:15px;
	padding: 10px;
	color:#ffffff ;
	background-color:#168aad ;
	border-radius:6px;
	border: none;
	}

.edit-form input[type=submit]:hover {
	font: Arial;
	font-size:15px;
	opacity: .7;
	}

.edit-form input[type=text] {
	font-family: Courier New, Arial;
	font-size:16px;
	font-weight:bold;
	padding: 8px;
	color: gray;
	border: 2px solid #dddddd;
	border-radius:6px;
	}

.edit-form input[type=text]:hover {
	color: #000000;
	background-color: #f7f7f7;
	outline: none;}

.edit-form input[type=text]:focus {
	color: #000000;
	background-color: #ffffff;
	border: 2px solid #168aad;
	outline: none;}

/* DESIGN BUTTONS */

.color-square {
	margin: 2px;
	cursor: pointer;
	border: none;
	transition: transform .1s;
	}

.color-square:hover {
	color: #ffffff;
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1);
	}

.modal-header-icon {

 	height:20px; width:20px; margin:2px; padding:12px; font-size:20px; text-align:center; border-radius:50%; border:none;
	cursor: pointer; }

.format-button:hover {
	-ms-transform: scale(1.07); /* IE 9 */
	-webkit-transform: scale(1.07); /* Safari 3-8 */
	transform: scale(1.07);
	}

.palette-icon {
	color: #666666;
	background-color: #f7f7f7;
	padding: 10px;
	font-size:24px;
	border: none;
	cursor: pointer; }

.palette-icon:hover {background-color: #e6e6e6;}

.palette-icon-on {
	color: #cccccc;
	background-color: #f7f7f7;
	padding: 10px;
	font-size:24px;
	border: none;
	cursor: default; }

.palette-icon-on:hover {background-color: #e6e6e6;}

.mode-button {
	width:40px;
	margin:2px;
	padding:10px;
	font-size:20px;
	border-radius:6px;
	border:none;
	cursor: pointer; }

.grid-button {
	width:40px;
	margin:5px 2px;
	padding:10px;
	font-size:20px;
	border-radius:50%;
	border:none;
	cursor: default; }

.format-button {
	width:40px;
	margin:5px 2px;
	padding:10px;
	font-size:20px;
	border-radius:50%;
	border:none;
	cursor: pointer; }

.format-button:hover {
	-ms-transform: scale(1.07); /* IE 9 */
	-webkit-transform: scale(1.07); /* Safari 3-8 */
	transform: scale(1.07);
	}

.modal-bar-dim {
	width:100%;
	padding: 10px;
	text-align:left;
	background-color: #ffffff;
	color:#c4eced;
	font-size:26px;
	border: none;
	cursor: default; }

.modal-bar-dim:hover {background-color: #f2f2f2;}

.modal-bar {
	width:100%;
	padding: 10px;
	text-align:left;
	background-color: #ffffff;
	color:#37aaae;
	font-size:24px;
	border: none;
	cursor: pointer; }

.modal-bar:hover {background-color: #f2f2f2;}

.modal-bar-text {color:#666666; font-size:18px; vertical-align:3px;}
.modal-bar-text-dim {color:#cccccc; font-size:18px; vertical-align:3px;}

/* PLACEHHOLDER COLOR */

:-ms-input-placeholder {color: #666666;}  /* Internet Explorer 10-11 */
::-ms-input-placeholder {color: #666666;} /* Microsoft Edge */
::placeholder {color: #666666;} /* Firefox */

/* INFINIUM ICON FONTS */

@font-face {
  font-family: 'infinium';
  src:  url('../fonts/infinium.eot?hlp08z');
  src:  url('../fonts/infinium.eot?hlp08z#iefix') format('embedded-opentype'),
    url('../fonts/infinium.ttf?hlp08z') format('truetype'),
    url('../fonts/infinium.woff?hlp08z') format('woff'),
    url('../fonts/infinium.svg?hlp08z#infinium') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'infinium' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-infinity-regular:before {
  content: "\e900";
}
.icon-dragonfly-regular:before {
  content: "\e901";
}
.icon-dollar-infinity:before {
  content: "\e902";
}
.icon-dollar-infinity-v2:before {
  content: "\e903";
}
.icon-dollar-infinity-prong:before {
  content: "\e904";
}
.icon-dragonfly-v3:before {
  content: "\e905";
}
.icon-dragonfly-regular-v2:before {
  content: "\e906";
}
.icon-dollar-infinity-prong-v2:before {
  content: "\e907";
}
.icon-dollar-infinity-v3:before {
  content: "\e908";
}
.icon-dollar-infinity-oval-v4:before {
  content: "\e909";
}
.icon-dollar-infinity-prong-v3:before {
  content: "\e90a";
}

}
.icon-dollar:before {
  content: "\e90a";
}

/* VIEW AS DEVICE */

.mobile-container {height:680px; width:100%;  margin-top:10px;}
.mobile-body {height:606px;}

.tablet-container {height:1024px; width:100%; margin-top:10px;}
.tablet-body {height:950px;}

.laptop-container {height:680px; width:100%; margin-top:10px;}
.laptop-body {height:606px;}

/* USER INPUT MODALS */

.shadow {
	box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.5);}

.modal-background {
	position: fixed;
	box-sizing: border-box;
	z-index:99;
	display: none;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	}

.modal-container {
	box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.5);}

.modal-hide {float:right; border:none; margin:0; padding:22px; text-align:center; vertical-align:bottom; font-size:24px; cursor:pointer;}
.modal-hide:hover {color: #ff0000;}

.user-submit {
	width: 100%;
	padding:12px;
	color:#ffffff;
	background-color:#32b832;
	border:none;
	font-size:22px;
	border-radius: 8px;
	}

.user-border-left {
	padding:12px;
	color:#00cc00;
	background-color:#ffffff;
	font-size:24px;
	border-radius: 8px 0 0 8px;
	border: 1px solid #666666;
	border-right: none;
	}

.user-border-left:hover {
	border-color:#66b3ff;
	}

.user-border-left:focus {
	border-color:#66b3ff;
	outline: none
	}

.user-border-right {
	padding:12px;
	width:100%;
	font-size:18px;
	border-radius: 0 8px 8px 0;
	border: 1px solid #666666;
	}

.user-border-right:hover {
	border-color:#66b3ff;
	}

.user-border-right:focus {
	border-color:#66b3ff;
	outline: none
	}

/* HOVER COLOR */

.green-glow {color:#ffffff; background-color: #37c837;}
.green-glow:hover {background-color: #4fcf4f;}

.hover-red {color: #aaaaaa;}
.hover-red:hover {color: #ff0000; cursor: pointer; }

.hover-fafafa {background-color: #fafafa; }
.hover-fafafa:hover {background-color: #f0f0f0;}

/* HOVER SCALE */

.hover-105{
	transition: transform .1s;
	}
.hover-105:hover {
	-ms-transform: scale(1.05); /* IE 9 */
	-webkit-transform: scale(1.05); /* Safari 3-8 */
	transform: scale(1.05);
	}

.hover-107{
	transition: transform .1s;
	}
.hover-107:hover {
	-ms-transform: scale(1.07); /* IE 9 */
	-webkit-transform: scale(1.07); /* Safari 3-8 */
	transform: scale(1.07);
	}

.hover-110{
	transition: transform .1s;
	}
.hover-110:hover {
	-ms-transform: scale(1.10); /* IE 9 */
	-webkit-transform: scale(1.10); /* Safari 3-8 */
	transform: scale(1.10);
	}

.hover-115{
	transition: transform .1s;
	}
.hover-115:hover {
	-ms-transform: scale(1.15); /* IE 9 */
	-webkit-transform: scale(1.15); /* Safari 3-8 */
	transform: scale(1.15);
	}

/* ANIMATE */

.animate-opacity{animation:opac 1.0s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom {animation:animatezoom 0.3s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

/* POSITION */

.top-left {position:absolute; top:10px; left:10px;}
.top-center {position:absolute; top:10px; left:50%; transform:translate(-50%,0%);}
.top-right{position:absolute; top:10px; right:10px;}

.middle-left {position:absolute; top:50%; left:10px; transform:translate(0%,-50%);}
.middle-center {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.middle-right {position:absolute; top:50%; right:10px; transform:translate(0%,-50%);}

.bottom-left {position:absolute; bottom:10px; left:10px;}
.bottom-center {position:absolute; bottom:10px; left:50%; transform: translate(-50%,0%);}
.bottom-right {position:absolute; bottom:10px; right:10px;}

/* POSITION LARGE  */

.top-left-20 {position: absolute; top: 20px; left: 40px;}
.top-center-20 {position: absolute; top: 20px; left: 50%; transform: translate(-50%, 0%);}
.top-right-20{position: absolute; top: 20px; right: 40px;}

.middle-left-20 {position: absolute; top: 50%; left: 40px; transform: translate(0%, -50%);}
.middle-center-20 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.middle-right-20 {position: absolute; top: 50%; right: 40px; transform: translate(0%, -50%);}

.bottom-left-20 {position: absolute; bottom: 20px; left: 40px;}
.bottom-center-20 {position: absolute; bottom: 20px; left: 50%; transform: translate(-50%, 0%);}
.bottom-right-20 {position: absolute; bottom: 20px; right: 40px;}

/* VIDEO */

.video-hover-icon {
	cursor: pointer;
	transition: transform .2s;
	}

.video-hover-icon:hover {
	-ms-transform: scale(1.06); /* IE 9 */
	-webkit-transform: scale(1.06); /* Safari 3-8 */
	transform: scale(1.06);
	}

.select-video-id{
	border-radius:10px;
	cursor:pointer;
	}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	}

.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
	}

/* MENU */

.sticky-top {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	}

.menu-flag {text-align:left; width:26px; height:26px;}

.menu-text{
	padding-left:12px;
	vertical-align:3px;
 	font:Arial;
	font-size:20px;
	}

.flag-text{
	padding-left:12px; vertical-align:5px; font:Arial; font-size:20px;
	}

/* CUST0M CHECK BOXES */

.container {
  display: block;
  position: relative;
  margin-bottom: 12px;
  padding: 3px 0 0 35px;
  font-family:Arial,sans-serif ;
  color:#666666;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #32b832;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* THE WORMHOLE */

.wormhole {
	display:flex;
	justify-content:space-between;
	padding:6px 10px;
	background-color:#ffffff;
	border: 1px solid #cccccc;
	border-radius:20px;
	width:230px;
	transition: border-color 0.3s;
	}

.wormhole:hover {
	border: 1px solid #168aad;
	}

.wormhole:focus-within {
	border-color: #0078d4;
	box-shadow: 0 0 10px rgba(26, 166, 203, 0.5);
	transition: box-shadow 0.3s;
	}

.wormhole-submit {
	justify-content:left;
	margin: 0;
	padding: 0;
	font-size:22px;
	background-color:#ffffff;
	color:#e53434;
	border:none;	
	}

.wormhole-modal {
	color:#168aad;
	font-size:22px;
	}

.x-wormhole-submit {
	margin: 0;
	padding: 5px;
	color: #e53434;
	background-color:#ffffff;
	font-size: 20px;
	border-radius: 19px 0 0 19px;
	border: none;	
	}

.wormhole input {
	width:164px;
	margin:0;
	padding:2px;
	font-size:16px;
	text-align:left;
	color:#666666;
	border: none;
	outline: none;
	}

.wormhole img {
	width: 20px;
	height: 20px;
	}

.wormhole-search {
	margin:0;
	padding:5px ;
	color: #666666;
	background-color:#ffffff;
	border-radius: 0 19px 19px 0;
	border: none;	
	}

/* ICON DROPDOWN */

.i-menu-button {position:relative; display:inline-block; }

.i-menu-button:hover .dropdown-content {
  display: block; }

.dropdown-icon {
	position: relative;
	border: none;
	cursor: pointer; }

.dropdown-content {
	display: none;
	background-color:#fafafa;
	position: absolute;
	z-index:99;
	right: 0;
	text-align: left;
	cursor:default;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}

.dropdown-content {
	display: none;
	position: absolute;
	z-index:99;
	right: 0;
	text-align: left;
	cursor:default;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.dropdown-content a {
	text-decoration: none;
	display: block; }

.dropdown-bar-hover {background-color:#fafafa; color:#4d4d4d;}
.dropdown-bar-hover:hover {background-color:#f2f2f2;}

.dropdown-bar-hover-dim {
	background-color:#fafafa;
	color:black;
	}

.dropdown-bar-hover-dim:hover {
	color:#d9d9d9;
	background-color:#f2f2f2;
	}

.icon-dropdown a {
	text-decoration: none;
	display: block;
	}

.icon-style {
	font-size: 24px;
	color: #168aad;
	border: none;
	cursor: pointer;
	}

.dropdown-text {
	font: Arial;
	padding-left: 10px;
	font-size: 18px;
	vertical-align: 6px;
	color: #666666;
	border: none;
	}

/* GALAXY */

.galaxy-wormhole{
	display: flex;
	background-color: #ffffff;
	}

.galaxy-wormhole:hover {
	box-shadow: 0px 0px 10px 10px #ffdd00;
	}

.galaxy-wormhole:focus-within {
	border-color: #0078d4;
	box-shadow: 0px 0px 18px 18px #ffdd00;
	transition: box-shadow 0.5s;
	}

.galaxy-input {
	margin: 0;
	padding: 10px 0 10px 10px;
	color: #666666;
	background-color:#ffffff;
	font-size: 16px;
	border-radius: 19px 0 0 19px;
	border: none;	
	}

.galaxy-wormhole-right {
	margin: 0;
	padding: 10px 10px 10px 0;
	color: #666666;
	background-color:#ffffff;
	font-size: 16px;
	border-radius: 0 19px 19px 0;
	border: none;	
	}

.x-galaxy-wormhole-left {
	position:relative;
	display:inline-block;
	}

.x-galaxy-wormhole-right {
	position:relative;
	display:inline-block;
	}

.x-galaxy-wormhole-right:hover {
  display: block; }

.x-galaxy-wormhole-left {
	margin: 0;
	padding: 10px 0 10px 10px;
	color: #666666;
	background-color:#ffffff;
	font-size: 16px;
	border-radius: 19px 0 0 19px;
	border: none;	
	}

.x-galaxy-wormhole-right {
	margin: 0;
	padding: 10px 10px 10px 0;
	color: #666666;
	background-color:#ffffff;
	font-size: 16px;
	border-radius: 0 19px 19px 0;
	border: none;	
	}

.galaxy-wormhole input {
	border: none;
	outline: none;
	width: 159px;
	padding: 8px 9px 9px 9px;
	font-size: 16px;
	}

.galaxy-wormhole img {
	width: 20px;
	height: 20px;
	}



/* I MENU */

.i-menu-icon {
	color: #666666;
	background-color: #f7f7f7;
	padding: 10px;
	font-size:24px;
	border: none;
	cursor: pointer; }

.i-menu-icon:hover {background-color: #e6e6e6;}

.i-menu-icon-off {
	color: #cccccc;
	background-color: #f7f7f7;
	padding: 10px;
	font-size:24px;
	border: none; }

.i-menu-icon-off:hover {background-color: #e6e6e6;}

.i-menu-text {
	padding:10px 0 10px 10px;
	font-size:18px;}

.i-menu-dropdown {
	display: none;
	position: absolute;
	z-index:99;
	right: 0;
	text-align: left;
	cursor:default;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.i-menu-dropdown a {
	text-decoration: none;
	display: block; }

.i-menu-icon:hover {background-color: #e6e6e6;}

.i-menu-button {position:relative; display:inline-block; }

.i-menu-button:hover .i-menu-dropdown {
  display: block; }

.i-1bit-icon {
	color: #00cc00;
	background-color:#f7f7f7;
	padding: 9px 6px;
	font-size:28px;
	border: none;
	cursor: pointer; }

.i-1bit-icon:hover {background-color: #e6e6e6;}

.i-dragonfly-icon {
	color: #168aad;
	background-color:#f7f7f7;
	padding: 9px 10px;
	font-size:28px;
	border: none;
	cursor: pointer; }

.i-dragonfly-icon:hover {background-color: #e6e6e6;}

/* WHITE DROPDOWN (BACKGROUND) */

.hover-fafafa {
	color: #666666;
	background-color: #ffffff;
	padding: 10px;
	font-size:24px;
	border: none;
	cursor: pointer; }

.hover-fafafa:hover {background-color: #fafafa;}

.white-icon-off {
	color: #cccccc;
	background-color: #f7f7f7;
	padding: 10px;
	font-size:24px;
	border: none; }

.white-icon-off:hover {background-color: #e6e6e6;}

.white-text {
	padding:10px 0 10px 10px;
	font-size:18px;}

.white-dropdown {
	display: none;
	position: absolute;
	z-index:99;
	right: 0;
	text-align: left;
	cursor:default;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.white-dropdown a {
	text-decoration: none;
	display: block; }

.white-icon:hover {background-color: #e6e6e6;}

.white-button {position:relative; display:inline-block; }

.white-button:hover .white-dropdown { display: block; }

/* DEVICE VIEW */

.scroll-padding-top {
    scroll-padding-top: 58px;
	}

.scroll-device-view {
    scroll-padding-top: 18px;
	}

.device-container {
	box-shadow: 5px 10px 20px 0px rgba(0,0,0,0.5); }

/*  BUTTONS */

.goto-button{font-size:18px; padding:10px; width:38px; height:38px; border-radius:50%; cursor: pointer; transition: transform .2s;}

/*  CREATE AVATAR */

.action-button{
	font-size: 22px;
	margin: 5px;
	padding: 15px;
	text-align: center;
	border-radius: 50%;
	border:none;
	cursor: pointer;
	transition: transform .2s;
	}

.action-button:hover {
	-ms-transform: scale(1.07); /* IE 9 */
	-webkit-transform: scale(1.07); /* Safari 3-8 */
	transform: scale(1.07);
	}

.color-on{color:#ffffff; background-color: #32b832;}
.color-live {color:#ffffff; background-color:#e6e6e6;}
.color-done {color:#ffffff; background-color:#32b832;}

/*  INPUT STATUS LINE */

.status-disabled {background-color: #f7f7f7;}
.status-disabled:hover {background-color: #f7f7f7;}

.status-{background-color: #e6e6e6;}
.status-:hover {background-color: #337cb8;}

.status-live {background-color: #32b832;}
.status-live:hover {background-color: #e0e0e0;}

.status-pending {background-color: #32b832;}
.status-pending:hover {background-color: #337cb8;}

.status-done {background-color: #337cb8;}
.status-done:hover {background-color: #337cb8;}

/* RECORD SELECTOR BUTTONS */

.select-button {margin:2px; padding:4px 21px; color:#ffffff; background-color:#bfbfbf; font-size:16px; border-radius:5px; border:none; cursor:pointer}
.select-button:hover {color:#ffffff; background-color: #e6e6e6;}
.select-button-off {margin:2px; padding:4px 20px; color:#ffffff; background-color:#e6e6e6; font-size:16px; border-radius:5px; border:none;}

/* DATE SELECTOR BUTTONS */

.date-button {margin:2px; padding:4px 10px; color:#ffffff; background-color:#00cc00; font-size:16px; border-radius:5px; border:none; cursor:pointer}
.date-button:hover {color:#ffffff; background-color: #00e600;}
.date-button-off {margin:2px; padding:4px 10px; color:#ffffff; background-color:#63e963; font-size:16px; border-radius:5px; border:none;}




/* DROPDOWN */

.dropdown{position:relative; display:inline-block; }
.dropdown:hover .dropdown-content {display: block; }

.dropdown-content {
	display: none;
	position: absolute;
	z-index:99;
	cursor:default;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.dropdown-content a {text-decoration: none; display: block; }

/* MENU */

.menu-icon {
	padding:10px;
	font-size:24px;
	color:#666666;
	border:none;
	cursor: pointer; }

.menu-icon:hover {filter: brightness(.95);}

.menu-dropdown {
	position: relative;
	display: inline-block; }

.menu-dropdown:hover .menu-content {
  display: block; }

.menu-content {
	background-color:#f9f9f9;
	display: none;
	position: absolute;
	z-index:99;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.menu-content a {
	text-decoration: none;
	display: block; }

.menu-bar {
	background-color:#f9f9f9;
	color:#666666;
	padding:10px;
	font-size:24px;	
	}

.menu-bar:hover {filter: brightness(.95);}

.menu-bar-dim {
	background-color:#f9f9f9;
	color:#cccccc;
	padding:10px;
	font-size:24px;	
	}

.menu-bar-dim:hover {filter: brightness(.95);}

.menu-bar-text {
	padding-left:10px;
	vertical-align:3px;
	font-size:18px;
	}

.menu-bar-text-on {
	color:#c4eced;
	padding-left:10px;
	vertical-align:3px;
	font-size:18px;
	}

.menu-bar-text-dim {
	color:#cccccc;
	padding-left:10px;
	vertical-align:3px;
	font-size:18px;
	}

.menu-line {
	margin:2px 10px;
	background-color:#f9f9f9;
	border:1px solid #cccccc;
	}

.menu-flag-dim {opacity:.2}

/* HOVER BACKGROUND COLORS */

.hover-ffffff {background-color: #ffffff;}
.hover-ffffff:hover {background-color: #f5f5f5;}

.hover-f7f7f7 {background-color: #f7f7f7;}
.hover-f7f7f7:hover {background-color: #e6e6e6;}

.hover-f5f5f5{cursor: pointer;}
.hover-f5f5f5:hover {background-color: #f5f5f5;}

.hover-f9f9f9{background-color: #f9f9f9;}
.hover-f9f9f9:hover {background-color: #ededed;}

.brightness-up {color:#666666;}
.brightness-up:hover { filter: brightness(1.2);}

/* HOVER DIMMER */

.dimmer-90 {}
.dimmer-90:hover {filter: brightness(.90);}

.dimmer-91 {}
.dimmer-91:hover {filter: brightness(.91);}

.dimmer-92 {}
.dimmer-92:hover {filter: brightness(.92);}

.dimmer-93 {}
.dimmer-93:hover {filter: brightness(.93);}

.dimmer-94 {}
.dimmer-94:hover {filter: brightness(.94);}

.dimmer-95 {}
.dimmer-95:hover {filter: brightness(.95);}

/* HOVER OPACITY */

.opacity-20 {border:none}
.opacity-20:hover {opacity:.2;}

.opacity-50 {border:none}
.opacity-50:hover {opacity:.6;}

.opacity-60 {border:none}
.opacity-60:hover {opacity:.6;}

.opacity-90 {border:none}
.opacity-90:hover {opacity:.9;}

.opacity-100 {border:none}
.opacity-100:hover {opacity:1;}

/* HOVER BRIGHTER */

.brighter-110 {}
.brighter-110:hover {filter: brightness(1.1);}

.brighter-120 {}
.brighter-120:hover {filter: brightness(1.2);}

.brighter-130 {}
.brighter-130:hover {filter: brightness(1.3);}

.brighter-140 {}
.brighter-140:hover {filter: brightness(1.4);}

.brighter-150 {}
.brighter-150:hover {filter: brightness(1.5);}

/* DEFAULT ELEMENTS */

.modal-footer{
	color:#168aad;
	background-color:#f2f2f2;
	padding:10px;
	text-align:center;
	font-weight:bold;
	font:Arial;
	font-size:18px;
	}

/* DESIGN BUTTONS */

.teal-0 {color:#ffffff; background-color:#19599a;}
.teal-1 {color:#ffffff; background-color:#19719a;}
.teal-2 {color:#ffffff; background-color:#168aad;}
.teal-3 {color:#ffffff; background-color:#34a0a4;}
.teal-4 {color:#ffffff; background-color:#52b69a;}
.teal-5 {color:#ffffff; background-color:#76c893;}
.teal-6 {color:#ffffff; background-color:#99d98c;}

.action-button-s {
	height:38px;
	margin:2px;
	padding:10px;
	font-size:16px;
	border-radius:50%;
	border:none;
	cursor: default;
	transition: transform .1s;
	}

.action-button-s:hover {
	-ms-transform: scale(1.07);
	-webkit-transform: scale(1.07);
	transform: scale(1.07);
	}

.icon-button {
	font-size:22px;
	background-color:transparent;
	border:none;
	cursor: default;
	transition: transform .2s;
	}

.icon-button:hover {
	-ms-transform: scale(1.15);
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
	}

.icon-text {font-size:18px; vertical-align:2px; color:#666666}

/* CUSTOM CHECKBOXES */

 .checkbox-group {
    display: flex;
    gap: 15px;
    font-family: Arial, sans-serif;
    font-size: 16px;
  }

  .checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
  }

  .checkbox input[type=checkbox] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    border-radius:0;
    background-color: #fff;
    position: relative;
  }

  .checkbox input[type=checkbox]:checked {
    background-color: #37c837;
  }

  .checkbox input[type=checkbox]:checked::after {
    content: "✔";
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
  }

  .submit-button {
    padding: 4px 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 5px;
  }