.mg-top-8 {
    margin-top: 8px;
}

.col-mb-25 {
    margin-bottom: 25px;
}

.feature-box-height {
    height: 100%;
}

.pg-top-bottom-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.article-link-bottom {
    bottom: 0px;
    position: absolute;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main {
    flex: 1;
}

.sr-margin-auto {
    margin: auto;
}

.primary-box {
    max-width: unset;
}

.primary-box.bg-custom-img {
    background-size: cover;
}

.sr-streamer-info-margin {
    margin: 0.25rem;
}

.post-container .breadcrumb .category {
    display: block;
    white-space: break-spaces;
}

.blog-text img {
    max-width: 100%;
}

.blog-text p img {
    display: flex;
    margin: 0 auto;
    border-radius: .44rem;
    border: 1px solid #b4b6cb;
    box-shadow: 0 4px 13px 0 rgba(164, 168, 200, .17);
}

.blog-text a {
    text-decoration: none;
}

.stream-service-name-big {
    position: relative;
    display: block;
    white-space: nowrap;
}

.stream-service-name-big i {
    vertical-align: middle;
    margin-top: -0.2rem;
}

.stream-service-name-big i.stm-kick-icon {
    font-size: 0.9rem;
}

.stream-service-name-big:first-child {
    animation: slide-animation-big 10s linear alternate infinite;
}

.text-with-icon-big {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 36px;
    vertical-align: middle;
    animation: slide-text-container-animation 10s linear alternate infinite;
}

.sr-target-id {
    font-size: smaller;
}

.sr-section-subtitle {
    font-size: 16px;
    font-weight: 400;
}

.blog-user-img {
    border-radius: 10rem;
    border: 1px solid #5C6FFF;
    width: 3.5rem;
    height: 3.5rem;
}

.top-streamer-platform-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.support-email {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border-top: 1px solid #C3C4D6;
    border-bottom: unset;
    padding: 1.1rem 0;
    gap: 1.5rem;
    margin-bottom: unset;
}

.support-email>.link-wrapper {
    -moz-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.support-email>.link-wrapper a {
    color: #535A9B;
}

.support-email>.link-wrapper a:hover,
.support-email>.link-wrapper a:focus {
    opacity: 0.7;
}

.support-email>button {
    border: 0;
    background: none;
    transition: opacity 0.2s ease-in-out;
}

.support-email>button i {
    font-size: 1.1rem;
}

.support-email>button:hover,
.support-email>button:focus {
    opacity: 0.7;
}

* {
    box-sizing: border-box;
}

.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items div {
    cursor: pointer;
    text-align: left;
    text-overflow: ellipsis;
}

.autocomplete-items {
    max-height: 400px;
    overflow-y: scroll;
}

.autocomplete-active {
    background-color: rgba(113, 151, 225, 0.31);
    cursor: pointer;
}

.autocomplete-active:first-of-type {
    border-top-left-radius: 0.4375rem;
    border-top-right-radius: 0.4375rem;
}

.autocomplete-active:last-of-type {
    border-bottom-left-radius: 0.4375rem;
    border-bottom-right-radius: 0.4375rem;
}

.autocomplete-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-search {
    right: 3.56rem !important;
}

.autocomplete-filter {
    right: 0.56rem !important;
}

.avatarIcon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 50%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.liveText {
    display: inline-block;
    text-align: center;
    pointer-events: none;
    padding: 0px 6px;
    border-radius: 4px;
    font-size: x-small;
    background-color: #eb0400;
    color: white;
    font-weight: bold;
    margin-right: 4px;
}

.platformIcon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.inputBar {
    width: 100%;
    max-width: 500px;
}

.inlineBlock {
    display: inline-block;
}

.verifiedIcon {
    padding-left: 5px;
}

.extraInfo {
    position: relative;
    border-bottom: none !important;
}

.title {
    font-size: small;
    border-bottom: none !important;
}

.viewer {
    font-size: small;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0.60;
    border-bottom: none !important;
    padding: 3px !important;
    display: none;
}

:root {
    --background-color: #ffffff;
    --icon-width: 28px;
    --icon-height: 28px;
    --icon-verified-width: 14px;
    --icon-verified-height: 14px;
    --round-border: 50%;
    --height: 30px;
}

.flexMainContainer {
    padding: 4px;
    border-bottom: 1px solid #5C6FFF;
    border-left: 1px solid #5C6FFF;
    border-right: 1px solid #5C6FFF;
    background-color: var(--background-color);
}

.streamerInputActive {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}


.flexMainContainer:hover {
    background-color: #e9e9e9;
}

.flexMainContainer:first-of-type {
    border-top: 1px solid #5C6FFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.flexMainContainer:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.flexResultHeadContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    height: var(--height);
}

.flexResultHeadItems:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-items: center;
    order: 0;
    margin: 4px;
}

.flexResultHeadItems:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-items: center;
    order: 0;
    margin: 4px;
    position: relative;
}

.flexResultHeadItems:nth-child(3) {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    align-items: center;
    order: 0;
    margin: 4px;
}

.flexResultHeadItems:nth-child(4) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-items: center;
    order: 0;
    margin: 4px;
    padding-right: 8px;
}

.flexResultFooterContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    height: var(--height);
}

.flexResultFooterItems:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-items: center;
    order: 0;
    margin: 4px;
}

.flexResultFooterItems:nth-child(2) {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    align-items: center;
    order: 0;
    margin: 4px;
}

.v2WordWrap {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.flexResultIcon {
    width: var(--icon-width);
    height: var(--icon-height);
}

.flexResultIconUser {
    width: var(--icon-width);
    height: var(--icon-height);
    border-radius: var(--round-border);
}

.flexResultIconVerified {
    width: var(--icon-verified-width);
    height: var(--icon-verified-height);
    position: absolute;
    bottom: 0;
    left: 18;
    background-color: var(--background-color);
    border-radius: var(--round-border);
}

.flexResultFooterContainer[data-live="false"],
.flexResultIconVerified[data-verified="false"],
.autocomplete-items.hide {
    display: none;
}


.support-discord {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border-top: 1px solid #C3C4D6;
    border-bottom: 1px solid #C3C4D6;
    padding: 1.1rem 0;
    gap: 1.5rem;
    margin-bottom: 2.8rem;
}

.support-discord>.link-wrapper {
    -moz-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.support-discord>.link-wrapper a {
    color: #535A9B;
}

.support-discord>.link-wrapper a:hover,
.support-discord>.link-wrapper a:focus {
    opacity: 0.7;
}

.support-discord>button {
    border: 0;
    background: none;
    transition: opacity 0.2s ease-in-out;
}

.support-discord>button i {
    font-size: 1.1rem;
}

.support-discord>button:hover,
.support-discord>button:focus {
    opacity: 0.7;
}



svg.easy-toast {
    display: block;
    vertical-align: middle
}

*.easy-toast,
.easy-toast::before,
.easy-toast::after {
    z-index: 999999;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    line-height: 1.5;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

p.easy-toast {
    margin: 0;
    word-break: break-word;
}

.easy-toast-block {
    max-width: 20rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    color: white;
    margin-top: 0.5rem;
    word-break: break-all
}

.easy-toast-stack {
    display: flex;
    flex-direction: column;
    margin-top: 0.875rem;
    margin-bottom: 0.875rem
}

.easy-toast-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 1rem;
    width: 1rem;
    border-radius: 0.375rem;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    cursor: pointer;
    text-shadow: none;
    text-align: center;
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    margin: 0;
    padding: 0;
    writing-mode: horizontal-tb !important
}

.easy-toast-button:hover {
    color: white !important
}

.easy-toast-svg-close {
    width: 0.875rem;
    height: 0.875rem
}

.easy-toast-position-top-left {
    top: 1rem;
    left: 1rem
}

.easy-toast-position-top-middle {
    top: 1rem;
    left: 50%;
    transform: translate(-50%, 0)
}

.easy-toast-position-top-right {
    top: 1rem;
    right: 2rem;
}

.easy-toast-position-bottom-left {
    bottom: 1rem;
    left: 1rem
}

.easy-toast-position-bottom-middle {
    bottom: 1rem;
    left: 50%;
    transform: translate(-50%, 0)
}

.easy-toast-position-bottom-right {
    bottom: 1rem;
    right: 1rem
}

.easy-toast-position-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.easy-toast-timeline {
    border-radius: 0.375rem;
    width: 100%;
    height: 0.25rem;
    opacity: 0.5
}

.et-bg-gray-500 {
    background-color: #166591
}

.et-bg-green-500 {
    background-color: #1e9116
}

.et-bg-red-500 {
    background-color: #c7365f
}

.et-bg-yellow-500 {
    background-color: #c7365f;
    -webkit-animation: notiDanger 1s ease-in-out infinite;
    -moz-animation: notiDanger 1s ease-in-out infinite;
    -ms-animation: notiDanger 1s ease-in-out infinite;
    animation: notiDanger 1s ease-in-out infinite;
}

.et-bg-green-900 {
    background-color: #14532d
}

.et-bg-red-900 {
    background-color: #b80034
}

.et-bg-yellow-900 {
    background-color: #515355
}

.et-bg-gray-900 {
    background-color: #533076
}

.et-flex {
    display: flex
}

.et-inline-flex {
    display: inline-flex
}

.et-flex-shrink-0 {
    flex-shrink: 0
}

.et-p-4 {
    padding: 1rem;
}

.et-px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: white;
}

.et-ml-auto {
    margin-left: auto
}

.et-fixed {
    position: fixed
}

.et-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.container-login {
    display: flex;
    justify-content: center;
}

.form-page-container {
    height: fit-content !important;
}

.form-box {
    background-color: #F7F7F7;
    padding: 3rem;
    border-radius: 0.45rem;
    text-align: center;
    border: 1px solid #D8E3F6;
}

.form-box form {
    margin-bottom: 0;
}

.form-box form ::-webkit-input-placeholder {
    color: #786F82;
}

.form-box form :-moz-placeholder {
    color: #786F82;
}

.form-box form ::-moz-placeholder {
    color: #786F82;
}

.form-box form :-ms-input-placeholder {
    color: #786F82;
}

.form-box .logo-container {
    margin-bottom: 1rem;
}

.form-box .logo-container .logo {
    height: 1rem;
    vertical-align: top;
}

.form-box .logo-container span {
    color: #8D7E9A;
}

.form-box .title {
    font-size: 1.72rem;
    font-weight: 800;
    color: #452B5B;
    margin-bottom: 1.2rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.form-box .form-control {
    padding: 0.6rem 1.2rem;
    border-color: #D6D3DB;
}

.form-box .form-control:hover,
.form-box .form-control:focus {
    border-color: #A094B4;
}

.form-box .other-links {
    font-weight: 500;
    font-size: 0.8rem;
    color: #858189;
    margin-top: 1.5rem;
}

.form-box .other-links a {
    color: #57B2E5;
    text-decoration: none;
}

.form-box .other-links a:hover,
.form-box .other-links a:focus {
    text-decoration: underline;
}

.form-box.active {
    display: block;
}

.form-box {
    display: none;
}

.tab-button {
    /*margin-right: -5px;*/
    /*width: 50%;*/
    flex-grow: 1;
    flex-basis: 0;
}

.tab-button.active {
    background-color: #6470f7 !important;
    border-color: #6470f7 !important;
    color: white;
}

.tab-button {
    background-color: white !important;
    border-color: white !important;
    color: var(--bs-nav-link-color);
}

.cardMargin {
    margin-top: 15px;
    margin-bottom: 15px;
}

.abcRioButtonLightBlue {
    width: 100% !important;
}

.buttonWrapper {
    margin-bottom: 20px;
    display: flex;
}

.tab-button:first-of-type {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.tab-button:last-of-type {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.tab-button:not(:first-of-type):not(:last-of-type) {
    border-radius: 0px !important;
}

.formSize {
    width: 390px;
}

a.openid {
    color: #3c4043;
    cursor: pointer;
    font-family: google sans,arial,sans-serif;
    font-size: 14px;
    letter-spacing: .25px;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    font-weight: 700;
    width: 100%;
    display: inline-block;
    padding: 9px;
}

.no-text-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sr-dmca-select {
	max-width: 100%;
}

.support-text {
	padding-left: 0.5rem;
}

.video-wrapper .video-title {
    margin-bottom: unset;
    min-height: 2.5rem;
}

.video-wrapper .video-meta .user-info .date-time {
    margin-left: unset;
}

.video-wrapper .video-meta .user-info .user-name {
    margin-bottom: 0.5rem;
}

.sr-streamername-h1 {
    font-size: 1rem;
    font-weight: 500;
}

.sr-section-title-h1 {
    font-size: 2rem;
}

.sr-login-h1 {
    font-size: 1.5rem;
}

.sr-btn-google {
    background-color: #131314;
    color: #e3e3e3;
}
.sr-btn-google span {
    color: #e3e3e3;
}
.sr-btn-google:hover {
    background-color: #131314;
    color: #e3e3e3;
}
.sr-btn-google:hover span {
    color: #e3e3e3;
}
.sr-btn-microsoft {
    background-color: #2F2F2F;
    color: #FFFFFF;
}
.sr-btn-microsoft span {
    color: #FFFFFF;
}
.sr-btn-microsoft:hover {
    background-color: #141414;
    color: #FFFFFF;
}
.sr-btn-microsoft:hover span {
    color: #FFFFFF;
}
.sr-btn-discord {
    background-color: #7289DA;
    color: #FFFFFF;
}
.sr-btn-discord span {
    color: #FFFFFF;
}
.sr-btn-discord:hover {
    background-color: #5d6fb3;
    color: #FFFFFF;
}
.sr-btn-discord:hover span {
    color: #FFFFFF;
}
.sr-btn-apple {
    background-color: #000000;
    color: #FFFFFF;
}
.sr-btn-apple span {
    color: #FFFFFF;
}
.sr-btn-apple:hover {
    background-color: #252525;
    color: #FFFFFF;
}
.sr-btn-apple:hover span {
    color: #FFFFFF;
}

.sr-two-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2; 
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.footer-menu-headline {
    color: #FFF;
    font-size: 0.94rem;
    margin-bottom: 1.5rem;
}

.text-container {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5rem;
}

.text-container .meta {
    color: #7A7C91;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.text-container .meta .sp {
    margin-left: 1rem;
    margin-right: 1rem;
}

.text-container .title {
    color: #131E70;
    font-size: 2rem;
    font-weight: 500;
    text-decoration-line: underline;
    text-underline-offset: 0.05rem;
    text-decoration-color: #D3DFF6;
    text-decoration-thickness: 0.25rem;
    margin-bottom: 2.5rem;
    line-height: 2.875rem;
}

.text-container .breadcrumb {
    color: #7A7C91;
    font-size: 1rem;
    margin-bottom: 3rem;
}

.text-container .breadcrumb a {
    color: #7A7C91;
}

.text-container .breadcrumb a:hover, .text-container .breadcrumb a:focus {
    color: #686a7d;
}

.text-container .breadcrumb .category {
    white-space: nowrap;
    border-radius: 0.3125rem;
    border: 1px solid #BABABA;
    background: #FFF;
    box-shadow: 0px 4px 8px 0px rgba(107, 116, 179, 0.1);
    padding: 0.5rem 0.8rem;
    text-decoration: none;
}

.text-container .breadcrumb .category i {
    vertical-align: middle;
    font-size: 1.1rem;
    margin-right: 0.5rem;
    margin-top: -0.15rem;
}

.text-container p {
    color: #535A9B;
    line-height: 2.56rem;
}

.sr-recording-thumbnail {
    width: 270px;
    min-width: 270px;
    height: 151px;
}

.thumbnail-tiktok {
    object-fit: contain !important;
    background-color: #131527;
}

.sr-title-url {
    text-decoration: none;
    color: unset;
}

.video-wrapper .video-img > img {
    object-fit: fill;
}

.streamer-info {
    min-width: 300px;
}

.streamer-info .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.streamer-info:hover, .streamer-info:focus {
    border: 1px solid #BEC0D1;
    padding: 1.5rem;
    padding-left: 5.6rem;
}

.video-wrapper .video-img .time {
    background-color: #5C6FFF;
    border-radius: 0.4375rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.sr-system-message-container {
    max-width: unset;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.sr-system-message-container .sr-system-message-title {
    margin-bottom: 0px;
    font-size: 1.125rem;
}

.sr-system-message-container .sr-system-message-title a {
    text-decoration: none;
    color: var(--bs-heading-color);
}

.unseen-inline {
    background-color: rgba(39, 47, 85, 1.00);
    color: #95A1FF;
    border-radius: 8px;
    border: 1px solid #7988f9;
    display: none;
    align-items: center;
    justify-content: center;
    height: 16px;
    min-width: 16px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3333;
    margin-left: 0.25rem;
    position: absolute;
    top: -6px;
    right: -5px;
    box-shadow: 0px 0px 0px 3px #1b2130;
}

@keyframes srPlaceholderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.sr-placeholder-animated {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: srPlaceholderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #131927 8%, #141623 18%, #131927 33%);
    background-size: 800px 104px;
    position: relative;
}

.sr-latest-placeholder {
	border-radius: 0.44rem;
	margin-bottom: 12px;
    width: 100%;
    height: 24px;
}

.sr-latest-image-placeholder {
	width: 100%;
	height: 151px;
	margin-bottom: 1rem;
	border-radius: 0.5rem;
}

.sr-top-streamer-placeholder-container {
    max-height: 112px;
}

.sr-nav-item-logout {
    margin-left: 16px;
}

#sr-language-select {
    border-radius: 0.312rem;
    padding: 0.57rem 0.76rem;
    background-color: #fff;
    outline: none;
    font-size: 0.94rem;
    font-weight: 500;
    color: #5c6fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-color: #BFC6FF;
    text-align: center;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#sr-language-select:hover {
    background-color: #5c6fff;
    color: #fff;
    cursor: pointer;
}


#sr-language-select option {
    padding: 10px;
    border-color: #BFC6FF;
    border-radius: 0.312rem;
    background-color: #5c6fff;
    color: #fff;
}

#sr-language-select option:hover {
    background-color: #ddd;
}

#sr-language-select::-ms-expand {
    display: none;
}

.sr-language-minimal {
    border-radius: 0.312rem;
    margin-left: 16px;
}

.video-list-view .video-wrapper .video-img img {
    min-width: unset;
}

.platform-wrapper {
    display: flex;
    overflow-x: hidden;
    position: relative;
    border-radius: 13px;
    max-width: 500px;
    width: fit-content;
}

.platform-wrapper .platform-icon {
    top: 0;
    height: 100%;
    width: 30px;
    display: none;
    align-items: center;
    position: absolute;
}

.platform-icon:first-child {
    left: 0;
    display: none;
    background: linear-gradient(90deg, #0e101b 70%, transparent);
}

.platform-icon:last-child {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(-90deg, #0e101b 70%, transparent);
}

.dark-header .platform-icon:first-child {
    background: linear-gradient(90deg, #131527 70%, transparent);
}

.dark-header .platform-icon:last-child {
    background: linear-gradient(-90deg, #131527 70%, transparent);
}

.platform-icon i {
    width: 26px;
    height: 26px;
    cursor: pointer;
    color: #575757;
    font-size: 1.4rem;
    text-align: center;
    line-height: 1.2;
    border-radius: 50%;
}

.platform-icon i:hover {
    background: #1f233c;
}

.platform-icon:first-child i {
    margin-left: 2px;
}

.platform-icon:last-child i {
    margin-right: 2px;
}

.platform-wrapper .platform-options {
    user-select: none;
    gap: 12px;
    width: 100%;
    display: flex;
    list-style: none;
    overflow-x: hidden;
    scroll-behavior: smooth;
    margin-right: 1.5rem;
}

.platform-options.dragging {
    cursor: grab;
    scroll-behavior: auto;
}

.platform-options.dragging .option {
    user-select: none;
    pointer-events: none;
}

.platform-options .option {
    font-size: var(--bs-nav-link-font-size);
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    white-space: nowrap;
    margin: auto;
}

.platform-options .option a {
    color: var(--bs-nav-link-color);
    text-decoration: none;
}
.platform-options .option:hover a {
    color: var(--bs-nav-link-hover-color);
}

.platform-options .option.active a {
    color: var(--bs-nav-link-hover-color);
}

.small-only {
    display: none;
}

.nav-link-active {
    color: var(--bs-nav-link-hover-color);

}


.nav-link-flex {
    display: flex;
    align-items: center;
    padding: unset;
    height: 100%;
}

.user-img {
    left: 0;
    top: 0.3rem;
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    box-shadow: 0px 4px 13px 0px rgba(164, 168, 200, 0.17);
}

.video-wrapper .video-meta .user-info .date-time {
    color: rgb(222, 226, 230);
}

.streamer-profile-info-url {
    text-decoration: none;
}

.section-title-wrapper .btn-wrapper {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: unset;
}

.sr-mg-platform-logo {
    vertical-align: middle;
    margin-right: 0.5rem;
}

@media (max-width: 800px) {
    .platform-wrapper {	
        max-width: 300px;
    }
}

/* ---------------------- */
/*    Responsive Styles   */
/* ---------------------- */
@media (max-width: 1600px) {
    .platform-wrapper {	
        max-width: 450px;
        margin-right: 2rem;
    }
}



@media (max-width: 1400px) {
    .platform-wrapper {	
        max-width: 300px;
        margin-right: 1.5rem;
    }
}

@media (max-width: 1200px) {
    .platform-wrapper {	
        max-width: 220px;
        margin-right: 1rem;
    }
}

@media (max-width: 991px) {
    .sr-nav-item-dashboard {
        margin-bottom: 16px;
    }
    .sr-nav-item-logout {
        margin-left: unset;
    }
    .sr-language-minimal {
        margin-left: unset;
        margin-top: 16px;
    }
    .navbar .container {
        max-width: 100%;
    }
    .platform-wrapper {	
        display: none;
    }
    .small-only {
        display: block;
    }
}

@media (max-width: 768px) {
    .SRClipPlayer {
        padding: 1rem !important;
    }
    .SRClipPlayer .video-head .user-info .name {
        font-size: 1.25rem;
    
    }
}

@media only screen and (max-width: 768px) {
    .sr-hide-if-mobile {
        display: none !important;
    }
}

@media (max-width: 575px) {
	.video-slide-item {
		min-width: 300px;
	}
	.video-slide-item {
		min-width: 300px;
	}
    .streamer-info {
        min-width: 300px;
        margin-bottom: 0.5rem;
    }
    .sr-btn-recording::before {
        font-family: "streamrecorder" !important;
        content: '\42';
        left: 0px;
        position: absolute;
        width: 42px;
    }
    .SRClipPlayer {
        padding: 0.40rem !important;
    }
    .clip-views {
        padding-bottom: 0.5rem;
    }
    .clip-date {
        padding-bottom: 0.5rem;
    }
}

/* vietnamese */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9aQU4Wc.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v-6QU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9aQU4Wc.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v-6QU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9aQU4Wc.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v-6QU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9aQU4Wc.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v-6QU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9aQU4Wc.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v-6QU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v9aQU4Wc.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lexend'), url(/static/streamrecorder/webfonts/wlpwgwvFAVdoq2_v-6QU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media (max-width: 575px) {
    .btn-rec .text {
        vertical-align: middle;
    }

    .sr-btn-filter::before {
        content: "\f0b0" !important;

        font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
        font-weight: var(--fa-style, 900) !important;
    }
}