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

:root {
	--color-input-br: var(--color-border);
	
	--color-input-fg: var(--color-black);
	--color-input-bg: #fafafa;
	
	--color-input-br-focus: #ffa500;
	--color-input-bg-focus: #fffbf5;

	--color-input-bg-disabled: #e6e6e6;

	--color-input-ph: #757575;
	--color-input-ph-ro: #ff0000;
}

/* Inputs                                                                                              */

input, select, textarea {
	border: 1px solid var(--color-input-br);
	border-radius: var(--border-radius);
}

input: autofill, input:-webkit-autofill {
	border-radius: var(--border-radius);
}

select: autofill, select:-webkit-autofill {
	border-radius: var(--border-radius);
}

input, select, textarea {
	color: var(--color-input-fg);
	background-color: var(--color-input-bg);
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input: -internal-autofill-previewed,
input: -internal-autofill-selected{
	background: rgba(0,0,0,0) !important;
}

textarea {
	padding: 5px;
	resize: none;
}

/* */

button, .button, button:active, .button:active, button:focus, .button:focus, button:link, .button:link, button:visited, .button:visited {
	background-color: var(--color-button-bg);
	color: var(--color-button-fg);

	padding: 8px 0px 8px 0px;
	width: 100px;
	height: 35px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	display: inline-flex;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	transition-property: background-color, color;
	transition-duration: .4s;
	transition-timing-function: ease;
}

button.nav, .button.nav {
	background-color: var(--color-button-bg);
	color: var(--color-button-fg);
	border-color: #ffffff;
}

button.cancel, .button.cancel {
	color: var(--color-border);
	background-color: var(--color-border-light) !important;
}

button.disabled, .button.disabled {
	color: var(--color-border-light);
	background-color: var(--color-border) !important;
}

/* */

.inputCol {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: normal;
	align-items: normal;
	align-content: normal
}

.inputCol > div {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
	margin-left: 20px;
}

.inputCol > div:first-child {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
	margin-left: 0px;
}

/* */

.inputRow {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: normal;
}

/* */

.inputCheck {
	height: 45px;
	width: 60px;
	display: inline-flex;
	font-size: var(--txt-normal);
	text-align: left;
}

.inputCheck > div {
	height: 25px;
	width: 80px;
	margin: auto;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: #f0f0f0;
	color: var(--color-border);
	position: relative;
	overflow: hidden;
}

.inputCheck label {
	position: absolute;
	width: 100%;
	height: 25px;
	cursor: pointer;
}

.inputCheck input {
	display: none;
}

.inputCheck .track {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	border-radius: 12px;
	transition-property: left, border-radius, background-color;
	transition-duration: .4s;
	transition-timing-function: ease;
	transition-property: background-color;
	transition-duration: .4s;
	transition-timing-function: ease;
}

.inputCheck .indicator {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 2px;
	left: 2px;
	background-color: var(--color-border);
	color: var(--color-primary-light);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	transition-property: left;
	transition-duration: .4s;
	transition-timing-function: ease;
}

.inputCheck .indicatorIcon {
	display: flex;
	height: 100%;
	text-align: center;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	align-items: center;
	font-size: var(--txt-small);
}

.inputCheck .indicatorOn {
	position: absolute;
	left: 0px;
	top: 1px;
	padding-left: 4px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .4s;
	transition-timing-function: ease;
}
.inputCheck .indicatorIconOn {
	display: none;
}
.inputCheck .indicatorOff {
	position: absolute;
	right: 0px;
	top: 1px;
	padding-right: 4px;
	opacity: 1;
	transition-property: opacity;
	transition-duration: .4s;
	transition-timing-function: ease;
}
.inputCheck .indicatorIconOff {
}

.inputCheck input:checked + .track {
	background: #e0ffe0;
}

.inputCheck input:checked + .track .indicator {
	left: 35px;
}

.inputCheck input:checked + .track .indicatorOff {
	opacity: 0;
}
.inputCheck input:checked + .track .indicatorIconOff {
	display: none;
}

.inputCheck input:checked + .track .indicatorOn {
	opacity: 1;
}
.inputCheck input:checked + .track .indicatorIconOn {
	display: block;
}

.inputCheck input:disabled + .track {
	background: var(--color-input-bg-disabled);
}

.inputCheckSmall {
	width: 40px;
}

.inputCheckSmall > div {
	width: 40px;
}

.inputCheckSmall input:checked + .track .indicator {
	left: 16px;
}

/* */

.inputCheckMulti {
	height: 45px;
	width: 60px;
	display: inline-flex;
	font-size: var(--txt-normal);
	text-align: left;
}

.inputCheckMulti > div {
	height: 25px;
	width: 80px;
	margin: auto;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: #f0f0f0;
	color: var(--color-border);
	position: relative;
	overflow: hidden;
}

.inputCheckMulti label {
	position: absolute;
	width: 100%;
	height: 25px;
	cursor: pointer;
}

.inputCheckMulti input {
	display: none;
}

.inputCheckMulti .track {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	border-radius: 12px;
	transition-property: left, border-radius, background-color;
	transition-duration: .4s;
	transition-timing-function: ease;
	transition-property: background-color;
	transition-duration: .4s;
	transition-timing-function: ease;
}

.inputCheckMulti .indicator {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 2px;
	left: 2px;
	background-color: var(--color-border);
	color: var(--color-primary-light);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	transition-property: left;
	transition-duration: .4s;
	transition-timing-function: ease;
}

.inputCheckMulti .indicatorIcon {
	display: flex;
	height: 100%;
	text-align: center;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	align-items: center;
	font-size: var(--txt-small);
}

.inputCheckMulti .indicatorOn {
	position: absolute;
	left: 0px;
	top: 1px;
	opacity: 1;
	transition-property: opacity;
	transition-duration: .4s;
	transition-timing-function: ease;
}
.inputCheckMulti .indicatorOff {
	position: absolute;
	left: 0px;
	top: 1px;
	opacity: 1;
	transition-property: opacity;
	transition-duration: .4s;
	transition-timing-function: ease;
}

.inputCheckMulti .indicatorNull {
	position: absolute;
	left: 0px;
	top: 1px;
	opacity: 1;
	transition-property: opacity;
	transition-duration: .4s;
	transition-timing-function: ease;
}

.inputCheckMulti.small {
	width: 40px;
}

.inputCheckMulti.small > div {
	width: 40px;
}


/* */

.inputGroup {
	border: 1px solid var(--color-input-br);
	border-radius: var(--border-radius);
	height: 45px;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;	
	color: var(--color-input);
	background-color: var(--color-input-bg);
	position: relative;
}

.inputGroup:has(input:disabled),
.inputGroup:has(input:read-only),
.inputGroup:has(textarea:disabled),
.inputGroup:has(textarea:read-only),
.inputGroup:has(select:disabled) {
	background: var(--color-input-bg-disabled);
}

.inputGroup:focus-within {
	border: 1px solid var(--color-input-br-focus);
	background: var(--color-input-bg-focus);
}

.inputGroup > input, .inputGroup > select, .inputGroup > textarea {
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 8px;
	height: 100%;
	width: 100%;
	border: none;
	background-color: rgba(0,0,0,0.0);
	z-index: +1;
}

.inputGroup > select {
	padding-left: 2px;
}

.inputGroup > textarea {
	padding-top:15px;
}

.inputGroup i {
	margin-right: 6px;
	color: var(--color-status-off);
}

.inputGroup .placeholder {
	position: absolute;
	left: 6px;
	top: 2px;
	font-size: var(--text-normal);
	color: var(--color-input-ph);
	opacity: 0.5;
	display: flex;
	align-items: self-start;
	height: 40px;
	transition: all 0.2s;
}

.inputReq .placeholder {
	color: var(--color-input-ph-ro);
}

.inputGroup .placeholder2 {
	position: absolute;
	right: 6px;
	top: 2px;
	font-size: 10px;
	color: var(--color-input-ph);
	opacity: 1;
	display: flex;
	align-items: self-start;
	height: auto;
	transition: all 0.2s;
}


.inputGroup:focus-within .placeholder, 
.inputGroup:has(input:disabled) .placeholder,
.inputGroup:has(input:read-only) .placeholder,
.inputGroup:has(textarea:disabled) .placeholder,
.inputGroup:has(textarea:read-only) .placeholder,
.inputGroup:has(select:disabled) .placeholder,
.input:not(:placeholder-shown) + .placeholder, 
.textarea:not(:placeholder-shown) + .placeholder, 
.select:not(:has(option[value=""]:checked)) + .placeholder,
.inputGroup:has(textarea) .placeholder {
	height: auto;
	top: 2px;
	font-size: 10px;
	color: var(--color-input-ph);
	opacity: 1.0;
	transition: all 0.2s;
}

/* Input: Autocomplete */

.inputAC {
	position: relative;	
	display: inline-block;
}

.inputAC > div:last-child {	
	position: absolute;
	display: none;
	border: 1px solid var(--color-input-br);
	border-radius: var(--border-radius);
	background-color: var(--color-input-bg);
	color: var(--color-input-fg);
	white-space: nowrap;
	min-width: 100%;	
	box-shadow: 0px 10px 10px 2px rgba(7,7,7,0.4);
	z-index: 10;
}

.inputAC > div:last-child:has(div) {	
	display: block;	
}

.inputAC > div:last-child > div {	
	padding: 5px;
	cursor: pointer;
	border-bottom: 1px solid var(--color-border-light);
}

.inputAC > div:last-child > div:first-child {	
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

.inputAC > div:last-child > div:last-child {	
	border-bottom: 0px;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.inputAC > div:last-child > div:hover {	
	background-color: var(--color-primary-light) !important;
	color: var(--color-input-fg);
}

.inputAC > div:last-child > div:hover div, .inputAC > div:last-child > div:hover span {	
}

.inputAC .optOn {
	background-color: var(--color-input-fg);
	color: var(--color-input-bg);
}

.inputAC .optFlex {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: normal;
	height: 100%;
}	

/* */

.inputIconInfo {
	position:relative;
}

.inputIconInfo > div {
	display: none;
	position: absolute;
	top:0px;
	left:0px;
	background-color: #fafafa;
	border-radius: var(--border-radius);
	border: 1px solid var(--color-border);
	padding:2px 5px 2px 5px;
	white-space: nowrap;
	box-shadow: 0px 10px 10px 2px rgba(7,7,7,0.4);
}

.inputIconInfo:hover > div {
	display: block;
}

.inputGroup:hover {
	z-index: +3;
}


/* ---------------------------------------------------------------------------------------------------- */
/* */

.calendar {
	background: var(--color-input-bg);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-border);
	width: 300px;
}
 
.calendar .header {
    display: flex;
    align-items: center;
    padding: 0px 20px 0px 20px;
    justify-content: space-between;
}

.calendar .navigation {
	cursor: pointer;
}

.calendar .monthname {
    line-height: 50px;
}

.calendar .body {
    padding: 0px 10px 10px 10px;
}
 
.calendar .body ul {
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    text-align: center;
	padding: 0px;
}
 
.calendar .body .dates {
    margin-bottom: 10px;
}
 
.calendar .body li {
    width: calc(100% / 7);
    font-size: 12px;
}
 
.calendar .body .weekdays {
	margin-block-start: 0px;
    margin-block-end: 0px;
}

.calendar .body .weekdays li {
    cursor: default;
    font-weight: 500;
}
 
.calendar .body .dates {
	margin-block-start: 0px;
	margin-block-end: 0px;
}

.calendar .body .dates li {
    margin-top: 10px;
    position: relative;
    z-index: +1;
    cursor: pointer;
}
 
.calendar .body .dates li.inactive {
    color: var(--color-border-light);
}
 
.calendar .body .dates li.active {
    color: var(--color-white);
}
 
.calendar .body .dates li::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
 
.calendar .body .dates li.active::before {
    background: var(--color-grey);
}

.calendar .dates li:not(.active):hover {
    color: var(--color-white);
}
 
.calendar .body .dates li:active:hover::before {
    background: var(--color-primary) !important;
}

.calendar .body .dates li:hover::before {
    background: var(--color-primary) !important;
}

/* ---------------------------------------------------------------------------------------------------- */

.calendarTime {
	background: var(--color-input-bg);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-border);
	width:400px;
}

.calendarTime .header {
    display: flex;
    align-items: center;
    padding: 0px 20px 0px 20px;
    justify-content: space-between;
}

.calendarTime .header span {
	cursor: pointer;
}

.calendarTime .header > div {
    line-height: 50px;
}

.calendarTime .body {
    padding: 0px 10px 10px 10px;
}

.calendarTime .body ul {
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    text-align: right;
	padding: 0px;
}

.calendarTime .body .times {
	margin-block-start: 0px;
	margin-block-end: 0px;
}

.calendarTime .body li {
	width: calc(100% / 6);
	font-size: 12px;
	padding: 3px 8px 5px 0px;
	text-align: right;
    border-radius: var(--border-radius);
}


.calendarTime .body li:hover {
    background: var(--color-primary) !important;
	color: var(--color-white);
}

.calendarTime .body li span {
	vertical-align: super;
	padding-left: 2px;
}

.calendarTime .time {
}

.calendarTime .time:hover {
}

.calendarTime .time > span {
}