/*!
 * # Range slider for Semantic UI.
 * 
 */

.ui.range {
	width: 100%;
	height: 20px;
}

.ui.range .inner {
	margin: 0 10px 0 10px;
	height: 20px;
	position: relative;
}

.ui.range .inner:hover {
	cursor: pointer;
}

.ui.range .inner .track {
	position: absolute;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	top: 9px;
	left: 0;
	background-color: rgba(0,0,0,.05);
}

.ui.inverted.range .inner .track {
	background-color: rgba(255,255,255,.08);
}

.ui.range .inner .track-fill {
	position: absolute;
	width: 0;
	height: 4px;
	border-radius: 4px;
	top: 9px;
	left: 0;
	background-color: #1b1c1d;
}

.ui.inverted.range .inner .track-fill {
	background-color: #545454;
}

.ui.range .inner .thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	background: #fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	background: #fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	border-radius: 100%;
	box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;
}

/*--------------
     Colors
---------------*/

/* Red */
.ui.red.range .inner .track-fill {
	background-color: #DB2828;
}
.ui.red.inverted.range .inner .track-fill {
	background-color: #FF695E;
}

/* Orange */
.ui.orange.range .inner .track-fill {
	background-color: #F2711C;
}
.ui.orange.inverted.range .inner .track-fill {
	background-color: #FF851B;
}

/* Yellow */
.ui.yellow.range .inner .track-fill {
	background-color: #FBBD08;
}
.ui.yellow.inverted.range .inner .track-fill {
	background-color: #FFE21F;
}

/* Olive */
.ui.olive.range .inner .track-fill {
	background-color: #B5CC18;
}
.ui.olive.inverted.range .inner .track-fill {
	background-color: #D9E778;
}

/* Green */
.ui.green.range .inner .track-fill {
	background-color: #21BA45;
}
.ui.green.inverted.range .inner .track-fill {
	background-color: #2ECC40;
}

/* Teal */
.ui.teal.range .inner .track-fill {
	background-color: #00B5AD;
}
.ui.teal.inverted.range .inner .track-fill {
	background-color: #6DFFFF;
}

/* Blue */
.ui.blue.range .inner .track-fill {
	background-color: #2185D0;
}
.ui.blue.inverted.range .inner .track-fill {
	background-color: #54C8FF;
}

/* Violet */
.ui.violet.range .inner .track-fill {
	background-color: #6435C9;
}
.ui.violet.inverted.range .inner .track-fill {
	background-color: #A291FB;
}

/* Purple */
.ui.purple.range .inner .track-fill {
	background-color: #A333C8;
}
.ui.purple.inverted.range .inner .track-fill {
	background-color: #DC73FF;
}

/* Pink */
.ui.pink.range .inner .track-fill {
	background-color: #E03997;
}
.ui.pink.inverted.range .inner .track-fill {
	background-color: #FF8EDF;
}

/* Brown */
.ui.brown.range .inner .track-fill {
	background-color: #A5673F;
}
.ui.brown.inverted.range .inner .track-fill {
	background-color: #D67C1C;
}

/* Grey */
.ui.grey.range .inner .track-fill {
	background-color: #767676;
}
.ui.grey.inverted.range .inner .track-fill {
	background-color: #DCDDDE;
}

/* Black */
.ui.black.range .inner .track-fill {
	background-color: #1b1c1d;
}
.ui.black.inverted.range .inner .track-fill {
	background-color: #545454;
}

/*--------------
    Disabled
---------------*/
.ui.range.disabled {
	opacity: .5;
}

.ui.range.disabled .inner:hover {
	cursor: auto;
}

.ui.range.disabled .inner .track-fill {
	background: #ccc;
}
body {
  background-color: #f7f7f7;
}
.preview-container {
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  text-align: center;
}
.preview-container.rendering .loader {
  display: inline-block;
}
.preview-container .loader {
  float: left;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  font-weight: bold;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.preview-container .preview-controls {
  line-height: 1rem;
  padding-top: 3.5rem;
  float: left;
  position: absolute;
  width: 100%;
  text-align: center;
}
.preview-container .preview-controls .icon {
  color: white;
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  margin: 0;
}
.preview-container .preview-controls .icon.caret {
  font-size: 20px;
}
.preview-container .preview-controls .icon:active {
  color: lightgray;
}
.preview-container .preview-controls .icon.disabled {
  pointer-events: none;
}
.preview-container .preview-controls input {
  height: 1.2rem;
  text-align: center;
  border-radius: 4px !important;
  margin: 0 0.5rem;
}
.preview-container .preview-controls input.disabled {
  background-color: grey;
}
.preview-container .preview {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  padding: 5.5rem 1rem 1rem 1rem;
}
iframe {
  height: 100%;
  border: 0;
}
h3.ui.header {
  width: 100%;
  padding: 0.4em 1em .2em 1em;
  border-bottom: 1px solid grey;
  height: 2.6em;
  line-height: 1.6em;
  color: white;
}
.fixed.menu.navbar {
  z-index: 999;
}
.document-controls.ui.icon.buttons {
  display: inline-flex;
  float: right;
  margin-right: 0;
}
.document-controls.ui.icon.buttons .button.ui:first-child {
  border-right: 1px teal solid;
}
.document-controls.ui.icon.buttons .button.ui.mini {
  padding: 0.6em;
  margin: 0.1em 0;
  color: white !important;
}
.menu.left.sidebar > :first-child {
  margin-top: 3.1em;
}
.menu.left.sidebar.ui.inverted .item.active {
  color: #17c198 !important;
}
.menu.left.sidebar.ui.inverted .item.active .icon {
  color: #17c198 !important;
}
#main-content {
  height: 100%;
  padding-top: 2em;
  padding-bottom: 0.8em;
}
div.logo {
  color: white;
  display: inline-block;
  margin-right: 0.5em;
  background-color: #17c198;
  padding: 0 0.3em;
  border-radius: 4px;
  line-height: 1.3em;
  margin-top: 0.15em;
}
div.logo .book.icon {
  margin-top: -0.1em;
  margin-right: -0.2em;
  vertical-align: text-top;
}
div.logo .book.icon + *::before {
  content: "C";
  font-style: italic;
  vertical-align: super;
}
div.logo .book.icon + *::after {
  content: "T";
  font-style: italic;
  margin-left: -0.2em;
}
.menu.left.sidebar {
  z-index: 99;
}
i.icon.hexagon::before {
  content: "\2B21";
}
i.icon.one::before {
  content: "1";
  font-weight: bolder;
}
i.icon.two::before {
  content: "2";
  font-weight: bolder;
}
i.icon.three::before {
  content: "3";
  font-weight: bolder;
}
i.icon.appColor {
  color: #17c198;
}
.ui.button.appColor {
  background-color: #17c198;
}
.ui.button.appColor.disabled {
  background-color: #17c198 !important;
}
.ui.button.appColor:hover {
  background-color: #17c198;
}
.ui.button.appColor:active {
  background-color: teal;
}
.ui.vertical.menu.labeled .item {
  padding: 0.9em;
}
.ui.vertical.menu.labeled .item > .icon:not(.dropdown) {
  font-size: 21px !important;
}
.ui.vertical.menu.labeled .item:before {
  height: 2px;
}
#configuration-content {
  margin-top: 1em;
  margin-left: 9.6em;
  margin-right: 0.8em;
}
#configuration-content .segment.collapsed .divider,
#configuration-content .segment.collapsed .moduleDescription {
  display: none;
}
#configuration-content .segment.collapsed .header {
  margin-bottom: 0;
}
#configuration-content .segment.collapsed .actionsContainer {
  margin: 0;
}
#configuration-content .segment.collapsed .actionsContainer .icon {
  vertical-align: bottom;
}
#configuration-content .ui.header {
  color: #17c198;
}
#configuration-content .ui.header .ui.divider {
  margin-top: 0.2em;
}
#configuration-content .ui.header .actionsContainer {
  float: right;
  margin-top: -0.2em;
}
#configuration-content .ui.header .actionsContainer .icon {
  cursor: pointer;
  font-size: 1.2em;
  margin: 0 0.2em;
}
#configuration-content .ui.header .actionsContainer .icon.save {
  margin-right: 0.3em;
}
#configuration-content .ui.header .actionsContainer .icon:last-child {
  margin-right: 0;
}
#configuration-content .ui.header .actionsContainer .icon:active {
  color: teal;
}
#configuration-content .ui.form input,
#configuration-content .ui.form .ui.input,
#configuration-content .ui.form .selection.dropdown {
  width: auto;
}
#configuration-content .ui.form textarea {
  height: 10em;
}
#configuration-content .ui.form .field.error button.ui.button {
  border-color: #dbb1b1;
}
#configuration-content .ui.form fieldset {
  border: 0;
  padding: 0.3em 0;
  margin-bottom: 0.5em;
}
#configuration-content .ui.form fieldset + * {
  margin-top: 0.5em;
}
#configuration-content .ui.form .messageText {
  display: inline-block;
  padding-left: 1em;
  font-size: 12px;
  color: red;
}
#configuration-content .ui.form button.ui.button {
  padding-left: 1em;
  padding-right: 1em;
  border: 1px solid rgba(39, 41, 43, 0.14902);
}
#configuration-content .ui.form .button .icon::before {
  font-size: 20px;
}
#configuration-content .ui.form > .field > :not(label) {
  margin-left: 0.5rem;
}
#configuration-content .ui.form > .field button {
  vertical-align: middle;
}
#configuration-content .ui.form .ui.button.toggle {
  padding: 0.5em;
}
#configuration-content .ui.form .ui.button.toggle .icon {
  display: inline;
}
#configuration-content .ui.form .ui.right.action.input button .icon {
  margin: 0;
}
#configuration-content .ui.form .labeled.input .icon {
  font-size: 14pt;
  width: 1em;
  height: 1em;
  margin: 0;
}
#configuration-content .ui.label.tutorialLabel {
  display: none;
  z-index: 9999 !important;
}
#configuration-content .ui.button.toggle {
  padding: 0.75em;
}
#configuration-content .ui.button.toggle .icon {
  margin: 0;
}
#configuration-content .ui.button.toggle:not(.active) {
  color: white;
}
#configuration-content .ui.button.toggle.active {
  background-color: #17c198 !important;
}
#configuration-content [data-tab="hexagonsTab"] .ui.form .labeled.input .hexagon.icon {
  margin: -0.15em 0;
}
#configuration-content [data-tab="hexagonsTab"] .ui.form .labeled.input label {
  border: 1px solid rgba(39, 41, 43, 0.14902);
  border-right-width: 0;
}
#configuration-content [data-tab="wordSearchOptionsTab"] .ui.form .field > button {
  margin-left: 0.5em;
}
#configuration-content [data-tab="wordSearchOptionsTab"] .optionsBlock > div {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
#configuration-content [data-tab="wordSearchOptionsTab"] .optionsBlock > div span {
  width: 12em;
  display: inline-block;
}
#configuration-content [data-tab="axesTab"] .ui.form table th {
  text-align: center;
}
#configuration-content [data-tab="axesTab"] .ui.form table input {
  width: 100%;
}
#configuration-content [data-tab="wheelTab"] .ui.labeled .ui.label {
  width: 11em;
}
#configuration-content [data-tab="wheelTab"] .ui.labeled input[type=number] {
  width: 6em;
}
#configuration-content [data-tab="wheelTab"] table {
  width: auto;
  padding: 0;
  margin: 0 0 1em 0;
}
#configuration-content [data-tab="wheelTab"] table th {
  text-align: center;
}
#configuration-content [data-tab="wheelTab"] table tr td:first-child {
  width: 4rem;
  text-align: center;
}
#configuration-content [data-tab="wheelTab"] table tr td:first-child .icon {
  margin: 0;
  height: 1em;
}
#configuration-content [data-tab="wheelTab"] table tr td:last-child {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 4rem;
}
#configuration-content [data-tab="wheelTab"] table tr td:last-child .ui.button {
  margin: 0;
  padding: 0.5rem;
  background-color: transparent;
  font-size: 20px;
}
#configuration-content [data-tab="wheelTab"] table tr td:last-child .ui.button:active {
  box-shadow: none !important;
}
#configuration-content [data-tab="wheelTab"] table tr td:last-child .ui.button .icon {
  margin: 0;
}
#configuration-content [data-tab="wheelTab"] table .ui.range {
  width: 10em;
  display: inline-block;
}
#configuration-content [data-tab="cryptogramTab"] .revealedButtons {
  margin-left: 1em;
}
#configuration-content [data-tab="cryptogramTab"] .revealedButtons .ui.buttons {
  text-align: left;
  margin-bottom: 0.5rem;
}
#configuration-content [data-tab="cryptogramTab"] .revealedButtons .ui.buttons .ui.button {
  width: 2.5em;
  height: 2.5em;
  padding: 0;
}
#configuration-content [data-tab="cryptogramTab"] .revealedButtons .ui.buttons .ui.button:not(:first-child) {
  border-left-width: 0;
}
#configuration-content [data-tab="cryptogramTab"] .revealedButtons .ui.buttons .ui.button:not(.active) {
  color: black;
}
.updatePreview {
  float: right;
}
#edgeIEPrintError .content {
  padding-bottom: 15%;
  max-width: 70%;
  margin: auto;
}
#edgeIEPrintError .ui.header {
  margin-bottom: 2rem;
}
#edgeIEPrintError .ui.header i {
  margin-bottom: 2rem;
}
#edgeIEPrintError .inverted.circular.icon.appColor {
  background-color: #17c198 !important;
}
#edgeIEPrintError p {
  font-size: 16px;
}
#resetConfirmation {
  text-align: center;
}
#resetConfirmation .trash.icon {
  margin-bottom: 1rem;
}
.ui.negative.button {
  background-color: #db2828 !important;
}
.ui.positive.button {
  background-color: #16ab39 !important;
}