:root {
--transition-1: all 0.3s ease-in-out;
--transition-2: all 0.1s ease-in-out;
}
.container {
}
.header {
text-align: center;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-touch-callout: none;
}
.no_result {
margin: 0.15rem auto;
padding: 0.6rem;
max-width: 280px;
border: 0.05rem solid #e3e3e3 !important;
list-style: none;
text-align: left;
color:#108EE9;
transition: all 0.1s ease-in-out;
background-color: #fff;
outline: none;
font-size: 1rem;
}
.no_result:hover {
cursor: default;
background-color: #fff;
border: 0.05rem solid #e3e3e3;
}
.no_result:focus {
cursor: default;
background-color: #fff;
border: 0.05rem solid #e3e3e3;
}
h4 {
margin-bottom: 2px;
}
h4::selection {
}
.mode {
margin-top: 20px;
}
.toggele {
display: flex;
position: absolute;
border: 1px solid #ffc6c6;
height: 35px;
width: 120px;
border-radius: 50px;
justify-content: flex-start;
align-content: center;
transition: var(--transition-1);
}
.toggeler {
display: grid;
cursor: pointer;
background-color: rgba(255, 198, 198, 1);
color: #fff;
height: 25px;
width: 60px;
border-radius: 50px;
margin: 5px;
text-align: center;
align-content: center;
align-self: flex-start;
transition: var(--transition-1);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-touch-callout: none;
}
.toggeler:hover {
width: 70px;
background-color: #108EE9;
}
.toggeler::selection {
color: #fff;
}
.strict {
display: inline;
}
.loose {
display: inline;
}
.city {
font-size: 26px;
border-radius: 20px;
padding: 10px 30px;
display: inline-block;
background-color: #f7b01c;
color: #fff;
margin-top: 20px;
}
.selection {
margin-top: 2vh;
margin-bottom: 2vh;
font-weight: bold;
transition: var(--transition-1);
}
.selection::selection {
color: #64ceaa;
}
@media only screen and (max-width: 600px) {
.selection {
margin-top: 5vh;
margin-bottom: 5vh;
}
}
@media only screen and (max-height: 500px) {
}