.blogbyte-radio-image { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .blogbyte-radio-image img { max-width: 100px; } .blogbyte-radio-image input[type="radio"] { display: none; } .blogbyte-radio-image input[type="radio"] + label:hover { opacity: 0.7; } .blogbyte-radio-image input[type="radio"]:checked + label { border: 1px solid #3858e9; } #blogbyte-settings-metabox-container { display: grid; gap: 10px; } .blogbyte-meta-row { display: grid; align-items: center; gap: 10px; } .blogbyte-meta-row + .blogbyte-meta-row { margin-top: 24px; padding-top: 14px; border-top: 1px solid #ede0e0; } .blogbyte-meta-row.g-0 { gap: 0; } .blogbyte-meta-row h4 { margin: 0; } .blogbyte-meta-desc { margin: 0; color: #787878; } .blogbyte-meta-row select { min-width: 30%; width: auto; } .blogbyte-available-post-metas p { margin: 0; } .blogbyte-meta-options-wrapper { display: flex; flex-direction: column; overflow: hidden; padding: 20px 0; border-top: 5px solid #3858e9; background-color: #ffffff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); } @media (min-width: 576px) { .blogbyte-meta-options-wrapper { flex-direction: row; } } .blogbyte-meta-tab-header { position: relative; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 5px solid #3858e9; } @media (min-width: 576px) { .blogbyte-meta-tab-header { flex-direction: column; flex-basis: 20%; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .blogbyte-meta-tab-content { flex-basis: 80%; } } .blogbyte-meta-tab-header:after { content: ""; position: absolute; display: block; top: -20px; bottom: -20px; right: 0; width: 1px; background-color: #eeeeee; } .blogbyte-tab-title { display: block; padding: 8px 16px; text-decoration: none; border-radius: 4px; } .blogbyte-tab-title.is-active { background-color: #3858e9; } .blogbyte-tab-title.is-active h3 { color: #fff; } .blogbyte-tab-title:not(.is-active):hover { color: #3858e9; background-color: #3858e910; } .blogbyte-tab-title h3 { font-size: 13px; margin: 0; } .blogbyte-meta-tab-content { padding: 0 20px; flex-grow: 1; } .blogbyte-tab-content { display: none; } .blogbyte-tab-content.is-active { display: block; }