html{scroll-behavior: smooth;}
iframe{border: 0;}
body{
height: 100vh;
width: 100%;
background-color: #F2F2F2;
@include media-breakpoint-up(md) {
background-color: #222222;
height: calc(100vh - 2rem);
padding: 1rem 0;
}
}
#app{
height: 100vh;
@include media-breakpoint-up(md) {
overflow-x: scroll;
height: calc(100vh - 2rem);
max-width: 480px;
margin: 0 auto;
background-color: #F2F2F2;
@include border-radius(8px);
position: relative;
}
}
.bold{
font-weight: bold;
}
.btn-secondary{
color: #fff !important;
}
.shadow-b-01{
@include text-shadow(2px, 2px, 4px, #00000063)
}
.logo{
display: flex;
&-md{
img{
width: 150px;
}
}
&-sm{
img{
width: 100px;
}
}
&.center{
justify-content: center;
}
}
.title_line{
display: flex;
align-items: center;
column-gap: 0.5rem;
margin-bottom: 1rem;
color: #6A707C;
&:after, &::before{
content: " ";
height: 1px;
background-color: #d6d7d7;
flex: 2;
}
}
.w-box{
background-color: #fff;
@include border-radius(0.6rem);
display: flex;
width: 100%;
@include box-shadow(1px, 3px, 10px, rgba(0,0,0,0.10));
text-decoration: none;
}
.text-gray{ color: $gray;}
.text-green{ color: #28B446;}
.bl-green{
border-left: 3px solid $secondary;
}
.bl-blue{
border-left: 3px solid #4092FF;
}
.bl-danger{
border-left: 3px solid $danger;
}
.item{
&__holder{
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 1rem;
}
&__select{
background-color: #fff;
@include border-radius(0.6rem);
padding: 1rem;
border: 1px solid #ddd;
@include transition(all, 0.2s, ease-in);
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
&.w-100{
width: 100%;
}
&.w-50{
width: calc(50% - 0.5rem) !important;
}
.title{
font-size: 0.9rem;
display: flex;
gap: 0.5rem;
border-bottom: 1px solid #ddd;
margin-bottom: 0.8rem;
padding-bottom: 0.8rem;
}
.name{
font-weight: 600;
text-align: center;
}
.desc{
font-weight: 300;
text-align: center;
color: #8d8d8d;
}
.checkbox{
display: flex;
justify-content: center;
span{
width: 22px;
height: 22px;
border: 1px solid #ddd;
display: flex;
@include border-radius(20px);
padding: 2px;
}
}
.checked{
display: none;
}
&:hover, &:has(input[type="radio"]:checked){
border:1px solid $secondary;
}
input[type="radio"] {
display: none;
}
&:has(input[type="radio"]:checked){
border-color: $secondary;
.desc{
color: $black;
}
.checkbox{
span{
border: 1px solid $secondary;
&:after{
content: "";
width: 16px;
height: 16px;
background-color: $secondary;
@include border-radius(20px);
}
}
}
.checked{
position: absolute;
width: 30px;
height: 30px;
left: 0;
top: 0;
display: flex;
justify-content: flex-start;
padding: 5px;
font-size: 1rem;
color: #fff;
&::after{
content: '';
z-index: -1;
position: absolute;
top: -29px;
left: -29px;
width: 56px;
height: 56px;
transform: rotate(45deg);
background-color: $secondary;
}
}
}
}
}