div.my-container {
--main-color: #F9FAFB;
--box-color:#F9FAFB;
--box-border-color:#E6E6E6;
--title-color:#111827;
--title-size: 50px;
--title-weight: 900;
--box-text-color: #111827;
--box-text-size: 23px;
--button-color: #111827;
--button-text-color: #ffffff;
--button-text-size: 22px;
--text-weight: 1000;
--font-family: 'Montserrat'
}
body.personalized {
min-height: 90vh;
}
div.my-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--font-family)
}
div.my-container section {
display: flex;
flex-direction: column;
margin-bottom: 80px;
padding: 15px;
}
div.my-container section.locale {
width: 400px;
}
div.my-container section.roomsChoice, section.areaValues {
width: 500px;
}
div.my-container section.result {
width: 600px;
}
div.my-container h1 {
color: var(--title-color);
font-size: var(--title-size);
font-family: var(--font-family);
font-weight: var(--title-weight);
}
div.my-container div.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: var(--box-color);
border: 0.5px solid var(--box-border-color);
border-color: '#b4b1b1';
border-radius: 5px;
backdrop-filter: blur(4px);
height: 150px;
padding: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
div.my-container div.box div {
display: flex;
flex-direction: row;
align-items: center;
}
div.my-container label {
color: var(--box-text-color);
font-size: var(--box-text-size);
font-weight: var(--text-weight);
}
div.my-container div.box select {
width: 100px;
height: 40px;
border: 0.5px solid var(--box-border-color);
box-sizing: border-box;
backdrop-filter: blur(10px);
border-radius: 5px;
text-align: center;
text-align-last: center;
padding: 10px;
background-color: var(--box-color);
}
div.my-container button, div.my-container a {
color: var(--button-text-color);
background-color: var(--button-color);
font-size: var(--button-text-size);
font-family: var(--font-family);
border: 0.5px solid var(--button-color);
box-sizing: border-box;
backdrop-filter: blur(5px);
border-radius: 5px;
height: 55px;
font-size: var(--button-text-size);
font-weight: var(--text-weight);
cursor: pointer;
}
div.my-container button#next2, button#next3 {
margin-top: 30px;
} div.my-container span {
color: var(--box-text-color);
font-weight: 900;
cursor: pointer;
}
div.my-container span:hover {
opacity: 0.8;
}
div.my-container select {
outline: none;
}
div.my-container label {
margin-bottom: 10px;
}
div.my-container label.label {
margin-bottom: 0px;
}
div.my-container section.areaValues label, div.my-container section.result label {
align-self: center;
}
div.my-container input {
border: none;
border-bottom: 0.5px solid rgb(129, 129, 129);
outline: none;
color: var(--box-text-color);
font-size: var(--box-text-size);
font-weight: var(--text-weight);
width: 120px;
text-align: center;
}
div.my-container input[type=number]::-webkit-inner-spin-button { 
-webkit-appearance: none;
}
div.my-container input[type=number] { 
-moz-appearance: textfield;
appearance: textfield;
}
div.my-container div#rooms {
flex-direction: row;
align-items: center;
height:70px;
margin: 0px;
margin-bottom: 15px;
}
div.my-container div#results {
flex-direction: row;
align-items: center;
height:70px;
margin: 0px;
margin-bottom: 15px;
}
div.my-container section.result button {
margin-bottom: 10px;
}
div.my-container section.result button.restart {
margin-top: 30px;
}
div.my-container a {
width: 100%;
text-align: center;
border: none
}
div.my-container select::-webkit-scrollbar {
width: 8px; }
div.my-container select::-webkit-scrollbar-track {
background: #ffffff; }
div.my-container select::-webkit-scrollbar-thumb {
background-color: rgb(192, 192, 192); border-radius: 20px; border: 1px solid #ffffff; }
.remove {
color: rgb(255, 14, 14) !important;
}
.add {
color: rgb(0, 190, 0) !important;
}
p#obs {
font-size: 11px;
color: gray;
}
@media (max-width: 800px) {
div.my-container {
--title-size: 45px;
}
}
@media (max-width: 600px) {
div.my-container {
--title-size: 30px;
--title-weight: 900;
--box-text-size: 20px;
--button-text-size: 20px;
--text-weight: 700;
}
div.my-container section.locale, section.roomsChoice, section.areaValues, section.result {
width: 100%;
padding: 20px;
}
div.my-container section.locale {
max-width: 400px;
}
div.my-container section.roomsChoice, section.areaValues {
max-width: 500px;
width: 100%;
}
div.my-container section.result {
max-width: 600px;
width: 100%;
}
}