/* Custom CSS for Twitch clip styling */
a {
    color: inherit;
    text-decoration: none;
    
}
a:hover {
    color: #F1CEB7;
    text-decoration: none;
}
button.btn.clip-category-btn {
    opacity: 1;
    background-color: #FAEEE6;
    color: #000000;
    border-radius: 5px;
    padding: 1px 10px;
    margin: 1px;
    font-size: 0.8rem;
}
button.btn.clip-theme-btn {
    opacity: 1;
    background-color: #49260F;
    color: #ffffff;
    border-radius: 5px;
    padding: 1px 10px;
    margin: 1px;
    font-size: 0.8rem;
}
.bootstrap-select .dropdown-menu {
    background-color: #2C2F2B;
}
.dropdown-menu {
    background-color: #2C2F2B;
}
.bootstrap-select .dropdown-menu li a {
    color: #ffffff;
}
.dropdown-menu li a {
    color: #ffffff;
}
.bootstrap-select .dropdown-menu .dropdown-header {
    color: #ffffff;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
    background-color: #636A60;
    color: #ffffff;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
    background-color: #636A60;
    color: #ffffff;
}
.bootstrap-select .dropdown-menu .selected a {
    background-color: #484D45;
    color: #ffffff;
}
.dropdown-menu .selected a {
    background-color: #484D45;
    color: #ffffff;
}
.bootstrap-select .dropdown-menu .inner li small {
    color: #E7AE88 !important;
}

.modal-content {
    background-color: #FAEEE6;
    color: #000;
}

.clip {
    max-width: 100%;
    border-radius: 5px;
    padding: 1px;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.clip-img {
    position: relative;
}
.clip-img img {
    width: 100%;
    display: block;
    height: auto;
    border-radius: 5px;
}
.clip-title {
    font-weight: bold;
    max-width: 90%;
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    margin-top: 5px;
}
.clip-info {
    color: #E9EBE9;
    font-size: 0.8rem;
}
.clip-streamer {
    color: #E9EBE9;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
}
.clip-clipper {
    color: #E9EBE9;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clip-category {
    font-size: 0.8rem;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clip-category-btn {
    color: #ffffff;
    font-size: 0.8rem;
    background-color: #FAEEE6;
    padding: 1px 10px;
    margin: 1px;
    border-radius: 5px;
}
.clip-theme {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clip-theme-btn {
    color: #ffffff;
    font-size: 0.8rem;
    background-color: #49260F;
    padding: 1px 10px;
    margin: 1px;
    border-radius: 5px;
}
.clip-subjects {
    color: #ffffff;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Positioning for clip elements */
.clip-duration {
    position: absolute;
    top: 2%;
    left: 2%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}
.clip-views {
    position: absolute;
    bottom: 2%;
    left: 2%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}
.clip-upload-date {
    position: absolute;
    bottom: 2%;
    right: 2%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}
.clip-like-btn {
    position: absolute;
    top: 2%;
    right: 2%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
    border: none;
}
.clip-like-count {
    position: absolute;
    top: 2%;
    right: 10%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}