@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	src: local(''),
		url('../font/poppins-v20-latin-700.woff2') format('woff2'),
		url('../font/poppins-v20-latin-700.woff') format('woff');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../font/inter-v12-latin-regular.woff2') format('woff2'),
		url('../font/poppins-v20-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: local(''),
		url('../font/inter-v12-latin-500.woff2') format('woff2'),
		url('../font/poppins-v20-latin-500.woff') format('woff');
}
:root {
    --color-bg-blue: #99caff;
    --color-bg-bluelight: #e0efff;
    --color-bg-chip-green: #f7fcf7;
    --color-bg-chip-red: #fef6f6;
    --color-bg-chip-yellow: #fefaf5;
    --color-bg-donut-rest: #f6f3ea;
    --color-bg-field-group: #f0f0f0;
    --color-bg-form: #fafafa;
    --color-bg-gray: #f5f5f5;
    --color-bg-red: #eb4e3d;
    --color-bg-reddark: #e72c18;
    --color-bg-tab-hover: #e6e6e6;
    --color-bg-tinted-data: #e1d7b7;
    --color-bg-tinted-hover: #fcfbf8;
    --color-bg-tinted-light: #f9f7f1;
    --color-bg-tinted-medium: #f0ebdb;
    --color-bg-tooltip-dark: #4d4d4d;
    --color-bg-white: #ffffff;
    --color-border: #cccccc;
    --color-border-chart: #f0f0f0;
    --color-border-tab: #ebebeb;
    --color-chart-9box-green: #e1f4e1;
    --color-chart-9box-greenlight: #f0faf0;
    --color-chart-9box-orange: #fce8cf;
    --color-chart-9box-red: #fbdeda;
    --color-chart-9box-redlight: #fdeeed;
    --color-chart-9box-stroke: #d7d7d7;
    --color-chart-line-avg: #a005ff;
    --color-chart-orange: #f2a33c;
    --color-chart-pink: #a005ff;
    --color-chart-stroke: #ebebeb;
    --color-scrollbar: #666666;
    --color-text-accent: #0063cc;
    --color-text-accentlight: #007aff;
    --color-text-black: #000000;
    --color-text-disabled: #cccccc;
    --color-text-filter-header: #71717a;
    --color-text-green: #399339;
    --color-text-heart: #f18074;
    --color-text-hint: #808080;
    --color-text-hoverlight: #666666;
    --color-text-navigation: #483e1e;
    --color-text-ondark: #ffffff;
    --color-text-orange: #ef8e10;
    --color-text-pink: #a005ff;
    --color-text-red: #8b1a0e;
    --color-text-regular: #1a1a1a;
    --color-text-regular: #241f0f;
    --color-text-tintedlabel: #6c5d2d;
    --color-text-yellow: #bf720d;
    --color-text-yellow: #f6bd73;    
}
body{
    margin: 0px;
}
button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    gap: 4px;
    min-width: 100px;
    height: 28px;
    right: 0px;
    background: var(--color-text-accentlight);
    border-radius: 7px;
    color: var(--color-text-ondark);
    border: none;
    position: absolute;
    cursor:pointer;
}
button.small{
    min-width: 54px;
}
button:hover{ /*To be tested in all pages*/
    background: var(--color-text-accent);
}
footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;   
    position: relative;
    width: 100%;
    padding-top: 20px;
}
footer a{
    color: var(--color-text-tintedlabel);
    font-family: 'Inter';
    font-size: 10px;
}
form{
    margin-top: -12px;
    position: relative;
    margin-left: auto;
}
input::-ms-reveal,
input::-ms-clear {
    display: none;
}
.left h1{
    margin-top: 0px;
    padding-top: 22.7vh;
    margin-left: 6.4%;
    margin-right: 6.4%;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 3vw;
    line-height: 4vw;
    letter-spacing: 0.8px;
    color: var(--color-text-ondark); 
}
.left {
    position: relative;
    overflow: hidden;
    min-height: 50px;
    height: 100%;
    background-color: var(--color-text-black);
}
.imgLeft{
    position: absolute;
    top: 0px;
    min-width: 100%;
    min-height: 100%;
}
.left .logo{
    left: 6.4%;
    position: relative;
}
.password-container{
    position: relative;   
    display: flex;
    width: 100%;
}
.right{
    float: right;
    width: 770px;
    min-height: 50px;
    height: 100%;
    background-color: var(--color-bg-tinted-light);
}
.rightTop{
    height: calc(100% - 40px);
    display: flex;
    justify-content: center;
    overflow:auto;
}
.fa-eye{
    position: absolute;
    height: 38px;
    right: 4%;
    width: 25px;
    cursor: pointer;
    color: lightgray;
    background: url("../img/showpassword.svg") no-repeat scroll;
    background-position-y: center;
  }
  .fa-eye-slash {
    background: url("../img/hidepassword.svg") no-repeat scroll !important;
    background-position-y: center !important;
  }
  .innerloginPopup{
    padding: 40px;
}
.loginPopup{
    background: var(--color-bg-white);
    border-radius: 28px;
    margin-top: auto;
    margin-bottom: auto;
    }
.loginPopupTop{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 338px;
}
.loginPopupTop.Img{
    gap: 16px;
}
.loginPopupTop p{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: -0.24px;
    font-feature-settings: 'case' on;
    color: var(--color-text-regular);
}
.loginPopupTop a{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.08px;
    color: var(--color-text-accent);
    text-decoration: none;
}
.loginPopupTop .bigText{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.36px;
    color: var(--color-text-black);
}
.loginPopupTop .redtext{
    width: 338px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    align-items: center;
    color: var(--color-text-red);
    margin: 0;
}
input{
    border-radius: 7px;
    border: 0.5px solid var(--color-border);
    width: 100%;
    height: 36px;
    font-family: 'Inter';
    font-size: 17px;
    padding-left: 12px;
}
.loginPopupMiddle{
    display: flex;
    flex-direction: row;
    gap: 4px;   
    width: 338px;
}
.loginContainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 338px;
    height: 28px;
    top: 12px;
    position: relative;
}
.redtext.errorLogin {
    display:none;
}
.loginlabel{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.24px;
    font-feature-settings: 'case' on;
}
.label221{
    width: 221px;
}
.label246{
    width: 246px;
}
.label303{
    max-width: 303px;
}
.label316{
  width: 316px;
}
.labellink{
    color: var(--color-text-accent);
    text-decoration: none;
}
button.disabled {
    background-color: #CCE5FF;
    color: var(--color-text-disabled);
}
#changeCaptcha {
	cursor:pointer;
}
.loginPopupBottomElements{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    margin-bottom: 32px;
}
.checkbox{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 338px;
    flex: none;
    flex-grow: 0;
}
.checkbox input{
    width: 19px;
    height: 19px;
    border-radius: 3px;
}
.checkbox input:checked{
    accent-color: var(--color-text-accentlight);
}
.checkbox .labels{
    display: flex;
    align-items: center;
    height: 20px;
    gap: 5px;
}
.recaptcha {
    background: var(--color-bg-form);
    border: 1px solid #D6D6D6;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border-color: var(--color-text-hint);
}
.recaptcha img {
    position: relative;
    width: 50%;
    margin-left: 84.5px;
}
.captchabox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 44px;
    width:100%;
    justify-content: flex-end;
}
.captchabox input {
    height: 19px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding-left: 6px;
    width: 100px;
}
  @media screen and (max-width: 1024px) {
    .left {
        display: none;
    }
    .rightTop {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .right{
        width: 100%;
    }
}