body{
    font-family: Roboto, Arial, sans-serif;
}
/* Swal2 modals */
.swal2-confirm {
    background-color: #032836 !important;
    border-radius: 4px !important;
    outline: none !important;
    min-width: 100px !important;
  }
  .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #032836 !important;
  }
  .swal2-icon.swal2-success {
    border-color: #032836 !important;
    color: #032836 !important;
  }
  .swal2-icon.swal2-success .swal2-success-ring {
    border: 0.25em solid rgba(3, 40, 54, 0.1) !important;
  }

  /* Colors */
  .black-color {
    color: #000 !important;
  }
  .red-color {
    color: #ff0000 !important;
  }
  .kino-color-primary {
    color: #032836 !important;
  }
  .kino-danger {
    color: #880000 !important;
  }
  .hero-background{
    background: linear-gradient(263deg,rgb(247 233 177/10%),rgb(214 255 169/2%),rgb(214 255 169/2%),rgb(247 233 177/10%)) !important;
    background-size: 400% 400%;
  }
  /* Button width */
  .w-90 {
    width: 90% !important;
  }
  .mw-0 {
    min-width: 0 !important;
  }
  .w-80px{
    min-width: 80px !important;
  }
  .w-100px {
    min-width: 100px !important;
  }
  .w-200px {
    width: 200px !important;
  }
  .w-400px{
    width: 400px !important;
  }
  /* Font sizes */
  .f-s-5 {
    font-size: 5px !important;
  }
  .f-s-12 {
    font-size: 12px !important;
  }
  .f-s-13 {
    font-size: 13px !important;
  }
  .f-s-14 {
    font-size: 14px !important;
  }
  .f-s-15 {
    font-size: 15px !important;
  }
  .f-s-18 {
    font-size: 18px !important;
  }
  .f-s-20 {
    font-size: 20px !important;
  }
  .f-s-24 {
    font-size: 24px !important;
  }
  .f-s-5rem {
    font-size: 5rem !important;
  }
  .f-w-400 {
    font-weight: 400 !important;
  }
  .f-w-500 {
    font-weight: 500 !important;
  }
  .f-w-600 {
    font-weight: 600 !important;
  }

  /* Display */
  .display-none {
    display: none;
  }
  .fit-content{
    width: fit-content;
  }
  .flex-1 {
    flex: 1 !important;
  }

  /* Pointer events */
  .pe-none {
    pointer-events: none;
  }
  .cursor-default{
    cursor: default !important;
  }
  .cursor-pointer{
    cursor: pointer;
  }
  .cursor-not-allowed{
    cursor: not-allowed !important;
  }

  /* Position */
  .align-self-flex-end {
    align-self: flex-end !important;
  }
  .just-cont-flex-end {
    justify-content: flex-end !important;
  }

  /* Errors */
  #card-errors {
    color: #fa755a;
  }
  .error-red {
    color: red !important;
  }
  .delete-btn {
    background-color: #880000 !important;
  }

  /* padding */
  .pb-03 {
    padding-bottom: 0.3rem;
  }
  .pr-60{
    padding-right: 60px !important;
  }

  /* height */
  .h-40 {
    height: 40px !important;
  }

  /* Spacing */
  .gap-3rem{
    gap: 3rem !important;
  }

  /* Main css */
  #body {
    position: relative;
    min-height: 100vh;
  }
  #main-container-body {
    /* padding-bottom: 340px; */
    position: relative;
    min-height: 100vh;
  }
  #footer {
    position: relative;
    bottom: 0;
  }
  .new-kino-logo-modal {
    width: 160px;
    position: absolute;
    top: 12px;
    left: 12px;
  }
  .title-modal {
    margin: auto;
    padding-left: 40px;
  }
  .close-btn-modal {
    margin-left: 0px !important;
  }
  /* .form-group{
  margin-bottom: 0px !important;
  } */
  /* Header css begin */
  .header-kino-logo {
    height: 40px;
    padding-left: 15px;
  }
  .max-width-1200 {
    max-width: 1200px;
  }
  .max-width-440{
    max-width: 440px;
  }

  .break-word{
    white-space: break-spaces;
  }
  .shadow-md {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2),
        0 1px 12px 4px rgba(0, 0, 0, 0.1);
  }
  .h-kino-logo {
    width: 3rem;
    height: 3rem;
    opacity: 1;
    margin-left: 2px;
  }
  .h-kino-name {
    color: #032836 !important;
    margin-left: 13px;
    font-size: 2.5rem;
    font-weight: 400;
    margin-top: -4px;
  }
  .h-kino-by-kinetx {
    color: #032836 !important;
    font-size: 16px !important;
    margin-left: -8px;
  }

  @media only screen and (min-width: 1440px) {
    #main-container-body  {
        min-height: 76vh;
    }
  }

  @media only screen and (max-width: 1025px) {
    .h-kino-logo {
        width: 2.5rem;
        height: 2.5rem;
    }
    .h-kino-name {
        font-size: 2rem;
    }
    .h-kino-by-kinetx {
        margin-left: -6px;
    }
  }
  @media only screen and (max-width: 768px) {
    .navbar-brand {
        padding-left: 0.9rem;
    }
    .h-kino-logo {
        width: 2rem;
        height: 2rem;
    }
    .h-kino-by-kinetx {
        padding-left: 0.5rem;
        font-size: 18px !important;
    }
  }
  @media only screen and (max-width: 480px) {
    .navbar-brand {
        margin-left: -1.9rem;
        margin-top: 0px;
    }
    .mr-1 {
        margin-right: 0 !important;
    }
    .h-kino-logo {
        padding: 0px;
        margin-left: 0px;
    }
    .h-kino-name {
        margin: 0px !important;
        padding: 0px !important;
        font-size: 1.4rem;
    }
    .h-kino-by-kinetx {
        font-size: 0.8rem !important;
        padding-left: 0.1rem;
    }
  }
  /* Header css end */

  /* Permissions Overlay Begin */
  .permissionOverlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #053f55;
    z-index: 200;
  }
  .permissionContainer {
    background-color: white;
    margin: auto;
    border-radius: 5px;
    width: 55%;
    min-width: 650px;
    height: 300px;
    position: relative;
    -moz-box-shadow: 1px 1px 5px 1px rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: 1px 1px 5px 1px rgba(255, 255, 255, 0.3);
    box-shadow: 1px 1px 5px 1px rgba(255, 255, 255, 0.3);
  }
  .kinetxlogopos {
    position: absolute;
    top: 3%;
    left: 2%;
    height: 45px;
  }
  .permissiontext {
    position: absolute;
    text-align: center;
    font-size: 19px;
    width: 100%;
    margin: 0px;
    font-weight: 500;
    top: 100px;
    color: #000;
  }
  #hrline {
    position: absolute;
    border: 1px solid black;
    width: 80%;
    left: 10%;
    top: 120px;
  }
  .kino-custom-checbkox {
    accent-color: #032836;
  }
  #kino-btn-area {
    position: relative;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 145px;
  }
  .kino-btn {
    color: white;
    background-color: #032836;
    border-radius: 5px;
    max-width: 250px;
    height: 2.5rem;
    border: none;
  }
  .kino-btn:focus {
    outline: none;
  }
  .kino-btn-primary {
    color: white;
    background-color: #032836;
    border-radius: 5px;
    border-color: transparent !important;
    text-transform: uppercase;
    font-weight: 500 !important;
    min-width: 140px;
  }
  .kino-btn-transparent{
    color: white !important;
    background-color: transparent !important;
    border-radius: 5px !important;
    border: none !important;
    text-transform: uppercase;
    font-weight: 500 !important;
  }
  .kino-btn-transparent:hover{
    color: #d0d0d0 !important;
    background-color: transparent !important;
    border-radius: 5px !important;
    border: none !important;
    text-transform: uppercase;
    font-weight: 500 !important;
  }
  .kino-btn-primary:disabled,
  .btn-start-kino-profile:disabled {
    opacity: 1;
    background-color: #eeeeee !important;
    color: #757575 !important;
    cursor: default;
  }
  .kino-btn-primary:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .kino-btn-secondary {
    color: #032836 !important;
    background-color: transparent !important;
    border-radius: 5px !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase;
    font-weight: 600 !important;
  }
  .kino-btn-secondary:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .kino-btn-link {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: underline;
    color: #032836;
    border: none;
    background-color: transparent;
  }
  .kino-btn-link:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .close:focus {
    outline: none;
  }
  .close-button-modal-kino {
    font-size: 1.3rem;
    top: 10px;
    right: 20px;
    border: none;
    position: absolute;
    padding: 0;
    background-color: #F3F3F3;
    margin: 0;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    transition: all 0.3s ease-in-out;
  }
  .close-button-modal-kino:hover {
    background-color: #e0e0e0;
  }

  .close-button-modal-kino:focus {
    outline: none;
  }

  .modal-footer {
    background-color: #F3F3F3;
    border-top: 1px solid rgba(65,64,76,.1) !important;
    margin-top: 10px;
}

  /* Permissions Overlay End */

  /* Tutorial css mod Begin */
  .tutorialtext {
    position: relative;
    text-align: center;
    font-size: 30px;
    padding: 0px;
    margin: 0px;
  }
  @media only screen and (max-width: 800px) {
    .tutorial_app {
        display: none !important;
    }
    #showTutorial-btn {
        display: none !important;
    }
  }
  @media only screen and (max-height: 600px) {
    .tutorial_app {
        display: none !important;
    }
    #showTutorial-btn {
        display: none !important;
    }
  }
  /* Tutorial css mod End */

  /* Profile CSS Billing begin*/
  .billing-container-main {
    display: none;
  }
  .billing-change-cancel {
    justify-content: flex-end;
  }
  .profile-titles-kino {
    margin-bottom: 1rem;
    font-size: 2.5rem;
  }
  .add-payment-if-empty {
    width: 100%;
    min-height: 100px;
    border: 1px solid #808080;
    border-radius: 4px;
    justify-content: center;
    display: flex;
    align-items: center;
    color: #808080;
    cursor: pointer;
  }

  @media (max-width: 1024px) {
    .profile-titles-kino {
        font-size: 2rem;
    }
  }

  @media screen and (max-width: 530px) {
    #pills-payment {
        overflow-x: auto;
    }
    .billing-overview-row {
        display: block !important;
    }
    .billing-change-cancel {
        justify-content: center;
    }
    .billing-overview-row-dates {
        display: block !important;
    }
  }

  /* Profile CSS Billing end*/

  /* caret at profile begin*/
  .dropdown-toggle::after {
    border-top: 0.4em solid black !important;
    border-right: 0.4em solid transparent !important;
    border-left: 0.4em solid transparent !important;
    vertical-align: 0.1em !important;
    font-size: 0.7rem;
  }
  /* caret at profile end */

  /* dropdown menu laravel begin */
  .dropdown-mobile {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 30%);
  }
  .dropdown-mobile a {
    width: 100%;
    text-align: center;
    font-weight: 400;
    color: #808080 !important;
  }
  @media only screen and (max-width: 768px) {
    .dropdown-mobile {
        display: block;
    }
    .dropdown-desktop {
        display: none;
    }
  }
  @media only screen and (min-width: 768px) {
    .dropdown-mobile {
        display: none;
    }
    .dropdown-desktop {
        display: flex;
    }
  }
  .dropdown-menu-modified {
    background-color: #fff !important;
  }
  /* dropdown menu laravel end */

  /* Scheduler css begin */
  #scheduler-tab {
    overflow-x: auto;
  }
  #schedule-info-footer {
    overflow-x: auto;
  }
  #schedule-kino-table {
    margin-bottom: 0;
  }
  #scheduled_kinos_title {
    font-size: 1.4em;
    cursor: default;
    margin: 0;
  }
  /* Scheduler css end */

  /* Enter name to join kino modal begin */
  .modal-content {
    background-color: #fffffd  !important;
  }
  .modal-header {
    background-color: #fffffd  !important;
  }
  .modal-entername,
  .modal-kino {
    display: inline !important;
    padding: 10px 10px !important;
    height: 50px;
  }
  .modal-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .enter-name-logo,
  .modal-kino-logo {
    position: relative;
    width: 150px;
    /* height:30px; */
    /* margin-top: -7px; */
  }
  .modal-title-reqName,
  .modal-title-kino {
    position: relative;
    font-size: 24px !important;
    height: 35px !important;
    line-height: 1.6 !important;
  }
  .kino-span {
    font-weight: 400;
    font-size: 18px;
  }
  .modal-body {
    background-color: white;
  }
  .modal-body-join,
  .modal-body-kino {
    height: auto;
    border-radius: 5px;
  }
  .kino-body-text {
    display: block !important;
    text-align: center;
  }
  .kino-body-text h2 {
    font-size: 25px;
    margin-top: 0px;
    padding-top: 0px;
    margin-top: -5px;
  }
  .kino-body-text p {
    font-size: 17px;
    margin-bottom: 1.5rem;
  }
  .display-name-modal {
    margin-bottom: 0px !important;
  }
  #req-btn-cont {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .req-button,
  .modal-kino-button {
    background-color: #032836 !important;
    color: white !important;
    margin-bottom: 2.5rem;
  }
  /* Terms and conditions css Begin */
  .termsNconditions {
    font-size: 14px;
    margin: 0;
  }
  #terms-div {
    margin-bottom: 5px !important;
    text-align: center;
  }
  /* Terms and conditions css End */
  /* Enter name to join kino modal end */

  /*Kino Recorder modal css Begin*/
  .kino-recorder-modal-body {
    color: black;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .kino-recorder-modal-body h3 {
    font-size: 25px;
  }
  .kino-recorder-modal-body p {
    font-size: 1rem;
    margin: 0;
    padding: 0;
  }
  .kino-recorder-modal-body img {
    width: 460px;
    border-radius: 4px;
    margin: 0.75rem 0;
  }
  @media only screen and (max-height: 720px) {
    .kino-recorder-modal-body img {
        width: 360px;
    }
  }
  /*Kino Recorder modal css End*/

  /* Modals participant and time limit begin */
  /* .modal-backdrop {
    z-index: 1 !important;
  } */

  .credit-card-container {
    display: none;
  }

  .card-payment-header {
    padding: 0 !important;
    left: 16px;
  }

  .card-performanceOptimizer {
    max-width: 130px !important;
    padding: 0 !important;
    max-height: 30px;
    left: 100px;
    top: -5px;
  }
  /* Modals participant and time limit end */

  /* feedback modal begin */
  .rating-error {
    color: red;
    font-size: 14px;
    display: flex;
    justify-content: center;
    margin-top: -5px;
  }
  .rating-description-error {
    color: red;
    font-size: 14px;
    display: flex;
    align-self: stretch;
    padding-top: 8px;
  }
  /* feedback modal end */

  /* SignIn / SignUp modal css begin */
  .custom-modal-title {
    font-size: 2rem;
    cursor: text !important;
  }
  .auth-modals {
    max-width: 450px;
    border-radius: 4px !important;
    padding-bottom: 8px !important;
    color: #000 !important;
    margin: auto;
  }
  .modified-auth-input {
    border-radius: 4px;
    outline: black;
    box-shadow: none;
  }
  /* SignIn / SignUp modal css end */

  /* Payment css begin */
  .container-payment {
    margin: auto;
    max-width: 800px;
  }

  .payment-inputs {
    height: 45px;
    padding: 8px 12px;
    border-style: none;
    background-color: #fafafa;
    box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
  }

  .payment-inputs:focus {
    background-color: #fafafa;
    outline: none;
    box-shadow: 0 1px 3px 0 #cfd7df;
  }

  .text-center {
    text-align: center;
  }

  .orange-active:hover {
    background-color: lightgray !important;
  }

  .orange-active:active {
    background-color: lightgray !important;
  }

  .billing-method-radio,
  .billing-method-checkbox {
    display: flex;
    align-items: baseline;
    font-size: large;
    padding: 10px;
  }
  /* .billing-method-radio label{
  margin-right: 2rem;
  } */

  .StripeElement {
    background-color: #fafafa;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08);
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
  }

  .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
  }

  .StripeElement--invalid {
    border-color: #fa755a;
  }

  .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
  }

  .cardElement-container {
    max-width: 470px;
    min-width: 200px;
  }

  .payment-form-inputs {
    width: auto;
    min-width: 200px;
    margin: 0;
  }

  .name-row input {
    position: relative;
    width: 89%;
    height: 35px;
    padding: 8px 12px;
    margin-left: 16px;
    border-style: none;
    background-color: #fafafa;
    box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
  }
  .no-shadow {
    box-shadow: none;
  }
  .name-row input:focus {
    outline: none;
    box-shadow: 0 1px 3px 0 #cfd7df;
  }
  /* .card-body{
    padding-left: 0px;
  } */
  .privacy-row {
    display: flex;
    width: 90%;
    margin: 0px;
    align-items: baseline;
  }
  .privacy-row input {
    margin-right: 0.5rem;
    cursor: pointer;
  }
  .pay-button-container button {
    height: 45px;
    width: 100%;
    min-width: 200px;
  }
  .review-order-text {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
  }
  .card-body-modified-plans {
    padding-left: 0;
  }
  .card-container-custom {
    width: 100%;
  }
  .row-modified {
    flex-wrap: wrap;
  }
  @media only screen and (max-width: 767px) {
    .row-modified {
        display: block !important;
    }
  }
  /* Payment css end */

  /* radio btn */

  .input[type="radio"],
  .input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
    display: none;
  }

  .label-custom-plans {
    color: black;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding: 0.8rem;
    margin-bottom: 0;
    border: 3px solid lightgray;
    border-radius: 5px;
    border-radius: 10px;
    min-height: 100px;
    width: 100%;
    position: relative;
    min-height: 112px;
    box-shadow: rgb(0 0 0 / 20%) 0px 3px 8px;
  }

  .label-custom-plans-padding {
    /* padding: 0.8rem; */
    height: auto !important;
  }
  .price-container {
    /* margin-top: 10px; */
  }
  .price-container-inner {
    width: 100px;
  }
  .plan-name-container {
    position: relative;
  }
  .billing-method-span,
  .month-span,
  .small-words-span {
    font-size: 14px;
  }

  .h4-price {
    margin-bottom: 0 !important;
    color: black;
    font-weight: 500;
  }
  .h4-plan-name {
    font-size: 24px;
    font-weight: 500;
  }

  .input[type="radio"]:hover + .label-custom-plans {
    border: 3px solid gray;
  }
  .input[type="checkbox"]:hover + .label-custom-plans {
    border: 3px solid gray;
  }
  .input[type="radio"]:checked + .label-custom-plans {
    border: 3px solid #032836;
  }
  .input[type="checkbox"]:checked + .label-custom-plans {
    border: 3px solid #032836;
  }
  .input[type="checkbox"]:checked + .label-custom-plans.plan-addon::after {
    content: "\2713";
    width: 24px;
    height: 24px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: #032836;
    color: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    font-size: 11px;
    line-height: 25px;
  }

  .save-span {
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 12px;
    background-color: #032836;
    border-radius: 5px 0 0 5px;
    padding: 2px 10px;
    color: white;
  }

  /* .label + .input[type=radio] + .label {
  border-left: solid 3px grey;
  } */
  .radio-group {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
  }
  /* radio btn */

  /* yoga sigup page begin */
  .yoga-signup-container {
    max-width: 500px;
    margin: auto;
  }
  .event-details-div,
  .payment-details-div {
    width: 330px;
    margin: auto;
  }
  .yoga-form-inputs {
    width: auto !important;
  }
  .custom-option {
    display: flex;
    justify-content: space-evenly;
  }

  .input-group > .intl-tel-input.allow-dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
  }

  .input-group > .intl-tel-input.allow-dropdown > .flag-container {
    z-index: 4;
  }

  .iti-flag {
    background-image: url("/js/tel-input/img/flags.png");
  }

  .iti__selected-flag {
    height: 45px;
    border-radius: 5px 0 0 5px;
    margin-top: 15px;
    margin-left: -2px;
  }

  .input-group-text {
    z-index: 0;
    position: absolute;
    right: 0;
    border-radius: 5px !important;
  }
  .iti {
    width: 100%;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2 / 1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    .iti-flag {
        background-image: url("/js/tel-input/img/flags@2x.png");
    }
  }
  .event-details-inner,
  .time-details-div {
    position: relative;
  }
  .price-alignment {
    margin-left: 136px;
  }
  .non-refundable-span {
    font-size: 12px;
    position: absolute;
    right: 15px;
    top: 20px;
  }
  .donation-input {
    padding-left: 20px;
  }
  .donation-span {
    position: absolute;
    top: 11px;
    left: 25px;
    color: gray;
  }
  .clock-fa-pos,
  .calendary-fa-pos {
    position: absolute;
    left: -25px;
    top: 3px;
    font-size: 18px;
  }
  @media only screen and (max-width: 450px) {
    .clock-fa-pos,
    .calendary-fa-pos {
        display: none;
    }
  }
  .kino-gray {
    color: dimgray !important;
  }
  .f-w-300 {
    font-weight: 300;
  }
  .hide_show {
    display: none;
  }
  .submit_event {
    display: none;
  }
  .instructor_picker {
    display: none;
  }

  .loader_container {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(3, 40, 54, 0.4);
  }

  .loader {
    margin: auto;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }

  /* Safari */
  @-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
  }
  /* yoga sigup page end */

  /* errors css begin */
  .error_kino {
    font-size: 0.9rem;
    color: red !important;
  }

  #instructor_error {
    text-align: center;
  }
  /* errors css end */

  /* footer styling begin */
  .footer-links {
    padding: 4px;
    margin-top: 30px;
    /* gap: 20px; */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 70%;
    margin: 30px auto 0;
  }

  .footer-list-style {
    padding: 5px;
    margin-top: unset !important;
  }

  @media (max-width: 959px) {
    .footer-list {
        width: 50%;
        text-align: center;
    }
    .footer-links {
        justify-content: flex-start;
    }
  }

  @media (max-width: 599px) {
    .footer-list {
        width: 100%;
        text-align: center;
        margin-bottom: unset !important;
    }
  }

  .footer-links a {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.00938em;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  }

  .footer-links a:hover {
    color: #fff;
    text-decoration: underline;
  }

  .footer-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0 45px;
  }

  .footer-social-icon {
    margin-right: 20px;
    font-size: 28px;
    display: flex;
  }
  .footer .footer-social-links-icon {
    width: 24px;
    height: 24px;
  }

  .footer .copyright-content {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    text-align: center;
    justify-content: center;
  }

  .footer .copyright-content-kino {
    font-size: 0.8rem;
    line-height: 1.19;
    /* padding: 16px; */
  }
  ul {
    padding-inline-start: 0px;
    margin-bottom: 0px;
  }

  .footer_rights {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .footer-divider {
    padding: 0 1rem;
    font-size: 18px;
  }

  @media (max-width: 1024px) {
    .footer_rights {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        line-height: 1.5;
        font-size: 0.75rem;
    }
    .footer_rights span {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
    }
    .footer-divider {
        display: none;
    }
  }
  /* footer styling end */

  /* plans page styling begin */
  .kino-plans-hero {
    position: relative;
    background-color: rgba(0, 0, 0, 0.08);
    flex: 4 1;
    justify-content: flex-end;
    width: 100%;
    color: #ffffff;
    box-sizing: border-box;
  }
  .plans-main {
    height: 40vh;
    display: flex;
    background-color: #032836;
    /* background-color: rgba(3,40,54,.8); */
  }
  .plans-text-container {
    max-width: 700px;
    margin: auto;
    text-align: center;
  }
  .plans-text-container h1 {
    font-size: 3.2rem;
  }
  .plans-header {
  }
  .plans-white-space {
    background-color: #fff;
    height: 15vh;
    width: 100%;
    padding-top: 1rem;
    justify-content: center;
    color: black;
  }
  .container-modified-plans {
    max-width: 1200px;
  }
  .col-modified-kino {
    align-self: flex-end;
  }
  .card-modified {
    width: 20rem;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08);
  }
  .card-body-modified {
    background-color: white;
  }
  .card-title-plans {
    background-color: #eeeeee;
    height: auto;
    font-size: 1.5rem;
    font-weight: 400;
    padding: 1rem;
    display: grid;
  }
  .card-text-modified {
    display: contents;
  }
  .list-group-item-modified {
    border: none;
    padding: 0.5rem 1.25rem !important;
  }
  .white-background {
    background-color: white;
  }
  .select-plans-button {
    width: 90%;
  }
  .card-text-modified-p {
    font-size: 14px;
    color: black;
  }
  .custom-pick-plan {
    display: inline-flex;
    align-items: center;
    color: black;
  }
  .partner-container {
    display: flex;
    width: 100%;
    border: 3px solid lightgray;
    border-radius: 10px;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0.8rem;
    cursor: pointer;
    position: relative;
    box-shadow: rgb(0 0 0 / 20%) 0px 3px 8px;
  }
  .partner-container:hover {
    border: 3px solid gray;
  }

  .partner-container .partner-logo {
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .partner-container .partner-logo img {
    height: 40px;
    border-radius: 10px;
    margin-right: 0.5rem;
  }
  .partner-container .partner-logo .partner-text {
    font-size: 1.5rem;
    line-height: 1 !important;
    font-weight: 700;
  }
  .partner-container .partner-blurb {
    font-size: 16px;
    font-weight: 500;
    margin-right: 60px;
  }

  @media only screen and (max-width: 990px) {
    .custom-row-kino {
        display: block;
    }
    .custom-row-kino .col-modified-kino {
        margin: auto;
        padding-bottom: 25px;
    }
    .col-modified-kino {
        flex: auto;
        max-width: 100%;
    }
    .col-modified-kino .card {
        margin: auto;
    }
  }
  @media only screen and (max-width: 576px) {
    .card-modified {
        width: auto;
    }
  }
  /* plans page styling end */

  /* UNSUPPORTED BROWSER & OLD BROWSER */
  .browser-not-supported {
    display: flex;
    height: 85vh;
  }
  .old-browser {
    height: 90vh;
  }
  .unsupported-title {
    font-size: 30px;
    font-weight: 600;
    color: #032836;
    margin-bottom: 20px;
  }
  .unsupported-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 40px;
  }
  .old-browser-subtitle {
    margin-bottom: 20px;
  }
  .old-browser-info {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 40px;
  }
  .unsupported-apps {
    display: flex;
    width: 450px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
  }
  .old-browser-apps {
    width: 430px;
  }
  .unsupported-apps-container {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .unsupported-apps-title {
    margin-top: 15px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 18px;
  }
  .unsupported-apps-desc {
    font-size: 10px;
    font-weight: bold;
    line-height: 11px;
  }
  .unsupported-button {
    border: 2px solid #032836;
    border-radius: 4px;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 1rem;
    line-height: 19px;
    color: #032836;
    width: 210px;
    margin: 40px auto;
    cursor: pointer;
  }
  .old-browser-image {
    width: 42px;
    height: 42px;
    cursor: pointer;
  }
  .unsupported-image-container {
    position: relative;
    margin-bottom: 40px;
  }
  .unsupported-image-shadow-container {
    width: 500px;
    margin: 0 auto;
  }
  .unsupported-image-shadow {
    width: 100%;
    height: 15px;
    background: #032836;
    opacity: 0.75;
    filter: blur(25px);
  }
  .unsupported-image-background {
    position: absolute;
    width: 100%;
    height: 234px;
    top: 40%;
    z-index: -1;
    background: #E0E4E5;
    border-radius: 4px;
  }

  /* RESPONSIVENESS BROWSER NOT SUPPORTED */
  @media screen and (max-width: 1540px) and (max-height: 800px) {
    .browser-not-supported {
        height: 100vh;
    }
    .unsupported-title {
        font-size: 27px;
    }
    .unsupported-subtitle {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .old-browser-info {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .old-browser-apps {
        width: 380px;
    }
    .unsupported-apps-title {
        margin-top: 10px;
        font-size: 14px;
    }
    .unsupported-apps-desc {
        font-size: 9px;
    }
    .unsupported-button {
        font-size: 13px;
        margin: 20px auto;
        width: 200px;
        padding: 6px 15px;
    }
    .unsupported-image-container {
        margin-bottom: 20px;
    }
    .unsupported-container {
        margin: 50px auto !important;
    }
    .unsupported-image {
        height: 250px;
    }
    .unsupported-image-shadow-container {
        width: 420px;
    }
    .unsupported-image-background {
        height: 215px;
        top: 40%;
    }
  }

  /* Email-Pages and reset password begin */
  .email-verify-container,
  .unsupported-container,
  .information-page-container {
    /*height: 300px;*/
    margin: auto;
    max-width: 1200px;
    width: 100%;
  }
  .reset-password-container {
    width: 500px;
    max-width: 1200px;
    margin: auto;
    height: 300px;
  }
  .reset-password-container input {
    border-radius: 4px;
  }
  .reset-password-container .invalid-feedback {
    font-size: 14px;
    text-align: left;
  }
  /* Email-Pages and reset password end */

  #subscription-form .form-group {
    margin: 1rem 0;
  }

  #billing-information small.text-danger {
    margin-left: 13px;
  }
  #billing-information input {
    margin-bottom: 5px;
  }

  /* Confirm email pages */
  .confirm-email-image-container {
    margin: auto;
    justify-content: center;
  }
  .confirm-email-image {
    height: 100px;
  }
  .request-another-email-link {
    text-decoration: underline;
    font-size: 20px;
    color: #032836;
  }
  .kino-link-class {
    text-decoration: underline;
    color: #032836;
  }

  #card-element {
    margin-bottom: 5px;
  }

  /* Sign in & Sign up modals php */
  .birthdate-label-modal {
    position: absolute;
    top: 8px;
    right: 20px;
  }

  .card-container-custom #card-holder-name {
    margin-bottom: 5px;
  }
  #card-name-error {
    margin-left: 12px;
  }

  /* Join kino toast */
  .toast-modified{
  border-radius: 10px !important;
  background-color: #fafafa !important;
  color: #000;
  opacity: 1;
  }
  /* .toast-modified.translateXUp{
  transition: all 0.3s;
  transform: translateY(-57px);
  opacity: 0;
  }
  .toast-modified.translateXDown{
  transition: all 0.3s;
  transform: translateY(57px);
  } */
  .close-join-toast{
  position: absolute;
  top: 7px;
  right: 7px;
  border: none;
  background-color: transparent;
  outline: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .close-join-toast i.fa-window-minimize{
  line-height: 8px;
  }
  .close-join-toast:focus{
  outline: none !important;
  }
  .toast-body-modified{
    /* height: 55px; */
    display: flex;
    /* align-items: flex-end; */
    font-weight: 500;
    flex-direction: column;
    color: #495057;
    font-size: 1rem;
  }
  .toast-name-container{
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 122px;
  display: block;
  font-weight: 600;
  margin-right: 2px;
  color: #032836;
  }
  .kino-btn-reject{
  outline: none;
  background-color: #fafafa !important;
  color: #032836 !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  border: none;
  box-shadow: inset 0px 0px 0px 1px #032836 !important;
  }
  .kino-btn-reject:hover{
  outline: none;
  box-shadow: inset 0px 0px 0px 1px #032836 !important;
  }
  .kino-btn-reject:focus{
  outline: none;
  background-color: #fafafa !important;
  box-shadow: inset 0px 0px 0px 1px #032836 !important;
  }

  /* Pull focus modal css */
  .modal-header-kino {
    border: 0 !important;
    height: 54px;
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    position: relative;
    justify-content: space-between;
    padding: 10px 20px;
  }
  .modal-header-kino::after{
    content: "";
    position: absolute;
    height: 1px;
    background-color: #FF824D;
    left: 20px;
    right: 20px;
    bottom: 0;
  }
  #modal-subheader {
    text-align: center;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

  #pullFocusParticipant {
    width: 400px;
    height: 35px;
    border-radius: 4px;
    font-size: 18px;
  }
  #pullFocusParticipant:focus {
    outline: none;
  }
  #pullFocusParticipant option {
    font-size: 18px;
  }

  /********************
  PULL FOCUS DROPDOWN
  ********************/

  .custom-select {
    background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20height%3D%2212%22%20width%3D%2212%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.07.248a.75.75%200%20111.115%201.004L5.656%205.193a.75.75%200%2001-1.115%200L1.068%201.252A.75.75%200%20012.182.248L5.1%203.571%208.07.248z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat right 0.75rem center/12px 10px;
  }

  .multiselect-native-select div {
    width: 400px !important;
  }

  .multiselect-native-select .dropdown-item {
    color: #212529 !important;
  }

  .multiselect-container {
    background-color: #fff;
  }

  .multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback), button.multiselect-option.dropdown-item:hover, button.multiselect-option.dropdown-item:focus {
    background-color: #aac6d0 !important;
    transition: ease-in-out .3s
  }

  .multiselect-container .dropdown-item.disabled span input {
    width: 0;
    margin-left: 0 !important;
  }

  .multiselect-container .dropdown-item.disabled span{
    padding-left: 0;
  }

  .multiselect-container .dropdown-item span input:checked {
    accent-color: #032836;
  }

  .option-separator {
    /* font-size: 4px !important; */
    /* background-color: #000000; */
  }

  /* Split to conversations modal css */
  .modal-header-kino .modal-title {
    font-weight: 500;
    line-height: 1;
  }

  .modal-header-kino #modal-subheader {
    color: #000;
  }

  .nav-pills-modified{
  display: flex ;
  justify-content: center;
  }
  .nav-pills-modified .nav-link-modified{
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.25) !important;
  border-radius: 0 !important;
  min-width: 200px !important;
  text-align: center;
  border-bottom: 1px solid #ccc;
  }
  .nav-pills-modified .nav-link-modified.active{
  color: #000 !important;
  font-weight: 700;
  /* border-bottom: 2px solid #000; */
  box-shadow: inset 0px -10px 0px -8px #000;
  opacity: 1;
  }
  .card-accordion-modified{
  position: inherit !important;
  }
  .dropdown-item-accordion{
  color: #000 !important;
  }
  .dropdown-item-accordion:hover{
  background-color: #eee !important;
  }
  .automatic-convo-input{
  width: 80px;
  text-align: right;
  outline: none;
  border: 1px solid lightgray;
  border-radius: 4px;
  }
  .automatic-convo-input:focus{
  outline: none;
  }
  .split-convo-automatic{
  display: flex;
  justify-content: center;
  color: #000 !important;
  flex-direction: column;
  }
  .automatic-convo-split-content{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  }
  .automatic-convo-calculation{
  display: flex;
  justify-content: center;
  }
  #info-message-split-convo{
  font-size: 12px;
  text-align: left;
  }
  .split-convo-manual {
    color: #000 !important;
    width: 100%;
    justify-content: space-evenly;
  }
  .modal-conv {
    max-width: 1000px;
    min-width: 1000px;
    transition: all 0.3s !important;
  }
  .modal-conv.manual{
    max-width: 1200px !important;
    min-width: 1200px !important;
  }
  .split-convo-manual .spl-title-desc {
    font-size: 13px;
    display: flex;
    align-items: flex-end;
  }

  .split-convo-manual #conversation-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 476px;
    margin: 0 auto;
    padding-bottom: 20px;
  }
  .split-convo-manual #conversation-list .card {
    width: 218px;
    max-width: 218px;
    margin: 10px;
    flex-grow: 1;
    border: none;
    background-color: transparent;
  }
  .split-convo-manual #conversation-list .card .card-header {
    border: none;
  }
  .split-convo-manual
    #conversation-list
    .card
    .card-header
    .add-button-split-convo
    svg {
    width: 15px;
    height: 15px;
  }
  .split-convo-manual #conversation-list .card .card-body {
    border-radius: 10px;
    border: 1px solid #808080;
    min-height: 102px;
    max-height: 202px;
    display: flex;
    overflow: hidden;
    position: relative;
    flex-wrap: wrap;
    box-shadow: 0 0 3px rgba(77, 127, 145, 0.5);
  }
  .split-convo-manual #conversation-list .card .card-body:hover{
    box-shadow: 0 0 0px 4px rgb(90 205 223 / 15%) !important;
  }
  .split-convo-manual #conversation-list .card .card-body.expanded {
    max-height: none !important;
  }
  .split-convo-manual
    #conversation-list
    .card
    .card-body.expanded
    > .expand-body-convo
    i {
    transform: rotate(180deg);
  }
  .split-convo-manual #conversation-list .expand-body-convo {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: 1s;
  }
  .split-convo-manual #conversation-list .expand-body-convo.visible {
    display: flex;
  }
  .split-convo-manual .spl-participant-list-container {
    list-style-type: none;
  }
  .split-convo-manual .spl-participant-list {
    border: 1px solid #808080;
    border-radius: 5px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    overflow-y: overlay;
    overflow-x: hidden;
    padding: 10px;
    min-height: 330px;
    max-height: 330px;
    width: 150px;
    align-items: center;
    background-color: #fffbf06b;
  }
  .split-convo-manual .spl-participant-list li.participant-item {
    margin-left: 8px;
    margin-right: 8px;
    border: 1px solid #808080;
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    height: 100px;
    min-height: 100px;
    width: 108px;
    min-width: 108px;
    overflow: hidden;
    cursor: grab;
  }
  .split-convo-manual .spl-participant-list li.participant-item video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: center;
    background-color: #000;
  }
  .split-convo-manual
    .spl-participant-list
    li.participant-item
    span.participant-name {
    padding: 0 5px;
    font-size: 13px;
    position: absolute;
    width: 100%;
    z-index: 3;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .split-convo-manual .split-convo-kino-layout {
    display: flex;
    justify-content: space-between;
  }

  .split-convo-manual .split-convo-kino-layout .split-convo-kino-spaces {
  }

  .split-convo-manual .split-convo-kino-layout .split-convo-kino-participants {
    margin-left: 18px;
  }

  #split-conversations-modal-body .modal-body {
    width: 100%;
    overflow: hidden;
  }

  .manual-conversations-header {
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    align-items: center;
  }
  #conversation-list .user-added-split-convo {
    display: initial;
  }
  #conversation-list .user-added-split-convo video.user-video {
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 100%;
    position: absolute;
    background-color: #000;
  }
  .add-button-split-convo{
  height: 30px;
  padding: 0 4px !important;
  background-color: transparent;
  color: #032836 !important;
  outline: none;
  box-shadow: none;
  font-weight: 500 !important;
  font-size: 14px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  }
  .add-button-split-convo:hover{
  background-color: #eee !important;
  }
  .add-button-split-convo:focus{
  outline: none;
  box-shadow: none !important;
  }
  .card-header.card-header-split-convo{
  height: 40px;
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  background-color: transparent !important;
  box-shadow: none;
  align-items: center;
  }
  .card-header-split-convo .name-actions-convo-manual span{
  padding: 0 4px;
  height: 22px;
  }
  .radio-btn-split-convo{
  align-items: baseline;
  justify-content: center;
  }
  .accordion-container-split-convo{
  border: 1px solid #808080;
  border-radius: 5px;
  max-height: 330px;
  min-height: 330px;
  overflow: overlay;
  position: relative;
  min-width: 485px;
  background-color: #fffbf06b;
  }
  .accordion-container-split-convo .scrollUp, .accordion-container-split-convo .scrollDown{
  height: 40px;
  margin-top: -40px;
  position: sticky;
  width: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100; /* card 539 */
  cursor: pointer;
  transition: all .5s;
  }
  .accordion-container-split-convo .scrollUp:hover > i, .accordion-container-split-convo .scrollDown:hover > i{
  transform: scale(1.4);
  }
  .accordion-container-split-convo .scrollUp{
  top: 0;
  }
  .accordion-container-split-convo .scrollDown{
  bottom: 0;
  }
  #container-split-convo-placeholder{
  width: 100%;
  height: 308px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 84px;
  color: #808080;
  cursor: pointer;
  }
  .drop-target{
    border: 2px solid #053f55 !important;
    box-shadow: 0 0 0px 3px #21c3dd7d !important;
    transition: all 0.1s;
  }
  .user-added-split-convo{
  display: flex;
    justify-content: space-between;
    height: 36px;
    align-items: center;
    padding: 0;
    color: #000 !important;
    font-size: 14px;
    height: 100px;
    max-height: 100px;
    width: 50%;
    position: relative;
    overflow: hidden;
    cursor: grab;
  }
  .user-added-split-convo .user-name {
    position: absolute;
    max-width: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    right: 0;
    z-index: 3;
    font-size: 13px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .user-added-split-convo .user-name span,
  .split-convo-manual
    .spl-participant-list
    li.participant-item
    span.participant-name
    span {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
  }

  .card-body-modified {
    padding: 0 !important;
  }
  .user-remove-split-convo {
    background-color: transparent;
    border-radius: 4px;
    border: none;
    color: #880000 !important;
    outline: none;
    box-shadow: none;
    font-weight: 500 !important;
    font-size: 14px;
    height: 30px;
  }
  .user-remove-split-convo:hover {
    background-color: #eee;
  }
  .user-remove-split-convo:focus {
    outline: none;
    box-shadow: none !important;
  }
  .radio-button-section-split {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .radio-button-section-split div {
    display: flex;
    /* align-items: baseline; */
  }
  .split-option-container {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
  }
  .split-option-paragraph {
    font-size: 12px;
    max-width: 300px;
    text-align: left;
  }

  /* MIC MUTED ON PULL FOCUS MODAL */
  .mic-muted-text {
    font-weight: 400;
    font-size: 1rem;
    line-height: 19px;
    letter-spacing: 0.02em;
    color: rgba(0, 0, 0, 0.8);
  }
  .mic-muted-container {
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  /* switch on modals */
  /* OLD SWITCH */
  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .switch:focus {
    outline: none;
  }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider-checkbox {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  .slider-checkbox:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  input:checked + .slider-checkbox {
    background-color: #032836;
  }
  input:disabled + .slider-checkbox {
    opacity: 0.4;
  }
  input:focus + .slider-checkbox {
    box-shadow: none;
  }
  input:checked + .slider-checkbox:before {
    -webkit-transform: translateX(32px);
    -ms-transform: translateX(32px);
    transform: translateX(32px);
  }
  .slider-checkbox.round {
    border-radius: 34px;
  }
  .slider-checkbox.round:focus {
    outline: none;
  }
  .slider-checkbox.round:before {
    border-radius: 50%;
  }
  /* .model-2{
    .checkbox{
      label{
        width: 75px;
          &:after{
            top: 0;
            width:42px;
            height: 42px;
          }
      }
      input:checked + label{
        background: $green;
        &:after{
          left: 35px;
        }
      }
    }
  } */

  /* switch on the option menu */
  .dropdown-item .switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .dropdown-item .switch:focus {
    outline: none;
  }
  .dropdown-item .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .dropdown-item .slider-checkbox {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(180, 180, 180);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: 1px solid #fff;
  }
  .dropdown-item .slider-checkbox:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  .dropdown-item input:checked + .slider-checkbox {
    background-color: #032836;
  }
  .dropdown-item input:focus + .slider-checkbox {
    box-shadow: none;
  }
  .dropdown-item input:checked + .slider-checkbox:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
  }
  .dropdown-item .slider-checkbox.round {
    border-radius: 34px;
  }
  .dropdown-item .slider-checkbox.round:focus {
    outline: none;
  }
  .dropdown-item .slider-checkbox.round:before {
    border-radius: 50%;
  }

  /* animation change when switching tabs */
  .tab-pane.fade {
    transition: all 0.2s;
    transform: translateY(1rem);
  }
  .tab-pane.fade.show {
    transform: translateY(0rem);
  }

  #performanceOptimizer {
    width: 100% !important;
  }

  .performanceOptimizer input{
    opacity: 1 !important;
    width: auto !important;
  }

  .performace-types {
    width: 100% !important;
    justify-content: space-between;
  }

  .balanced-performance {
    margin-right:40px;
  }

  input#performanceOptimizer[type=range] {
  height: 37px;
  -webkit-appearance: none;
  width: 100%;
  }

  input#performanceOptimizer[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 5px 5px 5px 1px #ffffff;
  background: #cccccc;
  border-radius: 13px;
  border: 1px solid #cccccc;
  }

  input#performanceOptimizer[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 2px 7px #858789;
  border: 1px solid #032836;
  height: 24px;
  width: 24px;
  border-radius: 25px;
  background: #032836;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
  }

  input#performanceOptimizer[type=range]:focus::-webkit-slider-runnable-track {
  background: #cccccc;
  }

  input#performanceOptimizer[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 5px 5px 5px #ffffff;
  background: #cccccc;
  border-radius: 13px;
  border: 1px solid #cccccc;
  }

  input#performanceOptimizer[type="range"]::-moz-range-progress {
  background-color: #858789;
  height: 8px;
  border: none;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  }

  input#performanceOptimizer[type=range]::-moz-range-thumb {
  box-shadow: 2px 2px 7px #858789;
  border: 1px solid #032836;
  height: 24px;
  width: 24px;
  border-radius: 25px;
  background: #032836;
  cursor: pointer;
  }

  input#performanceOptimizer[type=range]::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
  }

  input#performanceOptimizer[type=range]::-ms-fill-lower {
  background: #cccccc;
  border: 1px solid #cccccc;
  border-radius: 26px;
  box-shadow: 5px 5px 5px #ffffff;
  }

  input#performanceOptimizer[type=range]::-ms-fill-upper {
  background: #cccccc;
  border: 1px solid #cccccc;
  border-radius: 26px;
  box-shadow: 5px 5px 5px #ffffff;
  }

  input#performanceOptimizer[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 2px 2px 7px #858789;
  border: 1px solid #032836;
  height: 24px;
  width: 24px;
  border-radius: 25px;
  background: #032836;
  cursor: pointer;
  }

  input#performanceOptimizer[type=range]:focus::-ms-fill-lower {
  background: #cccccc;
  }

  input#performanceOptimizer[type=range]:focus::-ms-fill-upper {
  background: #cccccc;
  }

  @media (-ms-high-contrast:none),(-ms-high-contrast:active) {
  input#performanceOptimizer[type=range] {
  height: 74px;
  }
  }




  #participants-pull-focus-slider .slider {
    opacity: 1 !important;
    width: auto !important;
  }


  #pull-focus-volume {
    width: 25px;
    text-align: right;
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
  }
  #participants-pull-focus-slider {
    justify-content: space-between;
    align-items: center;
  }

  #participants-pull-focus-slider
    input[type="range"]::-webkit-slider-runnable-track {
    background: #808080;
  }

  .plist-drop-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: fe;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.05);
  }

  .plist-wrapper {
    width: 330px;
    background-color: #fff;
    padding: 0;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px 8px rgb(0 0 0 / 20%);
  }

  .plist-name {
    font-size: 18px;
    font-weight: 500;
    padding: 10px;
  }

  .plist-footer {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .plist-content {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #split-conversations-modal-body .list-group-item.active {
    background-color: #07516c;
    border-color: #07516c;
  }
  #split-conversations-modal-body .list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  #split-conversations-modal-body .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  #split-conversations-modal-body .list-group-item {
    outline: none;
    padding: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: baseline;
    border-left-color: #fff;
    border-right-color: #fff;
  }
  .plist-item-check {
    width: 16px;
    height: 16px;
  }
  .plist-item-check svg {
    width: 100%;
    height: 100%;
  }
  .accordion .card {
    overflow: inherit;
  }

  /* Scroll bar change */
  ::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: #E8E5E5 !important;
    border-radius: 10px
  }

  ::-webkit-scrollbar-thumb {
    background-color: #F29322;
    border-radius: 10px;
  }

  /* Virtual background modal */
  .local-video-virtual-background-container {
    position: relative;
    width: 450px;
    height: 252px;
    margin: auto;
  }
  .local-video-virtual-background-container .local-video {
    position: relative;
    width: 450px;
    height: 252px;
    min-height: 100%;
    border: 1px solid #808080;
    border-radius: 4px;
    overflow: hidden;
  }
  .local-video-virtual-background-container .local-video video,
  .local-video-virtual-background-container .local-video canvas {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    object-fit: cover;
    max-width: 450px;
    width: 450px;
    height: 250px;
    max-height: 250px;
  }
  .option-list-virtual-background-container {
    position: relative;
    width: 450px;
    min-height: 80px;
    display: flex;
    align-items: center;
    overflow: auto;
  }
  .option-list-virtual-background-container .options {
    position: relative;
    min-height: 70px;
    max-height: 70px;
    min-width: 70px;
    max-width: 70px;
    border: 1px solid #808080;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .option-list-virtual-background-container .options .content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 100%;
    color: #808080;
    text-align: center;
    overflow: hidden;
  }
  .option-list-virtual-background-container .selected {
    border: 3px solid #032836;
    border-radius: 6px;
    outline: none;
    border-color: #127a9f;
    box-shadow: 0 0 4px #185c74;
    overflow: hidden;
  }

  /* Options side menu */
  .options-side-menu{
    user-select: none;
    left: -150px !important;
    /* transform: translate3d(26px, -550px, 0px) !important */
    /* bottom: 45px!important;
    top: unset !important; */
  }
  .options-side-menu.active {
    right: 0;
  }

  /* .option-menu-non-moderator {
    transform: translate3d(26px, -366px, 0px) !important;
  } */
  .options-side-menu .container-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
  }
  .options-side-menu .container-inner .options-header {
    /* align-items: center; */
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    color: #032836;
    width: 90%;
    margin: auto;
  }
  .options-side-menu .container-inner .options-header .kino-id-side-menu {
    width: 100%;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: none;
  }
  .plist-shown svg{
    transform: rotate(180deg);
    margin: 0px 5px 2px 0 !important;
    transition: all 0.5s;
  }
  .options-side-menu .container-inner .options-header .kino-id-side-menu .kino-id-text,
  .options-side-menu .container-inner .options-header .kino-id-side-menu .number-of-participants {
    font-size: 14px;
    font-weight: 500;
  }
  .options-side-menu .container-inner .options-header .kino-id-side-menu .number-of-participants {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .options-side-menu .container-inner .options-header .kino-id-side-menu .number-of-participants svg {
    margin: 3px 5px 0 0;
    transition: all 0.5s;
  }
  .options-side-menu .container-inner .options-header .kino-id-side-menu .number-of-participants .number-of-participants-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
  }
  .options-side-menu .container-inner .options-header .participants {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 30px 0 15px;
    width: 100%;
    flex-direction: column;
  }
  .options-side-menu .container-inner .options-header .participants .participants-back-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-right: 10px;
  }
  .options-side-menu .container-inner .options-header .participants .participants-svg {
    height: 30px;
    width: 30px;
    margin: 0 8px;
  }
  .options-side-menu .container-inner .options-header .participants .participants-back {
    font-size: 13px;
    font-weight: 500;
    line-height: 10px;
  }
  .options-side-menu .container-inner .options-header .participants #sideMenuParticipantBack {
    transition: all .2s ease;
    width: 0;
    opacity: 0;
    margin: 0;
    height: 0;
  }
  .options-side-menu .container-inner .options-header .participants #sideMenuParticipantBack.show {
    width: fit-content;
    opacity: 1;
    height: 23px;
    cursor: pointer;
    transform: rotate(180deg);
  }

  .options-side-menu .container-inner .options-body .participants-list {
    width: 90%;
    height: 100%;
    display: flex;
    color: #032836;
    flex-direction: column;
    font-size: 1.2rem;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants-list-container,
  .options-side-menu .container-inner .options-body .participants-list .participants{
    display: flex;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants{
    flex-direction: column;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants-name,
  .options-side-menu .container-inner .options-body .participants-list .participants-action-container {
    display: flex;
    flex-flow: column;
    /* flex: 1; */
    overflow-y: overlay;
  }
  .options-side-menu .container-inner .options-body .participants-list .participants-list-title {
    display: flex;
    justify-content: center;
    font-weight: bold;
    flex: 1;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants-icon {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    margin-right: 10px;
    background-color: #032836;
    padding: 0 !important;
    /* box-shadow: inset 0 0 2px 1px #fff; */
  }
  .options-side-menu .container-inner .options-body .participants-list .participants-icon.not-visible{
    background-color: transparent !important;
  }
  .options-side-menu .container-inner .options-body .participants-list .participants-container{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    padding: 5px;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants-no-matches-found{
    display: flex;
    justify-content: center;
    font-weight: 500;
    font-size: 1.2rem;
    margin: 8px 0;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants-user,
  .options-side-menu .container-inner .options-body .participants-list .participants-action-container .participants-action {
    /* margin: 15px 10px; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 30px;
    cursor: pointer;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants-user {
    justify-content: flex-start;
  }

  .options-side-menu .container-inner .options-body .participants-list .participants-action-container .participants-action svg {
    width: 25px;
    height: 25px;
  }

  .options-side-menu .container-inner .options-header img {
    width: 105px;
  }

  .options-side-menu .container-inner .close-menu-btn {
    position: absolute;
    align-self: center;
    right: 0;
    top: 0;
    font-size: 24px;
    cursor: pointer;
    top: -5px
  }
  .options-side-menu .container-inner .options-body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: overlay;
  }
  .options-side-menu .container-inner .options-body .options-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    position: relative;
  }

  .options-side-menu .container-inner .options-body .options-list .option {
    display: flex;
    width: 100%;
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    margin: 0.25rem 0;
    pointer-events: all;
    position: relative;
    padding: 0.5rem 0.59rem !important;
    border-radius: 8px;
  }


  .options-side-menu{
    padding: 0 !important;
  }

  .options-side-menu .container-inner .options-body .options-list .option:active {
    opacity: 0.4;
  }
  .options-side-menu .container-inner .options-body .options-list .option .premium-feature {
    position: absolute;
    top: 0.2rem;
    right: 0;
    background-color: #032836;
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    padding: 0 5px;
    transition: transform 0.2s ease-in;
  }
  .options-side-menu .container-inner .options-body .options-list .option .premium-feature:hover {
    transform: scale(1.1);
  }
  .options-side-menu .container-inner .options-body .options-list .option .option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    max-width: 20px;
    min-width: 20px;
    max-height: 20px;
    margin: 0 8px;
  }

  .options-side-menu .container-inner .options-body .options-list .option .option-icon svg {
    height: 20px;
    width: 20px;
  }

  .options-side-menu .container-inner .options-body .options-list .option .option-icon i {
    font-size: 22px;
    color: #032836;
  }

  .options-side-menu .container-inner .options-body .options-list .option .option-description {
    margin: 0 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .options-side-menu .container-inner .options-body .options-list .option .option-description .option-name {
    display: flex;
    align-items: center;
    /* color: #032836; */
    font-weight: 400;
    font-size: 14px;
  }

  .options-side-menu .container-inner .options-body .options-list .option .option-action.kino-toggle {
    margin-top: 0 !important;
  }

  .options-side-menu #live-stream-modal-btn i {
    font-size: 16px !important;
  }

  .coming-soon-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-self: flex-start;
  }
  .coming-soon-div {
    color: #fff;
    background-color: #032836;
    font-size: 10px;
    display: flex;
    border-radius: 10px;
    padding: 0 5px;
    margin-left: 8px;
  }

  .modal-recording-info {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-recording-icon {
    width: 30px;
    height: 30px;
  }

  .modal-recording-icon svg {
    width: 100%;
    height: 100%;
  }

  .recording-timer-modal {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .recording-timer-modal span {
    font-size: 17px;
  }

  .recording-indicator-animated {
    height: 4px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(-55deg, #ff0550, transparent, #ff0009);
    background-size: 400% 400%;
    -webkit-animation: gradientBackground 10s ease infinite;
    animation: gradientBackground 10s ease infinite;
  }

  @-webkit-keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
  }
  @keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
  }
  /*split conversations*/
  #dragging-state-container {
    overflow: visible;
    z-index: 15;
    position: absolute;
    border: none;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    padding: 0;
  }
  #dragging-state-container .user-added-split-convo {
    width: 108px;
    height: 100px;
    min-width: 108px;
    border-radius: 10px;
  }
  #dragging-state-container .user-added-split-convo video.user-video {
    width: 100%;
    object-fit: cover;
    object-position: center;
    height: 100%;
    position: absolute;
  }
  .kino-details-table {
    font-size: 18px;
    display: flex;
    justify-content: center;
  }
  .kino-details-table tr {
    text-align: left;
  }
  .kino-details-table th {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .kino-details-table .title-cell {
    font-weight: 500;
    min-width: 120px;
  }
  .download-platform-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .download-platform-buttons .app-container {
    max-width: 200px;
    min-height: 80px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .download-platform-buttons .mac-or-pc {
    min-width: 220px;
  }
  .download-platform-buttons .app-container img {
    min-height: 60px;
    max-height: 60px;
  }
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .request-countdown-timer {
    max-height: 0px;
    transition: all 0.8s;
    overflow: hidden;
  }
  .request-countdown-timer.visible {
    max-height: 100px;
  }

  .ui-draggable-handle{
    cursor: move !important;
  }
  .animate-sliders{
    opacity: 1 !important;
    width: 80px !important;
  }
  .animate-sliders-numbers{
    margin-left: 10px !important;
  }
  #play-notification-sound-automatic-visibility,
  #play-notification-sound-manual-visibility,
  #lock-master-volume-automatic-visibility,
  #lock-master-volume-manual-visibility{
    overflow: hidden;
    max-height: 0px;
    transition: all 0.3s ease-in;
    margin: 0;
  }
  #play-notification-sound-automatic-visibility.height,
  #play-notification-sound-manual-visibility.height,
  #lock-master-volume-automatic-visibility.height,
  #lock-master-volume-manual-visibility.height{
    max-height: 50px;
    margin: 5px 0;
  }
  .bootstrap-notification-header{
    font-size: 1.1rem;
  }
  .bootstrap-notification-message {
    font-size: 1;
  }

  .bootstrap-notification-body {
    display: flex;
    flex-direction: column;
    padding-right: 2.75rem;
  }

  .bootstrap-notification-desc{
    font-size: 0.8rem;
    color: #d0d0d0;
  }

  /* LOCAL RECORDING MODAL */
  .ready-download-svg-container {
    box-shadow: 0 0 10px 4px rgb(3 40 54 / 30%);
    border-radius: 50%;
    transition: all .3s;
  }
  .ready-download-icon {
    display: flex;
    justify-content: center;
    margin: 16px auto 32px;
  }
  .ready-download-svg {
    width: 75px;
    height: 75px;
  }
  .ready-download-svg-container:hover {
    transform: scale(1.1);
  }
  .ready-download-text {
    margin-bottom: 20px;
    text-align: center
  }
  /* REVIEW PAYMENT MODAL */
  .review-payment-subtitle-div {
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    border-bottom: 2px solid #032836;
    color: #000;
    /* margin-bottom: 20px; */
  }
  .review-payment-text {
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0;
  }
  .review-payment-details {
    font-size: 17px;
    color: #000;
    width: 400px !important;
    font-weight: bold;
  }
  .review-modal-next-charge {
    color: #4D7F91;
  }
  .review-modal-total {
    font-size: 22px;
  }
  .review-modal-space {
    margin-top: 15px;
  }
  #addons-section {
    font-weight: bold;
  }
  .review-modal-line-parent {
    position: relative;
    padding: 20px 0;
  }
  .review-modal-bottom-line {
    height: 2px;
    width: 466px;
    position: absolute;
    bottom: 0;
    background-color: #032836;
    left: -4%;
  }

  /* NO TIMEZONE MODAL */
  .no-timezone-div {
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
  }

  .no-timezone-text {
    margin: 20px 0;
    font-size: 20px;
  }
  /* VOICE SETTINGS MDOAL */
  .voice-settings-title {
    font-size: 20px;
    color: #000;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .voice-settings-icon {
    width: 20px;
    height: 20px;
    fill: #032836;
    margin-right: 5px;
  }

  .container-divider-div {
    position: relative;
  }

  .container-divider {
    position: absolute;
    width: 3px;
    height: 110%;
    top: -15px;
    background: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(235 235 235) 25%,  rgb(235 235 235) 50%, rgb(235 235 235) 75%, rgb(255,255,255) 100%);
  }

  .body-container-audio-settings {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0;
  }

  .body-container-audio-settings .dropdown-menu{
    max-height: 180px;
    overflow-y: auto;
  }

  .input-container,
  .output-container {
    display: flex;
    flex-flow: column;
    flex: 1;
  }

  .video-settings-label {
    font-size: 18px;
    margin: 0;
  }

  .audio-settings-container {
    margin-bottom: 20px;
  }

  .voice-settings-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .video-settings-dropdown {
    width: 50%;
    border: none;
    color: gray !important;
  }
  .video-settings-dropdown option {
    background-color: unset !important;
  }

  .video-settings-dropdown:focus {
    box-shadow: unset !important;
  }

  .video-test-container {
    background-color: #121418;
    border: 1px solid #1b1c1f;
    border-radius: 4px;
    width: 100%;
    margin: 0 auto;
    min-height: 208px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .video-test-container video {
    max-width: 100%;
    object-fit: contain;
    -webkit-transform: scale(-1, 1);
    height: calc(100% + 2px);
  }
  .voice-settings-divider {
    height: 3px;
    background-color: #ebebeb;
    margin: 30px 0;
  }

  .test-output-container {
    display: flex !important;
    align-items: flex-start;
    width: fit-content;
  }

  .test-output-button {
    border: none;
    background-color: unset;
    padding: 0;
    font-weight: bold;
    font-size: 18px;
  }

  .test-output-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    fill: #032836;
    margin-right: 5px;
  }

  .microphone-test-div,
  .video-test-div,
  .output-test-div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
  }

  .pids-wrapper .pid, .pids-wrapper .spid {
    width: calc(10% - 20px);
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    margin: 5px;
    background-color: #e6e7e8;
  }

  .videoViewContainer.locate{
    animation: border-pulsate-white 2s infinite alternate, pulseVideo 2s infinite alternate;
    transition: 0.5s all;
    z-index: 1;
  }

  .videoViewContainer.transparent{
    opacity: 0.5 !important;
  }
  .allow-popups-guide{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
  .guide-container {
    padding: 5px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }
  .guide-container.open{
    opacity: 1;
    height: 270px;
    transition: all 0.5s ease-in-out;
  }
  .guide-list img {width: 18px !important;}

  .method-title {
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 0;
    color: #032836;
  }

  ul.guide-list {list-style: decimal;}

  ul.guide-list li {font-size: 0.9rem;}
  /* button.btn.kino-btn-secondary.show-guide-button{
    background-color: #ededed !important;
  } */
  .show-guide-button svg {
    width: 15px;
    height: 15px;
    margin-top: -2px;
    transition: all 0.5s ease-in-out;
  }
  .show-guide-button.guide-shown svg{
    transform: rotate(180deg);
    margin-top: -4px;
  }
  #popup-blocked-window-img{
    width: 94px !important;
    height: 80px;
    margin-top: 0;
  }

  .do-not-show-check-container {gap: 5px;display: flex;align-items: center;}

  .do-not-show-check-container label {margin: 0;font-size: 0.9rem;}
  .popup-blocked-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .styled-checkbox .round input[type=checkbox]:checked + label {
    background-color: #032836;
    border-color: #032836;
  }
  .styled-checkbox .round input[type=checkbox] {
    visibility: hidden;
  }
  .styled-checkbox .round label{
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
    webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0;
  }
  .styled-checkbox .round input[type=checkbox]:checked + label:after {
    opacity: 1;
  }

  .styled-checkbox .round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 4px;
    opacity: 0;
    position: absolute;
    top: 5px;
    transform: rotate(-45deg);
    width: 11px;
  }

  .styled-checkbox .round {
    width: 20px;
    height: 20px;
    position: relative;
  }

  .note-text {display: flex;flex-direction: column;align-items: flex-start;padding: 20px 20px;padding-bottom: 0;}

  span.note {text-decoration: underline;font-size: 0.8rem;}

  span.note-desc {font-size: 0.8rem;text-align: left;}

  #togglePictureInPicture .kinetx-icon svg{
    width: 25px;
    height: 25px;
  }

  .background-chatter-cont {
    vertical-align: middle;
    display: flex;
    border: 1px solid transparent;
    margin: 0 10px;
  }

  .toolbox-bg-chatter {
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
  }

  .bg-chatter-icon svg {
    width: 30px;
    height: 30px;
  }
  .bg-chatter-toggle.kino-toggle .switch .kino-slider:before{
    border: 10px solid #ffffff;
    background-color: #ffffff;
  }
  .bg-chatter-toggle.kino-toggle .switch input:checked + .kino-slider:before{
    transform: translateX(23px);
    background: #032836;
    box-sizing: border-box;
    border: 10px solid #032836;
  }
  .bg-chatter-toggle.kino-toggle .switch input:checked + .kino-slider{
    background-color: #b2bdc0;
    justify-content: flex-start;
  }

  .bg-chatter-toggle .kino-slider svg {
    width: 14px;
    height: 14px;
  }

  .bg-chatter-toggle.kino-toggle .switch .kino-slider {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 6px;
    background-color: #cccccc;
  }

  .chat-section-container .message .message-content{
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%) !important;
    text-align: left;
  }
  .message.text-right .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .message.text-left .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .message.text-left .message-content .message-time {
    margin-left: 0;
  }
  .message.text-right .message-content .message-time {
    margin-right: 0;
  }
  .chat-section-container .message .message-body .message-content {
    display: block;
    line-height: 1.2;
    font-weight: 500;
  }
  @keyframes border-pulsate-white {
    0% {
        border-color: #fff;
        box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.25);
    }
    100% {
        border-color: #eee;
        box-shadow: 0 0 5px 1px rgba(255, 255, 2555, 0.9);
    }
    /* 100% {
        border-color: #fff;
        box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.9);
    } */
  }
  @keyframes pulseVideo {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.02);
    }
  }

  .box {
    border: 1px solid #edf2f9 !important;
    padding: 15px;
    border-radius: 8px !important;
    margin-bottom: 15px;
    box-shadow: 0 0.5rem 0.75rem rgb(18 38 63 / 2%);
    background-color: #fff;
  }
  .box-title {
    font-size: 0.7rem;
    color: rgb(149, 170, 201) !important;
  }

  .btn-white {
    border-color: rgb(227, 235, 246) !important;
    font-size: .9rem !important;
    min-width: 80px;
    justify-content: center;
    align-items: center;
  }

  .btn-check:focus + .btn-white, .btn-white, .btn-white:focus, .btn-white:hover {
    color: rgb(40, 62, 89);
    background-color: rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
  }
  .text-lg{
    font-size: 1.2rem;
  }

  .mui-btn.mui-btn--small {
    font-size: 0.75rem !important;
    justify-content: center;
    font-weight: 400;
    align-items: center;
    display: flex;
    padding: 0 10px;
  }
  .mui-btn.mui-btn-mobile--small {
    font-size: 0.75rem !important;
    justify-content: center;
    font-weight: 400;
    align-items: center;
    display: flex;
    padding: 0 10px;
  }


  .mui-btn--primary {
    color: #FFF !important;
    background-color: #032836;
  }
  .mui-btn--fab.mui-btn--small {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .card-header{
    background-color: transparent !important;
    padding: 0.75rem 0.9rem !important;
    border-bottom: none !important;
  }

  .table-striped tbody tr:nth-of-type(odd){
    background-color: #fefefe !important;
  }
  .invoice-image img {
    width: 200px;
  }

  .invoice-image {display: flex;justify-content: center;align-items: center;}
  hr{
    border-top: 1px solid #edf2f9 !important;
  }

  .text-invoice-amount{
    color: #12263f !important;
  }

  .text-invoice-desc{
    color: #8093af!important
  }

  .vertical-align-top{
    vertical-align: top;
  }
  .vertical-align-middle{
    vertical-align: middle !important;
  }
  .bg-light-gray{
    background-color: rgb(170 198 208 / 23%) !important;
  }
  .table td{
      font-size: 16px;
      color: #1A3442;
      font-weight: 500;
  }

  .card-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
  }

  .card-logo img {
    width: 50px;
  }

  .card-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
  }

  .card-action {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loading-addons {
    height: 128px;
    background-color: rgb(170 198 208 / 7%);
    border-radius: 15px;
  }

  .effect-fadeIn{
    animation: fadeIn 0.5s;
    opacity: 1 !important;
  }

  .alert-info{
    color: #fff !important;
    background-color: #39afd1 !important;
    border-color: #39afd1 !important;
  }
  .alert-danger {
    color: #fff !important;
    background-color: #e63757 !important;
    border-color: #e63757 !important;
  }
  .alert-light{
    color: #212529 !important;
  }
  .row-wrap{
    flex-wrap: wrap;
  }

  .header-transparent{
    background-color: transparent !important;
    border-top: none !important;
  }
  .td-border-0{
    border: none !important;
  }
  .input[type="checkbox"]:checked + .label-custom-plans.inline-addon-small {
    padding-right: 34px;
  }

  .input[type="checkbox"]:checked + .label-custom-plans.inline-addon-small::after {
    bottom: calc(50% - 13px);
  }
  @media (min-width: 576px){
    .modal-sm {
        max-width: 350px !important;
    }

  }
  input.addon-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .addon-qty-input{
    border: none;
    min-width: 60px;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    background-color: #f9f9f9;
    margin: 5px;
    color: #032836;
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center;
    pointer-events: none;
    outline: none;
  }

  .width-160px{
    width: 160px !important;
  }
  .width-180px{
    width: 180px !important;
  }
  .width-190px{
    width: 190px !important;
  }
  .width-200px{
    width: 200px !important;
  }
  .mui-btn.active {
    background-color: #0e5c78;
  }
  #profile-container .profile-list-group .mui-btn svg,
  #profile-container .profile-list-group .mui-btn i {
    display: block;
    position: absolute;
    left: 10px;
    top: 11px;
  }
  #profile-container .profile-list-group .mui-btn svg{
    top: 8px;
  }
  #profile-container .profile-list-group .mui-btn svg path{
    fill: #fff;
  }
  .text-500{
    font-weight: 500!important;
  }
  .text-400{
    font-weight: 400!important;
  }
  label.label-custom-plans.plan-line {
    border-radius: 5px;
    border: none !important;
    box-shadow: none;
    min-height: 50px;
    font-weight: 500;
    transition: all 0.4s ease-in-out;
    display: flex;
  }
  .table-head{
    border-bottom: 1px solid #dee2e6 !important;
  }
  table.table-hover tbody tr:hover{
    background-color: rgb(0 0 0 / 3%);
  }
  .plan-licenses {
    padding: 0 0.8rem;
    max-height: 0;
  /*and eventually delay an overflow:auto; */
    overflow:hidden;
    transition: max-height 0.5s, overflow 0s;
  }
  .input[type="radio"]:checked + .label-custom-plans.plan-line  .plan-licenses{
    max-height: 10em;
    overflow:visible;
    transition: max-height 0.5s, overflow 0.5s 0.5s;
  }
  .input[type="radio"]:checked + .label-custom-plans.plan-line .plan-details-container{
    background-color: #032836;
    transition: all 0.4s ease-in-out;
  }
  .input[type="radio"]:checked + .label-custom-plans.plan-line{
    background-color: #f0f2f4;
  }
  .label-custom-plans.plan-line .plan-details-container{
    border-radius: 5px;
    padding: 0.8rem;
  }
  .input[type="radio"]:checked + .label-custom-plans.plan-line div {
    color: #fff !important;
  }

  .plan-line-row .plan-line .plan-details-container:hover{
    background-color: #dee2e675;
  }

  .billings.price-interval-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    background-color: #dee2e675;
    border-radius: 30px;
  }
  .billing-interval .radio-group {
    padding: 5px;
  }

  .billing-interval .label-custom-plans.interval-switch-item {
    min-height: 40px;
    border: none;
    background-color: transparent;
    box-shadow: none;
    font-weight: 500;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease-in-out;
    padding: 0.1rem 0.8rem;
  }

  .input[type="radio"]:checked + .label-custom-plans.interval-switch-item {
    border: none;
    background-color: #032836;
    color: #fff;
    box-shadow: 0 0 5px 3px rgb(177 177 177 / 20%);
  }

  .input[type="radio"]:hover + .label-custom-plans.interval-switch-item {
    border: none;
  }

  .form-check{
    height: 20px;
  }

  .kino-checkbox.square label{
    border-radius: 6px;
    background-color: #dee2e675;
    border-color: transparent;
  }

  .kino-checkbox input[type=radio]{
    visibility: hidden;
  }
  .kino-checkbox input[type=radio]:checked + label,
  .kino-checkbox input[type=radio]:checked + label{
    transition: all 0.4s ease-in-out;
  }
  .kino-checkbox input[type=radio]:checked + label{
    background-color: #032836;
    border-color: #032836;
  }
  .kino-checkbox input[type=radio]:checked + label:after{
    opacity: 1;
  }
  .show-on-licenses{
    display: none;
  }
  .has-licenses div.show-on-licenses{
    display: flex;
  }
  .has-licenses th.show-on-licenses,
  .has-licenses td.show-on-licenses{
    display: table-cell;
  }
  .has-licenses .price-cell{
    text-align: left !important;
    justify-content: start !important;
    padding-right: 0;
  }
  .price-cell{
    text-align: right;
    justify-content: flex-end;
    padding-right: 1rem;
  }
  .has-licenses .addon-cell{
    padding-left: 1rem;
  }

  .has-licenses .hide-on-licenses{
    display: none !important;
  }
  #addons-manager-list tr,
  #addons-plan-selection-list tr{
    transition: all 0.4s ease-in-out;
    cursor: pointer;
  }
  .has-licenses #addons-manager-list tr,
  .has-licenses #addons-plan-selection-list tr{
    cursor: default;
  }
  #addons-manager-list tr:hover,
  #addons-plan-selection-list tr:hover{
    background-color: #dee2e675;
  }
  .has-licenses #addons-manager-list tr:hover,
  .has-licenses #addons-plan-selection-list tr:hover{
    background-color: #FFF;
  }

  .pointer-events-none{
    pointer-events: none !important;
  }

  h2#swal2-title {
    font-size: 1.5rem;
  }

  .accordion .fa-plus::before{
    content: "+ ";
    font-style: normal;
  }

  .accordion-button:not(.collapsed)::after {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
  }
  .accordion-button{
    position: relative;
  }
  .accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-right: auto;
    position: absolute;
    left: 0;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
    transition: transform .2s ease-in-out;
  }

  .licenses-table {
    overflow-x: auto;
    overflow-y: visible;
  }


  .text-kino-red{
    color: #ff4746;
  }

  /*
  * responsivenes
  **/

  @media screen and (max-width: 600px) {
    .sm-hidden{
        display: none !important;
    }

    .sm-text-small{
        font-size: 0.86rem;
    }
    div.sm-px-0,
    section.sm-px-0{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sm-vertical-align-middle{
        vertical-align: middle !important;
    }
    .sm-flex-col{
        flex-direction: column !important;
    }

    .sm-w-60px{
        width: 60px !important;
    }
    .sm-w-300px{
        width: 300px !important;
    }
  }


  .loading-video-spinner {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    backdrop-filter: blur(3px);
    background: linear-gradient(45deg, #032836, #053f55);
  }
  .loading-video-spinner .spinner-border{
    width: 2rem;
    height: 2rem;
  }
  #presenterStripVideos .loading-video-spinner .spinner-border,
  #sideVideosContainer .loading-video-spinner .spinner-border{
    width: 1.5rem;
    height: 1.5rem;
  }

.absolute-modal-body {
    position: absolute;
    left: -1px;
    top: -51px;
    right: -1px;
    bottom: -1px;
    z-index: 2;
}

.colored-left-modal{
    background-color: #032836;
    color: #fff;
}
.text-xxl{
    font-size: 1.7rem;
}
.text-14{
    font-size: 14px;
}
.text-16{
    font-size: 1.6rem;
}
.border-yellow{
    border-color: #fee97d;
}
.feedback-learn-more-input{
    border-width: 3px;
    height:calc(1.78em + 0.75rem + 2px);
    padding: 0.75rem;
    border-radius: 0.35rem;
}
.feedback-learn-more-input:focus{
    border-color: #ffd500 !important;
}
.btn.btn-yellow {
    background-color: #fee97d;
    color: #032836;
    border-radius: 5px;
    border-color: transparent;
    font-weight: 500;
    width: 150px;
}
.btn.btn-yellow:hover,
.btn.btn-yellow:focus{
    background-color: #ebe3ba;
}

.feedback-footer-btn{
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    padding: 0 1.125rem;
}

.btn.kino-btn-primary:hover{
    background-color: #053f55 !important;
}
.modal-body .feedback{
    height: 226.47px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


#kino-end-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
    transition: all 0.5s;
    opacity: 0;
    overflow: hidden;
}

.backdrop-layer {
    display: flex;
    flex: 1;
    background-color:rgb(0 0 0 / 40%);
}

.kino-watermark {
    position: absolute;
    top: 20px;
    left: 20px;
}
#kino-end-backdrop.backdrop-fadeIn{
    animation: fadeIn 2s;
    opacity: 1;
}

ul.tips-list {
    display: flex;
    width: 100%;
    flex-direction: column;
}

a.tips-link {
    color: #fff;
}
.active-session {
    padding: 15px;
    border-radius: 10px;
    align-items: center;
    background-color: #f8f9fa;
}
.bg-green {
    background-color: #6de38863;
    color: #006100;
}
.h-48px{
    height: 48px;
}

.draggable-participant .no-video-thumbnail {
    position: absolute;
    object-position: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.draggable-participant .no-camera-spaces-thumb {
    z-index: 1 !important;
}
.request-access-header{
    background-color: #a8d2ffb8;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.btn:hover {
    opacity: .95;
}


.stream-preview-container{
    max-height: 68vh !important;
}

.italic-disabled{
    font-style: italic;
    /* color: #e1e1e1; */
    font-weight: 300;
}


.enter-btn {
    text-transform: uppercase;
    font-weight: 500;
    padding: 8px 13px !important;
    width: 100% !important;
    box-shadow: 0 2px 8px 3px #4d2e2126;
}

.left-side-menu-enter-button {
    width: 100%;
}

select.option-selected {
    font-weight: 500;
    padding: 14px;
}

.small-player-wrapper {
    display: flex;
    background-color: #66727f;
    position: absolute;
    width: 16%;
    max-height: 180px;
    max-width: 320px;
    min-width: 71px;
    min-height: 40px;
    aspect-ratio: 16/9;
    left: 4px;
    bottom: 4px;
    border-radius: 6px;
    z-index: 3;
    overflow: hidden;
    cursor: grab;
    box-shadow: 0 0 5px 2px #2125296b;
}

#presenterStripVideos .small-player-wrapper{
    max-height: 180px;
    max-width: 320px;
    min-width: 54px;
    min-height: 30px;
    border-radius: 4px;
}

#chat-message-container .user-name{
    font-weight: 500;
    margin-left: 0;
}

.opacity-0{
    opacity: 0;
}
.opacity-1{
    opacity: 1;
}


.performance-optimizer-changed-tooltip p.tooltip-inside-text {
    margin-right: 10px;
}

.toolbox-center-button{
    width: 55px;
    justify-content: center;
}

.red-btn-shadow {
    border: 1px solid rgb(255 151 151 / 25%) !important;
}