/*===========================================================
'  Zenity Servers Dashboard
'
'  NAME:    style.css
'  VERSION: 0.2
'  DATE:    26/11/2022
'  AUTHOR:  Luca Maroglio
'  COPY:    Zenity (c) 2022
'===========================================================*/

body {
	margin: 0px;
	font-weight: normal;
	font-size: .875em;
	line-height: 1.6em;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	color: #000;
	background-color: #131313;
	min-height: 100%;
	height: auto;
}
body::-webkit-scrollbar {
   width: 16px;
}
body::-webkit-scrollbar-track {
   background: #121212;
	background-color: var(--palette01);
}
body::-webkit-scrollbar-thumb {
   background-color: var(--palette02) ;
   border-radius: 16px;
   border: 2px solid var(--palette03);
}


.wrapper {
	width: 100%;
}

.header-area {
	width: 100%;
	position: sticky;
	top: 0px;
	left: 0px;
	z-index: 100;
}
.title-area {
	background-color: var(--palette04);
	max-height: 84px;
	padding: 1px;
}


.header-content {
	margin: 0 auto;
	max-width:1180px;
	height: 64px;
	margin: 10px auto 14px auto;
}
.menu-area {
	background-color: var(--palette05);
	width: 100%;
}
.menu-top {
	margin: 0 auto;
	max-width:1180px;
}


.imgLogo {
	width:64px;
	height:64px;
	float: left;
}
.header-title {
	position: relative;
	top: 6px;
	left: 17px;
	font-size: 1.0em;
	color: #ffffff;
}
.header-subtitle {
	position: relative;
	top: 6px;
	left: 15px;
	font-size: 2.4em;
	color: #ffffff;
}

.btHeaderCmd {
	display: block;
	float: right;
	position: relative;
	top: -26px;
	right: 2px;
	width: 18px;
	height: 18px;
	line-height: 24px;
	text-align: center;
	font-size: 16px !important;
	padding: 0px 1px 0px 2px;
	border-radius: 3px;
	border: 1px solid #e5e5e594;
	background-color: var(--palette06);
	color: #ffffff;
	cursor: pointer;
	z-index: 51;
	opacity: 0;
	transition: visibility 0.0s, opacity 0.2s linear;
}
.btHeaderCmd:hover {
	opacity: 1;
}
.btHeaderCmdEnabled {
	opacity: 1;
}

.myTitle {
	color: #ffffff;
   font-family: "Arial Black", Gadget, sans-serif;
   font-size: 2.7em;   
	font-weight: bold;
   font-variant: small-caps;
   letter-spacing: -1.2px;
   word-spacing: -1.6px;
   text-decoration: none solid rgb(68, 68, 68);
   text-shadow: 0px 0px 5px rgba(0, 66, 93, 1);
	margin-top: 60px;
}

.myTitle_Base {
   font-family: "Arial", Gadget, sans-serif;
	font-size:0.95em;
	letter-spacing:-1pt;
	font-weight:normal;
   font-variant:normal;
}
.myTitle_High {
	font-size:1.18em;
	letter-spacing:-3pt;
   font-variant:normal;
	color:#ec8c26;
}



#body-login a {
	color: #fff;
	font-weight: 600;
}
#body-login a:not(.button):hover,
#body-login a:not(.button):focus {
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

#showAdvanced {
	color: #fff;
}

em {
	font-style: normal;
	opacity: .5;
}



h2,
h3,
h4 {
	font-weight: bold;
}

h2 {
	font-size: 20px;
	margin-bottom: 12px;
	line-height: 140%;
}
h3 {
	font-size: 15px;
	margin: 12px 0;
}



body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.HeadButton {
	display: inline-block;
	margin: 0px;
	padding: 8px 14px;
	height: 36px;
	line-height: 36px;
	font-size: 1.2em;
	cursor: pointer;

	color: #f7f7f7;
   background-color: var(--palette08);
}

.HeadButtonLink {
   background-color: unset;
}

.HeadButtonLink:hover {
   background-color: var(--palette08);
}

.HeadButtonAdd {
	display: none;
}
.HeadButtonAddEnabled {
	display: inline-block;
}

.HeadButtonColor {
	position: absolute;
	right: 120px;
}

.HeadButtonLogout {
	position: absolute;
	right: 10px;
}

form {
	position: relative;
	margin: auto;
	padding: 0;
}
form fieldset {
	width: 260px;
	margin: auto auto 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
form #sqliteInformation {
	margin-top: -20px;
	margin-bottom: 20px;
}
form #adminaccount {
	margin-bottom: 15px;
}
form fieldset legend, #datadirContent label {
	width: 100%;
}
#datadirContent label {
	display: block;
	margin: 0;
}
form #datadirField legend {
	margin-bottom: 15px;
}



#showAdvanced {
	padding: 13px;
}
#showAdvanced img {
	vertical-align: middle;
}



#submit-wrapper,
#reset-password-wrapper,
#alternative-logins {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#alternative-logins {
	margin: auto;
	display: block;
	min-width: 260px;
	max-width: 400px;
	overflow: hidden;
}

#alternative-logins a {
	margin: 10px 5px;
	display: block;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#alternative-logins a.button::before {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	width: 0;
	margin-right: 0;
	height: 18px;
	display: inline-block;
	vertical-align: bottom;
}

#alternative-logins .button {
	color: var(--palette09);
	padding: 12px 20px;
}

@media only screen and (max-width: 1024px) {
	.wrapper {
		margin-top: 0;
	}
	#alternative-logins {
		margin: auto;
	}
}


#submit-wrapper .submit-icon,
#reset-password-wrapper .submit-icon {
	position: absolute;
	top: 22px;
	right: 24px;
	transition: right 100ms ease-in-out;
	pointer-events: none;
}

#submit-wrapper {
	margin: 0 auto;
}

#submit-wrapper input.login:hover ~ .submit-icon.icon-confirm-white,
#submit-wrapper input.login:focus ~ .submit-icon.icon-confirm-white,
#submit-wrapper input.login:active ~ .submit-icon.icon-confirm-white {
	right: 20px;
}

#reset-password-submit {
	padding: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#submit-wrapper .icon-loading-small {
	position: absolute;
	top: 22px;
	right: 26px;
}


input, textarea, select, button, div[contenteditable=true] {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
input,
input:not([type='range']),
a.button {
	font-size: 20px;
	margin: 5px;
	padding: 11px 10px 9px;
	outline: none;
	border-radius: 3px;
	appearance: none;
}

input[type='submit'],
input[type='submit'].icon-confirm,
input[type='cancel'],
input[type='cancel'].icon-confirm,
input[type='button'],
button,
a.button,
.button,
select {
	display: inline-block;
	width: auto;
	width:180px;
	min-width: 25px;
	padding: 12px;
	background-color: white;
	font-weight: bold;
	color: #555;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	white-space:normal;
}

input[type='text'],
input[type='tel'],
input[type='password'],
input[type='email'] {
	width: 249px;
	background: #fff;
	color: #555;
	cursor: text;
	font-family: inherit;
	appearance: textfield;
	box-sizing: content-box;
	border: none;
	font-weight: normal;
}
input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
	width: 219px;
	padding-right: 40px;
}
.toggle-password {
	position: absolute;
	top: 17px;
	right: 20px;
}
input.login {
	width: 260px;
	height: 50px;
	background-position: right 16px center;
}
input[type='submit'],
input[type='submit'].icon-confirm,
input[type='cancel'],
input[type='cancel'].icon-confirm,
input.updateButton,
input.update-continue {
	padding: 10px 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.updateAnyways a.updateAnywaysButton {
	font-size: 14px;
	padding: 10px 20px;
	color: #666 !important;
	display: inline-block;
	border-radius: 100px;
	margin: 15px 5px;
}
.updateAnyways a.updateAnywaysButton:hover {
	color: #222 !important;
}



button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
}

input.primary,
button.primary,
a.primary {
	border: 1px solid #fff;
	background-color: var(--palette09);
	color: #fff;
	transition: color 100ms ease-in-out;
}

input.primary:not(:disabled):hover,
input.primary:not(:disabled):focus,
button.primary:not(:disabled):hover,
button.primary:not(:disabled):focus,
a.primary:not(:disabled):hover,
a.primary:not(:disabled):focus {
	color: rgba(255, 255, 255, .8);
}




input[type='checkbox'].checkbox {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
input[type='checkbox'].checkbox + label {
	user-select: none;
}
input[type='checkbox'].checkbox:disabled + label,
input[type='checkbox'].checkbox:disabled + label:before {
	cursor: default;
}
input[type='checkbox'].checkbox + label:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin: 3px;
	margin-top: 1px;
	border: 1px solid #888;
	border-radius: 1px;
	height: 10px;
	width: 10px;
	background-position: center;
}
input[type='checkbox'].checkbox--white + label:before {
	border-color: #ddd;
}
input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
input[type='checkbox'].checkbox--white:focus + label:before {
	border-color: #fff;
}
input[type='checkbox'].checkbox--white:checked + label:before {
	background-color: #eee;
	border-color: #eee;
}
input[type='checkbox'].checkbox--white:disabled + label:before {
	background-color: #666 !important;
	border-color: #999 !important;
}
input[type='checkbox'].checkbox--white:checked:disabled + label:before {
	border-color: #666;
	background-color: #222;
}
input[type='checkbox'].checkbox--white:checked + label:before {
	background-color: transparent !important;
	border-color: #fff !important;
	background-image: url('../img/actions/checkbox-mark-white.svg');
}



.strengthify-wrapper {
	display: inline-block;
	position: relative;
	left: 5px;
	top: -20px;
	width: 269px;
	border-radius: 0 0 3px 3px;
	overflow: hidden;
	height: 3px;
}
.tooltip-inner {
	font-weight: bold;
	color: #ccc;
	padding: 3px 6px;
	text-align: center;
}




#show, #dbpassword-toggle {
	position: absolute;
	right: 1em;
	top: .8em;
	float: right;
}
#show + label, #dbpassword-toggle + label {
	right: 21px;
	top: 15px !important;
	margin: -14px !important;
	padding: 14px !important;
}
#show:checked + label, #dbpassword-toggle:checked + label, #personal-show:checked + label {
	opacity: .8;
}
#show + label, #dbpassword-toggle + label, #personal-show + label {
	position: absolute !important;
	height: 20px;
	width: 24px;
	background-image: url('../img/actions/toggle.svg?v=1');
	background-repeat: no-repeat;
	background-position: center;
	opacity: .3;
}
#show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before {
	display: none;
}



#show:focus + label, #dbpassword-toggle:focus + label, #personal-show:focus + label,
#show + label:hover, #dbpassword-toggle + label:hover, #personal-show + label:hover {
  opacity: 1;
}
#pass2, input[name='personal-password-clone'] {
	padding: .6em 2.5em .4em .4em;
	width: 8em;
}
#personal-show + label {
	height: 14px;
	margin-top: -25px;
	left: 295px;
	display: block;
}
#passwordbutton {
	margin-left: .5em;
}




p.info,
form fieldset legend,
#datadirContent label,
form fieldset .warning-info,
form input[type='checkbox']+label {
	text-align: center;
	color: #fff;
}



form .warning input[type='checkbox']:hover+label,
form .warning input[type='checkbox']:focus+label,
form .warning input[type='checkbox']+label {
	color: #fff !important;
}

.body-login-container.two-factor {
	max-width: 290px;
	margin: 15px auto 0;
}
.two-factor-provider {
	display: flex;
	border-radius: 3px;
	margin: 12px 0;
	border: 1px solid transparent;
	text-align: left;
	align-items: center;
	text-decoration: none !important;
}
.two-factor-provider:hover,
.two-factor-provider:focus,
.two-factor-provider:active {
	border: 1px solid #fff;
}
.two-factor-provider img {
	width: 64px;
	height: 64px;
	padding: 0 12px;
}
.two-factor-provider div {
	margin: 12px 0;
}
.two-factor-provider h3 {
	margin: 0;
}
.two-factor-provider p {
	font-weight: normal;
}
.two-factor-icon {
	width: 100px;
	display: block;
	margin: 0 auto;
}
.two-factor-submit, .two-factor-cancel {
	width: 100%;
	padding: 10px;
	margin: 0 0 5px 0;
	border-radius: 100px;
	font-size: 20px;
}
.two-factor-primary {
	padding: 14px !important;
	width: 226px;
}
.two-factor-secondary {
	display: inline-block;
	padding: 12px;
}




#remember_login {
	margin: 18px 5px 0 16px !important;
}
.lost-password-container {
	display: inline-block;
	margin: 10px 0;
	text-align: center;
	width: 100%;
}
#lost-password,
#lost-password-back,
#reset-password-wrapper + a {
	display: inline-block;
	font-weight: normal !important;
	padding: 12px;
	color: #fff;
	cursor: pointer;
	text-shadow: 0 0 2px rgba(0, 0, 0, .4);
}
#lost-password {
	margin-top: -6px;
}
#forgot-password {
	padding: 11px;
	float: right;
	color: #fff;
}



#alternative-logins legend {
	margin-bottom: 10px;
}
#alternative-logins li {
	height: 40px;
	white-space: nowrap;
	padding: 05px;
}
#alternative-logins li a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	background-color: var(--palette09);
	color: white;
	border-radius: 100px;
}



.updateProgress .error {
	margin-top: 10px;
	margin-bottom: 10px;
}


form #selectDbType {
	text-align:center;
	white-space: nowrap;
	margin: 0;
	display: flex;
}
form #selectDbType .info {
	white-space: normal;
}
form #selectDbType label {
	flex-grow: 1;
	margin: 0 -1px 5px;
	font-size: 12px;
	background:#f8f8f8;
	color:#888;
	cursor:pointer;
	border: 1px solid #ddd;
	padding: 10px 17px;
}
form #selectDbType label.ui-state-hover,
form #selectDbType label.ui-state-active {
	font-weight: normal;
	color:#000;
	background-color:#e8e8e8;
}
form #selectDbType .ui-visual-focus {
	box-shadow: none;
}
form #selectDbType label span {
	display: none;
}




.grouptop,
.groupmiddle,
.groupbottom {
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.grouptop input {
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.groupmiddle input {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
.groupbottom input {
	margin-top: 0 !important;
	border-top: 0 !important;
	border-top-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
.groupbottom input[type=submit], .groupbottom input[type=cancel] {
	box-shadow: none !important;
}

#install-recommended-apps + label span {
	display: inline-block;
	opacity: .7;
}




.body-login-container,
.warning,
.update,
.error {
	display: block;
	margin-top: 15px;
	padding: 15px;
	background-color: rgba(0,0,0,.3);
	color: #fff;
	text-align: left;
	word-wrap: break-word;
	border-radius: 10px;
	cursor: default;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.body-login-container h2,
.warning h2,
.update h2,
.error h2 {
	color: #fff;
	text-align: center;
}




.body-login-container .icon-big {
	background-size: 70px;
	height: 70px;
}

.body-login-container form {
	width: initial;
}

.body-login-container p:not(:last-child) {
    margin-bottom: 12px;
}

.warning.updateAnyways {
	text-align: center;
}
.warning legend,
.warning a,
.error a {
	color: #fff !important;
	font-weight: bold !important;
	opacity: 1;
}
.error a.button {
	color: #555 !important;
	display: inline-block;
	text-align: center;
}
.error pre {
	white-space: pre-wrap;
	text-align: left;
}
.error-wide {
	width: 700px;
	margin-top: 35px;
}
.error-wide .button {
	color: black !important;
}
.warning-input {
	border-color: #ce3702 !important;
}
a.warning {
	cursor: pointer;
}
fieldset.warning legend,
fieldset.update legend {
	top: 18px;
	position: relative;
}
fieldset.warning legend + p,
fieldset.update legend + p {
	margin-top: 12px;
}



.infogroup {
	margin: 8px 0;
}
.infogroup:last-child {
	margin-bottom: 0;
}
p.info {
	margin: 20px auto;
	text-shadow: 0 0 2px rgba(0, 0, 0, .4);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}




.update {
	width: inherit;
	text-align: center;
}
.update .appList {
	list-style: disc;
	text-align: left;
	margin-left: 25px;
	margin-right: 25px;
}
.update img.float-spinner {
	float: left;
}
.update a.update-show-detailed {
	border-bottom: inherit;
}
#update-progress-detailed {
	text-align: left;
	margin-bottom: 12px;
}
.update-show-detailed {
	padding: 12px;
	display: block;
	opacity: .75;
}
.update-show-detailed .icon-caret-white {
	display: inline-block;
	vertical-align: middle;
}
#update-progress-icon {
	height: 32px;
	margin: 10px;
	background-size: 32px;
}





.icon-info-white {
	background-image: url('../img/actions/info-white.svg?v=2');
}
.icon-error-white {
	background-image: url('../img/actions/error-white.svg?v=1');
}
.icon-caret-white {
	background-image: url('../img/actions/caret-white.svg?v=1');
}
.icon-confirm {
	background-image: url('../img/actions/confirm.svg?v=2');
}
.icon-confirm-white {
	background-image: url('../img/actions/confirm-white.svg?v=2');
}
.icon-checkmark-white {
	background-image: url('../img/actions/checkmark-white.svg?v=1');
}





.float-spinner {
	margin-top: -32px;
	padding-top: 32px;
	height: 32px;
	display: none;
}
[class^='icon-'], [class*=' icon-'] {
	background-repeat: no-repeat;
	background-position: center;
	min-width: 16px;
	min-height: 16px;
}
.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
	position: relative;
}
.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
	z-index: 2;
	content: '';
	height: 32px;
	width: 32px;
	margin: -17px 0 0 -17px;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 100%;
	-webkit-animation: rotate .8s infinite linear;
	animation: rotate .8s infinite linear;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}
.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
	border: 2px solid rgba(150, 150, 150, 0.5);
	border-top-color: #646464;
}
.icon-loading-dark:after, .icon-loading-small-dark:after {
	border: 2px solid rgba(187, 187, 187, 0.5);
	border-top-color: #bbb;
}
.icon-loading-small:after, .icon-loading-small-dark:after {
	height: 16px;
	width: 16px;
	margin: -9px 0 0 -9px;
}



img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading, div[contenteditable=true].icon-loading {
	background-image: url('../img/loading.gif');
}
img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark, div[contenteditable=true].icon-loading-dark {
	background-image: url('../img/loading-dark.gif');
}
img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small, div[contenteditable=true].icon-loading-small {
	background-image: url('../img/loading-small.gif');
}
img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark, div[contenteditable=true].icon-loading-small-dark {
	background-image: url('../img/loading-small-dark.gif');
}
@-webkit-keyframes rotate {
	from {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}
@keyframes rotate {
	from {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}




.footer-area {
	width: 100%;
	height: 27px;
	line-height: 27px;
	position: fixed;
	bottom: 0px;
	left: 0px;
	background-color: #2b2b2b;
	z-index: 100;

	text-align: center;
}
.footer-text {
	font-size: 0.84em;
	color: #afafaf;
}
.footer-text b {
	font-weight: normal;
	color: var(--palette09);
}




.hidden {
	display: none;
}




label.infield,
.hidden-visually {
	position: absolute;
	left:-10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

a.legal {
	font-size: smaller;
}


.button-area {
   margin: 0px auto 40px auto;
	max-width: 1180px;
	width: 1180px;
   text-align:left;
	padding-left: 0px;
   	
}
.button-area span {
	display: inline-block;
   width:220px;
	min-width: 25px;
   padding: 12px 0px;
   text-align: left;
   vertical-align: middle;
	align-items: center;
	justify-content: center;
	margin: 0px;
	height: 50px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	font-weight: bold;
	font-size: 1.3em;

	background-color: #353535;
	color: #c4c4c4;

	border: none;
   border-radius: 3px;
	cursor: pointer;
   white-space:normal;

	z-index: 50;
}
.button-area span:hover {
	background-color: #494952;
}



.btPower {
	background-color: var(--palette10) !important;
}
.btPower b {
	font-size: 0.9em !important;
	font-weight: bold !important;
	margin: 15px !important;
}
.btPower:hover {
	background-color: var(--palette11) !important;
}
.btPowerDescr {
	display: block;
	color: var(--palette12);
}




.spanDisabled {
	color: #969696 !important;
}
.imgDisabled {
	filter: blur(2px) sepia(70%);
}


.boxNumOrder {
	display: none;
	position: relative;
	top: -144px;
	height: 20px;
	width: 180px;
	background-color: var(--palette13);
	padding: 28px 10px 26px 30px;
	border-radius: 2px;
	cursor: pointer;
}
.btPower .boxNumOrder {
	top: -172px;
}

.boxNumOrder div {
	color: black;
	font-weight: bold !important;
	font-size: 30pt !important;
	cursor: pointer;
}

.boxListOrder {
	top: -154px;
	left: -13px;
	width: 184px;
	height: 24px;
	padding: 12px 10px 12px 30px;
}



.LoginArea {
	width: 60%;
	margin: 120px auto;
	padding: 24px 10px;
	text-align: left;
	border-radius: 3px;
	color: #fff;
	border: 1px solid #ffffff47;
	background-color: #ffffff36;
	text-align: center;
	background: var(--palette14);
}

.LoginArea #fldLogin {
   width: 94%;
   font-size: 24px;
	-webkit-font-smoothing: antialiased;
   display: block;
   margin: 10px auto;
   padding: 4px 10px;
   border-radius: 2px;
}

.LoginArea #fldPW {
   width: 94%;
   font-size: 24px;
   display: block;
   margin: 10px auto;
   padding: 4px 10px;
   border-radius: 2px;
}
.LoginArea #LoginSubmit {
	margin: 20px auto 10px auto;
	padding: 10px 25px;
	font-size: 20px;
	font-weight: 500;
	border: none;
	outline: none;
	background: #353535;
	color: #ffffff;
	border-radius: 2px;
	cursor: pointer;
	border: 1px solid #ffffff57;
}
.LoginArea #LoginSubmit:hover{
   background: #031a3480;
   color: #ffffff;
}
#fldError {
   font-size: 24px;
}





.boxAddItem {
	display: block;
	visibility: hidden;
	height: 22px;
	margin: 0 2px 4px 2px;
	text-align: center;
	font-size: 20px !important;
	border-radius: 4px;
	cursor: pointer;
	color: #fbfbfb;
	border:1px solid #d7d7d7;
	background-color: #ffffff22;
	opacity: 0;
	transition: visibility 0.1s, opacity 0.2s linear;
}
.boxAddItem:hover {
	opacity: 1;
}
.boxAddItemEnabled {
	visibility: visible !important;
}

.boxAddSep {
	display: inline-block;
	visibility: hidden;
	width: 5px;
	min-width: 5px;
	height: 85px;
	line-height: 93px;
	margin:0 1px 6px 0;
	border-radius: 4px;

	font-size: 9px !important;
	color: #fbfbfb;
	border:1px solid #d7d7d7b1;
	background-color: #ffffff22;

	
	opacity: 0;
	transition: visibility 0.1s, opacity 0.2s linear;
}
.boxAddSep:hover {
	opacity: 1;
}
.boxAddSepEnabled {
	visibility: visible;
}

#boxAreaFog {
	display: none;
	position:fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(0.15rem);
	background-color: #00000041;
	z-index: 150;
}



#boxConfirm {
	display: none;
	position:fixed;
	top:240px;
	top: calc(50% - 190px);
	padding: 20px 50px;
	border: 1px solid var(--palette15);
	background-color: #215500;
	border-radius: 8px;
	z-index: 151;
	box-shadow: 0px 0px 20px 14px #0000007d;
}
.boxConfirmRed {
	background-color: #791212 !important;
}

#boxConfirm input {
	width: 420px;
	display: block;
}
#boxConfirmTit {
	font-size: 2.1em;
	color: #ffffff;
	margin: 10px 0px 20px 0px;
}
#boxConfirmMsg {
	font-size: 1.2em;
	color: #ffffff;
}




#boxWarning {
	display: none;
	position:fixed;
	top:240px;
	top: calc(50% - 190px);
	padding: 20px 50px;
	border: 1px solid var(--palette15);
	background-color: #900e0e;
	border-radius: 8px;
	z-index: 151;
}
#boxWarning input {
	width: 420px;
	display: block;
}
#boxWarningTit {
	font-size: 2.1em;
	color: #ffffff;
	margin: 10px 0px 20px 0px;
}
#boxWarningMsg {
	font-size: 1.2em;
	color: #ffffff;
}




#boxEditItem {
	display: none;
	position:fixed;
	top:240px;
	top: calc(50% - 190px);
	padding: 20px;
	border: 1px solid var(--palette15);
	background-color: var(--palette16);
	border-radius: 8px;
	z-index: 151;
}
#boxEditItem input {
	display: block;
	margin-bottom: 10px;
	width: 380px;
}
#boxEditItem select {
	display: block;
	padding: 10px;
	width: 400px;
}
#boxEditItem input[type='submit'], #boxEditItem input[type='cancel']  {
	font-size: 20px;
	font-weight: 500;
	border: none;
	outline: none;
	background: #353535;
	color: #ffffff;
	border-radius: 2px;
	cursor: pointer;
	border: 1px solid #ffffff57;
}
#boxEditItem input[type='submit']:hover, #boxEditItem input[type='cancel']:hover  {
   background: #031a3480;
   color: #ffffff;
}

.boxButtons {
	margin-top: 20px;
	text-align: center;
}
.boxButtons input {
	display: inline-block !important;
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	width: 150px;
	max-width: 150px;
	border-radius: 2px;
	border: 1px solid transparent;
}
.boxButtons input:hover {
	background: #39000080;
	color: #ffffff;
	border: 1px solid #cecece8c;
}


#boxEditGroup,
#boxEditType {
	margin: 0 auto 10px auto;
	font-size: 13pt;
	font-weight: normal;
}


.btBoxOrd {
	display: inline-block;
	visibility: hidden;
	position:relative;
	top: -66px;
	left: -63px;	
	width: 30px;
	font-size: 10px !important;
	z-index: 51;
}
.btBoxOrdEnabled {
	visibility: visible;
}
.btPower .btBoxOrd {
	top: -93px;
	left: 5px;
   color: white;
}
 

.btBoxCmd {
	display: inline-block;
	visibility: hidden;
	position: relative;
	top: -9px;
	right: -108px;
	width: 8px;
	height: 20px;
	line-height: 25px;
	text-align: center;
	font-size: 16px !important;
	border-radius: 3px;
	border: 1px solid #848484b4;
	background-color: var(--palette17);
	color: var(--palette17);
	z-index: 51;
	cursor: pointer;
	transition: 20ms linear 5ms;
}
.btBoxCmd:hover {
	right: -96px;
	width: 20px;
	color: #ffffff;
}
.btBoxCmdEnabled {
	visibility: visible;
}
.btPower .btBoxCmd {
	top: -36px;
	right: -176px;
    background: #022948;
    border: 1px solid #001a2f;
    color: #022948;	
}
.btPower .btBoxCmd:hover {
    color: #ffffff;	
	right: -164px;	
}

.btBoxTitle {
	cursor: pointer;

	font-size: 1.05em;
	color: #e2e2e2;
	position: relative;
	top: 4px;

}
.btBoxTitleHidden {
	display: none;
}




.btList {
	padding: 0 0 0 12px !important;
	height: 46px !important;
	width: 210px !important;
	border: 1px solid #424242 !important;
	overflow: hidden;
}
.btList b {
	font-size: 0.7em !important;
}
.btList .btBoxTitle {
	top: 3px;
	margin-left: 30px;
	font-size: 0.85em;
}
.btList:hover {
	/*	background-color: #282828; */
}
.btListDescr {
	display: block;
	position: relative;
	top: -1px;
	margin-left: 30px;
}
.btListImage {
	float: left;
	position: relative;
	top: 13px;
	height: 30px;
	font-size: 16pt;
	width: 37px !important;
	text-align: left !important;
	left: 4px;
}

.btListOrd {
	top: -77px;
	left: -8px;
}


.btListCmd {
	top: -44px;
	right: -166px;
}
.btListCmd:hover {
	right: -154px;
}


.rowSepCmd {
	/* float: right; */
	/* position: relative; */
	/* right: 10px; */
	left: 3px;
}
.rowSepCmd:hover {
	left: 3px;
}


#boxPosition {
	display: none;
	position:fixed;
	top:240px;
	top: calc(50% - 190px);
	padding: 20px;
	border: 1px solid var(--palette15);
	background-color: var(--palette16);
	border-radius: 8px;
	z-index: 151;
}
#boxPosition input {
	display: block;
	margin-bottom: 10px;
	width: 380px;
}
#boxPosition select {
	display: block;
	padding: 10px;
	width: 400px;
}


#boxPositionGroup {
	margin: 0 auto 10px auto;
	font-size: 13pt;
	font-weight: normal;
}

#boxPositionSelect {
	width: 312px;
	max-width: 312px;
	margin-bottom: 0px !important;
}



.btBoxMenu {
	position:relative;
	top: -70px;
	right: -117px;
	width: 100px;
	height: 57px;

	color: rgb(233, 233, 233);
	background-color: var(--palette18);
	border: 1px solid #848484b4;
	border-radius: 4px;
	z-index: 60 !important;

	opacity: 0;
	pointer-events: none;
	transition: visibility 0.0s, opacity 0.2s linear;
}
.btBoxMenuItem {
	padding: 1px 6px;
	margin: 0px;
	line-height: 17px;
	text-align: left;
	cursor: pointer;
}
.btBoxMenuItem:hover {
	background-color: var(--palette19);
	color: #ffffff;
}
.btPower .btBoxMenu {
	top: -97px;
	right: -118px;
}


.btListMenu {
	top: -106px;
	right: -109px;
	width: 100px;
	height: 57px;
}


.rowSeparator {
	height: 0px;
	margin: 8px auto 8px auto;
	border-top:1px solid var(--palette20);
}
.rowSeparatorEnabled {
	margin: 3px auto 12px auto;
	height: 2px;
	cursor: pointer;
	border: 1px solid var(--palette21);
}
.rowSeparatorEnabled:hover {
	border: 1px solid #e8e8e8b4;
}
.RowSepTitle {
	display: inline-block;
	position: relative;
	top: -15px;
	left: 5px;
	line-height: 18px;
	padding: 0 8px;
	color: var(--palette12);
	background-color: var(--palette22);
	border: 1px solid var(--palette20);
	border-radius: 4px;
}

.button-area div {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	font-weight: normal;
   font-size: 0.9em;
}
.button-area b {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	font-weight: normal;
   font-size: 0.75em;
}

.button-area img {
	width: 45px;
	height: 45px;
	cursor: pointer;
	float: left;
	margin: 3px 9px 3px 13px;
}


@media only screen and (max-width: 1200px) {
	.button-area {
		max-width:944px;
		width:944px;
	}
	.header-content {
		max-width:944px;
	}
	.menu-top {
		max-width:944px;
	}
}

@media only screen and (max-width: 1024px) {
	.HeadButton {
		max-width: 166px;	
	}	
	.button-area {
		max-width:706px;
		width:706px;
	}
	.header-content {
		max-width:706px;
	}
	.menu-top {
		max-width:706px;
	}
}

/* 716 946 */
@media only screen and (max-width: 946px) {
	.HeadButton {
		max-width: 126px;
	}
	.button-area {
		max-width:536px;
		width:536px;
	}
	.header-content {
		max-width:536px;
	}
	.menu-top {
		max-width:536px;
	}

}

@media only screen and (max-width: 600px) {
	.HeadButton i {
		display: none;
	}
}

@media only screen and (max-width: 560px) {
	.HeadButton {
		max-width: 80px;
	}
	.button-area {
		max-width:358px;
		width:358px;
		padding-right: 2px;
	}
	.header-content {
		max-width:358px;
	}
	.menu-top {
		max-width:358px;
	}

	.button-area span {
	   width:164px;
	}

	.button-area img {
		width: 32px;
		height: 32px;
		margin: 9px 9px 3px 13px;
	}

	.button-area div {
		font-size: 0.8em;
	}
	.button-area b {
		font-size: 0.7em;
	}

	.btPower b {
		font-size: 0.77em !important;
	}
	
	.boxNumOrder {
		width: 144px;
	}
	.boxListOrder {
		width: 148px;
	}	
}

@media only screen and (max-width: 496px) {
	.HeadButtonLogout {
		top: 4px;
		right: 4px;
	}
	.HeadButtonLogout span {
		display: none;
	}
	.HeadButtonLogout i {
		display: block;
	}
}

@media only screen and (max-width: 355px) {
}