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; } } } } }