.two-coders-integration-mux-video-page-asset-list #wpcontent, .two-coders-integration-mux-video-page-asset-upload #wpcontent{
    overflow-x: hidden;
}

.muxvideo-sidebar{
    height: fit-content;
    padding: 1rem;
    margin: 0 0 1rem 1rem;
    text-align: center;
    background: $putty;
    border: 1px solid $grey200;
    
    h3{
        font-size: 35px;
    }
    
    p{
        font-size: 17px;
    }

    @media screen and (max-width: $laptop-large-breakpoint) {
        display: none;
    }
}

.pro-version-banner{
    display: none;
    height: 86px;
    padding: 0.5rem;
    margin: 2rem 2rem 1.5rem 2rem;
    background: $putty;
    border: 1px solid $grey200;
    text-align: center;

    @media screen and (max-width: $laptop-large-breakpoint) {
        display: none;
    }

    p, h3{
        margin: 5px;
        font-size: 20px;
    }

    .featured-text{
        margin: -0.55rem -0.55rem 1rem -0.55rem ;
        padding: 0;
    }

    p.pro-version-banner__description{
        font-size: 12px;
    }
}

.featured-text{
    background: $pink;
    color: $white;
    margin: -1.05rem -1.05rem 1rem -1.05rem;
    padding: 1rem;
    font-weight: bold;
}

.two-coders-integration-mux-video-page-asset-list .muxvideo-sidebar{
    margin-top: 0;
}

.inner-container{
    background-color: $white;
    margin: 0 20px 1rem 0;
    border: 1px solid $grey200;
    
    @media screen and (max-width: $laptop-large-breakpoint) {
        margin-right: 0;
    }

    h2{
        font-size: 24px;
    }
}
.muxvideo-assets-page{
    .inner-container{
        padding: 1rem;
    }
}

.instructions{
    margin-top: 2rem;
    font-style: italic;

    &__warning{
        border-left: 2px solid #ffb200;
        margin: 0;
        background: #fbf9b6;

        p{
            padding: 0.8rem;
        }
    }

    &__onboarding{
        border-left: 2px solid $blue;
        margin: 0;
        background: $greyAPI;

        p{
            padding: 0.8rem;
        }
    }

    &__title{
        color: #000000;
        text-decoration: underline;
        font-weight: 600;
    }
}

.alert{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid;
    border-radius: 5px;
    margin: 1rem 0;
    padding: 0 1rem;

    &.alert-success{
        border-color: #56C2A8;
        background: #D2EED2;
    }
}

input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
    border-radius: 0;
}

.action-asset{
    background: transparent;
    border: none;
    padding: 5px 0;
    text-align: left;
}

/* Alert modal */
.wrapper {
    width: 90%;
    max-width: 800px;
    margin: 4em auto;
    text-align: center;
  }
  
.modal {
    position: absolute;
    z-index: 10000; /* 1 */
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;

    &.is-visible {
        visibility: visible;

        .modal-overlay {
            opacity: 1;
            visibility: visible;
            transition-delay: 0s;
        }

        .modal-transition {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-wrapper {
        position: absolute;
        z-index: 9999;
        top: 35vh;
        left: 50%;
        width: 35em;
        height: 181px;
        margin-left: -16em;
        background-color: #fff;
        box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.15);

        .modal-header{
            border-radius: 5px 5px;
            position: relative;
            background-color: #fff;
            line-height: 18px;
            text-align: center;
            font-weight: 400;
            padding: 1.5rem 1rem 1rem 1rem;

            .modal-heading{
                margin: 0;
                color: black;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            p{
                margin: 0.5em 0;
                font-size: 14px;
            }
        }

        .modal-body{
            border-radius: 5px 5px;
            padding: 0.5rem 1rem 1rem 1rem;
        }
        
        .modal-content{
            display: inline-flex;
            width: 100%;
            justify-content: space-around;
        }
    }

	.modal-overlay {
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: hsla(0, 0%, 0%, 0.25);
		visibility: hidden;
		opacity: 0;
		transition: visibility 0s linear 0.3s, opacity 0.3s;
	}

	.modal-transition {
		transition: all 0.3s 0.12s;
		transform: translateY(-10%);
		opacity: 0;
	}
	
	.modal-content > *:first-child {
		margin-top: 0;
	}
	
	.modal-content > *:last-child {
		margin-bottom: 0;
	}
}

.ui-icon{
    overflow: inherit;
    cursor: default;
} 
 
/* Loading Icon */
.loading-container {
	position:relative;
	display: flex;
	align-items: center;
	justify-content: end;
    width:100%;
	height: 22px;
    margin: 0; 

	div {
		margin:0 3px;
		border-radius:0%;
		background:$grey;
		transform:scale(0);
        height:7px;
		width:7px;
		float:left;
        animation: grow 4.4s infinite ease-in-out;
		-moz-animation: grow 4.4s infinite ease-in-out;
		-webkit-animation: grow 4.4s infinite ease-in-out;
	}

	.ball-2 {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}
  
	.ball-3 {
		-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
	}

    &__load-more{
        justify-content: center;
        
        div {
            background:$white;
        }
    }

    &__asset-list-delete{
        width:14%;

        div{
            height:5px;
		    width:5px;
        }
    }
}

.form-table,
.form-table td,
.form-table td p,
.form-table th {
    font-size: $font-size-m;
}

.blur{
    filter: blur(3px);
}

.disabled{
    pointer-events: none;
}

.shadow-scroll-x {

    background-color: white;
    background-image: /* Shadows */ 
    linear-gradient(to right, white 0%, white 50%, rgba(255, 255, 255, 0) 100%), 
    linear-gradient(to left, white 0%, white 50%, rgba(255, 255, 255, 0) 100%), 
    
    /* Shadow covers */ 
    linear-gradient(to right, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), 
    linear-gradient(to left, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;

    background-position: left center, right center, left center, right center;
    background-size: 14px 100%, 14px 100%, 14px 100%, 14px 100%;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
    -webkit-overflow-scrolling: touch;

    /* Progressive enhancement of scrollbar on webkit
    Use media queries to only use on mobile */
    &::-webkit-scrollbar {
        height: 6px;
        background-color: white;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #999;
        border-radius: 3px;
    }

    &::-webkit-scrollbar-button {
        display: none;
    }
}

.muxvideo-disclaimer-container p{
    margin: 0 2rem;
    font-style: italic;
    color: #50575e;
}