:root {
--font: 'Riviera Nights';
--bg-color: #fbfbfb;
--bg-color2: #fff;
--coolGrey: #53565A;
--txt-color: #282823;
}

body{ 
font-family: var(--font);
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--bg-color);
margin: 0;
text-align: left;
color: var(--txt-color);
}

.headLogo{
  text-align:center;
  margin-top: -25px;

}

#headLogo{
width: 100%;
max-width: 150px;
margin: 0 auto 4vh auto;
display: block;
}

.title{
display: flex;
justify-content: center;
}

#titleLogo{
width: 8vw;
min-width: 150px;
margin-top: 6vh;
margin-bottom: 4vh;
}

form{
margin-top: 5vh;
margin-bottom: 10vh;
background-color: var(--bg-color2);
padding: 40px 20px 40px 20px;
}

.ipt-row{
margin: 20px 0;
}

label{
text-transform: uppercase;
letter-spacing: 0.10em;
font-size: 12px;
}

input, select{
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
text-transform: uppercase;
width: 100%;
padding: 10px 0 14px 0;
border: 0;
border-bottom: 1px solid rgba(40, 40, 35, 0.7);
letter-spacing: 0.12em;
padding-left: 0;
font-size: 12px;
text-align: left;
color: var(--txt-color);
font-family: var(--font);
}

input[type="date"]{
text-align: left !important;
}

input::-webkit-date-and-time-value {
text-align: left;
}

input::placeholder{
color: grey;
}

input:focus-visible, select:focus-visible{
outline: none;
}

select{
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2IiB3aWR0aD0iMTAiIGhlaWdodD0iNiI+PHBhdGggZD0iTTEgMWw0IDQgNC00IiBzdHJva2U9InJnYmEoNDAsIDQwLCAzNSwgMC43KSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=') no-repeat right 0.75rem center/10px 6px;
cursor: pointer;
}

.default-selected{
color: grey;
}

option{
color: var(--txt-color);
}

select:focus{
outline: none;
}

#error{
background-color: #961313;
color: white;
padding: 4px 16px;
font-size: 14px;
}

.btn-row{
display: flex;
justify-content: center;
}

.btn{
width: 200px;
height: 50px;
color: white;
margin-top: 20px;
background-color: var(--txt-color);
border: 0;
transition: 0.3s;
text-align: center;
}

.btn:hover{
cursor: pointer;
background-color: var(--coolGrey);
transition: 0.3s;
}

.btn:focus-visible{
cursor: pointer;
background-color: var(--coolGrey);
transition: 0.3s;
}

.legal{
font-size: 12px;
}

.legal-details{
margin: 30px 0 30px 0; 
}

.legal-mandatory{
margin: 10px 0 10px 0; 
}

a{
color: var(--txt-color);
}

input[type="radio"],
input[type="checkbox"]{
width: auto;
padding: 0;
border: 0;
border-bottom: 0;
background: transparent;
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
text-transform: none;
}

.radio-group label{
display: flex;
align-items: center;
gap: 10px;
text-transform: none;
letter-spacing: 0.08em;
font-size: 12px;
margin: 10px 0;
}

.radio-group input[type="radio"]{
margin: 0;
}

@media only screen and (min-width: 700px){
body{
background-image: url("https://image.news.ruinart.com/lib/fe941373776604797c/m/1/d353f412-6f63-41ee-8925-e1dc659cdad9.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

form{
max-width: 600px;
padding: 50px 100px 50px 100px;
}

#headLogo{
margin-top: 6vh;
}
}

.description{
  text-align: justify;
}

label.legal-label { 
  text-transform: none !important; 
}

label.legal-label .legal-text{
  text-transform: none !important;
}

.confirmation-block{
  background-color: var(--bg-color2);
  padding: 40px 20px;
  margin-top: 5vh;
}