.image_spacer { min-width: 64px; max-width: 64px; object-fit: cover; border-radius: 4px; } .name { flex-grow: 1; font-weight: 600; } .studio { max-width: 120px; min-width: 120px; } .rating { max-width: 24px; min-width: 24px; } .category { max-width: 24px; min-width: 24px; } .selected { border-radius: 100px; height: 20px; width: 4px; background-color: #A6BB8D; position: absolute; transform: translateX(-12px); } .wrapper { display: flex; } .season_container .season_header { display: flex; flex-direction: row; font-weight: 600; font-size: 20px; margin-bottom: 35px; cursor: pointer; } .season_container .season_header .title { flex-grow: 1; } .season_container .info { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; } .season_container .info .row { width: 100%; font-size: 20px; display: flex; align-items: center; } .info .row .identifier { flex-grow: 1; } .value { border: 0; text-align: left; } .info .row .value { max-width: 50%; font-weight: 600; min-width: 24px; height: 24px; font-size: 20px; text-align: right; } textarea.value { height: 300px; } .change_container { border-radius: 4px; padding: 20px; font-size: 20px; position: fixed; top: 100vh; display: flex; flex-direction: row; gap: 20px; transform: translateY(calc(-100% - 10px)); background-color: #FD8A8A; border: 1px solid #FF597B; align-items: center; font-weight: 600; animation: changeanim 500ms ease-in-out 0ms 1 forwards; } @keyframes changeanim { 0% { left: -400px; } 100% { left: 10px; } } .filter_input { margin-bottom: 20px; width: 100%; height: 64px; font-size: 20px; } .filter_input input { width: 100%; height: 31px; font-size: 20px; } .options_container .filter_range { margin-bottom: 20px; } .create_button { width: 100%; height: 64px; border-radius: 100px !important; color: #A6BB8D !important; font-size: 20px; font-family: 'Open Sans', sans-serif; border: 1px solid #A6BB8D !important; margin-top: 20px !important; } .delete_button { width: 100%; height: 64px; border-radius: 100px !important; color: #FF597B !important; font-size: 20px; font-family: 'Open Sans', sans-serif; border: 1px solid #FF597B !important; } .seasons { border-bottom: 1px solid var(--c-border); margin-bottom: 40px; } .season_container .title { font-size: 20px; margin-bottom: 10px; } .season_container .season_title { font-weight: 600; font-family: 'Open Sans', sans-serif; border: 0; font-size: 20px; margin-right: auto; } .info .value { font-size: 15px; } .create_notes { font-size: 15px; margin-bottom: 30px; } .season_container { width: calc((100vw - 860px) / 2); margin-left: 20px; border: 1px solid var(--c-border); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; height: max-content; position: sticky; top: 10px; overflow-y: scroll; max-height: 93vh; } .season_container .header { display: flex; flex-direction: row; color: #000; gap: 20px; margin-bottom: 30px; transform: translateX(-5px); } .season_container .header .item { display: flex; flex-direction: column; justify-content: center; } .season_container .header .item .selected_item { border-radius: 100px; height: 4px; width: 20px; background-color: #A6BB8D; margin-left: auto; margin-right: auto; margin-top: 5px; } .season_container .header .item .icon_button { margin-bottom: auto; } .error { color: #FF597B; font-size: 20px; width: 100%; text-align: center; margin-bottom: 20px; } @media only screen and (max-width: 1370px){ .season_container { position: relative; width: 760px; margin-left: auto; margin-right: auto; max-height: max-content; margin-bottom: 20px; overflow-y: visible; } } @media only screen and (max-width: 830px) { .season_container { margin-bottom: 100px; max-width: 90vw; min-width: none; } } .scontainer { display: flex; flex-direction: column; gap: 10px; }