.modal .modal-content
{
    background-color: rgba(0,0,0,0.6);
}
.modal .modal-content
{
    color: white;
}
.modal .modal-lg, .modal .modal-lg .modal-content
{
    max-width: 800px;
}
.modal .modal-content .modal-header, .modal .modal-content .modal-footer
{
    border-color: black;
}

/* Subscription Box Colors */
/* Lemon Fizz */
.plan--lemon-fizz .plan__content,
.plan--lemon-fizz .plan__cellar {
    background-color: #FFF176;
}
.plan--lemon-fizz .plan__price, .plan--lemon-fizz .plan__item i:before {
    color: #9E7700;
}
.plan--lemon-fizz .plan__item svg {
    stroke: #9E7700;
}

/* Tropical Orange */
.plan--tropical-orange .plan__content,
.plan--tropical-orange .plan__cellar {
    background-color: #FFCC80;
}
.plan--tropical-orange .plan__price, .plan--tropical-orange .plan__item i:before {
    color: #E65100;
}
.plan--tropical-orange .plan__item svg {
    stroke: #E65100;
}

/* Aqua Splash */
.plan--aqua-splash .plan__content,
.plan--aqua-splash .plan__cellar {
    background-color: #7FFFD4;
}
.plan--aqua-splash .plan__price, .plan--aqua-splash .plan__item i:before {
    color: #006666;
}
.plan--aqua-splash .plan__item svg {
    stroke: #006666;
}

/* Violet Burst (brighter) */
.plan--violet-burst .plan__content,
.plan--violet-burst .plan__cellar {
    background-color: #D8B0FF;
}
.plan--violet-burst .plan__price, .plan--violet-burst .plan__item i:before {
    color: #800080;
}
.plan--violet-burst .plan__item svg {
    stroke: #800080;
}

/* Lime Pop */
.plan--lime-pop .plan__content,
.plan--lime-pop .plan__cellar {
    background-color: #B6FF9B;
}
.plan--lime-pop .plan__price, .plan--lime-pop .plan__item i:before {
    color: #2E7D32;
}
.plan--lime-pop .plan__item svg {
    stroke: #2E7D32;
}
.delete-transaction-btn
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    text-decoration: none !important;
}

.plan__current {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 48px;
    width: 100%;
    border-radius: 16px;
    text-transform: uppercase;
    background-color: rgb(80,80,80);
    border: 2px solid #1e1f21;
    line-height: 1;
    overflow: hidden;
}
.plan__current span {
    position: relative;
    z-index: 2;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    color: #fff;
}

:root {
    --play-size: 96px;          /* button size */
    --play-hover-scale: 1.06;   /* hover scale */
}

.play-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: var(--play-size);
    height: var(--play-size);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}

.play-btn:hover,
.play-btn:focus-visible {
    transform: scale(var(--play-hover-scale));
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
    outline: none;
}

.play-icon {
    width: 100%;
    height: 100%;
    border-radius: 999px; /* smooth edges for the circle */
}

/* If you want it centered over media, wrap both in a relatively positioned container: */
.media-wrap {
    position: relative;
    display: inline-block;
}
.media-wrap .play-btn {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

/* Screen-reader-only text */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,1px,1px);
    border: 0;
}

#loader
{
    background: rgb(0,0,0);
    top: 0;
    left: 260px;
    z-index: 9;
    width: calc(100% - 260px);
}

#video
{
    max-width: 100%;
    height: 100%;
}

@media screen and (max-width: 1199px)
{
    #loader
    {
        left: 0;
        width: 100%;
    }

    .botbar
    {
        display: flex;
    }

    .sidebar
    {
        top: 0;
    }

    .main
    {
        height: 100vh;
    }
    #video
    {
        height: calc(100% - 120px);
    }
}

@media screen and (max-width: 768px)
{
    #video
    {
        height: calc(100% - 240px);
    }
}

@media screen and (max-width: 576px)
{
    .modal-dialog-centered
    {
        margin-left: auto;
        margin-right: auto;
    }
}

.styled-checkbox {
    display:inline;
    width: 1px;
    height: 1px;
    position: absolute;
    left: 8px;
    top: 15px;
}

.styled-checkbox + label {
    color:#f2f2f2;
}

.styled-checkbox + label .checkbox {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url("../icon/check_radio_sheet.png") left top no-repeat;
    cursor:pointer;
}

.styled-checkbox:checked + label .checkbox {
    background:url("../icon/check_radio_sheet.png") -19px top no-repeat;
}

.sign__form form
{
    padding: 40px;
}
@media screen and (min-width: 992px) and (max-width: 1199px)
{
    .login-container
    {
        max-width: 1140px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1060px)
{
    .sign__form form
    {
        padding: 20px 40px;
    }
}
@media (max-width: 767px)
{
    .sign__form form
    {
        padding: 0;
    }
}
.login-img
{
    width: 100%;
    margin: 0;
    border-radius: 0 16px 16px 0;
}
@media (max-width: 991px)
{
    .login-img
    {
        margin-bottom: 1rem;
        border-radius: 16px;
    }
}