/* ======================================================================================= 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;
    color: #121415;
    line-height: 22px;
    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;
    padding: 0 24px;
    position: fixed;
    justify-content: space-between;
    z-index: 500;
}

.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;
    margin-left: 20px;
    margin-top: 7px;
    position: absolute;
}

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

.header .email-dropdown {
    font-size: 12px;
    border: 1px solid #d3d4d5;
    border-radius: 16px;
    line-height: 26px;
    height: 28px;
    min-width: 140px;
    margin-left: 20px;
    padding: 0 15px;
    position: relative;
    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;
    border-radius: 100%;
    line-height: 28px;
    height: 28px;
    width: 39px;
    margin-left: 20px;
    position: relative;
    text-align: center;
    cursor: pointer;
}

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

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

.header .avatar .acc-profile {
    font-size: 12px;
    background: rgb(240, 137, 170);
    border-radius: 100%;
    color: transparent;
    line-height: 28px;
    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 {
    background: #f45858;
    border-radius: 8px;
    color: #fff;
    line-height: 16px;
    height: 16px;
    width: 16px;
    top: 14px;
    margin-left: 15px;
    position: absolute;
    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%;
}

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

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

.top-content {
    background: #fff;
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
    position: relative;
    transition: all .2s ease-out;
}

.top-content>div {
    flex: 1;
}

.top-content .filters {
    flex: 0 0 6%;
    max-width: 6%;
}

.top-content .filters .btn-filter {
    background: #f2f3f3;
    border: 0 #d3d4d5;
    border-radius: 4px;
    color: #121415;
    height: 34px;
    width: 80%;
    margin: 0;
    margin-left: 13px;
    cursor: pointer;
}

.top-content .search {
    flex: 0 0 auto;
    max-width: 23%;
    margin-left: 16px;
}

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

.top-content .search .vi-input__prefix {
    color: #6d6e70;
    height: 34px;
    left: 7.5%;
    margin-top: 18px;
}

.top-content .calendar {
    flex: 0 0 auto;
    background-color: #f2f3f3;
    background-image: none;
    border: 1px solid #f2f3f3;
    border-radius: 4px;
    height: 34px;
    width: auto;
    margin-left: auto;
    margin-right: 16px;
    padding: 3px 10px;
}

.top-content .calendar .start-date,
.top-content .calendar .end-date {
    appearance: none;
    background-color: inherit;
    border: none;
    width: 85px;
    text-align: left;
}

.top-content .calendar .separator {
    width: 30px;
    padding: 0 5px;
    margin-right: 2px;
}

.top-content .calendar .utc {
    font-size: 12px;
    color: #6d6e70;
    line-height: 36px;
    margin-right: 5px;
    padding-left: 10px;
}

.top-content .calendar .utc select {
    background: inherit;
    border: none; 
    color: #6d6e70;
    line-height: 36px; 
    padding-left: 5px; 
    -webkit-appearance: none;
    -moz-appearance: none; 
    appearance: none;
}

.top-content .calendar .utc select:focus {
    outline: none; /* Removes the focus outline */
}


.top-content .calendar .utc .vi-icon-question {
    color: #d3d4d5;
    cursor: pointer;
}

.top-content .calendar .vi-input__icon {
    color: #6d6e70;
    line-height: 34px;
    width: 20px;
    margin-bottom: 12px;
}

.top-content .filters .btn-filter:hover,
.top-content .search input:hover,
.top-content .calendar:hover {
    background-color: #e5e5e6;
}

/* ============================================================ 3 OPTIONS =================================================== */
.options {
    height: 44px;
}

.options .custom-col {
    flex: 0 0 20%;
    max-width: 25%;
}

.options .custom-col:hover {
    background: rgba(255, 255, 255, .4);
    border-radius: 10px 10px 0 0;
}

.options .col-11-set {
    max-width: 98.2%;
}

.options .opt3 {
    font-weight: 500;
    color: #6d6e70;
    height: 100%;
    min-width: 320px;
    display: flex;
    padding: 10px 16px;
    align-items: center;
    cursor: pointer;
}

.options .opt3 .opt3-icon {
    height: 15px;
    width: 15px;
    margin-right: 8px;
}

.options .opt3 .select-num {
    font-size: 12px;
    background: #a9abac;
    border-radius: 16px;
    color: #fff;
    height: 24px;
    display: none;
    margin-left: 12px;
    padding: 2px 8px;
    align-items: center;
}

.options .opt3 .select-num .vi-icon-error {
    margin-left: 8px;
}

.options .active-tab {
    background: #fff;
    border: none;
    border-radius: 10px 10px 0 0;
    color: #121415;
    position: relative;
}

.options .active-tab .opt3 {
    color: #121415;
}

/* ----------------------------------------------------------------------- AD table ---------------------------------------------------- */
/* ----------------------------------------------------- table header -------------------------------------------- */
 .table-header {
    background: #fff;
    padding: 12px 0;
}

 .table-header .create {
    font-size: 12px;
    background: #009995;
    border: 0 #d3d4d5;
    border-color: #009995;
    border-radius: 4px;
    color: #fff;
    height: 30px;
    min-width: 80px;
    padding: 0 16px;
    text-align: center;
    cursor: pointer;
}

 .table-header .create:hover {
    background: #008682;
    border-color: #008682;
}

 .table-header .edit {
    font-size: 12px;
    background: #f8f8f9;
    border: 1px solid #f2f3f3;
    border-radius: 4px;
    color: #a9abac;
    line-height: 30px;
    height: 30px;
    min-width: 80px;
    margin-left: 8px;
    cursor: not-allowed;
}

 .table-header .edit .edit-text {
    padding-right: 15px;
}

 .table-header .edit .edit-icon i {
    padding-bottom: 12px;
}

/*  .table-header .customize-column:after {
    display: none !important;
}

 .table-header .customize-column-dropdown {
    background-color: #fff;
    border: 1px solid #ccc;
    max-width: 400px;
    left: 90%;
    top: 100%;
    padding: 10px;
    position: absolute;
    z-index: 9999;
} */

/*  .table-header .customize-column-dropdown ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    list-style: none;
}

 .table-header .customize-column-dropdown li {
    display: flex;
    width: 50%;
    margin-bottom: 10px;
    align-items: center;
    float: left;
}

 .table-header .customize-column-dropdown input[type="checkbox"] {
    margin-left: 0;
    margin-right: 10px;
    vertical-align: middle;
}

 .table-header .customize-column-dropdown label {
    display: block;
    margin-left: 0;
    padding-top: 8px;
    vertical-align: middle;
}

 .table-header .customize-column-dropdown .hover-button {
    display: flex;
    margin: 0 auto;
} */

 .table-header .bulk,
 .table-header .rules,
 .table-header .customize-column,
 .table-header .breakdown {
    font-size: 12px;
    background: #f2f3f3;
    border: 0 #d3d4d5;
    border-radius: 4px;
    color: #121415;
    height: 30px;
    min-width: 80px;
    margin-left: 8px;
    padding: 2px 16px;
    text-align: center;
    cursor: pointer;
}

 .table-header .bulk:hover,
 .table-header .rules:hover,
 .table-header .breakdown:hover,
 .table-header .customize-column:hover,
 .table-header .refresh:hover,
 .table-header .report:hover {
    background: #e5e5e6;
}

 .table-header .refresh,
 .table-header .report {
    background: #f2f3f3;
    border: 0 #d3d4d5;
    border-radius: 4px;
    color: #121415;
    height: 30px;
    min-width: 32px;
    margin-left: 8px;
    padding: 7px 8px;
    cursor: pointer;
}

 .table-header .refresh {
    padding: 4px 8px;
}

 .table-header .report svg {
    height: 14px;
    width: 14px;
}

/* ----------------------------------------------------- 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;
    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: 1em;
    right: 0;
    top: 0;
    position: absolute;
    user-select: none;
    cursor: col-resize;
}

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

.table .table-head {
    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;
    word-wrap: break-word;
    white-space: normal;
    word-break: normal;
    overflow: hidden;
    vertical-align: middle;
}

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

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

.table .table-head .col1 {
    min-width: 48px;
    width: 48px;
    left: 0;
}

.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 {
    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;
    left: 50%;
    top: 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;
    left: 48px;
}

.table .table-head .col3 {
    width: 380px;
    left: 112px;
}

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

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

.table .table-head .ad-grp-col {
    width: 224px;
} */

.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 .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 {
    border-left: none;
    border-right: none;
    color: #121415;
    line-height: 16px;
    min-height: 60px;
    height: 60px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    word-wrap: break-word;
    white-space: normal;
    word-break: normal;
    overflow: hidden;
}

.table .table-content .cbx-col {
    min-width: 48px;
    width: 48px;
    left: 0;
}

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

.table .table-content .cbx-col .containercheck .innercheck {
    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: 7px;
    width: 3px;
    display: none;
    left: 4px;
    top: 1px;
    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;
    left: 55%;
    top: 0;
    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;
    top: 0;
    margin-top: 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;
    color: #3f4041 !important;
    line-height: 25px;
    display: block;
    left: 50%;
    top: 50%;
    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%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
    cursor: pointer;
}

.table .table-content .name-col .non-video {
    width: 100%;
    display: inline-block;
    margin-top: 6px;
    margin-left: 86px;
    padding-left: 16px;
}

.table .table-content .name-col .non-video .non-video-caption {
    font-size: 14px;
    max-width: calc(100% - 70px);
    display: inline-block;
    overflow: hidden;
    text-align: left;
    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 .pencil {
    color: #6d6e70;
    margin-left: 2px;
    padding-top: 4px;
    visibility: hidden;
}

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

.table .table-content .name-col .non-video .toolkit {
    margin-top: 4px;
    position: relative;
    visibility: hidden;
}

.table .table-content .name-col .non-video .toolkit .view-data {
    color: #6d6e70;
    display: inline-block;
    margin-right: 3px;
    cursor: pointer;
}

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

.table .table-content .name-col .non-video .toolkit .view-data svg {
    height: 14px;
    width: 14px;
}

.table .table-content .name-col .non-video .toolkit .edit-data {
    color: #6d6e70;
    display: inline-block;
    margin-right: 3px;
    cursor: pointer;
}

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

.table .table-content .name-col .non-video .toolkit .edit-data i {
    height: 14px;
    width: 14px;
}

.table .table-content .name-col .non-video .toolkit .copy-data {
    color: #6d6e70;
    display: inline-block;
    margin-right: 3px;
    cursor: pointer;
}

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

.table .table-content .name-col .non-video .toolkit .copy-data i {
    height: 14px;
    width: 14px;
}

.table .table-content .name-col .non-video .toolkit .dot-data {
    color: #6d6e70;
    display: inline-block;
    margin-right: 3px;
    cursor: pointer;
}

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

.table .table-content .name-col .non-video .toolkit .dot-data svg {
    height: 14px;
    width: 14px;
}

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

.table .table-content .status-col .status-para .status-dot.is-active {
    background: #2a9c49;
}

.table .table-content .status-col .status-para .status-dot.is-not-active {
    background: #a9abac;
}

.table .table-content .status-col .status-para .status-dot.is-rejected {
    background: #ef504b;
}

.table .table-content .status-col .sub-status {
    font-size: 12px;
    color: #6d6e70;
    line-height: 14px;
    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-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 .footer-col .d-flex span{
    padding-right: 2px;
}

.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;
}

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

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

.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 - 100px);
    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: #f2f3f3;
    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;
    display: inline-block;
    left: 50%;
    top: 50%;
    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;
    height: 20px;
    display: block;
    left: 12px;
    right: 12px;
    top: -15px;
    position: absolute;
    outline: none;
    z-index: 35;
}

.modal-dialog .modal-body .xgplayer-outer {
    background: hsla(0, 0%, 100%, .3);
    line-height: 3px;
    height: 3px;
    width: 100%;
    display: block;
    margin-top: 8.5px;
    position: relative;
    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;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 10;
}

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

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

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

/* =========================================================================== HEADER TOOL SUBMENU ================================================================== */
.header-tools-submenu {
    font-size: 14px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    line-height: 1.4;
    display: none;
    left: 0;
    top: 0;
    margin-top: 6px;
    position: fixed;
    justify-content: space-around;
    transform: translate3d(39px, 62px, 0px);
    transform-origin: center top;
    z-index: 9999;
}

.header-tools-submenu .column {
    border-radius: 10px;
    min-width: 180px;
    max-width: 264px;
    width: auto;
    margin-left: 12px;
    padding: 12px 0;
    padding-left: 12px;
}

.header-tools-submenu .no-pad-left {
    margin-left: 0;
    padding-left: 0;
}

.header-tools-submenu .bdl {
    border-left: 1px solid #f2f3f3;
}

.header-tools-submenu .column .title {
    font-weight: 500;
    margin-bottom: 10px;
    padding: 0 12px;
}

.header-tools-submenu .column .item {
    margin: 2px 0;
    padding: 12px;
}

.header-tools-submenu .column .item:hover {
    background-color: #f2f2f2;
    color: #121415;
    cursor: pointer;
}

.header-tools-submenu .column .item .beta {
    font-size: 12px;
    background: #e9ebff;
    border: none;
    border-radius: 4px;
    color: #665cd6;
    height: 26px;
    margin-left: 5px;
    padding: 2px 8px;
}

/* =========================================================================== HEADER ANALYTIC SUBMENU ================================================================== */
.header-analytic-submenu {
    font-size: 14px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    line-height: 1.4;
    display: none;
    left: 0;
    top: 0;
    position: fixed;
    margin-top: 6px;
    transform: translate3d(442px, 63px, 0px);
    transform-origin: center top;
    z-index: 9999;
}

.header-analytic-submenu .column {
    border-radius: 10px;
    max-width: 264px;
    width: auto;
    padding: 6px 0;
}

.header-analytic-submenu .column .item {
    line-height: 22px;
    margin: 2px 0;
    padding: 12px;
}

.header-analytic-submenu .column .item:hover {
    background-color: #f2f2f2;
    color: #121415;
    cursor: pointer;
}

/* =========================================================================== HEADER BUSINESS CENTER SUBMENU ================================================================== */
.header-bc-submenu {
    font-size: 14px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    display: none;
    left: calc(100% - 250px);
    top: 46px;
    position: fixed;
    margin-top: 9px;
    padding: 8px 12px;
    transform-origin: center top;
    z-index: 1000 !important;
}

.header-bc-submenu .arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    display: block;
    left: 50%;
    top: -6px;
    position: absolute;
    transform: translateX(-50%);
}

/* =========================================================================== HEADER NOTIFICATION SUBMENU ================================================================== */
.header-noti-submenu {
    font-size: 14px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    display: none;
    left: calc(100% - 197px);
    top: 46px;
    position: fixed;
    margin-top: 9px;
    padding: 8px 12px;
    transform-origin: center top;
    z-index: 1000 !important;
}

.header-noti-submenu .arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    display: block;
    left: 50%;
    top: -6px;
    position: absolute;
    transform: translateX(-50%);
}

/* =========================================================================== HEADER HELP SUBMENU ================================================================== */
.header-help-submenu {
    font-size: 14px;
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    width: 160px;
    display: none;
    left: calc(100% - 182px);
    top: 40px;
    position: fixed;
    margin-top: 20px;
    transform-origin: center top;
    z-index: 1000 !important;
}

.header-help-submenu .help {
    padding: 4px 0;
}

.header-help-submenu .help .item {
    border-top: 1px solid #edf1f5;
    line-height: 32px;
    height: 32px;
    margin: 0;
    padding: 2px 16px;
    cursor: pointer;
}

.header-help-submenu .help .no-bd-top {
    border-top: none;
}

.header-help-submenu .help .item:hover {
    background: #f8f9fb;
}

.header-help-submenu .arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    display: block;
    left: 50%;
    top: -6px;
    position: absolute;
    transform: translateX(-50%);
}

/* =========================================================================== CALENDAR SUBMENU ================================================================== */
.calendar-submenu{
    font-size: 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    line-height: 20px;
    min-width: 10px;
    max-width: 400px;
    width: 340px;
    display: none;
    left: calc(100% - 350px);
    top: 135px;
    position: absolute;
    padding: 8px 16px;
    transform-origin: center top;
}

.calendar-submenu .learn-more{
    font-size: 12px;
    color: #017976;
    line-height: 17px; 
    display: inline;
    padding: 0 4px;
    cursor: pointer;
}

.calendar-submenu .arrow{
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    display: block;
    left: 81.5%;
    top: -4px;
    position: absolute;
    transform: translateX(-50%);
}

/* =========================================================================== TABLE HEADER REFRESH SUBMENU ================================================================== */
.table-header-refresh-submenu{
    font-size: 12px;
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    line-height: 20px;
    min-width: 10px;
    max-width: 400px;
    width: 255px;
    display: none;
    left: calc(100% - 265px);
    top: 155px;
    position: absolute;
    padding: 8px 16px;
    transform-origin: center bottom;
}

.table-header-refresh-submenu .arrow{
    content: " ";
    border-color: transparent;
    border-bottom-width: 0;
    border-top-color: #fff;
    border-style: solid;
    border-width: 5px;
    height: 0;
    width: 0;
    display: block;
    left: 70%;
    bottom: -10px;
    position: absolute;
    transform: translateX(-50%);
}

/* =========================================================================== TABLE HEADER REPORT SUBMENU ================================================================== */
.table-header-report-submenu{
    font-size: 12px;
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    line-height: 20px;
    min-width: 10px;
    max-width: 400px;
    width: 108px;
    display: none;
    left: calc(100% - 115px);
    top: 175px;
    position: absolute;
    padding: 8px 16px;
    transform-origin: center bottom;
}

.table-header-report-submenu .arrow{
    content: " ";
    border-color: transparent;
    border-bottom-width: 0;
    border-top-color: #fff;
    border-style: solid;
    border-width: 5px;
    height: 0;
    width: 0;
    display: block;
    left: 60%;
    bottom: -10px;
    position: absolute;
    transform: translateX(-50%);
}

/* =========================================================================== FOOTER QUESTION SUBMENU ================================================================== */
.footer-question-submenu {
    font-size: 12px;
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    line-height: 20px;
    min-width: 10px;
    max-width: 400px;
    left: 10px;
    top: calc(100% - 327px);
    position: absolute;
    padding: 8px 16px;
    transform-origin: center bottom;
}

.footer-question-submenu .arrow {
    content: " ";
    border-bottom-width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    height: 0;
    width: 0;
    display: block;
    left: 108.125px;
    bottom: 1px;
    position: absolute;
    transform: translateX(-50%);
}

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

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