.panel {
	display: flex;
	width: 100%;
	padding: 0.5rem;
	background-color: #0275d8;
	background-image: url(images/css/bright-squares.png);
	white-space: nowrap;
	position: relative;
}

.panel button {
	background-color: transparent;
	border-color: transparent;
}

/*.panel button:hover,
.panel .show>.btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #025aa5;
	border-color: #01549b;
}*/

.panel .dropdown {
	display: inline-block;
}

.panel > *:not(:first-child) {
	margin-left: 0.5rem;
}

.panel > input {
	width: 20rem;
	display: inline-block;
	font-size: 1.125rem;
	padding: .25rem .5rem;
}

.panel-last-button {
	position: absolute;
	right: 0.5rem;
}

/* .panel .btn-primary {
    color: #fff;
    background-color: #303f9f;
    border-color: #303f9f;
}

.panel .btn-primary:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #eb9316;
}

.panel .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #ec971f;
    background-image: none;
    border-color: #eb9316;
}

.panel .btn-primary.focus, .btn-primary:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(240,173,78,.5);
    box-shadow: 0 0 0 2px rgba(240,173,78,.5);
} */

/* .panel .exit-button:hover {
	background-color: #eef;
} */

/* .panel-divider {
	display: inline-block;
	background-color: white;
	height: 2rem;
	width: 1px;
	vertical-align: middle;
	overflow: hidden;
} */

.panel .btn-primary.focus, .panel .btn-primary:focus {
	box-shadow: none;
}

.panel-filler {
	flex-grow: 1;
}

.panel-version-button {
	color: #8b929b !important;
}

.panel-back-to-the-old-version {
	color: #cee0f4 !important;
}.app-canvas-wrapper {
	border: 1px solid #eee;
	width: 100%;
}

.app-canvas-wrapper,
.app-canvas-wrapper > a > canvas {
	border-radius: 0.25rem;
}

.app-canvas-wrapper > a {
	width: 100%;
	height: 100%;
	outline: 0;
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
	display: block;
	background-image: url(images/css/transparent.png);
}

.app-canvas-wrapper > a > canvas {
	width: 100%;
	height: 100%;
}.component-color-picker-modal {
	width: 25rem !important;
}

.component-color-picker-modal .chrome-picker {
	width: 100% !important;
	margin: auto;
	box-shadow: none !important;
	box-sizing: border-box !important;
	border: 1px solid #ddd;
	border-bottom: none;
	border-radius: unset !important;
	border-top-left-radius: 0.25rem !important;
	border-top-right-radius: 0.25rem !important;
}

.component-color-picker-modal .chrome-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div {
	height: 18px !important;
}

.component-color-picker-modal .chrome-picker > div > div > div > div > div > div > div > div {
	width: 22px !important;
	height: 22px !important;
	border-radius: 11px !important;
	cursor: pointer;
	margin-top: -1px;
}


/* .component-color-picker-modal  */

.component-color-picker-modal .chrome-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
	width: 26px !important;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.component-color-picker-modal .chrome-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div {
	width: 20px !important;
	height: 20px !important;
	border-radius: 10px !important;
	margin-top: 0 !important;
}

.component-color-picker-modal .chrome-picker > div:nth-child(2) > div:nth-child(2) > div.flexbox-fix > div > div > input {
	font-size: 13px !important;
}

.component-color-picker-modal .chrome-picker > div:nth-child(2) > div:nth-child(2) > div.flexbox-fix > div > div > span {
	font-size: 12px !important;
}

.component-color-picker-modal .chrome-picker > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div > svg {
	width: 32px !important;
	height: 32px !important;
}

.component-color-picker-modal .chrome-picker > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div {
	margin-right: -8px !important;
	margin-top: 6px !important;
}

.color-picker-palette {
	/* margin-top: 1rem; */
	/* border-radius: 2px; */
	/* box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3); */
	padding: .25rem;
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #ddd;
	border-top: none;
	width: 100%;
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.color-picker-palette > div {
	width: 1.9375rem;
	height: 1.9375rem;
	margin: 0.25rem;
	border-radius: 0.25rem;
	cursor: pointer;
	border: 1px solid #ddd;
}

.component-color-picker-modal .chrome-picker > div:nth-child(1) > div > div > div:nth-child(2) > div {
	width: 10px !important;
	height: 10px !important;
	border-radius: 5px !important;
	transform: translate(-5px, -5px) !important;
	background-color: black !important;
}.color-picker-button {
	width: 3rem;
	/*height: 2.375rem;*/
	padding: 0.3rem !important;
	background: #fff;
	display: inline-block !important;
}

.color-picker-button > div {
	/*width: 100%;
	height: 100%;*/
	border-radius: 0.125rem;
	border: 1px solid #ddd;
	background-image: url(images/css/transparent.png);
}

.color-picker-button > div > div {
	/*width: 100%;
	height: 100%;*/
	border-radius: 0.125rem;
}.sub-panel {
	background-color: #f8f7fc;
	background-image: url(images/css/bright-squares.png);
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	white-space: nowrap;
	position: relative;

	/* display: flex;
	justify-content: space-between; */
}

.sub-panel > *:not(:first-child),
.sub-panel > div > *:not(:first-child) {
	margin-left: 0.5rem;
}

/* Visualize button 
.sub-panel > *:first-child {
	margin-right: 0.125rem;
}*/

.sub-panel-mode-selector button {
	width: 6rem;
}


.sub-panel-edit-button {
	width: 5rem;
}
.sub-panel-edit-buttons {
	display: inline-block;
}

/* fix lock / unlock button width */
.sub-panel-lock-unlock-button {
	width: 6rem;
	display: inline-block;
}

/* hide undo / redo labels */
/*@media screen and (max-width: 73rem) {
	.sub-panel-undo-redo-group .icons-label {
		display: none;
	}
	.sub-panel-undo-redo-group button {
		width: 3.5rem;
	}
	.sub-panel-mode-selector button {
		width: 5rem;
	}
}*/

/* make buttons condensed */
/*@media screen and (max-width: 64rem) {
	.sub-panel > *:not(:first-child),
	.sub-panel > div > *:not(:first-child) {
		margin-left: 0.375rem;
	}
}*/
.component-checkbox {
	text-align: center;
	display: inline-flex;
}

.component-checkbox label {
	margin-bottom: 0;
	display: inline-flex;
    align-items: center;
    line-height: 1.125rem;
    font-size: 1rem;
}

.component-checkbox input {
	display: none;
}

.component-checkbox label,
.component-checkbox input {
	cursor: pointer;
}

.component-checkbox-label-left {
	margin-right: 0.375rem;
}

.component-checkbox-label-right {
	margin-left: 0.375rem;
}

.component-checkbox > label > div {
	width: 1.125rem;
	height: 1.125rem;
	border: 1px solid silver;
	border-radius: 0.25rem;
	transition: all 0.2s ease;
}

.component-checkbox > label > div.checked {
	/*background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxNSAxODAgMTY0IDE2NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI0MCIgeT0iMjA1IiByeD0iMTIiIHJ5PSIxMiIgd2lkdGg9IjExNCIgaGVpZ2h0PSIxMTQiIHN0cm9rZS13aWR0aD0iMTAiIGZpbGw9IiMzNDg4QkYiIC8+PC9zdmc+) center center no-repeat;*/
	background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSItMzE3IDI5MCAyOTMzIDE4NjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJzY2FsZSgxIC0xKSB0cmFuc2xhdGUoMCAtMjQwMCkiIGZpbGw9IiMzZTQxNDAiIGQ9Ik03ODMgMjU1bC0zMjUgMzI1bC03MCA3MGwtMzkxIDM5MXEtMTQgMTUgLTE0IDM1LjV0MTQgMzUuNWwzMjUgMzI1cTE0IDE0IDM1IDE0dDM1IC0xNGwzOTEgLTM5MXExNSAtMTUgMzUuNSAtMTV0MzUuNSAxNWwxMDQ5IDEwNDlxMTUgMTUgMzUuNSAxNXQzNS41IC0xNWwzMjcgLTMyMnExNSAtMTUgMTUgLTM1cTAgLTIxIC0xNSAtMzVsLTE0NDcgLTE0NDhxLTE1IC0xNCAtMzUuNSAtMTR0LTM1LjUgMTR6IiAvPjwvc3ZnPg==) center center no-repeat;	
}.words-table-wrapper {
	position: relative;
}

.words-table-wrapper .wa-resizer {
	position: absolute;
	height: 100%;
	width: 0.125rem;
	background-color: darkblue;
	top: 0;
	z-index: 2;
}

.words-table {
	margin: 0.25rem 0;
	/* background-color: #fafafa; */
	width: 100%;
	font-size: 1rem;
	border-bottom: 1px solid #ddd;
}

.words-table-head,
.words-table-body {
/*	overflow-x: hidden;
	overflow-y: scroll !important;*/
}


.words-table-head .words-table-row {
	background-color: #626262;
	color: azure;
}

.words-table-body {
	outline: 0;
	/* set max-height as otherwise the first render of table body virtual list will contain all 1000 words */
	/*max-height: 100vh;*/
	max-height: 300px;
	overflow-y: scroll;
}
.accordion-section.selected > .accordion-section-body {
    height: 410px !important;
}
.words-table-row {
	white-space: nowrap;
	position: relative;;
	width: 100%;
}

.words-table-cell {
	display: inline-block;
	padding: 0.125rem;
	border-right: 1px dotted #ddd;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	height: 1.75rem;
}

.words-table-cell:first-child {
	border-left: 1px dotted #ddd;
}

.words-table-body .words-table-cell input {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0.125rem;
	padding-left: 0.125rem;
	background-color: transparent;
	/*vertical-align: middle;*/
}


.words-table-cell-angle::-webkit-input-placeholder { color: #292b2c; opacity: 1; }
.words-table-cell-angle:-moz-placeholder { color: #292b2c; opacity: 1; }
.words-table-cell-angle::-moz-placeholder { color: #292b2c; opacity: 1; }
.words-table-cell-angle:-ms-input-placeholder { color: #292b2c; opacity: 1; }
.words-table-cell-angle::-ms-input-placeholder { color: #292b2c; opacity: 1; }
.words-table-cell-angle::placeholder { color: #292b2c; opacity: 1; }

.words-table-body .words-table-cell input[type=number]::-webkit-outer-spin-button,
.words-table-body .words-table-cell input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.words-table-body .words-table-cell input[type=number] {
    -moz-appearance:textfield;
}

.words-table-head .words-table-cell {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	height: 100%;
}

.words-table-head .words-table-cell.words-table-column-text {
	padding-left: 0.125rem;
	padding-right: 0.125rem;
}

.words-table-row {
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
}

.words-table-row.words-table-row-selected,
.words-table-row.words-table-row-selected:hover {
	background-color: #eee;
}

/* .words-table-body .words-table-row:hover {
	background-color: #eee;
} */

.words-table-resize-handle {
	position: absolute;
	/* font-size: 0.1px; */
	display: block;
	cursor: ew-resize;
	width: 0.25rem;
	right: -1px;
	top: 0;
	height: 100%;
}

.words-table-filter {
	font-size: 0.875rem;
	padding: 0.0625rem 0.25rem;
	padding-right: 1.5rem;
	font-style: italic;
	background-color: rgba(255, 255, 255, 0.2) !important;
	color: white;
}

.words-table-filter:active,
.words-table-filter:focus {
	background-color: white !important;
}

.words-table-filter-clear {
	position: absolute;
	top: 0;
	right: 0.375rem;
	padding: 0;
	background-color: transparent;
	border: none;
	vertical-align: middle;
	outline: 0;
	height: 100%;
}

.words-table-filter-clear .icons-icon {
	fill: #6f6f6f;
	vertical-align: middle;
	transition: fill 0.3s;
}

.words-table-filter-clear:hover .icons-icon {
	fill: rgba(0, 0, 0, 0.7);
}

.words-table-filter-clear:focus {
	outline: 0;
}

.words-table-filter::-webkit-input-placeholder { color: white !important; opacity: 1; }
.words-table-filter:-moz-placeholder { color: white !important; opacity: 1; }
.words-table-filter::-moz-placeholder { color: white !important; opacity: 1; }
.words-table-filter:-ms-input-placeholder { color: white !important; opacity: 1; }
.words-table-filter::-ms-input-placeholder { color: white !important; opacity: 1; }
.words-table-filter::placeholder { color: white !important; opacity: 1; }
.words-table-filter::placeholder { color: white !important; opacity: 1; }

/* .words-table-resize-handle:hover {
	background-color: darkblue;
} */

.words-table-body .words-table-cell.words-table-column-color input {
	padding: 0;
	margin: 0;
	/*vertical-align: middle;*/
	cursor: pointer;
}

/* .words-table-body .words-table-cell.words-table-column-color input:hover {
	background-color: #ddd;
} */

.words-table-body .words-table-cell.words-table-column-font select {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAuOTUgMyAzLjUgNiI+PHBvbHlnb24gZmlsbD0iIzQ0NDQ0NCIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz48L3N2Zz4K) no-repeat 100% 50% !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	-webkit-border-radius: 2px;
	width: 100%;
	background: transparent;
	border: none;
	padding: 0 0.875rem 0 0.125rem;
	/*vertical-align: middle;*/
	height: 100%;
}

/* hack for IE 11 to hide background */
@media all and (-ms-high-contrast:none)
{
	*::-ms-backdrop,
	.words-table-body .words-table-cell.words-table-column-font select {
		height: auto !important;
		background: none !important;
	}
}

.words-table-body .words-table-cell.words-table-column-repeat {
	text-align: center;
	display: flex;
	justify-content: center;
}

/*.words-table-body .words-table-cell.words-table-column-repeat label {
	vertical-align: middle;
}*/.words-import-modal-option-buttons {
	margin-left: 0.75rem;
}

.words-import-modal-option-buttons .btn {
	border-color: #40484d;
}

.words-import-modal textarea {
	height: 15rem;
}

.words-import-url {
	display: flex;
}

.words-import-url label {
	display: flex;
    align-items: center;
	width: 100%;
	margin-bottom: 0;
}

.words-import-url span {
	width: 5.5rem;
	display: block;
}

.words-import-options {
	margin-top: 1rem;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.words-import-options-csv-format {
	margin-top: 0.5rem;
}.radio-buttons-wrapper {
	/* display: flex;
	align-items: center; */
	padding: 0.5rem;
}

.radio-buttons {
	display: flex;
	align-items: center;
}

.radio-buttons > *:not(.input-group) {
	display: inline-block;
}

.radio-buttons .input-group {
	width: auto;
	flex-grow: 1;
}

.radio-buttons-label {
	margin: 0;
	width: 5rem;
    vertical-align: middle;
}

.radio-buttons .btn-group>.btn {
	width: 7rem;
}

.radio-buttons-wrapper:nth-child(2) .radio-buttons > div > button:nth-child(2) {
	width: 14rem;
}

.radio-buttons-description {
	margin-left: 5rem;
	font-size: 1rem;
	padding: 0.125rem;
	color: #505050;
	width: 22rem;
}

.words-options-open-links-in-new-window-checkbox {
	margin-left: 5.5rem;
}.words-panel {
	position: relative;
}

.words-panel button {
	margin-left: 0.25rem;
}

.words-panel > span:first-child > button:first-child,
.words-panel > button:first-child {
	margin-left: 0;
}

.words-panel > *:last-child {
	position: absolute;
	right: 0;
	top: 0;
}.component-slider {
	width: 100%;
	display: flex;
}

.component-slider-label {
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-right: 1rem;
}

.component-slider-wrapper {
	flex-grow: 1;
}

.horizontal-slider {
	width: 100%;
	height: 0.75rem;
	background-color: #d7dcdf;
	border-radius: 0.25rem;

	background: #d1d1d1;
	background: -moz-linear-gradient(top, #d1d1d1, #e7e7e7);
	background: -webkit-linear-gradient(top, #d1d1d1, #e7e7e7);
	background: linear-gradient(top, #d1d1d1, #e7e7e7);
	-moz-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
	box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);

	margin-top: 1rem;
	margin-bottom: 1rem;
}
.horizontal-slider.disabled {
	opacity: 0.5;
}
.handle {
	/*font-size: 0.9rem;*/
	text-align: center;
	background-color: black;
	color: white;
	cursor: pointer;
}
.handle.active {
	background-color: grey;
}
.horizontal-slider .bar {
	top: 20px;
	height: 10px;
}
.horizontal-slider .handle {
	width: 2.5rem;
	height: 1.5rem;
	border: 1px solid #eee;
	border-radius: .25rem;
	line-height: 1.5rem;
	top: -0.4375rem;
	
	background: #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	color: #232425;

	box-sizing: content-box;

	/* the below line fixes blurry text on Google Chrome when dragging */
	will-change: unset !important;

	overflow: hidden;

	font-size: 1rem;
}

.horizontal-slider .handle:focus { 
	outline: none !important;
	border-color: #8e8eff;
}

.horizontal-slider.disabled .handle:focus {
	border: 1px solid #eee; /* default */
}

.component-slider-handle-exceed-threshold {
	color: white;
	background-color: #cc8649;
}.shapes-classic {
	width: 23rem !important;
}

.shapes-classic-canvas-wrapper {
	width: 100%;
	padding-bottom: 100%;
	border: 1px solid #ddd;
	position: relative;
	margin-bottom: 0.5rem;
}

.shapes-classic-canvas-wrapper,
.shapes-classic-canvas-wrapper canvas {
	border-radius: .25rem;
}

.shapes-classic-canvas-wrapper canvas {
	position: absolute;
	width: 100%;
	height: 100%;
}

.shapes-classic .component-slider-label,
.shapes-classic .component-checkbox-label-left {
	width: 7.5rem;
	text-align: left;
	margin-right: 0;
}.shapes-custom {
	width: 23rem !important;
}

.shapes-custom-canvas-wrapper {
	width: 100%;
	padding-bottom: 100%;
	border: 1px solid #ddd;
	position: relative;
	margin-bottom: 1rem;
	background-color: #eee;
}

.shapes-custom-canvas-wrapper,
.shapes-custom-canvas-wrapper canvas {
	border-radius: .25rem;
}

.shapes-custom-canvas-wrapper canvas {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.shapes-custom .component-slider-label,
.shapes-custom .component-checkbox-label-left {
	width: 7.5rem;
	text-align: left;
	margin-right: 0;
}

.shapes-custom-show-original-button {
	margin-bottom: 0.5rem;
}.shapes-add-image-dialog {
	width: 27rem !important;
}

.shapes-add-image-label {
	margin: 1rem 0 0.25rem 0;
}

.shapes-add-image-dialog .input-group {
	margin-bottom: 1rem;
}

.shapes-section {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.shapes-panel {
	display: flex;
	/*padding-bottom: 0.125rem;*/
}

.shapes-panel button {
	margin: .25rem;
}

.shapes-filter {
	flex-grow: 1;
	width: auto !important;
	margin: 0.25rem;
	margin-left: 0.125rem;
}

.shapes-wrapper {
	display: flex;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.shapes-categories {
	display: block;
	padding: 0.25rem;
	/*overflow-x: visible;*/
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll;
	/*width: 8.5rem;*/
}

.shapes-category-button:not(:last-child) {
	margin-bottom: 0.25rem;
}

.shapes-category-button,
.shapes-add-image-button {
	width: 7rem;
	display: block !important;
}

.shapes-images {
	flex-grow: 1;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 0.125rem;
	/*padding-left: 0;*/
	list-style-type: none;
}

.shapes-images > li {
	float: left;
	width: 25%;
	padding-bottom: 25%;
	position: relative;
}

.shapes-images > li > div {
	cursor: pointer;
	display: block !important; /* for IE 11 */
	border: 1px solid #ddd;
	border-radius: .25rem;
	width: calc(100% - 0.25rem);
	height: calc(100% - 0.25rem);
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	/*padding: 0.375rem;*/
	display: flex;
	align-items: center;
	transition: all 0.2s ease;
}

.shapes-images > li > div:hover {
	background-color: rgb(228, 241, 251);
}

.shapes-images > li > div.active {
	background-color: #a8d7fb;
}

.shapes-images > li > div > img {
	display: block; /* for IE 11 */
	max-width: 90%;
	max-height: 90%;
	width: auto;
	height: auto;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.shapes-image-customize,
.shapes-image-remove {
	opacity: 0;
	visibility: hidden;
	width: 1.75rem;
	height: 1.75rem;
	position: absolute;
	cursor: pointer;
	right: -0.5rem;
	transition: all 0.2s ease;
	z-index: 10;
	transform: scale(0.875);
}

.shapes-image-customize {
	background: url(images/css/gear.svg) no-repeat 0 0;
	bottom: -0.5rem;
}

.shapes-image-customize:hover {
	background: url(images/css/gear_green.svg) no-repeat 0 0;
}

.shapes-image-remove {
	background: url(images/css/close.svg) no-repeat 0 0;
	top: -0.5rem;	
}

.shapes-image-remove:hover {
	background: url(images/css/close_red.svg) no-repeat 0 0;
}

.shapes-images > li > div:hover .shapes-image-customize,
.shapes-images > li > div:hover .shapes-image-remove {
	visibility: visible;
	opacity: 0.7;
}

.shapes-images > li > div.active .shapes-image-customize,
.shapes-images > li > div.active .shapes-image-remove
 {
	visibility: visible;
	opacity: 1;
}.fonts-section {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.fonts-panel {
	display: flex;
	/*padding-bottom: 0.125rem;*/
}

.fonts-section .fonts-panel {
	display: none;
}
.fonts-filter {
	flex-grow: 1;
	width: auto !important;
	margin: 0.25rem;
	margin-left: 0;
}

.fonts-add-button {
	width: 7rem;
}

.fonts-add-button-wrapper {
	padding: 0.25rem;
	display: inline-block;
}

.fonts-list {
	display: block;
	border-top: 1px solid #eee;
	/*border-bottom: 1px solid #eee;*/

	overflow-x: hidden;
	overflow-y: scroll;
	padding: 0;
	list-style-type: none;
}

.fonts-list li {
	position: relative;
	cursor: pointer;
	/*height: 3rem;
	padding: 0.5rem;*/
	height: 40px;
    padding: 0.2rem;
	transition: all 0.2s ease;
	display: flex;
}

.fonts-list li.odd {
	background-color: #f5f5f5;
}

.fonts-list li.odd.incompatible {
	background-color: #ffecdb;
}

.fonts-list li.even.incompatible {
	background-color: #fff2e6;
}

/*.fonts-list li img {
	max-width: 100%;
	max-height: 100%;
}*/
.fonts-list li img {
    max-width: 130px;
    max-height: 50%;
    margin: 0 auto;
        margin-top: 0px;
    margin-top: 10px;
}
.fonts-list li:hover,
.fonts-list li.odd.incompatible:hover,
.fonts-list li.even.incompatible:hover {
	background-color: rgb(228, 241, 251);
}

.fonts-list li.selected,
.fonts-list li.odd.incompatible.selected,
.fonts-list li.even.incompatible.selected {
	background-color: #c2c2c2;
}

/*.fonts-list-img {
	flex-grow: 1;
	width: 5rem;
	position: relative;
}*/
.fonts-list-img {
    flex-grow: 1;
    width: 5rem;
    position: relative;
    text-align: center;
    border: 1px solid #ddd;
}

.fonts-list-img-custom {
	padding-right: 6rem;
}

/*.fonts-list-style-label {
	width: 5rem;
	display: flex;
	align-items: center;
	font-size: 1rem;
	color: #5e5e5e;
	margin-left: 1rem;
}*/

.fonts-list-style-select {
	width: 7rem;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAuOTUgMyAzLjUgNiI+PHBvbHlnb24gZmlsbD0iIzQ0NDQ0NCIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz48L3N2Zz4K) no-repeat 100% 50% !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	-webkit-border-radius: 2px;
	background: transparent;
	padding: 0 1rem 0 .5rem;
	font-size: 1rem;
	border: 1px solid #444;
	display: flex;
	align-items: center;
	margin-left: 0.5rem;
	display: none;
}
div.fonts-list-style-select {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAuOTUgMyAzLjUgNiI+PHBvbHlnb24gZmlsbD0iI2NjYyIgcG9pbnRzPSIzLjUsNS4zIDIuNSw2LjggMS40LDUuMyAiLz48L3N2Zz4=) no-repeat 100% 50% !important;
	border: 1px solid #ccc;
	color: #acacac;
	display: none;
}

/* hack for IE 11 to hide background */
@media all and (-ms-high-contrast:none)
{
	*::-ms-backdrop,
	.fonts-list-style-select {
		height: auto !important;
		background: none !important;
	}
	div.fonts-list-style-select {
		background: none !important;
	}
}

.fonts-remove-custom-font-button {
	position: absolute;
	right: 0rem;
	bottom: 0rem;
}

.fonts-hide-incompatibel-button {
	margin: 0.25rem 0.25rem 0.25rem 0;
}

.fonts-list-new-font {
	display: none !important;
	position: absolute;
	right: 0;
	height: 100%;
	display: flex;
	top: 0;
	align-items: center;
	background-color: #f6a55f;
	color: white;
	padding: 1rem;
	border-radius: .25rem;
	font-style: italic;
}.layout-custom-angle-add-panel {
	display: flex;
	align-items: center;
}

.layout-custom-angle-add-panel button {
	flex-grow: 1;
	height: 2.25rem;
}

.layout-custom-angle-input {
	-moz-appearance:textfield;
	width: 4rem !important;
	/*line-height: 1.875rem;
	display: inline-block;
	vertical-align: middle;*/
	height: 2.25rem;
}

.layout-custom-angle-input::-webkit-input-placeholder { color: #292b2c; opacity: 1; }
.layout-custom-angle-input:-moz-placeholder { color: #292b2c; opacity: 1; }
.layout-custom-angle-input::-moz-placeholder { color: #292b2c; opacity: 1; }
.layout-custom-angle-input:-ms-input-placeholder { color: #292b2c; opacity: 1; }
.layout-custom-angle-input::-ms-input-placeholder { color: #292b2c; opacity: 1; }
.layout-custom-angle-input::placeholder { color: #292b2c; opacity: 1; }

.layout-custom-angle-input::-webkit-outer-spin-button,
.layout-custom-angle-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.layout-custom-angles-list {
	margin: 0.5rem 0 0.5rem 0;
	padding: 0.125rem;
	list-style-type: none;
	border: 1px solid #ddd;
	border-radius: 0.25rem;
	height: 7rem;
}

.layout-custom-list-no-angles {
	font-style: italic;
	padding: 0.25rem .5rem;
	color: #444;
}

.layout-custom-angles-list > li {
	cursor: pointer;
	display: inline-block;
	width: calc(20% - 0.25rem);
	text-align: center;
	background-color: rgb(228, 241, 251);
	margin: 0.125rem;
	border-radius: 0.25rem;
	padding: 0.125rem 0;
}

.layout-custom-angles-list > li:hover {
	background-color: red;
	color: white;
}

.layout-custom-notification {
	font-style: italic;
	color: #444;
}

.layout-custom-add-button {
	margin: 0 0.5rem;
}/*.layout-section {
	height: 100%;
	overflow-y: auto;
}*/

.layout-layouts {
	padding: 0;
	list-style-type: none;
	margin-bottom: 0;
}

/*.layout-layouts > li {
	float: left;
	width: 20%;
	padding-bottom: 20%;
	position: relative;
}*/
.layout-layouts > li {
    /*float: left;*/
    width: 100%;
    padding-bottom: 40px;
    position: relative;
}

.layout-layouts > li > div {
	cursor: pointer;
	display: block !important; /* for IE 11 */
	border: 1px solid #ddd;
	border-radius: .25rem;
	width: calc(100% - 0.25rem);
	height: calc(100% - 0.25rem);
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	/*padding: 0.375rem;*/
	display: flex;
	align-items: center;
	transition: all 0.2s ease;
}

.layout-layouts > li > div:hover {
	background-color: rgb(228, 241, 251);
}

.layout-layouts > li > div.active {
	background-color: #c2c2c2;
}

.layout-layouts > li > div > img {
	display: block; /* for IE 11 */
	max-width: 95%;
	max-height: 95%;
	width: auto;
	height: auto;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/*.layout-section .accordion-option-label {
	width: 20%;
}*/

.layout-words-amount-options {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	padding: 0;
	flex-grow: 1;
}

.layout-words-amount .component-slider {
	text-align: left;
}

.density-slider.component-slider {
	width: auto;
}
.layout-section .horizontal-slider {
	max-width: 100%;
}

.layout-words-amount-options .btn-group {
	width: 100%;
	display: flex;
}

.layout-words-amount-options .btn-group button {
	width: 33.33%;
}

.layout-words-amount-options .btn-group button:last-child {
	flex-grow: 1;
}.palette-wrapper {
	flex-grow: 1;
}

.palette {
	cursor: pointer;
	flex-grow: 1;
	height: 2.375rem;
	line-height: 2.375rem;
	margin-left: 0.375rem;
	/*border-radius: 0.125rem;*/
	transition: all 0.3s ease;
	border-radius: 0.25rem;
	overflow: hidden;
}

.palette-empty {
	background-color: rgb(238, 238, 238);
	width: 100%;
	text-align: center;
	padding-top: 0.125rem;
}

.palette.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.palette > * {
	display: inline-block;
	height: 100%;
	/*border: 1px solid white;*/
	transition: all 0.3s ease;
}

/*.palette > *:not(:first-child) {
	border-left: none;
}*/

.palette:not(.disabled):hover > * {
	/*border-color: #e6e6e6;*/
	opacity: 0.8;
}

.palette-add-buttons {
	margin-top: 1rem;
	display: flex;
}

.palette-add-buttons button {
	display: inline-block;
}

.palette-add-color-button {
	flex-grow: 1;
	margin-right: 0.5rem;
}

.palette-colors-list {
	margin: 1rem 0 0.25rem 0;
	padding: 0.125rem;
	list-style-type: none;
	border: 1px solid #ddd;
	border-radius: 0.25rem;
	height: 5rem;
	overflow: hidden;
}

.palette-colors-list-empty {
	font-style: italic;
	padding: 0.25rem .5rem;
	color: #444;
}

.palette-colors-list > li {
	cursor: pointer;
	display: inline-block;
	width: calc(25% - 0.25rem);
	text-align: center;
	margin: 0.125rem;
	border-radius: 0.25rem;
	line-height: 2rem;
}

.palette-colors-list > li:hover {
	background-color: red !important;
	color: white !important;
}

.palette-colors-notification {
	font-style: italic;
	color: #444;
	margin-bottom: -0.5rem;
}.style-section-label {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.style-section .accordion-option-label {
	width: 12rem;
}

.accordion-option.style-section-rollover-text-color {
	display: inline-flex;
	width: 16rem;
}

.accordion-option.style-section-rollover-box-color {
	display: inline-flex;
	/*width: 40%;*/
}

.accordion-option.style-section-rollover-box-color .style-section-label {
	width: auto;
	flex-grow: 1;
	margin-right: 1rem;
}

.accordion-option.style-section-rollover-text-color {
	border-bottom: none;
}

.style-section-animation-options {
	flex-grow: 1;
}

/*.style-section-animation-options .component-checkbox {
	width: 50%;
}*/

.accordion-option.style-section-animation-speed {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.style-section-animation-speed .accordion-option-label.style-section-label {
	margin-bottom: 1.5rem;
}

.style-section-animation-checkboxes {
	display: flex;
	justify-content: space-between;
}

.style-section-no-background-checkbox {
	/*flex-grow: 1;*/
	margin-left: 1rem;
}

.style-section-make-background-transparent-button {
	margin-left: 1rem;
	flex-grow: 1;
}.accordion {
	/* height: 100%; */
}

.accordion-section > .header {
	text-align: center;
	background-color: #f8f7fc;
	background-image: url(images/css/bright-squares.png);
	padding: 0.375rem;
	font-size: 1.125rem;
	/* font-weight: bold; */
	cursor: pointer;
	border-radius: 0.25rem;
	text-transform: uppercase;
}

.accordion-section.selected > .header {
	/*background-color: #807C8B;*/
	background-color: #535353;
	color: white;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.accordion-section:not(:first-child) > .header {
	margin-top: 0.125rem;
}

.accordion-section > .accordion-section-body {
	height: 0;
	border: 1px solid transparent;
	border-top: none;
	border-bottom-right-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
	overflow-y: hidden;
	transition: height .5s, border-color .5s;
	/* transition: height .5s, padding-top .5s, padding-bottom .5s; */
}

/* each accordion section body child should have padding */
.accordion-section-body > * {
	padding: 0.25rem;
}

.accordion-section.selected > .accordion-section-body {
	/* height is determined in layout.js */
	border-color: #eee;
}

.accordion-option {
	border-bottom: 1px solid #eee;
	display: flex;
	padding: 1rem 0.125rem;
}

.accordion-option:last-child {
	border-bottom: none;
}

.accordion-option-label {
	/*display: inline-block;
	vertical-align: top;*/
	font-size: 1.25rem;
	width: 30%;
	margin-right: 0;
	padding-right: 0.25rem;
}.send-email-dialog .modal-body input,
.send-email-dialog .modal-body textarea {
	margin-top: 0.25rem;
	margin-bottom: 1rem;
}

.send-email-dialog .modal-body textarea {
	height: 6rem;
}

.send-email-dialog .component-checkbox {
	display: block;
	text-align: left;
	margin-bottom: 2rem;
}.save-as-dialog-body {
	display: flex;
	align-items: center;
	font-size: 1.125rem;
}


.save-as-dialog-body > div {
	white-space: nowrap;
}

.save-as-dialog-body > input {
    flex-grow: 1;
    margin-left: 1rem;
}html, body {
	width: 100%;
	height: 100%;
	/*overflow: hidden;*/
	padding: 0 !important;
	font-size: 87.5%;
	/*font-family: 'Lato', arial, sans-serif;*/
	background-color: #eee;
}

/* body {
	font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
} */

/*#root,
.app {
	height: 100%;
} 

.app {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}*/

/*::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 0.375rem;
}
::-webkit-scrollbar-thumb {
	border-radius: 0.375rem;
	background-color: rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}*/

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

button {
	cursor: pointer;
}

button .icons-icon {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	padding: 0;
	fill: currentColor;
	margin-bottom: -0.1429rem;
}

button.btn-sm .icons-icon {
	width: 0.85rem;
	height: 0.85rem;
	margin-bottom: -0.1rem;
}

button .icons-icon-right {
	position: absolute;
	right: 1.5rem;
	transform: translate(0, 15%);
	width: 1.125rem;
	height: 1.125rem;
}

.dropdown-toggle:after {
	margin-bottom: -0.1rem;
}

/* prevent blur in dropdown menus on Chrome */
.dropdown-menu.show {
	will-change: unset !important;
}

/* redefine the animation speed for bootstrap dialogs */
.fade,
.modal.fade .modal-dialog {
	transition-duration: 0.1s;
}

/* modal dialog center vertical align */
.modal.fade .modal-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	width: 100%; 
	margin: 0;
}

/* style modal dialog */
.modal-dialog .modal-content {
	border: none;
	-webkit-box-shadow: 0 0 .75rem 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 .75rem 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 .75rem 0 rgba(0,0,0,0.5);
}

.modal-dialog .modal-header {
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
	/*border-bottom: transparent;*/
}


/*
.panel button:hover,
.panel .show>.btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #025aa5;
	border-color: #01549b;
}*/

.btn-primary {
    color: #fff;
    background-color: #0275d8;
    border-color: #0275d8;
}
.btn-primary:hover {
    color: #fff;
    background-color: #025aa5;
    border-color: #025aa5;
}
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #025aa5;
    border-color: #025aa5;
    /*box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5);*/
    box-shadow: none;
}

/*.btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5);
}*/

.dropdown-item:not([disabled]):not(.disabled):focus,
.dropdown-item:not([disabled]):not(.disabled):hover {
	color: #fff;
	background-color: #0275d8;
}
.dropdown-item.active, .dropdown-item:active {
	background-color: #025aa5;
}
.btn-normal{
	color: #fff;
	background-color: #828282;
	border-color: #828282;
	
}
.btn-secondary {
	color: #fff;
	background-color: #828282;
	border-color: #828282;
}
.btn-secondary:not([disabled]):not(.disabled).active,
.btn-secondary:not([disabled]):not(.disabled):active {
	color: #fff;
	background-color: #535353;
	border-color: #535353;
	box-shadow: 0 0 0 0.2rem hsla(210,7%,56%,.5);
	z-index: 10;
}
.btn-secondary:hover {
	color: #292b2c;
	background-color: #e6e6e6;
	border-color: #ccc;
}
.btn-secondary.disabled, .btn-secondary:disabled {
	color: #292b2c;
	background-color: #ccc;
	border-color: #ccc;
}
.btn-secondary.disabled, .btn-secondary:disabled {
	color: #292b2c;
	background-color: #fff;
	border-color: #ccc;
	opacity: 0.65;
}
/*.btn-group-sm>.btn, .btn-sm {
	font-size: .9375rem;
}*/

.btn-dark {
	background-color: #858290;
	border-color: #858290;
}
.btn-dark:hover,
.btn-dark:not([disabled]):not(.disabled).active,
.btn-dark:not([disabled]):not(.disabled):active {
	background-color: #40484d;
	border-color: #40484d;
}#root {
	box-shadow: 0px 0px 10px rgba(0,0,0,.2);
	overflow: hidden;
	width: 100%;
	height: 100%;
	min-height: 40rem; /* 640px */
	min-width: 72rem; /* 1008px */
	background-color: white;
}

@media screen and (min-width: 1440px) , screen and (min-height: 810px) {
	body {
		/*display: flex;*/
		align-items: center;
		justify-content: center;
	}
	#root {
		background-color: #eee;
		max-width: 1440px;
		margin: 0 auto;
		/*max-height: 810px;*/
		background-color: white;
	}
}

.app-body {
	height: 100%;
	/* display: flex; */
}

/* clearfix for app-body */
.app-body:after {
	content: "";
	display: table;
	clear: both;
}

.app-body-pane {
	/* height: 100%; */
	display: inline-block;
	padding: 0.5rem;
}

.app-body-left-pane {
	width: 44%;
	padding-right: 0.25rem;
}

.app-body-right-pane {
	width: 56%;
	padding-left: 0.25rem;
	float: right;
	/* display: flex;
	flex-direction: column; */
}

/* @media screen and (max-aspect-ratio: 4/3) {
	.app-body-pane.right-pane {
		flex-direction: column;
	}
} */

@media screen and (min-width: 1440px) {
	.app-body-left-pane { width: 40%;float: right; }
	.app-body-right-pane { width: 60%; }
}

/*@media screen and (min-width: 1600px) {
	.app-body-left-pane { width: 35%; }
	.app-body-right-pane { width: 65%; }
}
*/
.app-footer {
	background-color: #f4eee8;
	font-size: 0.85rem;
	padding: 0.25rem 0.5rem;
	display: none;
}

.app-modal-primary .modal-header { background-color: #0275d8; color: white; border-bottom: none;}
.app-modal-secondary .modal-header { background-color: #ffffff; color: #292b2c; border-bottom: none;}
.app-modal-success .modal-header { background-color: #8a8a8a; color: white; border-bottom: none;}
.app-modal-danger .modal-header { background-color: #535353; color: white; border-bottom: none;}
.app-modal-warning .modal-header { background-color: #f0ad4e; color: white; border-bottom: none;}
.app-modal-info .modal-header { background-color: #9d9d9d; color: white; border-bottom: none;}
.app-modal-dark .modal-header { background-color: #535353; color: white; border-bottom: none;}

.modal-body {
	font-size: 1rem;
}

/* .modal-dialog.modal-sm .modal-header {
	padding: 0.75rem;
} */
.app-modal-danger .btn-danger{background:#535353!important; border-color:#535353!important;}

.app-progress-wrapper {
	width: 100%;
	border: 1px solid #eee;
	display: none !important;
}

.progress-bar {
	height: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
}

.app-embed > div:not(:first-child) {
	margin-top: 1rem;
}

.app-embed .app-embed-code-block {
	margin-top: 0.5rem;
	padding: 0.5rem;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
}

.app-changelog-dialog {
	max-width: initial;
	width: 44rem !important;
}

.app-changelog-dialog pre {
	height: 30rem;
	white-space: pre-wrap;
}
.words-table-cell.words-table-column-angle {
    display: none;
}
.words-panel .words-import {
    display: none;
}
.sub-panel-lock-unlock-button, .btn.btn-secondary.color-picker-button, 
.sub-panel-lock-reset-button {
	display: none !important;
}
.accordion > .accordion-section:nth-child(2),.accordion > .accordion-section:last-child .header{
   display:none;
}

.accordion-section .style-section .accordion-option,.accordion .accordion-buy .icons-icon,
.accordion .accordion-preview .icons-icon{
	display:none;
}
.accordion .accordion-buy .btn,.accordion .accordion-preview .btn{
	width: 100% !important;
}
.app.noselect .panel,.horizontal-slider.disabled {
    display: none;
}

.words-table-cell.words-table-column-font,.app-body-right-pane .sub-panel,.component-color-picker-modal .btn-info{
    display: none;
}
.words-table-column-size {
    width: 21%!important;
    text-align: center;
}
.words-table-column-color {
    width: 24%!important;
	text-align: center;
}
.words-table-column-size input{text-align: center;}
.words-table-column-repeat {
    display: block !important;
    width: 20%;
    text-align: center;
}