:root {
    --opacity-bg: #0000005c;
    --bg-main: #fbfbfd;
    --bg-gray: #e7eaef8f;
    --title-color: #202c4b;
    --text-color: #6a7287;
    --text-gray-color: #9CA1AF;
    --white: #ffffff;
    --dark-white: #ffffff;
    --box-shadow: 0px 4.4px 12px -1px #dedede5c;
    --border: 1px solid #e7e7e7;
    --border-radius-5: 5px;
    --border-radius-10: 10px;
    --border-radius-15: 15px;
    --border-radius-20: 20px;
    --border-radius-round: 50%;
    --green-light: #e8f8e7;
    --green-dark: #1ABE17;
    --blue-light: #e7f1fc;
    --blue-dark: #0F65CD;
    --yellow-light: #fef8ea;
    --yellow-dark: #EAB300;
    --red-light: #fde9ed;
    --red-dark: #E82646;
    --dg-blue: #315ef7;
    --dg-light-blue: #4771fd;
    --bar-blue: #7c97f2;
    --bar-green: #56d47f;
    --bar-red: #f67062;
    --img-filter: invert(46%) sepia(7%) saturate(1129%) hue-rotate(186deg) brightness(93%) contrast(87%);
    --black: #000000;
}

* {
    user-select: none;
}


body {
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    display: flex;
}

#Logo {
    position: absolute;
    width: 130px;
    top: 20px;
    left: 20px;
}

form {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

h1 {
    font-weight: 600;
    font-size: 24px;
    position: relative;
}

    h1::before {
        content: "";
        position: absolute;
    }

#Bg {
    width: 50%;
    height: 100vh;
    object-fit: cover;
}

form > label {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 350px;
    color: var(--title-color);
}

    form > label > :is( input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"], input[type="email"], input[type="datetime-local"], select ) {
        height: 50px;
        width: 100%;
        padding: 12px 20px;
        border-radius: 12px;
        border: 0;
        outline: 0;
        background: #0000000d;
        font-size: 13px;
        color: #0000009c;
    }

    form > label:last-of-type{
		position:relative;
    }

		form > label:last-of-type i {
			position: absolute;
			right: 10px;
			bottom: 18px;
			font-size: 14px;
			cursor:pointer;
			z-index:1;
		}


.btn, .btn-s {
    color: var(--dark-white);
    width: max-content;
    height: 41px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    background: var(--dg-blue);
    border-radius: var(--border-radius-15);
    transition: 200ms;
    cursor: pointer;
    white-space: nowrap;
}


form b {
    border-bottom: 1px solid var(--blue-dark);
    color: var(--blue-dark);
    cursor: pointer;
}

body > p {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 9px;
}

form img {
    display: none;
}


/*
:root {
	--opacity-bg: #0000005c;
	--bg-main: #fbfbfd;
	--bg-gray: #e7eaef8f;
	--title-color: #202c4b;
	--text-color: #6a7287;
	--text-gray-color: #9CA1AF;
	--white: #ffffff;
	--dark-white: #ffffff;
	--box-shadow: 0px 4.4px 12px -1px #dedede5c;
	--border: 1px solid #e7e7e7;
	--border-radius-5: 5px;
	--border-radius-10: 10px;
	--border-radius-15: 15px;
	--border-radius-20: 20px;
	--border-radius-round: 50%;
	--green-light: #e8f8e7;
	--green-dark: #1ABE17;
	--blue-light: #e7f1fc;
	--blue-dark: #0F65CD;
	--yellow-light: #fef8ea;
	--yellow-dark: #EAB300;
	--red-light: #fde9ed;
	--red-dark: #E82646;
	--dg-blue: #315ef7;
	--dg-light-blue: #4771fd;
	--bar-blue: #7c97f2;
	--bar-green: #56d47f;
	--bar-red: #f67062;
	--img-filter: invert(46%) sepia(7%) saturate(1129%) hue-rotate(186deg) brightness(93%) contrast(87%);
	--black: #000000;
}

* {
	user-select: none;
}


body {
	max-height: 100vh;
	max-width: 100vw;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

#Logo {
	position: absolute;
	width: 130px;
	top: 20px;
	left: 20px;
	z-index:2;
	display:none;
}

form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 14px;
	position: relative;
	z-index: 1;
	background: var(--dark-white);
	height: max-content;
	width: max-content;
	padding: 2rem;
	border-radius: 15px;
}

h1 {
	font-weight: 600;
	font-size: 24px;
	position: relative;
}

	h1::before {
		content: "";
		position: absolute;
	}

#Bg {
	position: fixed;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	filter: brightness(0.6);
}

form > label {
	font-size: 11px;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 350px;
	color: var(--title-color);
}

	form > label > :is( input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"], input[type="email"], input[type="datetime-local"], select ) {
		height: 50px;
		width: 100%;
		padding: 12px 20px;
		border-radius: 12px;
		border: 0;
		outline: 0;
		background: #0000000d;
		font-size: 13px;
		color: #0000009c;
	}

.btn, .btn-s {
	color: var(--dark-white);
	width: max-content;
	height: 41px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 14px;
	background: var(--dg-blue);
	border-radius: var(--border-radius-15);
	transition: 200ms;
	cursor: pointer;
	white-space: nowrap;
}


form b {
	border-bottom: 1px solid var(--blue-dark);
	color: var(--blue-dark);
	cursor: pointer;
}

body > p {
	position: absolute;
	bottom: 20px;
	left: 20px;
	font-size: 9px;
}

form img {
	width: 186px;
	margin-bottom: 13px;
}*/



@media(max-width:1400px) {
}

@media(max-width:1200px) {
}

@media(max-width:992px) {
}

@media(max-width:768px) {
	#Bg {
		display:none;
	}
	form {
		width: 100%;
	}
	
}

@media(max-width:576px) {
	form > label {
		width: 300px;
	}
}