.ml_5 {
    margin-left: 5px;
}

.ml_6 {
    margin-left: 6px;
}

.ml_7 {
    margin-left: 7px;
}

.ml_8 {
    margin-left: 8px;
}

.ml_9 {
    margin-left: 9px;
}

.ml_12 {
    margin-left: 12px;
}

.ml_13 {
    margin-left: 13px;
}

.ml_14 {
    margin-left: 14px;
}

.ml_16 {
    margin-left: 16px;
}

.ml_18 {
    margin-left: 18px;
}

.ml_20 {
    margin-left: 20px;
}

.ml_24 {
    margin-left: 24px;
}

.ml_28 {
    margin-left: 28px;
}

.mr_10 {
    margin-right: 10px;
}

.mb_4px {
    margin-bottom: 4px;
}

.mb_6 {
    margin-bottom: 6px;
}

.mb_7 {
    margin-bottom: 7px;
}

.mb_8 {
    margin-bottom: 8px;
}

.mb_9 {
    margin-bottom: 9px;
}

.mb_10 {
    margin-bottom: 10px;
}

.mb_12 {
    margin-bottom: 12px;
}

.mb_14 {
    margin-bottom: 14px;
}

.mb_15 {
    margin-bottom: 15px;
}

.mb_16 {
    margin-bottom: 16px;
}

.mb_17 {
    margin-bottom: 17px;
}

.mb_18 {
    margin-bottom: 18px;
}

.mb_19 {
    margin-bottom: 19px;
}

.mb_20 {
    margin-bottom: 20px;
}

.mb_21 {
    margin-bottom: 21px;
}

.mb_22 {
    margin-bottom: 22px;
}

.mb_24 {
    margin-bottom: 24px;
}

.mb_25 {
    margin-bottom: 25px;
}

.mb_28 {
    margin-bottom: 28px;
}

.mb_30 {
    margin-bottom: 30px;
}

.mb_31 {
    margin-bottom: 31px;
}

.mb_32 {
    margin-bottom: 32px;
}

.mb_33 {
    margin-bottom: 33px;
}

.mb_36 {
    margin-bottom: 36px;
}

.mb_39 {
    margin-bottom: 39px;
}

.mb_40 {
    margin-bottom: 40px;
}

.mb_42 {
    margin-bottom: 42px;
}

.mb_44 {
    margin-bottom: 44px;
}

.mb_46 {
    margin-bottom: 46px;
}

.mb_47 {
    margin-bottom: 47px;
}

.mb_50 {
    margin-bottom: 50px;
}

.mb_51 {
    margin-bottom: 51px;
}

.mb_61 {
    margin-bottom: 61px;
}

.mb_146 {
    margin-bottom: 146px;
}

.mt_5px {
    margin-top: 5px;
}

.bg-0D1321 {
    background-color: #0d1321 !important;
}

.bg-1F243A {
    background-color: #1f243a !important;
}

.bg-3EBEDB {
    background-color: #3ebedb !important;
}

.bg-F1F2F2 {
    background-color: #f1f2f2 !important;
}

.bg-55596166 {
    background-color: rgba(85, 89, 97, 0.4) !important;
}

.bg-FBE621 {
    background-color: #fbe621 !important;
}

.bg-C6FFD5 {
    background-color: #c6ffd5 !important;
}

.bg-0EB35A {
    background-color: #0eb35a !important;
}

.bg-C6FFD5 {
    background-color: #c6ffd5 !important;
}

.bg-FBB121 {
    background-color: #fbb121 !important;
}

.bg-B4173A {
    background-color: #b4173a !important;
}

.bg-7A7A7A{
    background-color: #7a7a7a  !important;
}

.text_F1F2F2_50 {
    color: rgba(241, 242, 242, 0.5019607843) !important;
}

.text_F1F2F2 {
    color: #f1f2f2 !important;
}

.text_3EBEDB {
    color: #3ebedb !important;
}

.text_1F243A {
    color: #1f243a !important;
}

.text_B4173A {
    color: #b4173a !important;
}

.text_0EB35A {
    color: #0eb35a !important;
}

.text_147638 {
    color: #147638 !important;
}

.text_91bcfc66 {
    color: rgba(145, 188, 252, 0.4) !important;
}

.text_1f243a99 {
    color: rgba(31, 36, 58, 0.6) !important;
}

.text_FBB121 {
    color: #fbb121 !important;
}

.text_F1F2F2 {
    color: #f1f2f2 !important;
}

.text_ffffff80 {
    color: rgba(255, 255, 255, 0.5019607843) !important;
}

.text_91BCFC {
    color: #91bcfc !important;
}

.text_fff {
    color: #fff !important;
}

/* header */
.profile_logo {
    border-radius: 100px;
    background-color: #f1f2f2;
    padding: 7px 7px 7px 7px;
    min-width: 40px;
    text-align: center;
}

.header_logo {
    width: 184px;
}

.my_dropdown_menu {
    padding: 10px 0;
}

.my_dropdown_menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.my_dropdown_menu ul li .dropdown-item {
    color: #fff;
    border-radius: 6px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #1f243a !important;
    background: #3ebedb;
}

.dropdown-item:focus svg path,
.dropdown-item:hover svg path {
    fill: #1f243a;
}

/* header */
/* sidebar */
.sidebar {
    width: 320px;
}

/* Lock the header and sidebar to the viewport on desktop so page content scrolls
   beneath them and the build version stays pinned at the foot, visible without any
   scroll. The header is 62px tall (cp1 padding 11+11 plus a 40px .side-icon, the tallest
   header element), so the sidebar starts at 62px and fills the rest of the viewport. Pinning
   the
   header is what lets the sidebar bottom stay flush both at the top of the page and
   once scrolled. Desktop only; the mobile off-canvas panel (.sidebar.d-block) sets
   its own fixed positioning and is left alone. If the nav is ever taller than the
   space, the sidebar scrolls internally. */
@media (min-width: 992px) {
    .headerbar {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    /* .cp1 (a shared utility, defined later in this file) adds a stray margin-bottom: 1px.
       The header is a 62px border-box (40px .side-icon plus 11+11 padding), so with the margin
       it would occupy 63px while the sidebar math subtracts 62, leaving the document 1px taller
       than the viewport: a single pixel of scroll.  The header carries both classes, so
       .cp1.headerbar (two classes) outranks the bare .cp1 and drops the margin on desktop,
       making the header occupy exactly 62px and the layout exact. */
    .cp1.headerbar {
        margin-bottom: 0;
    }

    .sidebar {
        position: sticky;
        top: 62px;
        align-self: flex-start;
        height: calc(100vh - 62px);
        /* The sidebar carries a JS-injected inline min-height (set to the page length
           so the background fills a non-sticky layout).  With the sidebar pinned to the
           viewport that inline value only forces it taller than the screen and pushes the
           version below the fold, so it must be overridden.  A stylesheet !important beats
           a non-important inline style. */
        min-height: 0 !important;
        overflow: hidden;
        /* !important is required: the sidebar carries Bootstrap's d-lg-block
           (display: block !important), which would otherwise defeat the flex column
           and let the version overflow past the bottom. */
        display: flex !important;
        flex-direction: column;
    }

    /* The legacy #mobile-sidebar ID rules (top: 0, z-index: 1000, further down this file)
       exist for the mobile off-canvas drawer, and an ID outranks the .sidebar class, so on
       desktop they would pin the sidebar to the very top of the viewport (covering the fixed
       header, whose z-index is 3) and, combined with height: calc(100vh - 62px), leave a
       header-height gap at the bottom.  Re-assert the desktop values at id+class specificity
       so they win regardless of source order. */
    #mobile-sidebar.sidebar {
        top: 62px;
        z-index: 2;
    }

    /* Only the nav list scrolls; the version footer stays pinned at the bottom of
       the sidebar and is always visible, however tall the nav or short the viewport. */
    .sidebar .cp19 {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .sidebar .sidebar_version {
        flex: 0 0 auto;
    }

    /* Compact the desktop nav so the full list fits the viewport without an internal
       scrollbar.  Roughly a 90% scale plus tighter vertical rhythm: smaller icons and
       labels, less padding on the nav wrapper, and uniform, smaller gaps between items
       (the !important beats the mb_* utility classes on each item and rule). */
    .sidebar .cp19 {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .sidebar .sidebar_item {
        margin-bottom: 4px !important;
    }

    .sidebar .item_icon {
        height: 22px;
    }

    .sidebar .item_icon svg {
        width: 18px;
        height: 18px;
    }

    .sidebar .item_title {
        font-size: 14px;
    }

    .sidebar .cp19 .myhr {
        margin-bottom: 5px !important;
    }

    .sidebar .cp19 .text_12_400 {
        margin-bottom: 4px !important;
    }

    .sidebar .sidebar_version {
        padding-top: 12px;
        padding-bottom: 14px;
    }
}

/* Build version at the foot of the sidebar. Small and low contrast on purpose:
   it answers "what is this server running" without competing with navigation.
   Must live here in app.css, the stylesheet every layout actually loads. */
.sidebar .sidebar_version {
    padding: 16px 19px 20px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.32);
    font-variant-numeric: tabular-nums;
    user-select: text;
}

.sidebar .sidebar_version:hover {
    color: rgba(255, 255, 255, 0.6);
}

.sidebar .sidebar_item {
    padding: 6px 14px;
}

.sidebar .item_icon {
    height: 28px;
}

.sidebar .item_title {
    color: #fff;
}

.sidebar .sidebar_item:hover,
.sidebar .sidebar_item.active {
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.sidebar .sidebar_item:hover .item_title,
.sidebar .sidebar_item.active .item_title {
    color: #1f243a;
}

.sidebar .sidebar_item:hover .item_icon path,
.sidebar .sidebar_item.active .item_icon path {
    fill: #1f243a;
}

/* sidebar */
/* login */
.login-logo-top-right {
    background-image: url('../images/login-logo-top-right.png');
    background-position: top right;
    height: 100vh;
    background-repeat: no-repeat;
}

.login-logo-bottom-left {
    background-image: url('../images/login-logo-bottom-left.png');
    background-position: bottom left;
    height: 100vh;
    background-repeat: no-repeat;
}

.login_content {
    width: 579px;
    padding: 22px 67px 50px 67px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    margin-top: 5%;
}

.login_logo {
    width: 100px;
}

/* login */
/* Register */
.register_content {
    width: 579px;
    padding: 22px 67px 50px 67px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    margin-top: 3%;
}

/* Register */
/* Body Content */
.body_content {
    padding: 28px 33px 28px 26px;
    width: -webkit-fill-available;
    width: 100% !important;
}

.my_card {
    border-radius: 12px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    padding: 17px 4px;
}

.my_card.domain_card {
    min-height: 349px !important;
}

.dashboard_subscription_table {
    margin-bottom: 41px;
}

.dashboard_subscription_table tr td {
    padding: 7px 15px 7px 0;
}

.my_data_table {
    width: 100%;
}

.my_data_table thead tr th {
    border-bottom: 1px solid rgba(85, 89, 97, 0.4);
    background: #0d1321;
    color: #fff;
    font-family: 'DM Sans';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 8px 16px;
}

.my_data_table tbody tr td {
    color: #f1f2f2;
    font-family: 'DM Sans';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(85, 89, 97, 0.4);
    background: #1f243a;
}

.search_input,
.search_input_2 {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    padding: 6px 40px;
}

/* Body Content */
@font-face {
    font-family: 'DM Sans';
    src: url(../fonts/DMSans-Regular.woff);
}
@font-face {
    font-family: 'DM Sans Medium';
    src: url(../fonts/DMSans-Medium.woff);
}
* {
    transition: all 0.5s;
}

body {
    background: #0d1321;
}

/* common */
a {
    color: inherit;
}

.max_width_700 {
    max-width: 700px;
}

.min_h_164px {
    min-height: 164px;
}

.h_28px {
    height: 28px;
}

.h_26px {
    height: 26px;
}

.h_17px {
    height: 17px;
}

.display_table {
    display: table;
}

.verticall_middle {
    display: table-cell;
    vertical-align: middle;
}

.text_nowrap {
    text-wrap: nowrap;
}

.border-none {
    border: none !important;
}

.cp1 {
    padding: 11px 19px;
    margin-bottom: 1px;
}

.cp2 {
    padding: 8px 16px;
}

.cp3 {
    padding: 0 20px;
}

.cp4 {
    padding: 0 16px;
}

.cp5 {
    padding: 0 10px;
}

.cp6 {
    padding: 5px 10px 4px 10px;
}

.cp7 {
    padding: 12px 17px 10px 17px;
}

.cp8 {
    padding: 24px;
}

.cp9 {
    margin-left: 3px;
    margin-right: 3px;
}

.cp10 {
    padding: 20px 34px 19px 20px;
}

.cp11 {
    padding: 54px !important;
}

.cp12 {
    padding: 5% !important;
}

.cp13 {
    padding: 37px;
}

.cp14 {
    padding: 44px !important;
}

.cp15 {
    padding: 21px !important;
}

.cp16 {
    padding: 0 24px !important;
}

.cp17 {
    padding: 0 64px !important;
}

.cp18 {
    padding: 14px 24px !important;
}

.cp19 {
    padding: 42px 14px;
}

.cp20 {
    padding: 10px 11px 10px 30px;
}

.cp21 {
    padding: 73px 0;
}

.br8 {
    border-radius: 8px;
}

.br10 {
    border-radius: 10px;
}

.br12 {
    border-radius: 12px;
}

.br24 {
    border-radius: 24px;
}

.br28 {
    border-radius: 28px;
}

.b_1_91bcfc66 {
    border: 1px solid rgba(145, 188, 252, 0.4);
}

.align_center {
    margin-left: auto;
    margin-right: auto;
}

.w-fit-content {
    width: -moz-fit-content;
    width: fit-content;
}

.w-max-100 {
    max-width: 100%;
}

.w-fill-available {
    width: -webkit-fill-available;
}

.text_40_700 {
    font-family: 'DM Sans';
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.text_36_700 {
    font-family: 'DM Sans';
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

.text_32_700 {
    font-family: 'DM Sans';
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}

.text_24_700 {
    font-family: 'DM Sans';
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.text_24_500 {
    font-family: 'DM Sans Medium';
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.text_20_500 {
    font-family: 'DM Sans Medium';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.text_20_700 {
    font-family: 'DM Sans';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.text_18_500 {
    font-family: 'DM Sans Medium';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
}

.text_16_400 {
    font-family: 'DM Sans';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.text_16_500 {
    font-family: 'DM Sans Medium';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
}

.text_16_700 {
    font-family: 'DM Sans';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}

.text_14_400 {
    font-family: 'DM Sans';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.text_14_500 {
    font-family: 'DM Sans Medium';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.text_14_700 {
    font-family: 'DM Sans';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.text_12_400 {
    font-family: 'DM Sans';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.text_12_500 {
    font-family: 'DM Sans Medium';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.text_10_400 {
    font-family: 'DM Sans';
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../images//arrow-down-white.svg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: 16px;
    background-origin: content-box;
}
option {
    padding: 8px 14px;
}

.my_input {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4) !important;
    background-color: #1f243a;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
    padding: 11px 12px;
    color: #fff;
}

.my_input::-moz-placeholder {
    color: #cecece;
}

.my_input::placeholder {
    color: #cecece;
}

.icon_right_center {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    right: 18px;
}

.icon_left_center {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.cursor_pointer {
    cursor: pointer;
}

.mybtn {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
    min-width: 129px;
    border: none;
}

.mybtn-ww {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
    border: none;
    min-width: 69px;
}

.mybtn2 {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
    min-width: 255px;
    border: none;
}

.mybtn_default {
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: transparent;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
}

.mybtn:hover,
.mybtn2:hover,
.mybtn_default:hover {
    box-shadow: 0px 0px 10px 5px rgba(185, 185, 185, 0.45);
}

.select_list {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    color: #fff;
    font-family: 'DM Sans';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding: 6px 12px;
}

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

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

.myhr {
    border-bottom: 1px solid rgba(85, 89, 97, 0.4);
}

a {
    text-decoration: none;
}

.close_model {
    position: absolute;
    top: 16px;
    right: 16px;
}

.upload_div {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: transparent;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    height: 87px;
    padding: 32px;
}

.after_none:after {
    display: none;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1f243a;
}

.nav-pills .nav-link {
    max-width: 100%;
    color: #1f243a;
    padding: 8px 10px;
}

.nav-pills .nav-link.w434px {
    width: 434px;
}

.nav-pills .nav-link.w229px {
    width: 229px;
}

.plan_instruction {
    padding: 0;
    padding-left: 24px;
}

.plan_instruction li {
    margin-bottom: 8px;
}

.select_list_image {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(../images/arrow_down_white.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 3px center !important;
    background-size: 12px;
}

.filter-multi-select > .viewbar {
    background: transparent;
    border: 1px solid rgba(145, 188, 252, 0.4);
    min-height: 45px;
}

.viewbar > .placeholder {
    background-color: transparent !important;
}

.filter-multi-select > .viewbar > .selected-items > .item {
    border-radius: 28px !important;
    font-family: 'DM Sans Medium';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 2px 10px 2px 12px !important;
}

.filter-multi-select > .viewbar > .selected-items > .item > button {
    color: black !important;
    margin-left: 6px;
    border: 1px solid #1f243a;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-multi-select > .dropdown-menu.show {
    display: block;
    width: 100%;
    background: #1f243a;
    border: 1px solid rgba(145, 188, 252, 0.4);
}

.filter-multi-select .dropdown-item .custom-control-label {
    color: #fff;
    font-family: 'DM Sans';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.filter-multi-select .dropdown-item .custom-control-label::before {
    background-color: #1f243a;
    color: rgba(145, 188, 252, 0.4);
    border: 1px solid rgba(145, 188, 252, 0.4);
}

.filter-multi-select
    .dropdown-item
    .custom-checkbox:checked
    ~ .custom-control-label::after {
    background: #3ebedb url(../images/tick_balck.png);
    border-radius: 4px;
}

.filter-multi-select > .dropdown-toggle::before {
    position: absolute !important;
    top: 10px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-image: url(../images/arrow_down_white.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.filter-multi-select .dropdown-item:first-child {
    display: none;
}

.pills_bg_color_C6FFD5
    .filter-multi-select
    > .viewbar
    > .selected-items
    > .item {
    background: #c6ffd5 !important;
}

.filter-multi-select > .viewbar > .selected-items > .item.disabled {
    filter: none !important;
}

.pills_text_color_147638
    .filter-multi-select
    > .viewbar
    > .selected-items
    > .item {
    color: #147638 !important;
}

.pills_bg_color_55596166
    .filter-multi-select
    > .viewbar
    > .selected-items
    > .item {
    background: rgba(85, 89, 97, 0.4) !important;
}

.pills_text_color_3EBEDB
    .filter-multi-select
    > .viewbar
    > .selected-items
    > .item {
    color: #3ebedb !important;
}

.pills_bg_color_55596166
    .filter-multi-select
    > .viewbar
    > .selected-items
    > .item
    > button {
    color: #fff !important;
    margin-left: 6px;
    border: 1px solid #ffd !important;
}

input[type='checkbox'] {
    border-radius: 4px;
    width: 16px !important;
    height: 16px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: 1px solid rgba(145, 188, 252, 0.4);
    box-shadow: none;
    font-size: 0.8em;
    text-align: center;
    line-height: 1em;
    background: #1f243a;
}

input[type='checkbox']:checked:after {
    border-radius: 4px;
    content: '';
    background: #3ebedb url(../images/tick_balck.png);
    width: 16px;
    height: 16px;
    display: block;
    background-size: 100%;
}

.form-check-input:checked {
    background-color: #ffffff;
}

.form-check-input {
    border-radius: 100px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    /* Shadow/xs */
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
}

.update-plan-radio-btn input {
    width: 10px;
    height: 10px;
    margin-top: 8px;
}

.date_range_picker {
    background-image: url(../images/calendar.svg);
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.daterangepicker.ltr.show-ranges.show-calendar.opensright {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.14);
    color: #fff !important;
}

.daterangepicker .calendar-table table,
td.off.ends.available {
    background: #1f243a;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #3ebedb;
    color: #1f243a;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #3ebedb;
    color: #1f243a;
}

.daterangepicker .calendar-table {
    background: #1f243a;
    border: none;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color: #fff;
    border: solid white;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    display: inline-block;
    padding: 3px;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid rgba(85, 89, 97, 0.4);
}

.daterangepicker .drp-buttons {
    border-top: 1px solid rgba(85, 89, 97, 0.4);
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
    background-color: #3ebedb;
    color: #1f243a;
}

.daterangepicker .drp-buttons .btn {
    background: #3ebedb;
    color: #1f243a;
    font-family: 'DM Sans Medium';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.daterangepicker .drp-buttons .btn-default {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    color: #fff;
    font-family: 'DM Sans';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.daterangepicker:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1f243a;
    border-left: 6px solid transparent;
}

.step_indicator {
    border-radius: 1000px;
    border: 2px solid rgba(145, 188, 252, 0.4);
    width: 40px;
    height: 40px;
    padding: 9px 2px;
    color: #f1f2f2;
    text-align: center;
}

.nav-item {
    position: relative;
}

.nav-link.active .step_indicator {
    border: 2px solid #3ebedb;
    color: #3ebedb;
}

.nav-item:has(.nav-link.active) {
    border-bottom: 4px solid #3ebedb;
}

.capaign_tabs .nav-item .nav-link {
    padding: 16px 25px 12px 25px;
}

.capaign_tabs .nav-item .nav-link:after {
    content: '';
    background-image: url(../images/tab_arrow.svg);
    background-repeat: no-repeat;
    background-position: left center;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background-size: auto 100%;
}

.capaign_tabs .nav-item:first-child .nav-link:after {
    background-image: none;
}

input[type='file']::file-selector-button {
    height: 42px;
    width: 200px;
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #f1f2f2;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    color: #1f243a;
    font-family: 'DM Sans';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

/*slider input*/
.sliderinput {
    border-radius: 8px;
    height: 2px;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
}

.sliderinput[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    background: #3ebedb;
    border-radius: 100px;
}

/*slider input*/
/*input color*/
.colordiv {
    padding: 10px 10px 10px 16px !important;
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    position: relative;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.custom_input_color {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.color_display {
    border-radius: 4px;
    width: 22px;
    height: 22px;
}

/*input color*/
/*quill editor*/
.quill_editor_div .ql-toolbar {
    border: none;
}

.quill_editor_div .ql-formats button,
.quill_editor_div .ql-formats .ql-header {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: #1f243a;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    margin-right: 6px;
}

button:hover .ql-stroke,
.ql-picker-label:hover .ql-stroke {
    fill: none;
    stroke: #3ebedb !important;
}

.quill_editor_div .ql-toolbar {
    padding-left: 0;
}

.ql-toolbar .ql-stroke {
    fill: none;
    stroke: #fff;
}

.ql-toolbar .ql-fill {
    fill: #fff;
    stroke: none;
}

.ql-toolbar .ql-picker {
    color: #fff;
}

.image_view {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.icon_top_left {
    position: absolute;
    top: 10px;
    left: 6px;
}

.icon_top_right {
    position: absolute;
    top: 10px;
    right: 6px;
    cursor: pointer;
}

/* Video thumbnails are locked to 16:9 so the gallery is a regular grid rather than a ragged one.
   Source thumbnails are whatever shape the video was, so without this every card is a different
   height and the rows shift as the grid reflows.  cover crops to fill rather than letterboxing,
   which keeps the cards uniform.

   Scoped to video cards on purpose: image_viewer is shared with callers showing logos and
   package artwork, and forcing those to 16:9 would crop them for no reason. */
.image_view_media_video .image_view_sub_img {
    display: block;
    width: 100%;
    /* height: auto is required, not tidiness.  .image_view_sub_img is given a fixed height of
       175px further down this file, and an explicit height wins over aspect-ratio, so without
       this the ratio declaration is simply ignored.  That fixed height against a width that
       changes with the grid is what made the thumbnails a different shape at every window
       size. */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* The play affordance on a video thumbnail.  The artwork is play_icon.svg, the same one the
   recipient-facing training pages use, so the two do not drift apart: a bright cyan disc with a
   white triangle, carrying its own 0.8 opacity so the still underneath still reads.

   The drop shadow is what makes it usable rather than decorative.  A video still can be any
   colour, and against a pale frame a translucent light blue disc all but disappears, which is
   exactly how it looked on the library page before this. */
.vf_play_button_icon {
    filter: drop-shadow(0 2px 8px rgba(13, 19, 33, 0.7));
    transition: transform 120ms ease-out;
}

.vf_play_button:hover .vf_play_button_icon,
.vf_play_button:focus-visible .vf_play_button_icon {
    transform: scale(1.08);
}

/* Containing block for the centred play button, so it centres on the thumbnail rather than on
   the whole card.  .image_view holds the caption and the global switcher too, and .icon_center
   resolves against the nearest positioned ancestor.  See UI-001. */
.image_view_media {
    position: relative;
}

.icon_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.upload_video_div {
    border-radius: 10px;
    background: rgba(85, 89, 97, 0.4);
    padding: 15% 0 5% 0;
    cursor: pointer;
}

/*quill editor*/
/*switch input*/
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 24px;
}

.custom-switch {
    width: 20px;
    height: 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    left: 2.5px;
    bottom: 2.5px;
    background-color: #1f243a;
    transition: 0.4s;
}

.video-slider-round::before {
    width: 6px;
    height: 6px;
    bottom: 2px;
}

input:checked + .slider {
    background-color: #3ebedb;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

input:checked + .video-slider-round:before {
    transform: translateX(8px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*switch input*/
.radio_content {
    display: none;
}

.radio_content_div:has(.form-check-input:checked) .radio_content {
    display: block;
}

.radio_button:has(.form-check-input:checked) {
    background-color: #3ebedb;
}

.radio_button:has(.form-check-input:checked) .form-check-label {
    color: #1f243a !important;
}

.radio_button .form-check-input:checked {
    background-color: #3ebedb;
    border: 4px solid #1f243a;
}

.display-none {
    display: none;
}

.input-group-text {
    background: #1f243a;
    border: 1px solid rgba(145, 188, 252, 0.4) !important;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    padding: 11px 12px;
    color: #fff;
}

.slect_list_group {
    height: 42px;
    background: #1f243a;
    border: 1px solid rgba(145, 188, 252, 0.4) !important;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
    padding: 5px;
    color: #fff;
}

.profile_default {
    background-color: #3ebedb;
    width: 68px;
    height: 68px;
    padding: 23px 0;
    border-radius: 100px;
}

.header_menu_bar_div {
    display: none;
}

.user-view-modal-body {
    padding: 36px 36px;
}

.cursor-pointer {
    cursor: pointer !important;
}

.active > .page-link,
.page-link.active {
    z-index: 3;
    color: #1f2020;
    background-color: var(--bs-pagination-bg);
    border-color: #1f2020;
}
.page-link:hover {
    color: #1f2020;
}
.disabled > .page-link,
.page-link.disabled {
    color: var(--bs-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}
.disabled > .page-link,
.page-link.disabled {
    color: rgb(255 255 255 / 75%);
    pointer-events: none;
    background-color: #1f243a;
    border-color: #767a88;
}
.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: white;
    text-decoration: none;

    background-color: #1f243a;
    border: 1px solid rgba(145, 188, 252, 0.4);
    border: 1px solid rgba(145, 188, 252, 0.4);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.file-preview {
    background: #0d1321;
    padding: 10px 10px 5px 10px;
    margin-top: -20px;
    border-radius: 7px;
}

.file-preview .file-name {
    margin-left: 15px;
}

.file-preview .file-size {
    color: #91bcfc66;
    font-family: 'DM Sans';
    font-size: 10px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.02em;
    text-align: left;
}

.dashboard_time_cw {
    min-width: 297px;
    max-width: 100%;
    width: auto;
}

.h-100vh {
    min-height: 100vh;
    max-height: 100%;
}

.width-40 {
    width: 40%;
}

.preview_inner_container {
    background-color: #1f243a;
}

.preview_btn {
    background-color: #3ebedb;
    color: #1f243a;
}

.preview_text_color {
    color: #fff;
}

.preview_text_color_2 {
    color: #f1f2f2;
}

.preview_page_container {
    background-color: #0d1321;
}
.insert_variable_dropdown {
    border: 1px solid #91bcfc66;
    box-shadow: 0px 1px 3px 0px #00000012;
    padding: 3px 11px 3px 11px;
    border-radius: 8px;
    background-color: transparent;
}
.insert_variable_dropdown::after {
    color: #fff;
}
.insert_variable_dropdown:hover,
.insert_variable_dropdown:active,
.insert_variable_dropdown:focus-visible,
.insert_variable_dropdown.show {
    border: 1px solid #91bcfc66 !important;
}

.insert_variable_dropdown_menu {
    background: #1f243a;
    border: 1px solid #91bcfc66;
    box-shadow: 0px 1px 3px 0px #00000012;
}

.checkbox_container > input:checked {
    background-color: #1f243a;
    border: 5px solid #3ebedb;
}

.choose_another_video_link {
    text-decoration: underline;
    margin-bottom: 5px;
}

.daterangepicker.single {
    border-radius: 8px;
    border: 1px solid rgba(145, 188, 252, 0.4);
    background: rgb(31, 36, 58);
    box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px 0px;
    color: rgb(255, 255, 255) !important;
}

.calendar-time {
    background: #3ebedb;
    color: white;
    padding: 3px;
    border-radius: 10px;
    width: max-content;
}

.calendar-time > * {
    background: #3ebedb !important;
    color: white !important;
}
.calender-time .hourselect {
    background: #3ebedb !important;
    color: white !important;
    font-family: 'DM Sans' !important;
    font-weight: 400 !important;
    text-align: center !important;
    font-size: 14 !important;
    border: none !important;
}

.calendar-time select {
    background: #3ebedb !important;
    color: white !important;
    font-family: 'DM Sans' !important;
    font-weight: 400 !important;
    text-align: center !important;
    border: none !important;
    font-size: 14px !important;
}

.template_preview_logo {
    /* width: 80px; */
    width: auto !important;
    max-width: 100%;
    height: 80px;
}
.image_view_img,
.upload_video_div {
    height: 175px;
}
.image_view_sub_img {
    height: 175px;
    border-radius: 10px;
}

.template-ui-tab-content {
    height: 90.5%;
}

.preview_inner_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    /* LANDING-001 min-size clamp: the Login Panel Height is a percentage of the viewport, and with
       overflow:hidden a short viewport (a resized or short window) made the percentage resolve
       shorter than the login content and clipped it.  Never let the panel render shorter than its
       own content; the scrollable .preview_page_container parent takes over when the viewport is
       genuinely too short, instead of the panel silently cutting content off. */
    min-height: max-content;
}

.video-js {
    width: 100% !important;
}

.float-right{
    float: right !important;
}

.text-green{
    color: #0eb35a;
}
.w-max-content{
    width: max-content !important;
}
.from_container{
    position: absolute;
    right: 0;
    top: 5px;
    color: white;
    width: 27%;
    min-width: max-content;
    border-left: 1px solid #91BCFC66;
    padding-left: 10px;
    height: 38px;
    padding-top: 6px;
    padding-right: 10px;
}

.container-input{
    width: 70% !important;
    border: none !important;
    outline: none !important;
}

.table-usage{
    margin-top: 20px;
}
.table-usage thead{
    border-top: 1px solid white;
    border-bottom: 1px solid;
}

.plan_instruction ol li[data-list="bullet"] {
    list-style-type: disc !important;
}

.w-70px{
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

.w-100px{
    width:100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

.w-200px{
    width:200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}


.w-250px{
    width:250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}

.w-150px{
    width:150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

.line-break-anywhere{
    line-break: anywhere !important;
}

.text_19_700 {
    font-family: 'DM Sans';
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.text_18_700 {
    font-family: 'DM Sans';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.img-container{
    max-height: 450px;
    border-radius: 5px;
    height: auto;
    max-width: 100%;
}

.color_field{
    outline: none;
    background: inherit;
    border: none;
    width: 70%;
}

.side-icon{
    background-color: #3ebedb;
    padding: 6px 7px 7px 5px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

div.tooltip-inner {
    background-color:#1f243a !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {

    border-right-color: #1f243a !important;
}

.image_view_sub_img {
    object-fit: cover !important;
}

.notes-container{
    padding: 5px 10px;
    border: 1px solid #3ebedb;
    border-radius: 6px;
}
.width-35pc{
    width: 45% !important;
    object-fit: contain;
    height: auto;
}

/* Spinner */
.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    position: absolute;
    left: 47%;
    top: 30%;
    z-index: 9;
}

.spinner-circle {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Keyframe for spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-bg{
    background: #1c1c1c66;
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
    opacity: 0.5;
    background-color: var(--bs-backdrop-bg);
}

.pill-unlisted{
    padding: 5px 10px;
    background: #dc3545;
    border-radius: 5px;
}

.note-container{
    width: 99%;
    border-radius: 10px;
    opacity: 0px;
    background:#0D1321;
    padding:8px 11px;
}
.bg-0EB35A{
    background-color: #0eb35a !important;
}
.text_E11C48{
    color: #E11C48 !important;
}

.progress-container {
    width: 100%;
    background: #f3f3f3;
    border: 1px solid #3ebedb ;
    border-radius: 4px;
    margin-top: 20px;
}
.progress-bar {
    height: 25px;
    width: 0;
    background-color: #3ebedb ;
    text-align: center;
    color: #1f243a ;
}
.percentage {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0px;
    font-weight: 700;
    color: #1f243a ;
}
.tooltip {
    background-color: #0c0b0b; /* Dark background color */
    color: #fff; /* White text */
    padding: 15px; /* Add padding */
    border-radius: 8px; /* Rounded corners */
    font-size: 15px; /* Adjust font size */
    width: 300px; /* Limit width */
    text-align: left; /* Center align text */
}
.tooltip .tooltip-inner {
    background-color: #090909 !important; /* Match the tooltip background */
    color: #fff; /* Match text color */
    max-width: 300px !important;
    text-align: left !important; /* Center align text */
}
.tooltip-arrow::before {
    background-color: #0a0707; /* Match tooltip background */
}

.ql-editor {
    white-space: normal !important; /* Prevent unnecessary white spaces in quill editor body */
}
.menu-btn
{
    margin-right: 10px !important;
}

.privacy_policy_div {
    font-size: 14px; /* Ensure appropriate font size */
    color: #eddfdf; /* Ensure text color is visible */
}

.privacy_policy {
    display: inline; /* Ensure visibility */
}

.sign_up_preview {
    color: blue; /* Make link visible */
}


 /* Sidebar default styling */
#mobile-sidebar {

    overflow-x: hidden; /* Prevent horizontal scrolling */
    top: 0;
    left: 0;
    background-color: #1F243A; /* Background color */
    z-index: 1000; /* Ensure it appears above other content */
}
#close-sidebar {
    font-size: 30px; /* Cross icon size */
    background: none;
    border: none;
    cursor: pointer;
}
.custom-modal-size
{
    max-width: 80% !important;
}

.left-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.left-content a {
    white-space: nowrap;
}

/* Enable scrollbar only on mobile screens */
@media (max-width: 991px) {
    #mobile-sidebar {
        height: 100vh; /* Full height of the viewport */
        overflow-y: auto; /* Enable vertical scrolling on mobile */
    }
    .right-side-header{
        margin-left:-24px !important;
    }

    /* Custom scrollbar styling for mobile */
    #mobile-sidebar::-webkit-scrollbar {
        width: 3px; /* Scrollbar width */
    }

    #mobile-sidebar::-webkit-scrollbar-thumb {
        background-color: #888; /* Scrollbar color */
        border-radius: 4px; /* Rounded edges */
    }

    #mobile-sidebar::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Scrollbar color on hover */
    }
}

/* Disable scrollbar on larger screens */
@media (min-width: 992px) {
    #mobile-sidebar {
        overflow-y: hidden; /* No vertical scrolling on larger screens */
    }
}














/* common */
@media only screen and (max-width: 1315px) {
    .capaign_tabs .nav-item .nav-link:after {
        display: none;
    }
    .nav-item {
        width: 50%;
    }

    /* The rule above assumes a strip of two tabs, which is what every other one holds: at 50%
       each they fill the row.  The Training Library has four, and 50% turns that into a two by
       two block where the labels no longer line up with the pill behind the active one.  Scoped
       out here rather than changing the rule, which the campaign and package tabs rely on. */
    .library_tabs .nav-item {
        width: auto;
    }
}
@media only screen and (max-width: 1300px) {
    .nav-pills .nav-link.w434px {
        width: 300px;
    }
}
@media only screen and (max-width: 992px) {
    .nav-pills .nav-link.w434px {
        width: 200px;
    }
    .cp11 {
        padding: 30px !important;
    }
    .sidebar {
        width: 0px;
        overflow: hidden;
    }
    .header_menu_bar_div {
        display: block;
    }
}
@media only screen and (max-width: 768px) {
    .cp17 {
        padding: 0px 20px !important;
    }
}
@media only screen and (max-width: 620px) {
    .nav-item {
        width: 100%;
    }
    .cp14 {
        padding: 20px !important;
    }
    .cp11 {
        padding: 20px !important;
    }
    .cp13 {
        padding: 20px;
    }
    .ml_28 {
        margin-left: 0;
    }
} /*# sourceMappingURL=app.css.map */

.hidden {
    display: none;
}
.btn_grey{
    background: rgb(138, 138, 138) !important;
}

/* ==========================================================================
   Card header actions

   A card header is a title on the left and its buttons on the right.  With one button that lays
   out on its own; the Recipient Domain(s) card has two, and they were running into each other
   with no space between them.

   The buttons are also sized down here.  The shared button style carries a 129px minimum width
   and generous padding, which suits a short label like Save and works against a long one: two
   full width buttons with wordy labels sitting side by side read as a single blue block rather
   than as two things to choose between.  Inside a header group the label sets the width.

   Scoped to the group rather than changed on .mybtn, which is used across the application.
   ========================================================================== */

.card_header {
    gap: 16px;
    flex-wrap: wrap;
}

.card_header_actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.card_header_actions .mybtn {
    min-width: 0;
    padding: 7px 14px;
    white-space: nowrap;
}

/* ==========================================================================
   Loading overlay

   Shown while a request is in flight.  Signing in is the case that prompted it: the dashboard
   renders server side before the page arrives, so for an organization with a lot of campaign
   history the browser sits on the old page with only the tab spinner to show for it, and people
   reach for refresh.

   The card matches .my_card (background #1f243a, 12px radius, 1px rgba(145,188,252,0.4)) so it
   reads as part of the application rather than a browser artifact.

   The element is a <dialog> opened as a modal, which puts it in the browser's top layer.  That
   is what guarantees it draws above everything else: z-index only orders elements within their
   own stacking context, and the report templates embedded in the analytics and campaign pages
   carry their own stacking contexts and extreme z-index values, which was enough to leave the
   overlay painting behind the panels it was meant to cover.  The top layer sits outside all of
   that, so there is nothing left for a page to win against.

   The z-index below still matters for the fallback path, where a browser without dialog support
   leaves this an ordinary positioned element.

   Shown and hidden centrally from assets/js/main.js.
   ========================================================================== */

.vf_loading_overlay {
    position: fixed;
    inset: 0;
    z-index: 20000; /* fallback path only: above Bootstrap modals (1055) and the header (3) */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Undo the dialog defaults: a dialog is a small centered box with a border, and this needs
       to be an unadorned full-viewport surface. */
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    color: inherit;

    /* The scrim carries the effect on its own.  backdrop-filter is layered on top for the blur
       and is treated as an enhancement: it is expensive over a large DOM like the dashboard, and
       where it is unsupported or slow the scrim alone still reads correctly. */
    background: rgba(13, 19, 33, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    opacity: 0;
    transition: opacity 160ms ease-out;
}

/* A dialog is hidden until it is opened, and saying so here is not optional.  The browser's own
   rule for a closed dialog carries no weight against an author rule, so the display above would
   beat it and leave the overlay sitting over the page permanently: invisible at zero opacity,
   and swallowing every click. */
dialog.vf_loading_overlay {
    display: none;
}

dialog.vf_loading_overlay[open] {
    display: flex;
}

/* The same point for the fallback path, which is hidden by the hidden attribute.  Something else
   in the stack usually settles this already, but which one depends on stylesheet order, and that
   is too fragile a thing to leave a whole-page click trap resting on. */
.vf_loading_overlay[hidden] {
    display: none;
}

/* The scrim is on the element itself so both paths look identical.  The browser draws its own
   dimming layer behind a modal dialog, which would darken the page twice. */
dialog.vf_loading_overlay::backdrop {
    background: transparent;
}

/* The script adds this once the element is visible, so the fade runs rather than being skipped
   by the initial paint. */
.vf_loading_overlay.is_visible {
    opacity: 1;
}

.vf_loading_card {
    background: #1f243a;
    border: 1px solid rgba(145, 188, 252, 0.4);
    border-radius: 12px;
    padding: 32px 44px;
    text-align: center;
    max-width: calc(100vw - 32px);
}

.vf_loading_logo {
    width: 184px;
    max-width: 100%;
    display: block;
    margin: 0 auto 22px;
}

/* Wave: five bars whose heights run as a travelling sine, staggered by a fixed offset each. */
.vf_loading_wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
}

.vf_loading_wave span {
    display: block;
    width: 6px;
    height: 8px;
    border-radius: 3px;
    background: #3ebedb;
    animation: vf_loading_wave 1.1s ease-in-out infinite;
}

.vf_loading_wave span:nth-child(1) { animation-delay: 0s; }
.vf_loading_wave span:nth-child(2) { animation-delay: 0.12s; }
.vf_loading_wave span:nth-child(3) { animation-delay: 0.24s; }
.vf_loading_wave span:nth-child(4) { animation-delay: 0.36s; }
.vf_loading_wave span:nth-child(5) { animation-delay: 0.48s; }

@keyframes vf_loading_wave {
    0%, 100% { height: 8px; opacity: 0.55; }
    50% { height: 26px; opacity: 1; }
}

.vf_loading_text {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(241, 242, 242, 0.75);
}

/* Respect a stated preference for reduced motion: keep the overlay and its meaning, drop the
   movement.  The bars settle at a steady mid height and pulse gently instead of travelling. */
@media (prefers-reduced-motion: reduce) {
    .vf_loading_overlay {
        transition: none;
    }

    .vf_loading_wave span {
        height: 18px;
        animation: vf_loading_pulse 1.6s ease-in-out infinite;
    }

    @keyframes vf_loading_pulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
}

/* List-page footer, cosmetic (repo-wide): keep the per-page selector and the pagination
   right-aligned in the justify-content-between footer even on a single page, where Laravel
   renders the pagination empty and the per-page control would otherwise drift to the middle.
   Targets only the footer child that contains the per-page selector, so nothing else moves. */
.cp4 > div:has(.select_per_page) {
    margin-left: auto;
}

/* LANDING-001: the page background image must never bleed into the login fields.  The email/password
   inputs share the .preview_page_container class that the background image is painted onto (editor
   preview, template view, and the real landing page), so force it off for inputs while keeping their
   own background colour.  !important beats the JS inline background-image. */
input.preview_page_container {
    background-image: none !important;
}