/* ------------------------------- */
/*            general              */
/* ------------------------------- */

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: rgb(var(--popup-color-rgb-2) / 50%) !important;
  	opacity: 1; /* Firefox */
}

::-webkit-input-placeholder { /* Edge */
	color: rgb(var(--popup-color-rgb-2) / 50%) !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: rgb(var(--popup-color-rgb-2) / 50%) !important;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input:disabled, textarea:disabled {
	background-color: #ebebeb !important;
	color: #aaaaaa !important;
	opacity: 0.5;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px var(--popup-color-3) inset !important;
	-moz-box-shadow: 0 0 0 30px var(--popup-color-3) inset !important;
	box-shadow: 0 0 0 30px var(--popup-color-3) inset !important;
    color: var(--popup-color-2);
}

input.erro:-webkit-autofill,
input.erro:-webkit-autofill:hover, 
input.erro:-webkit-autofill:focus, 
input.erro:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px var(--error-background-color) inset !important;
	-moz-box-shadow: 0 0 0 30px var(--error-background-color) inset !important;
	box-shadow: 0 0 0 30px var(--error-background-color) inset !important;
}

.form-control-group {
	position: relative;
	text-align: left;
}

/* ------------------------------- */
/*              label              */
/* ------------------------------- */

form label {
	cursor: pointer;
}

/* ---------------------------------------- */
/*              push button                 */
/* ---------------------------------------- */

.push-button {
	font-family: Luna ITC;
    font-size: 28px;
    font-weight: bold;
    white-space: nowrap;
    padding: 8px;
    padding-left: 25px;
    padding-right: 25px;
    
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    cursor: pointer;
}

/* ---------------------------------------- */
/*                  input                   */
/* ---------------------------------------- */

input {
	background-color: var(--popup-color-3);
    border: 1px solid rgb(var(--popup-color-rgb-2) / 20%);
	color: var(--popup-color-2) !important;
	font-size: 18px !important;
    font-weight: normal;

	min-height: 42px;
    max-height: 42px;
    width: 100%;
    margin-top: 0px !important;
    padding: 7px;
    padding-left: 15px;
    padding-right: 15px;

	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
    border-radius: 10px;
}

input:focus {
    border: 1px solid rgb(var(--popup-color-rgb-2) / 50%) !important;
	
	-webkit-box-shadow: 0 0 5px rgb(var(--popup-color-rgb-2) / 50%);
    -moz-box-shadow: 0 0 5px rgb(var(--popup-color-rgb-2) / 50%);
    box-shadow: 0 0 5px rgb(var(--popup-color-rgb-2) / 50%);
    outline: none;
}

.text-input-with-icon {
	background-color: rgb(var(--popup-color-rgb-1) / 50%);
    border: 1px solid rgb(var(--popup-color-rgb-2) / 20%);
	width: fit-content;
	min-height: 42px;
    max-height: 42px;
	padding: 0px;

	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
    border-radius: 10px;
}

.text-input-with-icon input {
	padding-top: 0px;
	padding-bottom: 0px;
	min-height: 40px;
    max-height: 40px;
}

.text-input-with-icon svg {
	min-height: 22px;
	max-height: 22px;
	min-width: 22px;
	max-width: 22px;
}

.text-input-with-icon svg path[fill^="#"] {
   	fill: var(--popup-color-2) !important;
}

.text-input-with-icon .text-input-left-icon {
	padding-left: 12px;
}

.text-input-with-icon .text-input-right-icon {
	padding-right: 12px;
}

.text-input-with-icon.input-password .text-input-right-icon {
	cursor: pointer;
}

.text-input-with-icon-focus-glow {
    border: 1px solid rgb(var(--popup-color-rgb-2) / 50%) !important;
	
	-webkit-box-shadow: 0 0 5px rgb(var(--popup-color-rgb-2) / 50%);
    -moz-box-shadow: 0 0 5px rgb(var(--popup-color-rgb-2) / 50%);
    box-shadow: 0 0 5px rgb(var(--popup-color-rgb-2) / 50%);
}

.text-input-with-icon input[type="text"], .text-input-with-icon input[type="password"] {
	background-color: transparent !important;
	border: 0px !important;
}

.text-input-with-icon input[type="text"]:focus, .text-input-with-icon input[type="password"]:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    border: 0px;
}

/* ------------------------------- */
/*         input checkbox          */
/* ------------------------------- */

.container-checkbox {
	display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap;
	color: var(--popup-color-2);
}

.container-checkbox label {
	white-space: nowrap;
	line-height: 24px;
	margin-left: 10px;
	cursor: pointer;
}

.checkbox-round {
	background-color: var(--popup-color-3);
    border: 1px solid rgb(var(--popup-color-rgb-2) / 20%);
	
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0px;
    
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
    border-radius: 50%;
    
    cursor: pointer;
}

.checkbox-round:checked {
    background-color: var(--popup-color-2) !important;
}

.checkbox-round:checked[disabled] {
    background-color: #F4F4F4;
}

.checkbox-round:checked[disabled] + label {
	color: #BEBEBE;
}