.bg-mask background-color: black z-index: 1 filter: opacity(20%) position: fixed width: 100% height: 100% left: 0 top: 0 display: none @mixin modal z-index: 2 display: none position: fixed width: 500px top: 50% left: 50% transform: translate(-50%, -50%) background-color: $color-bright padding: 20px 20px 10px 20px color: $color-secondary & &__head margin-bottom: 20px &::after @include clear & &__title font-weight: bold font-size: 1.2em float: left & &__close-button float: right cursor: pointer & &__body & &__confirm-button float: right .mark-modal @include modal & input[type="radio"] margin-right: 0 & &__rating-star display: inline float: left position: relative left: -3px & &__status-radio float: right & ul margin-bottom: 0 & li, & label display: inline & input[type="radio"] position: relative top: 1px & &__clear @include clear & &__content-input, & form textarea height: 200px width: 100% margin-top: 5px margin-bottom: 5px resize: vertical & &__tag // margin-top: 10px margin-bottom: 20px & &__option margin-bottom: 24px &::after @include clear & &__visibility-radio float: left & ul, & li, & label display: inline & label font-size: normal & input[type="radio"] position: relative top: 2px & &__share-checkbox float: right & input[type="checkbox"] position: relative top: 2px .confirm-modal @include modal .announcement-modal @include modal & &__body overflow-y: auto max-height: 64vh & .announcement &__title display: inline-block &__datetime color: $color-light margin-left: 10px &__content word-break: break-all .add-to-list-modal @include modal // Small devices (landscape phones, 576px and up) @media (max-width: $small-devices) .mark-modal, .confirm-modal, .announcement-modal .add-to-list-modal width: 100% // Medium devices (tablets, 768px and up) @media (max-width: $medium-devices) pass // Large devices (desktops, 992px and up) @media (max-width: $large-devices) pass // Extra large devices (large desktops, 1200px and up) @media (max-width: $x-large-devices) pass