/*
content
fill
font-family
font-size
font-weight
line-height
background
border
border-radius
box-shadow
color
opacity
outline
text-decoration
height
width
min-height
min-width
top
bottom
left
right
display
flex-wrap
flex
gap
position
float
margin
padding
align-items
justify-content
text-align
vertical-align
overflow
text-overflow
white-space
word-break
word-wrap
z-index
cursor
*/

/* ======================================================================================= FONTS ========================================================================================== */
@font-face {
    font-display: swap;
    font-family: "TikTok Text";
    font-weight: 300;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Light.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Light.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Text";
    font-weight: 400;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Regular.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Regular.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Text";
    font-weight: 500;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Medium.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Medium.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Text";
    font-weight: 700;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Bold.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Bold.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Text";
    font-weight: 900;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Black.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Text/TikTok-Text-Black.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Display";
    font-weight: 300;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Light.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Light.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Display";
    font-weight: 400;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Regular.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Regular.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Display";
    font-weight: 500;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Medium.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Medium.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: "TikTok Display";
    font-weight: 700;
    src: url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Bold.woff2) format("woff2"), url(https://sf16-sg.tiktokcdn.com/obj/eden-sg/nz_zkh_rvarpa/ljhwZthlaukjlkulzlp/assets/fonts-tiktok/Display/TikTok-Display-Bold.woff) format("woff")
}

/* ======================================================================================== BODY =========================================================================================== */
.ads {
    font-family: "TikTok Text", "TikTok Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #121415;
    margin: 0;
    padding: 0;
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
}

i {
    font-style: normal;
}

/* ================================================================================================ HEADER ============================================================================ */
.header {
    background: #121415;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1215686275);
    color: #d3d4d5;
    height: 70px;
    width: 100%;
    min-width: 1366px;
    top: 0;
    display: flex;
    position: fixed;
    padding: 0 24px;
    justify-content: space-between;
    z-index: 500;
}

.header .toggle-sidebar {
    background-color: hsla(0, 0%, 100%, .12156862745098039);
    border-radius: 18px;
    height: 36px;
    width: 76px;
    display: flex;
    margin-block-start: -1px;
    margin-inline-end: 10px;
    padding-inline-start: 8px;
    padding-inline-end: 4px;
    align-items: center;
    cursor: pointer;
}

.header .toggle-sidebar .acc-profile {
    font-size: 12px;
    line-height: 28px;
    background: rgb(240, 137, 170);
    border-radius: 100%;
    color: transparent;
    height: 28px;
    width: 28px;
    display: flex;
    margin-left: 7.5px;
}

.header .logo .logolink {
    height: 22px;
}

.header .logo .logolink img {
    height: 16px;
    width: 75px;
}

.header .logo .logolink .ads-manager {
    color: #fff;
    margin: 0 4px;
}

.header .logo .logolink .ads-manager:hover {
    text-decoration: none;
}

.header .header-left-inner {
    margin-left: 25px;
}

.header .header-left-inner .header-left-list {
    font-weight: 500;
    display: flex;
    list-style: none;
}

.header .header-left-inner .header-left-list .header-left-item {
    font-size: 14px;
    padding: 0 16px;
    align-items: center;
    cursor: pointer;
}

.header .header-left-inner .header-left-list .header-left-item span {
    color: #929496;
}

.header .header-left-inner .header-left-list .header-left-item span:hover {
    color: #fff;
}

.header .header-left-inner .header-left-list .header-left-item .cmp {
    color: #fff;
}

.header .header-left-inner .header-left-list .header-left-item .greendot {
    content: "";
    background: #31bdb8;
    border-radius: 1.6px;
    height: 3.2px;
    width: 24px;
    position: absolute;
    margin-left: 20px;
    margin-top: 7px;
}

.header .header-left-inner .header-left-list .header-left-item .reddot {
    background-color: #ef504b;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    top: 34%;
    position: absolute;
    margin-left: -33px;
}

/* .header .email-dropdown {
    font-size: 12px;
    line-height: 26px;
    border: 1px solid #d3d4d5;
    border-radius: 16px;
    height: 28px;
    min-width: 140px;
    position: relative;
    margin-left: 20px;
    padding: 0 15px;
    cursor: pointer;
}

.header .email-dropdown:hover {
    border: 1px solid #fff;
    color: #fff;
}

.header .email-dropdown svg {
    fill: currentColor;
    height: 10px;
    width: 10px;
} */

/* .header .lang-dropdown {
    font-size: 12px;
    line-height: 28px;
    border-radius: 100%;
    height: 28px;
    width: 39px;
    position: relative;
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
}

.header .lang-dropdown:hover {
    color: #fff;
} */

/* .header .avatar {
    margin-left: 20px;
}

.header .avatar .acc-profile {
    font-size: 12px;
    line-height: 28px;
    background: rgb(240, 137, 170);
    border-radius: 100%;
    color: transparent;
    height: 28px;
    width: 28px;
    display: inline-block;
    cursor: pointer;
} */

.header .business-center,
.header .notifications,
.header .question {
    height: 24px;
    margin-left: 20px;
    cursor: pointer;
}

.header .business-center:hover svg,
.header .notifications:hover svg,
.header .question:hover svg {
    color: #fff;
}

.header .business-center svg,
.header .notifications svg,
.header .question svg {
    color: #929496;
    height: 24px;
    width: 24px;
}

.header .notifications .red-noti {
    line-height: 16px;
    background: #f45858;
    border-radius: 8px;
    color: #fff;
    height: 16px;
    width: 16px;
    top: 14px;
    position: absolute;
    margin-left: 15px;
    text-align: center;
}

/* .header .vertical-bar {
    background-color: #6d6e71;
    border: 1px solid #6d6e71;
    border-radius: 1px;
    height: 22px;
    margin-left: 20px;
    flex-basis: 2px;
} */

/* .header .credit {
    margin-left: 20px;
}

.header .credit img {
    cursor: pointer;
}

.header .credit .dropdown-menu {
    min-width: 5%;
} */

.header .name-account {
    font-weight: 500;
    line-height: 36px;
    background-color: #353536;
    border-radius: 999px;
    color: white;
    height: 36px;
    width: 200px;
    display: flex;
    margin-left: 20px;
    padding: 0 12px;
    align-items: center;
    cursor: pointer;
}

.header .name-account:hover {
    background-color: #3f4041;
}

.header .name-account .advertiser-name {
    font-weight: 500;
    line-height: 36px;
    display: inline-block;
    flex: 1;
    padding-inline-end: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.header .name-account svg {
    height: 10px;
    width: 10px;
    flex: none;
    transition: transform .3s;
}

/* ===================================================================================== ADS CONTENT ================================================================================== */
.maindashboard {
    background-color: #f8f8f9;
    height: 100%;
    width: 100%;
    min-width: 1280px;
    margin-top: 70px;
}

.maindashboard-wrapper {
    height: calc(-140px + 100vh);
    min-height: calc(-140px + 100vh);
}

.top-content {
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .0509803922);
    height: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    align-items: center;
    justify-content: center;
}

.top-content .creates .btn-creates {
    font-size: 12px;
    font-weight: 500;
    background-color: #009995;
    border-color: #009995;
    border: 0 #d3d4d5;
    border-radius: 4px;
    color: white;
    height: 34px;
    min-width: 100px;
    display: flex;
    margin: 0;
    padding: 6px 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.top-content .creates .btn-creates i {
    font-size: 14px;
    margin-right: 4px;
}

.top-content .creates .btn-creates:hover {
    background-color: #008581;
    border-color: #008581;
}

.top-content .search {
    height: 34px;
    flex: 0.98;
    justify-content: start;
}

.top-content .search .vi-input__prefix {
    color: #333;
    height: 34px;
    left: 6.5%;
    margin-top: 14px;
}

.top-content .search input {
    line-height: 34px;
    background-color: #f2f3f3;
    border: 1px solid #f2f3f3;
    border-radius: 4px;
    box-sizing: border-box;
    color: #121415;
    height: 34px;
    width: 100%;
    display: inline-block;
    outline: 0;
    padding: 0 32px;
}

.top-content .date-element {
    font-size: 12px;
    font-weight: 500;
    background-color: #f2f3f3;
    border: 1px solid #f2f3f3;
    border-radius: 4px;
    height: 34px;
    min-width: 323px;
    display: flex;
    flex: none;
    overflow: hidden;
    text-overflow: ellipse;
    white-space: nowrap;
}

.top-content .date-element #reportrange {
    display: flex;
    flex: 1;
    gap: 4px;
    padding: 9px 12px;
    align-items: center;
    cursor: pointer;
}

.top-content .date-element #reportrange svg {
    font-size: 16px;
    line-height: 16px;
    height: 16px;
    width: 16px;
    text-align: center;
}

.top-content .date-element #reportrange .start-date,
.top-content .date-element #reportrange .end-date {
    appearance: none;
    background-color: inherit;
    border: none;
    width: auto;
    text-align: left;
}

.start-date:focus,
.end-date:focus {
    border: none;
    outline: none;
}

.top-content .date-element .date-picker-division {
    background: #d3d4d5;
    height: 22px;
    width: 1px;
    margin: 6px 0;
    padding: 0;
}

.top-content .date-element .compare-dates {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.top-content .date-element .compare-dates svg {
    font-size: 16px;
    line-height: 16px;
    height: 16px;
    width: 16px;
    text-align: center;
}

.top-content .custom-table {
    font-size: 12px;
    font-weight: 500;
    background-color: #f2f3f3;
    border: 1px solid #f2f3f3;
    border-radius: 4px;
    height: 34px;
    display: flex;
    flex: none;
    padding: 5px 12px;
    align-items: center;
    cursor: pointer;
}

.top-content .custom-table svg {
    height: 16px;
    width: 16px;
    margin-right: 4px;
}

.top-content .three-dot {
    font-size: 12px;
    font-weight: 500;
    background-color: #f2f3f3;
    border: 1px solid #f2f3f3;
    border-radius: 4px;
    height: 34px;
    width: 34px;
    display: flex;
    flex: none;
    margin-right: 13px;
    padding: 5px 12px;
    align-items: center;
    cursor: pointer;
}

.top-content .three-dot svg {
    height: 16px;
    width: 16px;
    left: 98%;
    top: 33%;
}

.top-content .filters .btn-filter:hover,
.top-content .search input:hover,
.top-content .date-element:hover,
.top-content .custom-table:hover,
.top-content .three-dot:hover {
    background-color: #e5e5e6;
}

/* ============================================================== MAIN CONTENT ============================================================= */
.main-content {
    background-color: #f2f3f3;
    height: 100%;
    display: flex;
    flex: 1;
}

.main-content .sidebar {
    background-color: white;
    height: 100%;
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    transition: width ease .2s;
}

/* --------------------------------------- TOP SIDEBAR ------------------------------------ */
.main-content .sidebar .top-sidebar {
    border-bottom: 1px solid #ececed;
    top: 0;
    position: sticky;
    padding: 0;
    padding-bottom: 12px;
    transition: all .3s ease;
}

.main-content .sidebar .campaign-bar,
.main-content .sidebar .ads-group-bar,
.main-content .sidebar .ads-bar {
    background: white;
    box-sizing: border-box;
    height: 50px;
    width: 100%;
    display: flex;
    margin-bottom: 4px;
    position: relative;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.main-content .sidebar .campaign-bar:hover,
.main-content .sidebar .ads-group-bar:hover,
.main-content .sidebar .ads-bar:hover {
    background-color: #f2f3f3;
}

.main-content .sidebar .bar-stick {
    content: "";
    background: #017976;
    height: 100%;
    width: 4px;
    top: 0;
    position: absolute;
    visibility: hidden;
}

.main-content .sidebar .campaign-bar:hover .bar-stick,
.main-content .sidebar .ads-group-bar:hover .bar-stick,
.main-content .sidebar .ads-bar:hover .bar-stick {
    visibility: visible;
    opacity: 0.5;
}

.main-content .sidebar .active-tab {
    background-color: #f2f3f3;
    color: #017976;
}

.main-content .sidebar .active-tab .bar-stick {
    visibility: visible;
    opacity: 1;
}

/* -------------------------- left ------------------------ */
.main-content .sidebar .campaign-bar .campaign-bar-left,
.main-content .sidebar .ads-group-bar .ads-group-bar-left,
.main-content .sidebar .ads-bar .ads-bar-left {
    width: 126px;
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    margin-right: 12px;
}

.main-content .sidebar .campaign-bar .campaign-bar-left .cbl-row-one,
.main-content .sidebar .ads-group-bar .ads-group-bar-left .agbl-row-one,
.main-content .sidebar .ads-bar .ads-bar-left .abl-row-one {
    line-height: 18px;
    height: 18px;
    display: flex;
    align-items: center;
}

.main-content .sidebar .campaign-bar .campaign-bar-left .cbl-row-one svg,
.main-content .sidebar .ads-group-bar .ads-group-bar-left .agbl-row-one svg,
.main-content .sidebar .ads-bar .ads-bar-left .abl-row-one svg {
    color: #a9abad;
    height: 14px;
    width: 14px;
    flex-shrink: 0;
    margin-right: 4px;
}

.main-content .sidebar .campaign-bar-left .cbl-row-one .smart-campaign-tab-icon {
    margin-left: 4px;
}

.main-content .sidebar .campaign-bar-left .cbl-row-one .smart-campaign-tab-icon svg {
    height: 14px;
    width: 14px;
}

.main-content .sidebar .active-tab .campaign-bar-left .cbl-row-one svg,
.main-content .sidebar .active-tab .ads-group-bar-left .agbl-row-one svg,
.main-content .sidebar .active-tab .ads-bar-left .abl-row-one svg {
    color: #017976;
}

.main-content .sidebar .campaign-bar .campaign-bar-left .cbl-row-one .campaign-text,
.main-content .sidebar .ads-group-bar .ads-group-bar-left .agbl-row-one .ads-group-text,
.main-content .sidebar .ads-bar .ads-bar-left .abl-row-one .ads-text {
    font-size: 14px;
    font-weight: 500;
    color: #121415;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content .sidebar .active-tab .campaign-bar-left .cbl-row-one .campaign-text,
.main-content .sidebar .active-tab .ads-group-bar-left .agbl-row-one .ads-group-text,
.main-content .sidebar .active-tab .ads-bar-left .abl-row-one .ads-text {
    color: #017976;
}

.main-content .sidebar .campaign-bar .campaign-bar-left .cbl-row-two,
.main-content .sidebar .ads-group-bar .ads-group-bar-left .agbl-row-two,
.main-content .sidebar .ads-bar .ads-bar-left .abl-row-two {
    height: 18px;
    line-height: 18px;
    display: none;
    align-items: center;
}

.main-content .sidebar .campaign-bar .campaign-bar-left .cbl-row-two .campaign-selected,
.main-content .sidebar .ads-group-bar .ads-group-bar-left .agbl-row-two .ads-group-selected,
.main-content .sidebar .ads-bar .ads-bar-left .abl-row-two .ads-selected {
    font-size: 12px;
    line-height: 18px;
    color: #6d6e71;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content .sidebar .campaign-bar .campaign-bar-left .cbl-row-two i,
.main-content .sidebar .ads-group-bar .ads-group-bar-left .agbl-row-two i,
.main-content .sidebar .ads-bar .ads-bar-left .abl-row-two i {
    font-size: 12px;
    color: #6d6e71;
    margin-left: 4px;
    padding: 3px 4px;
    cursor: pointer;
}


/* -------------------------- right ------------------------ */
.main-content .sidebar .campaign-bar .campaign-bar-right,
.main-content .sidebar .ads-group-bar .ads-group-bar-right,
.main-content .sidebar .ads-bar .ads-bar-right {
    display: flex;
    flex: 1;
    margin-right: 2px;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.main-content .sidebar .campaign-bar .campaign-bar-right .alt-1,
.main-content .sidebar .ads-group-bar .ads-group-bar-right .alt-2,
.main-content .sidebar .ads-bar .ads-bar-right .alt-3 {
    color: #87898b;
}

.main-content .sidebar .campaign-bar:hover .campaign-bar-right,
.main-content .sidebar .ads-group-bar:hover .ads-group-bar-right,
.main-content .sidebar .ads-bar:hover .ads-bar-right {
    visibility: visible;
}

/* ----------------------------------- MIDDLE SIDEBAR ------------------------------------ */
.main-content .sidebar .middle-sidebar {
    height: calc(100% - 191px);
    margin-bottom: -8px;
    margin-right: -8px;
    overflow: scroll;
}

/* --------------------------- middle top ----------------------------- */
.main-content .sidebar .middle-sidebar .middle-top .management {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #a9abad;
    padding: 16px 16px 8px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content .sidebar .middle-sidebar .middle-top .bulkrule {
    box-sizing: border-box;
    padding: 0 8px;
}

.main-content .sidebar .middle-sidebar .middle-top .bulk,
.main-content .sidebar .middle-sidebar .middle-top .rule {
    font-size: 14px;
    line-height: 18px;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: space-between;
    overflow-x: hidden;
    cursor: pointer;
}

.main-content .sidebar .middle-sidebar .middle-top .bulk:hover,
.main-content .sidebar .middle-sidebar .middle-top .rule:hover {
    background-color: #ececed;
}

.main-content .sidebar .middle-sidebar .middle-top .bulk .bulk-text,
.main-content .sidebar .middle-sidebar .middle-top .rule .rule-text {
    color: #121415;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content .sidebar .middle-sidebar .middle-top .bulk i,
.main-content .sidebar .middle-sidebar .middle-top .rule i {
    color: #6d6e71;
    display: inline-block;
    vertical-align: baseline;
}

/* --------------------------- middle bottom ----------------------------- */
.main-content .sidebar .middle-sidebar .middle-bottom .quick-operation {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #a9abad;
    padding: 16px 16px 8px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit,
.main-content .sidebar .middle-sidebar .middle-bottom .replace-negative-keywords,
.main-content .sidebar .middle-sidebar .middle-bottom .export-apply-filter {
    padding: 0 8px;
}

.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-off,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-on,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .delete {
    font-size: 14px;
    line-height: 18px;
    border-radius: 4px;
    display: flex;
    padding: 8px;
    align-items: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-off:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-on:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .delete:hover {
    background-color: #ececed;
}

.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-off svg,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-on svg,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .delete svg {
    color: #6d6e71;
    height: 16px;
    width: 16px;
    margin-right: 8px;
    overflow: hidden;
}

.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-off .turn-off-txt,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .turn-on .turn-on-txt,
.main-content .sidebar .middle-sidebar .middle-bottom .on-off-dlt .delete .delete-txt {
    line-height: 18px;
    color: #121415;
    white-space: normal;
}

.main-content .sidebar .middle-sidebar .middle-bottom .line-separator {
    content: "";
    background: #e5e5e6;
    height: 1px;
    width: 100%;
    display: block;
    margin: 4px 0;
}

.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-bid,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-budget,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-name,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-schedule,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-text,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-dest {
    font-size: 14px;
    line-height: 18px;
    border-radius: 4px;
    display: flex;
    padding: 8px;
    align-items: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-bid:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-budget:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-name:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-schedule:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-text:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .sidebar-edit .edit-dest:hover {
    background-color: #ececed;
}

.main-content .sidebar .middle-sidebar .middle-bottom .replace-negative-keywords .replace-negative-keywords-txt {
    font-size: 14px;
    line-height: 18px;
    border-radius: 4px;
    display: flex;
    padding: 8px;
    align-items: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.main-content .sidebar .middle-sidebar .middle-bottom .replace-negative-keywords .replace-negative-keywords-txt:hover {
    background-color: #ececed;
}

.main-content .sidebar .middle-sidebar .middle-bottom .export-apply-filter .export,
.main-content .sidebar .middle-sidebar .middle-bottom .export-apply-filter .apply,
.main-content .sidebar .middle-sidebar .middle-bottom .export-apply-filter .filter {
    font-size: 14px;
    line-height: 18px;
    border-radius: 4px;
    display: flex;
    padding: 8px;
    align-items: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.main-content .sidebar .middle-sidebar .middle-bottom .export-apply-filter .export:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .export-apply-filter .apply:hover,
.main-content .sidebar .middle-sidebar .middle-bottom .export-apply-filter .filter:hover {
    background-color: #ececed;
}

/* --------------------------------------- BOTTOM SIDEBAR ------------------------------------ */
.main-content .sidebar .bottom-sidebar {
    font-size: 14px;
    border-top: 1px solid #ececed;
    bottom: 0;
    color: #6d6e71;
    height: 43px;
    width: 100%;
    display: flex;
    flex: none;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.main-content .sidebar .bottom-sidebar svg {
    height: 18px;
    width: 18px;
}

.main-content .sidebar .bottom-sidebar .collapse {
    font-size: 14px;
    color: #6d6e71;
}

/* ----------------------------------------------------------------------- MAIN TABLE CONTENT  ---------------------------------------------------- */
.main-table-content {
    background: #f2f3f3;
    min-height: 0;
    width: calc(100% - 216px);
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;
    padding: 12px 0 0 12px;
    transition: padding-top .5s ease;
}

.main-table-content .main-table-wrapper {
    line-height: 15px;
}

/* ----------------------------------------------------- table content header -------------------------------------------- */
.table-content-header {
    overflow-x: hidden;
    white-space: nowrap;
}

.table-content-header:hover {
    overflow-x: auto;
}

.table-content-header::-webkit-scrollbar {
    background-color: rgb(227, 227, 227);
    border-radius: 6px;
    height: 8px;
    left: 0px;
    bottom: 0px;
    margin: 3px 0px;
    position: absolute;
}

/* Webkit scrollbar track (the background of the scrollbar) */
.table-content-header::-webkit-scrollbar {
    height: 8px;
}

.table-content-header::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 6px;
}

/* Webkit scrollbar thumb (the draggable part of the scrollbar) */
.table-content-header::-webkit-scrollbar-thumb {
    background-color: rgb(227, 227, 227);
    border-radius: 6px;
    border: 3px solid transparent;
}

.table {
    border-collapse: collapse;
    border-left: none;
    border-right: none;
    border-spacing: 0 8px;
    width: 100%;
    table-layout: fixed;
}

.table-resizable.resizing {
    user-select: none;
    cursor: col-resize;
}

.table-resizable th {
    position: relative;
}

.table-resizable th.draggable {
    cursor: pointer;
}

.table-resizable th.draggable:active {
    cursor: grabbing;
}

th.draggable.dragging {
    opacity: 0.5;
}

.table-resizable th .resizer {
    content: '';
    display: block;
    height: 100%;
    width: 8px;
    top: 0;
    right: 0;
    position: absolute;
    user-select: none;
    cursor: col-resize;
}

.table-resizable th:last-of-type .resizer {
    display: none;
}

.table .table-head {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    height: 48px;
}

.table .table-head .columns {
    font-weight: 500;
    /* background: #fff; */
    border: 0 solid #e5e7eb;
    border-color: #ececed;
    border-top-width: 1px;
    border-bottom: 1px solid #ececed !important;
    border-left: none;
    border-right: none;
    min-height: 48px;
    max-height: 86px;
    height: auto !important;
    min-width: 64px;
    padding: 0;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
    word-wrap: break-word;
}

.table .table-head .columns:hover {
    background-color: #dfdfe0;
}

/* .table .table-head .stick {
    position: sticky;
    z-index: 2;
} */

.table .table-head .col1 {
    border-radius: 8px 0 0 8px;
    width: 36px;
    min-width: 36px;
    left: 0;
    padding: 8px 0px 8px 16px;
}

.table .table-head .col1 .containercheck {
    display: flex;
    margin-top: 7px;
    justify-content: center;
}

.table .table-head .col1 .containercheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.table .table-head .col1 .containercheck .header-innercheck {
    height: 18px;
    width: 18px;
    cursor: pointer;
}

/* Create the checkmark (the tick) */
.table .table-head .col1 .containercheck .header-innercheck:after {
    content: "";
    background-color: white;
    height: 0.7px;
    width: 5px;
    display: block;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.table .table-head .col1 .containercheck input:checked+.header-innercheck {
    background-color: #009995;
    border-color: #009995;
}

/* Show the checkmark when checked */
.table .table-head .col1 .containercheck input:checked+.header-innercheck:after {
    display: block;
}

.table .table-head .col2 {
    width: 64px;
}

.table .table-head .col3 {
    width: 390px;
}

.table .table-head .shortcol {
    width: 290px;
}

.table .table-head .col4 {
    width: 200px;
}

/* .table .table-head .do-col {
    width: 256px;
} */

.table .table-head .ad-grp-id-col {
    width: 180px;
}

.table .table-head .ad-grp-name-col {
    width: 180px;
}

/* .table .table-head .ad-id-col {
    width: 192px;
} */

/* .table .table-head .net-cost-col {
    width: 110px;
} */

.table .table-head .cost-col {
    width: 128px;
}

.table .table-head .reach-col {
    width: 128px;
}

.table .table-head .impr-col {
    width: 140px;
}

.table .table-head .res-col {
    width: 140px;
}

.table .table-head .cpm-col {
    width: 128px;
}

.table .table-head .cpc-col {
    width: 170px;
}

.table .table-head .cpc-col span {
    text-align: right;
}

.table .table-head .cpr-col {
    width: 170px;
}

.table .table-head .clicks-col {
    width: 128px;
    padding: 0 3px;
}

.table .table-head .clicks-col span {
    text-align: right;
}

.table .table-head .ctr-col {
    width: 170px;
    padding: 0 3px;
}

.table .table-head .ctr-col span {
    text-align: right;
}

.table .table-head .vidview-col {
    width: 130px;
    padding: 0 8px;
}

.table .table-head .vidview-col span {
    text-align: right;
}

/* 
.table .table-head .conv-col {
    width: 160px;
} */

/* .table .table-head .cpc-col {
    width: 160px;
} */

/* .table .table-head .cvr-col {
    width: 128px;
}

.table .table-head .cvr-col span {
    text-align: right;
} */

/* ----------------------------------------------------- table content data -------------------------------------------- */
.table .table-content {
    background-color: rgba(255, 255, 255, 1);
}

.table .table-content .content-col {
    line-height: 16px;
    border-left: none;
    border-right: none;
    color: #121415;
    height: 60px;
    min-height: 48px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
    word-wrap: break-word;
}

.campaign-content .table .table-content .content-col,
.ads-group-content .table .table-content .content-col {
    height: 48px;
}

.campaign-content .table .table-content .content-col  .number-align,
.ads-group-content .table .table-content .content-col .number-align,
.ads-content .table .table-content .content-col .number-align{
    text-align: right;   
    display: inline-block;
    min-width: 80px;
}

.table .table-content .cbx-col {
    width: 36px;
    min-width: 36px;
    left: 0;
    padding: 14px 0px 8px 16px;
}

.table .table-content .cbx-col .containercheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.table .table-content .cbx-col .containercheck .innercheck {
    height: 18px;
    width: 18px;
    cursor: pointer;
}

/* Create the checkmark (the tick) */
.table .table-content .cbx-col .containercheck .innercheck:after {
    content: "";
    border: 1px solid white;
    border-left: 0;
    border-top: 0;
    height: 10px;
    width: 3px;
    top: 1px;
    left: 6px;
    display: none;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: center;
}

.table .table-content .cbx-col .containercheck input:checked+.innercheck {
    background-color: #009995;
    border-color: #009995;
}

/* Show the checkmark when checked */
.table .table-content .cbx-col .containercheck input:checked+.innercheck:after {
    display: block;
}

.table .table-content .onoff-col {
    width: 64px;
}

.table .table-content .onoff-col .vi-switch__input {
    height: 100%;
    width: 100%;
    display: block;
    z-index: 1;
    cursor: pointer;
}

.table .table-content .onoff-col .vi-switch__core {
    background-color: #d3d4d5;
    border: 1px solid #d3d4d5;
    border-radius: 12px;
    height: 16px;
    width: 30px;
    outline: none;
    transition: background-color 0.3s;
    pointer-events: auto;
    cursor: pointer;
}

.table .table-content .onoff-col .vi-switch__core:after {
    content: "";
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIwSURBVHgB7ZkxbsIwFIZfWmDuBANI5Ag9AZUKe0/S3qBUpUfgHB26l0r0BtwgSDDAwg5I6XtpKiFEgv3bsWrkT4oS7CjxF2L7PSdK0/SaLpgrunCCoO8EQd8Jgr4TBH0nCPrOxQvWCGS5XN5xoD7kwxvezxqNxmur1ZqTIXwtWq/X3e12+xJFUY+LEt7GnU7ngwAiJJtYLBYPvHs/aticJe9NJHO5eLfbffLP+LCKZQftdntKmqCv6NNxATdAnvrXarXqEkCJXHZ5rn8mAFTwpAQqeUbujxsCgARZZFpSpyWpKCfnzQgAEqzVaiP67fwnUZXUkEu4f48IABKUgaRer/fJQFJTro8OXvA8aCLpSk4wmuhRSVdy2f1trKpJ47nBEypvcDZPyrHCuVbkBCuCgqok/6MpOZITrAkKKpJl2JYTrAbbKn2yiCrkBOvZBCJZlZxQSbqkI1mlnBASXgSdwYZH1ZjnyQmahZzDqqBEKNzQWHckrVLSmqBq+FVEVZJWBDViSxlIkqL6KiSNBXXkJFRTiF2tShoJamYF2XpNPoUMyJEkLGiS8jSbzcSVJCRoms9x451JQoKybmmaz7mShAT3+70s+MZF9arhl6bkkADQV/S2pE4rttSQ7BEAOshsThWigbOipLtFJ27QG+/SwzLTrOCMpNxrTABwRp9/n3jkrcvX+JZ1S5sfX6Sf511hIw8U+S4hWF2y+I+EfNB3gqDvBEHfCYK+EwR9Jwj6zg9xhBtL/snwowAAAABJRU5ErkJggg==);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 10px;
    height: 14px;
    width: 14px;
    top: 0;
    left: 55%;
    margin-left: -15px;
}

.table .table-content .onoff-col .on-off-dark-bg .vi-switch__core {
    background-color: #009995;
    border-color: #009995;
}

.table .table-content .onoff-col .on-off-dark-bg .vi-switch__core:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIuNTA4IDYuMDAxIDIuNSAyLjUgNS01IiBzdHJva2U9IiMwMDk5OTUiIHN0eWxlPSJzdHJva2Utb3BhY2l0eToxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+);
    left: 100%;
}

.table .table-content .name-col .video {
    background-color: #f8f8f9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #e4e9ed;
    border-radius: 3px;
    height: 48px;
    width: 86px;
    left: 0;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
}

.table .table-content .name-col .video::after {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSI+PGcgb3BhY2l0eT0iLjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMS4zMzMgMTZDMS4zMzMgNy45IDcuOSAxLjMzMyAxNiAxLjMzM1MzMC42NjcgNy45IDMwLjY2NyAxNiAyNC4xIDMwLjY2NyAxNiAzMC42NjcgMS4zMzMgMjQuMSAxLjMzMyAxNloiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTIuNjY3IDEwLjIyNmMuNDEyLS4yMzguOTItLjIzOCAxLjMzMyAwbDggNC42MmExLjMzMyAxLjMzMyAwIDAgMSAwIDIuMzA5bC04IDQuNjE4YTEuMzMzIDEuMzMzIDAgMCAxLTItMS4xNTRWMTEuMzhjMC0uNDc2LjI1NC0uOTE2LjY2Ny0xLjE1NVoiIGZpbGw9IiMxMjE0MTUiLz48L2c+PC9zdmc+);
    font-size: 15px;
    line-height: 25px;
    color: #3f4041 !important;
    top: 50%;
    left: 50%;
    display: block;
    position: absolute;
    text-align: center;
    transform: translate(-50%, -50%) scale(0.5);
    cursor: pointer;
}

.table .table-content .name-col .video #brand-video {
    width: 100%;
    top: 0;
    position: absolute;
    object-fit: cover;
}

.table .table-content .name-col #triggerVideo {
    background-color: transparent;
    border: none;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 10;
    cursor: pointer;
}

.table .table-content .name-col .non-video {
    height: 40px;
    width: 100%;
    display: flex;
    margin-left: 86px;
    padding-left: 16px;
    padding-bottom: 0;
    align-items: center;
    justify-content: space-between;
}

.table .table-content .name-col .nomarginleft {
    margin-top: -6px;
    margin-left: 0;
}

.table .table-content .name-col .non-video .smart-campaign-icon{
    display: flex;
    align-items: center;
}

.table .table-content .name-col .non-video .smart-campaign-icon svg {
    color: #121415;
    height: 14px;
    width: 14px;
    margin-right: 4px;
    vertical-align: sub;
    cursor: pointer;
}

.table .table-content .name-col .non-video .non-video-caption {
    font-size: 14px;
    max-width: 100px;
    width: 100%;
    display: inline-flex;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.table .table-content .name-col .non-video .non-video-caption:hover {
    color: #017976;
}

.table .table-content .name-col .non-video .toolkit {
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
    position: relative;
    visibility: hidden;
}

.table .table-content .name-col .non-video .toolkit .view-data,
.table .table-content .name-col .non-video .toolkit .edit-data,
.table .table-content .name-col .non-video .toolkit .copy-data,
.table .table-content .name-col .non-video .toolkit .dot-data {
    background: #ececed;
    border-radius: 4px;
    height: 32px;
    width: 32px;
    cursor: pointer;
}

.table .table-content .name-col .non-video .toolkit .view-data:hover,
.table .table-content .name-col .non-video .toolkit .edit-data:hover,
.table .table-content .name-col .non-video .toolkit .copy-data:hover,
.table .table-content .name-col .non-video .toolkit .dot-data:hover {
    background: #d3d4d5;
}

.table .table-content .name-col .non-video .toolkit .view-data svg,
.table .table-content .name-col .non-video .toolkit .copy-data i,
.table .table-content .name-col .non-video .toolkit .edit-data i,
.table .table-content .name-col .non-video .toolkit .dot-data svg {
    font-size: 16px;
    height: 16px;
    width: 16px;
    display: block;
    margin: 8px;
}

.table .table-content .status-col .status-para .status-dot.is-active {
    background: #2a9c49;
    border-radius: 4px;
    height: 8px;
    width: 8px;
    display: inline-block;
    margin-right: 8px;
}

.table .table-content .status-col .status-para .status-dot.is-not-active {
    background: #a9abac;
    border-radius: 4px;
    height: 8px;
    width: 8px;
    display: inline-block;
    margin-right: 8px;
}

.table .table-content .status-col .status-para .status-dot.is-rejected svg {
    border-radius: 0px !important;
    background: rgba(0, 0, 0, 0) !important;
    height: 14px !important;
    width: 14px !important;
    display: inline-block;
    margin-left: -2.5px;
    margin-right: 4px !important;
}

.table .table-content .status-col .sub-status {
    font-size: 12px;
    line-height: 14px;
    color: #6d6e70;
    margin-left: 20px;
    margin-top: 4px;
}

.table .table-content input {
    font-family: "TikTok Text", "TikTok Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    background: inherit;
    border: none;
    color: #121415;
    text-align: right;
}

.table .table-content .ad-grp-id-col input {
    text-align: left;
}

.table .table-content .ad-grp-name-col input {
    color: #017976;
    text-align: left;
    cursor: pointer;
}

.table .table-content .ad-grp-name-col input:hover {
    color: #006764;
}

/* =========================================================================== TABLE FOOTER ============================================================= */
.table .table-footer {
    background-color: rgba(255, 255, 255, 1);
}

.table .table-footer .footer-col {
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
}

.table .table-footer .total-ads {
    padding-left: 16px;
}

.table .table-footer .total-ads .total-ads-txt {
    font-weight: 500;
    color: #121415 !important;
    padding-right: 5px;
}

.table .table-footer .total-ads .item {
    color: #d3d4d5;
    cursor: pointer;
}

.campaign-content .table .table-footer .footer-col  .number-align,
.ads-group-content .table .table-footer .footer-col .number-align,
.ads-content .table .table-footer .footer-col .number-align{
    text-align: right;   
    display: inline-block;
    min-width: 80px;
}

/* ========================================================================= BLACK HELP =============================================================== */
.black-help {
    top: calc(100vh - 189px);
    right: 0;
    position: fixed;
    margin-right: 24px;
}

.black-help .inner-black-help {
    font-weight: 500;
    background: #121415;
    border-radius: 50%;
    color: #fff;
    height: 44px;
    width: 44px;
    display: inline-block;
    padding-left: 10px;
    overflow: hidden;
    align-items: center;
    cursor: pointer;
}

.black-help .inner-black-help .i-icon-help {
    display: inline-block;
    padding-top: 8.5px;
    vertical-align: middle;
}

.black-help .inner-black-help .help-txt {
    opacity: 0;
}

.black-help .inner-black-help:hover {
    border-radius: 1000px;
    width: 100px;
}

.black-help .inner-black-help:hover .i-icon-help {
    transform: scale(0.9);
}

.black-help .inner-black-help:hover .help-txt {
    display: inline-flex;
    padding-top: 1px;
    opacity: 1;
}

.black-help .inner-black-help:hover .i-icon-drag {
    display: inline-block;
    padding-left: 3px;
    vertical-align: middle;
}

/* =============================================================== PAGE SEGMENTATION =============================================================== */
.page-segment {
    top: calc(100vh - 987px);
    padding: 8px 16px;
    justify-content: space-between;
}

.page-segment .page {
    display: inline-block;
}

.page-segment .page .green-page {
    font-size: 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #009995;
    color: #009995;
    height: 28px;
    min-width: 30px;
    display: inline-block;
    margin: 0 5px;
    padding-top: 2px;
    text-align: center;
    cursor: default;
}

.page-segment .page .btn-prev,
.page-segment .page .btn-next {
    background-color: #f8f8f9;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #d3d4d5;
    min-width: 30px;
    display: inline-block;
    margin: 0 5px;
    cursor: not-allowed;
}

.page-segment .per-page {
    max-height: 95px;
}

.page-segment .per-page .per-page-btn {
    font-size: 12px;
    background: rgba(187, 181, 181, 0.16);
    border: 0 #d3d4d5;
    border-radius: 4px;
    color: #121415;
    height: 30px;
    min-width: 116px;
    margin-left: 8px;
    padding: 5px 16px;
    text-align: left;
    cursor: pointer;
}

.page-segment .per-page .per-page-btn:hover {
    background: #e5e5e6;
}

.page-segment .per-page .per-page-btn .arrow-icon {
    padding-left: 10px;
}

/* =============================================================== VIDEO MODAL ===================================================== */
.modal-dialog {
    width: 720px;
}

.modal-dialog .modal-body {
    background-color: #121415;
    height: 407px;
    padding: 0;
}

.modal-dialog .modal-body #modalVideo {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.modal-dialog .modal-body .xgplayer-start {
    background: rgba(0, 0, 0, .38);
    border-radius: 50%;
    line-height: 70px;
    height: 70px;
    width: 70px;
    top: 50%;
    left: 50%;
    display: inline-block;
    position: absolute;
    margin: -35px auto auto -35px;
    cursor: pointer;
}

.modal-dialog .modal-body .xgplayer-start svg {
    fill: hsla(0, 0%, 100%, .7);
}

.modal-dialog .modal-body .xgplayer-progress {
    line-height: 20px;
    outline: none;
    height: 20px;
    top: -15px;
    left: 12px;
    right: 12px;
    display: block;
    position: absolute;
    z-index: 35;
}

.modal-dialog .modal-body .xgplayer-outer {
    line-height: 3px;
    background: hsla(0, 0%, 100%, .3);
    height: 3px;
    width: 100%;
    display: block;
    position: relative;
    margin-top: 8.5px;
    cursor: pointer;
}

.modal-dialog .modal-body .xgplayer-controls {
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .37), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75));
    height: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 10;
}

.modal-dialog .modal-body .xgplayer-controls .xgplayer-progress {
    line-height: 3px;
    background: hsla(0, 0%, 100%, .3);
    height: 3px;
    width: 100%;
    left: 12px;
    right: 12px;
    display: block;
    position: absolute;
    margin-top: 8.5px;
    cursor: pointer;
}

.modal-dialog .modal-body .icon-bg {
    background: #fff;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    top: 0;
    right: 0;
    position: absolute;
    transform: translate(50%, -50%);
    z-index: 520;
    cursor: pointer;
}

.modal-dialog .modal-body .close-icon {
    font-size: 33px;
    font-weight: 500;
}

/* ==================================================================================== ADD ROW MODAL =========================================================================================== */
.add-row-modal #step-2 {
    display: none;
}

.add-row-modal .modal-body {
    background-color: #fff;
    height: 100%;
    padding: 1rem;
}