/* _____________________________
  |                             |
  |   Copyright (C) 2022, JEP   |
  |_____________________________|

  controls.css is part of Formulate.
*/

.button {
	margin: 0 5px 5px 0;
	padding: 6px 12px;
	background: #444444;
	color: #ffffff;
	border: none;
	border-radius: 2px;
	display: inline-block;
	cursor: pointer;
}

.button:hover {
	background: #888888;
	color: #ffffff;
}

.button:disabled {
	background: #dddddd;
	color: #ffffff;
	cursor: default;
}

.button:focus {
	outline: none;
}

.buttonframe {
	display: inline-block;
}

.formulate-controls-thumb-button {
	width: 18px;
	height: 18px;
	background: #000000;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	font-weight: bold;
    text-align: center;
    font-size: 8pt;
	vertical-align: top;
	display: inline-block;
	cursor: pointer;
}

.formulate-controls-thumb-button:hover {
	opacity: .5;
}

.formulate-controls-link {
	color: #000000;
	transition: color .2s;
	-webkit-transition: color .2s;
	cursor: pointer;
}

.formulate-controls-link:hover {
	color: #888888;
}

.formulate-controls-input {
	vertical-align: top;
}

.formulate-controls-input .wrapper {
	width: 100%;
	height: auto;
	position: relative;
}

.formulate-controls-input label {
	padding: 10px 0 5px 0;
	display: block;
	cursor: inherit;
}

.formulate-controls-checkbox label {
	padding: 5px;
	display: inline-block;
	cursor: pointer;
}

.formulate-controls-radio .wrapper label {
	padding: 2px 5px;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
}

.formulate-controls-radio .radiorow {
	display: inline-block;
}

.formulate-controls-radio input[type=radio] {
	margin: 3px 0 0 0;
	cursor: pointer;
}

.formulate-controls-input input {
	margin: 0;
	outline: none;
	box-shadow: none;
}

.formulate-controls-input input:focus:focus, .formulate-controls-frame:focus {
	border-color: #66aaff;
	box-shadow: 0 0 2px #66aaff;
	outline-offset: 0;
}

.formulate-controls-input input:disabled {
	background: #eeeeee;
	cursor: default;
}

.formulate-controls-input input[type=range] {
	width: 100%;
}

.formulate-controls-range .minimum {
	color: #aaaaaa;
	display: inline-block;
	cursor: default;
}

.formulate-controls-range .display {
	display: inline-block;
    cursor: default;
    transform: translate(-50%, 0);
    position: absolute;
    left: 50%;
}

.formulate-controls-range .maximum {
	color: #aaaaaa;
	display: inline-block;
	float: right;
	cursor: default;
}

.formulate-controls-input input[type=text], .formulate-controls-input input[type=password], .formulate-controls-input input[type=number] {
	min-height: 0;
}

.formulate-controls-input button {
	user-drag: none;
	-webkit-user-drag: none;
}

.formulate-controls-focus {
	border-color: #66aaff !important;
	box-shadow: 0 0 2px #66aaff !important;
}

.formulate-controls-input .file {
	width: auto;
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

.formulate-controls-input .file span {
	margin: 0;
	text-align: center;
  color: inherit;
	display: block;
}

.formulate-controls-input input[type=file] {
	top: 0;
	left: -100%;
	right: 0;
	bottom: 0;
	width: 200%;
	opacity: 0;
	position: absolute;
	cursor: pointer;
}

.formulate-controls-input .disabled {
	background: #bbbbbb !important;
	cursor: default !important;
}

.formulate-controls-input .toggle-switch {
	padding: 0;
  width: 60px;
  height: 34px;
	position: relative;
  display: inline-block;
}

.formulate-controls-input .toggle-switch input {
	display:none;
}

.formulate-controls-input .toggle-slider {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
	border-radius: 34px;
  -webkit-transition: .4s;
  transition: .4s;
	position: absolute;
  cursor: pointer;
}

.formulate-controls-input .toggle-slider:before {
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
	border-radius: 50%;
  -webkit-transition: .4s;
  transition: .4s;
	position: absolute;
}

.formulate-controls-input .toggle-check:checked + .toggle-slider {
  background-color: #2196F3;
}

.formulate-controls-input .toggle-check:focus + .toggle-slider {
	box-shadow: 0 0 1px #2196F3;
}

.formulate-controls-input .toggle-check:checked + .toggle-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
	transform: translateX(26px);
}

.formulate-controls-input .loading {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #FFFFFF;
	opacity: 0.5;
	position: absolute;
}

.formulate-controls-input .loading img {
	margin: 6px;
	float: right;
	user-drag: none;
	-webkit-user-drag: none;
}

.formulate-controls-input .progress-panel {
	height: 25px;
	width: 100%;
	background: #dddddd;
}

.formulate-controls-input .progress {
	top: 0;
	left: 0;
	height: 100%;
	background: #000000;
	position: absolute;
	opacity: .5;
}

.formulate-controls-text {
	margin-right: 5px;
}

.formulate-controls-text input, .formulate-controls-date input, .formulate-controls-time input, .formulate-controls-number input, .formulate-controls-password input {
	padding: 5px 8px 5px 8px;
	width: 100%;
	height: 30px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	cursor: text;
}

.formulate-controls-number input {
	min-width: 55px;
}

.formulate-controls-input textarea {
	padding: 5px 8px 5px 8px;
	width: 100%;
	height: 100px;
	min-height: 30px;
	min-width: 200px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	resize: vertical;
	cursor: text;
}

.formulate-controls-frame {
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
	font-size: 10pt;
	outline: none;
	position: relative;
}

.formulate-controls-select .display {
	width: auto;
	padding: 5px 32px 5px 8px;
	background: none;
	border: none;
	outline: none;
	vertical-align: top;
	position: relative;
	cursor: pointer;
	text-align: left;
}

.formulate-controls-searchselect input {
	width: 100%;
	height: 28px;
	padding: 6px 8px;
	background: none;
	border: none;
	outline: none;
	vertical-align: top;
	position: relative;
}

.formulate-controls-searchselect input:focus {
	outline: none;
	box-shadow: none;
}

.formulate-controls-select .formulate-controls-thumb-button {
	top: 0;
	right: 0;
	margin: 7px 0;
	-webkit-filter: brightness(40%);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
}

.formulate-controls-select .formulate-controls-thumb-button:hover {
	opacity: auto;
}

.formulate-controls-searchselect .formulate-controls-thumb-button {
	margin: 5px 0;
	-webkit-filter: brightness(40%);
	-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	visibility: hidden;
}

.formulate-controls-searchselect:hover .formulate-controls-thumb-button {
	visibility: visible;
}

.formulate-controls-searchselect .formulate-controls-thumb-button:hover {
	filter: brightness(60%);
	-webkit-filter: brightness(60%);
}

.formulate-controls-searchselect .buttonlist {
	top: 0;
	right: 0;
	padding: 0 5px;
	width: auto;
	position: absolute;
}

.formulate-controls-dropdown-button {
	top: 0;
	right: 0;
	margin: 7px;
	width: 16px;
	height: 16px;
	background: #666666;
	mask-image: url(img/down.png);
	-webkit-mask-image: url(img/down.png);
	mask-position: center;
	-webkit-mask-position: center;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: transform .5s;
	transition: transform .5s;
	transform: rotate(-180deg);
	display: inline-block;
	position: absolute;
	cursor: pointer;
}

.formulate-controls-focus .formulate-controls-dropdown-button {
	transform: rotate(0deg);
}

.formulate-controls-dropdown {
	height: 0;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	text-align: left;
	overflow: hidden;
	-webkit-transition: height .5s;
	transition: height .5s;
}

.formulate-controls-dropdown-expanded {
	border-bottom: 1px solid #dddddd;
}

.formulate-controls-dropdown-expanded::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}
  
.formulate-controls-dropdown-expanded::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .5);
	box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.formulate-controls-dropdown .element {
	padding: 4px 6px;
	background: #ffffff;
	cursor: pointer;
}

.formulate-controls-dropdown .element:hover {
	background: #eeeeee;
}

.formulate-controls-dropdown .placeholder {
	color: #888888;
}

.formulate-controls-dropdown .selected {
	background: #dddddd;
}

.formulate-controls-image {
	max-width: 100%;
	max-height: 100%;
	position: relative;
	display: inline-block;
}

.formulate-controls-image .imagebox {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	border: 1px solid #dddddd;
    border-radius: 4px;
}
  
.formulate-controls-image img {
	width: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    position: relative;
}

.formulate-controls-image .delete-button {
	top: 0;
	right: 0;
	width: 18px;
	height: 18px;
	border: none;
	filter: brightness(0%);
	-webkit-filter: brightness(0%);
	position: absolute;
	cursor: pointer;
	z-index: 1;
}

.formulate-controls-image .delete-button:hover {
	filter: brightness(50%);
	-webkit-filter: brightness(50%);
}

.formulate-controls-editor {
	border: 1px solid #cccccc;
	border-radius: 4px;
	position: relative;
}

.formulate-controls-editor .toolbar {
	background: #dddddd;
    overflow: hidden;
    padding: 5px 0;
}

.formulate-controls-editor .toolbar input[type=text] {
	height: 18px;
	width: 100px;
	padding: 0 3px;
	margin: 0;
	transition: width .5s;
	-webkit-transition: width .5s;
}

.formulate-controls-editor .toolbar input[type=checkbox] {
    vertical-align: top;
    width: 18px;
    height: 18px;
}

.formulate-controls-editor .toolbar .divider {
	padding: 0 10px;
	border-right: 1px solid #cccccc;
	display: inline-block;
	float: left;
}

.formulate-controls-editor .frame {
	position: relative;
}

.formulate-controls-editor .editor {
	width: 100%;
	min-height: 100px;
	max-height: 800px;
	margin: 0;
	padding: 5px 8px;
	background: #ffffff;
	border: none;
	outline: none;
	overflow: auto;
	position: relative;
	cursor: text;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.formulate-controls-editor .editor a, .formulate-controls-editor .editor p, .formulate-controls-editor .editor span, .formulate-controls-editor .editor div, .formulate-controls-editor .editor h1, .formulate-controls-editor .editor h2, .formulate-controls-editor .editor h3, .formulate-controls-editor .editor h4, .formulate-controls-editor .editor h5, .formulate-controls-editor .editor h6 {
	cursor: text;
}

.formulate-controls-editor ul {
    margin: 0 0 0 20px;
	list-style: auto;
	list-style-type: disc;
}

.formulate-controls-editor li {
}

.formulate-controls-editor .editor div {
	min-height: 18px;
}

.formulate-controls-editor .editor img {
	max-width: 100%;
	user-drag: none;
	-webkit-user-drag: none;
}

.formulate-controls-editor textarea {
	width: 100%;
    border: none;
    position: relative;
}

.formulate-controls-editor textarea:focus {
	outline: none;
}

.formulate-controls-editor .resize-bar {
	height: 5px;
    background: #dddddd;
    cursor: ns-resize;
}

.formulate-controls-editor .loading {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	opacity: 0.5;
	position: absolute;
}

.formulate-controls-editor .loading img {
	margin: 6px;
	float: right;
	user-drag: none;
	-webkit-user-drag: none;
}

.formulate-controls-calendar {
	margin-top: 5px;
	padding: 10px;
	-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	background: #dddddd;
	border-radius: 4px;
	position: relative
}

.formulate-controls-calendar .left {
	top: 0;
	left: 0;
	margin: 10px;
	filter: brightness(70%);
	position: absolute;
	display: inline-block;
	cursor: pointer;
}

.formulate-controls-calendar .left:hover {
	filter: brightness(50%);
}

.formulate-controls-calendar .right {
	top: 0;
	right: 0;
	margin: 10px;
	filter: brightness(70%);
	position: absolute;
	display: inline-block;
	cursor: pointer;
}

.formulate-controls-calendar .right:hover {
	filter: brightness(50%);
}

.formulate-controls-calendar .title {
	top: 10px;
	left: 35px;
	right: 35px;
	text-align: center;
	font-size: 14px;
	position: absolute;
}

.formulate-controls-calendar table {
  margin-top: 30px;
}

.formulate-controls-calendar th {
	width: 20px;
	height: 20px;
	color: #666666;
}

.formulate-controls-calendar td {
	width: 20px;
	height: 20px;
	text-align: center;
}

.formulate-controls-calendar .date {
	cursor: pointer;
}

.formulate-controls-calendar .date:hover {
	background: #eeeeee;
}

.formulate-controls-datetime .time {
	margin: 9px;
	height: 30px;
	background: #eeeeee;
}

.formulate-controls-datetime .time input {
	margin: 0;
	padding: px 2px;
	width: 40px;
	height: 30px;
	text-align: right;
	background: #eeeeee;
	border: none;
	float: left;
}

.formulate-controls-datetime .time div {
	margin: 7px 0 0 0;
	padding: 0;
	height: 20px;
	min-width: 3px;
	border: none;
	float: left;
}

.formulate-controls-datetime .time select {
	margin: 0;
	padding: 6px 0;
	width: 50px;
	height: 30px;
	background: #eeeeee;
	border: none;
	float: left;
	cursor: pointer;
}

.formulate-controls-table {
	margin-bottom: 10px;
	width: 100%;
}

.formulate-controls-table .wrapper {
	max-height: none;
}

.table::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
	height: 7px;
}
  
.table::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .5);
	box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.table {
	width: 100%;
	background: #ffffff;
	border-radius: 4px;
	border-top: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	overflow-y: hidden;
}

.table table {
	width: 100%;
	border-collapse: collapse;
}

.table table tr {
	border-bottom: 1px solid #dddddd;
}

.table th span {
	vertical-align: top;
}

.table th .formulate-controls-thumb-button {
	vertical-align: top;
	transition: transform .5s;
	-webkit-transition: transform .5s;
}

.table th .formulate-controls-thumb-button:hover {
	opacity: 1;
}

.table td, .formulate-controls-table th {
	padding: 3px 10px 3px 10px;
	text-align: left;
}

.table th {
	background: #cccccc;
	color: #000000;
}

.table thead td:hover {
	color: #ffffff;
}

.table thead td span {
	cursor: inherit;
}

.table thead i {
	cursor: inherit;
}

.table tfoot {
	background: #cccccc;
	color: #000000;
	font-weight: bold;
}

.table .formulate-controls-thumb-button {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}

.formulate-controls-input .range-vertical {
	width: 26px;
	-webkit-appearance: slider-vertical;
	writing-mode: bt-lr;
}