/* --- VARIABLES --- */
:root {
	--user-color: #03a65a;
	--user-color-hover: #005e38;
}

/* --- LAYOUT --- */
.container-flex {
	background: #f1f1f1;
}

.content {
	background: var(--text-white);
	margin: 2rem;
	min-height: calc(100dvh - 64px);

	@media (max-width: 1366px) {
		margin: 1rem;
		min-height: calc(100dvh - 2rem);
	}
}

.content p {
	background-color: transparent;
}

/* --- BUTTONS --- */
.btn__user {
	color: var(--white);
	background-color: var(--user-color);
	border: 1px solid var(--user-color);
}

.btn__user:hover {
	background-color: var(--user-color-hover);
	border: 1px solid var(--user-color-hover);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* --- SIZING UTILITIES --- */
.w-30 {
	width: 30px;
}

.h-30 {
	height: 30px;
}

/* --- FORMS --- */
.form {
	gap: 1rem 2rem;
}

.form__item,
.filter__item {
	z-index: auto !important;
	grid-template-columns: 7rem 1fr;
}

.field__input,
.select__field {
	min-width: auto;
}

.form__input--floating {
	min-width: auto;
}

.indent-step {
	margin-left: 2.5rem !important;
}

.modules-save-btn {
	margin-left: 80px;
	margin-top: 14px;
}

/* Company settings page overrides form item column width */
#companyInfoPage .form__item {
	grid-template-columns: 15rem 1fr;
}

/* --- IMAGE PREVIEW (company settings upload fields) --- */
.image-preview {
	position: relative;
	overflow: hidden;
	display: inline-block;
	background-color: #fff;
	background-position: 50% 50%;
	background-size: cover;
	border: 1px solid #fff;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	transition: all .3s;
	font-size: 0;
	cursor: pointer;
}

.image-preview img {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* --- REGISTRATION PAGE --- */
.login-form {
	width: 600px;
	max-width: min(600px, 90vw);
}

.login-form .form__header {
	@media (max-width: 480px) {
		padding: 20px;
		margin: 0;
	}
}

#country-label {
	top: 7px;
	z-index: 2;
}

.country-dropdown {
	display: grid;
	place-items: center;
	position: absolute;
	right: 18px;
	top: 21px;
	z-index: 1;
}

.country-dropdown svg [stroke]:not([stroke=""]) {
  	stroke: #4A4C55;
}

.login__btn {
	width: 180px;
}

.p-viewer {
	z-index: 9999;
	position: relative;
	float: right;
	right: 15px;
}

.icon-Eye-On,
.icon-Eye-Off {
	position: relative;
	cursor: pointer;
	top: -38px;
	z-index: 99999;
}

/* --- UTILITY --- */
.hidden {
	display: none !important;
}

.disabled {
	background-color: var(--disabled);
}

.voog-logo {
	width: 100px;
}