.wp-block.gosuite-video {
    align-items: flex-start;
    border: 1px solid #000;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 485px;
    padding: 25px;
    width: auto;
}

.wp-block.gosuite-video.video-selected {
    align-items: normal;
    border: none;
    max-width: unset;
}

.gosuite-video h3 {
    align-self: center;
    display: flex;
}

.gosuite-video h3:before {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M18 10.0468H10.0622V13.7687L9.99295 13.8129H10.0622V14.3992H8.98366C6.00577 14.3992 3.58539 11.9769 3.58539 9.00096C3.58539 6.11535 5.86351 3.75841 8.71451 3.61615C8.80487 3.61231 8.8933 3.60269 8.98558 3.60269C10.8215 3.60269 12.4441 4.52547 13.4207 5.92887H17.429C16.1698 2.4819 12.8593 0.0153809 8.98366 0.0153809C8.8933 0.0153809 8.80295 0.0192258 8.71259 0.0230707C3.88529 0.165333 0 4.13714 0 8.99904C0 13.9532 4.0314 17.9846 8.98366 17.9846H10.0622L18 10.0468Z" fill="black"/></svg>') no-repeat 0 center;
    content: '';
    display: inline-block;
    height: 18px;
    margin-right: 7px;
    width: 18px;
}

.gosuite-video button {
    align-items: center;
    background: #007CBA;
    border: none;
    border-radius: 4px;
    color: #FFF;
    display: flex;
    gap: 10px;
    height: 45px;
    justify-content: center;
    padding: 0 15px;
}

.gosuite-video-modal {
    background: #fff;
    max-width: 1300px;
    width: 100%;
}

.gosuite-video-modal .components-modal__content {
    padding: 4px 0 32px;
}

.gosuite-video-modal .components-modal__content .components-modal__header {
    height: auto;
    padding: 15px 15px 0;
}

.modal-layout {
    border-top: 1px solid #DCDCDE;
    display: flex;
    flex-direction: row;
    gap: 0;
    max-height: 70vh;
    min-width: 860px;
    padding: 0;
    width: 100%;
}

.modal-sidebar {
    align-items: flex-start;
    background: #F6F7F7;
    border-right: 1px solid #DCDCDE;
    display: flex;
    flex: 0 0 240px;
    flex-direction: column;
    font-size: 13px;
    overflow-y: auto;
    padding: 15px;
    width: 240px;
}

.modal-sidebar .folder-row {
    align-items: center;
    display: flex;
    margin-bottom: 4px;
}

.modal-sidebar .folder-toggle {
    align-items: center;
    background: none;
    border: none;
    color: #808080;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    height: 15px;
    justify-content: center;
    margin-right: 6px;
    padding: 0;
    width: 15px;
}

.modal-sidebar .video-folder-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.modal-sidebar .video-folder-list li .components-button:not(.folder-toggle) {
    align-items: center;
    background: none;
    border: none;
    color: #286396;
    display: flex;
    flex-direction: row;
    font-size: 14px;
    font-weight: 400;
    gap: 4px;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

.modal-sidebar .video-folder-list li .components-button:hover {
    text-decoration: underline;
}

.modal-sidebar .video-folder-list li .components-button:not(.folder-toggle).is-selected {
    font-weight: bold;
    text-decoration: underline;
}

.modal-sidebar .video-folder-list .components-button .folder-icon {
    background: url('data:image/svg+xml,<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="14" height="11" fill="url(%23pattern0_9113_4828)"/><defs><pattern id="pattern0_9113_4828" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="%23image0_9113_4828" transform="scale(0.0714286 0.0909091)"/></pattern><image id="image0_9113_4828" width="14" height="11" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAALCAYAAABPhbxiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAydpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAxIDc5LjE0NjI4OTk3NzcsIDIwMjMvMDYvMjUtMjM6NTc6MTQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyNS4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNzQ4RUIzMDZGNjAxMUVFQTIzOEE5RDM2NTU0NzNEQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNzQ4RUIzMTZGNjAxMUVFQTIzOEE5RDM2NTU0NzNEQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE3NDhFQjJFNkY2MDExRUVBMjM4QTlEMzY1NTQ3M0RDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE3NDhFQjJGNkY2MDExRUVBMjM4QTlEMzY1NTQ3M0RDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ghzTKAAAAX1JREFUeNp8UrtKA0EUPTO7iRtlQ0ARIqmsDLZaWNvY+AOC2PgPFnaC3+AH+BuCj0qsROzFgOILsybZJLs7D8/MhgQsHAh3Zu553cmK55s9K2QEISRmy0IXfbS2znhdxd8lgxrCYtDB6s41icLhPYkHqPEX3u9PrIWYEoJqHVLOYX5pE6EwFcDkyN7OoPOAcnXyYkQr22hunFLHqRlW40VFEKNzuY/QFu4uJ6nKamFGHRTpOwYfV6hETTYLL2ytIlEhXjti/5VEM4ZRI+RDYvIURb/H5gGixTaBoozuHW3pGDbItwhRSIS1ZTTah1MAfWnyApVcwOofWOV+Pe4HiFrHQOaITGA1XYcPJUj3CUpgiq4/kz25d8SU4Mwl5uNkgrMpAj9LZe+QTPbdiVNvSvSzksuobhJNwPeEkMzi+dqfkfgefhzvKBegRwlUOsdmTEX398SMtMQzpcEXlWUVUsNk3OsA4vvu3I7fHjF8umXcFP8u922EFdTXd/ErwADN8QHG9FwhowAAAABJRU5ErkJggg=="/></defs></svg>') no-repeat 0 0;
    display: inline-block;
    content: '';
    flex: 0 0 14px;
    height: 11px;
}

.modal-sidebar .empty-label {
    font-style: italic;
    color: #999;
    margin-left: 6px;
}

.modal-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 10px;
}

.modal-controls {
    background-color: #F6F7F7;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    width: 100%;
}

.modal-controls .search-box {
    margin-bottom: 8px;
    width: 100%;
}

.modal-controls .controls-pagination-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

.modal-controls .controls-pagination-bar .controls-bar {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.modal-controls .controls-pagination-bar .controls-bar .components-base-control__field {
    margin-bottom: 0;
}

.modal-controls .total-items-dropdown {
    width: 53px;
}

.pagination-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pagination-controls .page-input {
    border: 1px solid #8C8F94;
    border-radius: 4px;
    height: 30px;
    padding: 0 10px;
    text-align: center;
    width: 50px;
}

.pagination-controls .pagination-label {
    color: #50575E;
    margin-left: 4px;
}

.pagination-controls button {
    align-items: center;
    border: 1px solid #2271B1;
    border-radius: 4px;
    color: #2271B1;
    display: flex;
    height: 30px;
    padding: 0 10px;
    justify-content: center;
    width: 30px;
}

.pagination-controls button svg {
    fill: #2271B1;
}

.pagination-controls button:disabled {
    border-color: #DCDCDE;
    color: #F6F7F7;
}

.pagination-controls button:disabled svg {
    fill: #DCDCDE;
}

.video-asset-table {
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
    width: 100%;
}

.video-asset-table thead tr {
    height: 24px;
}

.video-asset-table thead tr th.sortable {
    cursor: pointer;
    user-select: none;
}

.video-asset-table thead tr th.sortable:hover {
    background-color: #f5f5f5;
}

.video-asset-table thead .sortable-header {
    align-items: center;
    cursor: pointer;
    color: #2271B1;
    display: inline-flex;
    gap: 6px;
    user-select: none;
}

.video-asset-table thead .sortable-header .sort-icon {
    display: inline-block;
    height: 16px;
    width: 8px;
}

.video-asset-table thead .sortable-header .sort-icon .arrow-up,
.video-asset-table thead .sortable-header .sort-icon .arrow-down {
    fill: #bbb;
    transition: fill 0.2s ease-in-out;
}

.video-asset-table thead .sortable-header .sort-icon.sorted-asc .arrow-up {
    fill: #1d2327;
}

.video-asset-table thead .sortable-header .sort-icon.sorted-desc .arrow-down {
    fill: #1d2327;
}

.video-asset-table tbody tr {
    height: 34px;
}

.video-asset-table th,
.video-asset-table td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
}

.video-asset-table tbody tr:nth-child(odd) {
    background-color: #F6F7F7;
}

.video-asset-table tbody tr:nth-child(even) {
    background-color: #FFF;
}

.video-asset-table td img {
    border-radius: 4px;
    height: 40px;
    object-fit: cover;
    width: 70px;
}

.video-asset-table td input.custom-radio {
    align-items: center;
    appearance: none;
    background-color: #fff;
    border: 1px solid #8C8F94;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    height: 16px;
    justify-content: center;
    margin: 0;
    position: relative;
    width: 16px;
}

.video-asset-table td input.custom-radio:checked::before {
    display: none;
}

.video-asset-table td input.custom-radio:checked::after {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M11.8837 1.77181L10.6897 0.577731C10.5337 0.421721 10.2786 0.421721 10.1226 0.577731L4.54228 6.16108L1.90512 3.51792C1.74911 3.36191 1.49409 3.35891 1.33508 3.51792L0.117007 4.73599C-0.0390024 4.892 -0.0390024 5.14702 0.117007 5.30303L4.23326 9.42229C4.38927 9.5783 4.64429 9.5783 4.8003 9.42229L11.8807 2.34184C12.0398 2.18583 12.0398 1.93082 11.8807 1.77181H11.8837Z" fill="%232271B1"/></svg>') no-repeat center 0;
    content: '';
    display: block;
    height: 9px;
    width: 12px;
}

.video-asset-table tr.is-selected {
    background-color: #eef6fc;
}

.video-asset-table tr:hover {
    background-color: #f9f9f9;
}

.video-asset-table td.video-title {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.video-asset-table td.video-title .video-thumb {
    flex-shrink: 0;
    height: 32px;
    object-fit: cover;
    width: 52px;
}

.video-asset-table td.video-title .video-title-text {
    font-weight: bold;
}

.modal-footer {
    border-top: 1px solid #ccc;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 20px;
    padding: 10px 20px 0 20px;
}

.modal-footer .modal-footer-text {
    color: #50575E;
}

.modal-footer .components-button.is-primary:disabled {
    background: #F6F7F7;
    border-color: #DCDCDE;
    color: #A7AAAD;
}

@media (max-width: 768px) {
    .modal-layout {
        flex-direction: column;
    }

    .modal-sidebar {
        border-bottom: 1px solid #ccc;
        border-right: none;
        padding-bottom: 10px;
        padding-right: 0;
        width: 100%;
    }

    .modal-content {
        width: 100%;
    }

    .modal-controls {
        align-items: stretch;
    }

    .pagination-controls {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .pagination-controls .page-input {
        width: 40px;
    }
}