/* 
	########################################

	Attention!

	This document is protected by copyright.
	SILV - All rights reserved © 2023.

	########################################
	*/

	:root{
		--sui-box-shadow-editor: rgba(0, 0, 0, 0.10) 0px 2px 12px;
		--sui-box-shadow: rgba(25, 0, 65, 0.08) 0px 0px 0px 1px, rgba(25, 0, 65, 0.32) 0px 4px 4px -4px;
		--sui-box-shadow-hover: rgba(25, 0, 65, 0.16) 0px 0px 0px 1px, rgba(25, 0, 65, 0.32) 0px 4px 4px -4px;
		
		--sui-color-grey: #f2f2f2;
		--sui-color-blue: #3A87FD;
		--sui-color-red: #ff1c0f;

		--sui-button-blue-background: #0163E1;
		--sui-button-grey-background: #f2f2f2;

		--sui-input-padding: 9px 9px 9px 0;
		--sui-input-background: #FFF;
		--sui-input-border-color: #DEDEDE;
	}

	/* */

	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

	body{
		font-family: 'Inter', sans-serif;
		margin: 0;
		background: #FFF; /*F0F0F0*/ /* F6F6F6 */
		color: #010101;
	}

	* {
	    box-sizing: border-box;
	}

	a {
	  text-decoration: none;
	}

	.hide_element{ 
		display: none;
	}

	input{
		-moz-appearance:none;
		-webkit-appearance:none;
		appearance:none;
	}

	/* */

	.header {
	    width: 100%;
	    height: 62px;
	    padding: 16px 24px;
	    background: #FFF;
	    position: fixed;
	    left: 0;
	    top: 0;
	    right: 0;
	    z-index: 999999;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    box-shadow: 0 0 4px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.1);
	}

	.logo{
		box-sizing: unset;
		width: 65px;
	}

	/**/

	.container_erro{
		width: 100%;
		height: auto;
		padding: 16px 6px;
		text-align: center;
		font-size: 13px;
		color: #FFF;
		background: #ff4a4a;
		position: fixed;
		left: 0; top: 0; right: 0;
		z-index: 99999999;
	}

	.container_erro p{
		margin: 0;
	}

	.container_sucess{
		width: 100%;
		height: auto;
		padding: 16px 6px;
		text-align: center;
		font-size: 13px;
		color: #FFF;
		background: #24b64e;
		position: fixed;
		left: 0; top: 0; right: 0;
		z-index: 99999999;
	}

	.container_sucess p{
		margin: 0;
	}

	/* */

	.auth{
		position: relative;
	    height: 100vh;
	    padding-top: 62px;
	    padding-block: 24px;
	    display: flex;
	    flex-wrap: wrap;
	    align-content: center;
	    justify-content: center;
	}

	.container{
		width: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.brand_container{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.auth-title{
		font-size: 22px;
		text-align: center;
		width: 100%;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.auth-text{
		font-size: 13px;
		text-align: center;
		width: 100%;
		color: #6A6A6A;
		font-weight: 400;
		margin: 0;
		margin-bottom: 30px;
	}

	.container_auth{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px 0;
	}

	form{
		width: 370px;
	}

	.auth-other-type{
		width: 370px;
	}

	.sui-information-input {
	    position: relative;
	    display: flex;
	    align-items: center;
	    font-size: 11px;
	    text-transform: uppercase;
	    color: #6A6A6A;
	    margin: 0;
	    width: 87%;
	    padding: 13px 0 4px 0;
	    z-index: 5;
	}

	.sui-input-text-container{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input-eye{
		width: 17px;
		position: absolute;
		padding: 10px;
		box-sizing: unset;
		right: 0;
		z-index: 9;
		cursor: pointer;
		opacity: .7;
	}
	.input-eye:hover{
		opacity: 1;
	}

	.sui-input-text{
	    -moz-appearance:none;
	    -webkit-appearance:none;
	    appearance:none;
	    border: none;
	    -webkit-border: none;
		border-bottom: 1px solid var(--sui-input-border-color); /* EDEDED */
		width: 100%;
		font-size: 14px;
		padding: var(--sui-input-padding) ; /* only 8px */
		margin-bottom: 2px;
		outline: none;
		border-radius: 0px;
		-webkit-border-radius: 0px;
		overflow: none;
		font-family: 'Inter', sans-serif;
		height: auto;
		background: var(--sui-input-background);
		resize: none;
	}

	.sui-button{
		width: 100%;
		height: 50px;
	    -moz-appearance:none;
	    -webkit-appearance:none;
	    appearance:none;
	    border: none;
	    text-decoration: none;
	    -webkit-border: none;
	    background: #010101;
	    text-align: center;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #FFF;
	    font-size: 14px;
	    font-weight: 500;
	    margin-top: 30px;
	    cursor: pointer;
	    position: relative;
	    transition: all 0.3s;
	}

	#auth, #recovery{
		background: var(--sui-color-grey);
		color: #cccccc;
		cursor: not-allowed;
	}

	.auth-forget-data{
		font-size: 11px;
		color: #7e7e7e;
		width: 100%;
		text-align: center;
		margin: 14px 0;
		position: relative;
		display: block;
		cursor: pointer;
		font-weight: 400;
	}

	.auth-legal{
		position: absolute;
		bottom: 0;
		width: 100%;
		max-width: 635px;
		font-size: 10px;
		color: #767676;
		margin: 0;
		text-align: center;
		opacity: 0.8;
		margin: 35px 0;
	}

	.auth-legal a{
		text-decoration: none;
		color: #767676;
		border-bottom: 1px solid #76767640;
	}
	.auth-legal a:hover{
		border-bottom: 1px solid #767676;
	}

	#auth_button{
		display: none;
	}

	/* :hover; */

	.sui-input-text:hover{
		border-bottom: 1px solid #010101;
		border-radius: 0px;
		-webkit-border-radius: 0px;
	}

	/* :focus */

	.sui-input-text:focus{
		border-bottom: 1px solid var(--sui-color-blue);
		border-radius: 0px;
		-webkit-border-radius: 0px;
		outline: none;
	}

	/* */

	.sui-erro-form {
	    position: relative;
	    display: none;
	    align-items: center;
	    width: 100%;
	    margin: 6px 0 10px 0;
	    color: var(--sui-color-red);
	    font-size: 13px;
	}

	.sui-erro-form img {
	    box-sizing: unset;
	    width: 15px;
	    padding: 0 5px 0 0;
	}

	/**/

	warning{
	    font-size: 12px;
	    max-width: 500px;
	    text-align: center;
	    margin: 10px 0;
	    background: #ff4a4a;
	    border-radius: 6px;
	    padding: 14px;
	    color: #FFF;
	}

	/**/

	.auth-options{
		width: 100%;
		height: 100svh;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		background: transparent;
		position: fixed;
		left: 0; top: 0; right: 0;
		padding-top: 20px;
		background: #FFF;
		gap: 40px;
	}
	.auth-options a{
		color: #000;
	}

	.auth-option{
		width: 200px;
		height: 200px;
		border: 1px solid #dedede;
		border-radius: 12px;
		cursor: pointer;
		text-decoration: none;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
		color: #000;
		background: #FFF;
	}
	.auth-option:hover{
		filter: invert(1);
		box-shadow: var(--sui-box-shadow-hover);
	}

	.auth-option p{
		width: 100%;
		text-align: center;
		margin: 10px 0;
	}

	.auth-option-out{
		position: fixed;
		bottom: 20px; left: 0; right: 0;
		color: red;
		text-decoration: none;
		width: 100%;
		text-align: center;
		z-index: 9999;
		font-size: 12px;
	}
	.auth-option-out:hover{
		opacity: .7;
	}

	/* */
	/* ######################## MOBILE ######################## */
	/* */

	@media only screen and (max-width: 800px) {
		.container_auth, .auth-or-option{
			flex-wrap: wrap;
		}

		.container_auth{
			width: 100%;
			padding: 0 6vw;
		}

		form{
			width: 100%;
		}

		.auth-legal{
			margin: 0;
			padding: 20px 6vw;
			width: 100%;
		}

		#text_page_auth{
			padding: 0 12vw;
		}

		warning{
			width: calc(100% - 12vw);
		}
	}