/*
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
*/

/* =========================================================================== HEADER USER SUBMENU ================================================================== */
.header-user-submenu {
    font-size: 14px;
    line-height: 22px;
    background-color: white;
    border-start-end-radius: .5rem;
    border-end-end-radius: .5rem;
    height: 100%;
    width: 240px;
    top: 0;
    display: none;
    flex-direction: column;
    position: fixed;
    padding: 20px 0;
    z-index: 9999;
}

/* ---------------- TIKTOK BUSINESS TITLE -------------- */
.header-user-submenu .tktk-business-title {
    display: flex;
    padding: 0 16px;
    align-items: center;
}

/* ----------------------- USER ROW ------------------- */
.header-user-submenu .user-row {
    margin-top: 24px;
    padding: 0 16px;
}


.header-user-submenu .user-row .user-row-box {
    background: rgb(248, 248, 249);
    border-radius: .25rem;
    display: flex;
    padding: 14px 12px;
    align-items: center;
    cursor: pointer;
}

.header-user-submenu .user-row .user-row-box:hover {
    background-color: rgb(242 243 243);
}

.header-user-submenu .user-row .user-row-box .user-row-img {
    height: 28px;
    width: 28px;
}

.header-user-submenu .user-row .user-row-box .user-row-text {
    font-size: 14px;
    line-height: 22px;
    width: 128px;
    margin-inline-start: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-submenu .user-row .user-row-box .three-dot {
    font-style: normal;
    line-height: 0;
    color: inherit;
    display: inline-block;
    margin-inline-start: auto;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.header-user-submenu .user-row .user-row-box .three-dot svg {
    vertical-align: middle;
}

/* ------------------- USER CONTENT ------------------ */
.header-user-submenu .header-user-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ----- TOP CONTENT ----- */
.header-user-submenu .header-user-content .header-user-top-content {
    padding: 8px 16px;
}

.header-user-submenu .header-user-content .header-user-top-content .business-center,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony,
.header-user-submenu .header-user-content .header-user-top-content .leads-center,
.header-user-submenu .header-user-content .header-user-top-content .app-center,
.header-user-submenu .header-user-content .header-user-top-content .events-manager,
.header-user-submenu .header-user-content .header-user-top-content .all-tools {
    font-weight: 500;
    border-radius: .25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    display: flex;
    position: relative;
    padding: 12px;
    align-items: center;
    transition: transform 200ms ease 0s;
    cursor: pointer;
}

.header-user-submenu .header-user-content .header-user-top-content .all-tools {
    margin-top: 4px;
}

.header-user-submenu .header-user-content .header-user-top-content .selected {
    background-color: #e8fbf9;
    color: #017976;
}

.header-user-submenu .header-user-content .header-user-top-content .business-center .business-center-icon,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager .ads-manager-icon,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony .tiktok-symphony-icon,
.header-user-submenu .header-user-content .header-user-top-content .leads-center .leads-center-icon,
.header-user-submenu .header-user-content .header-user-top-content .app-center .app-center-icon,
.header-user-submenu .header-user-content .header-user-top-content .events-manager .events-manager-icon,
.header-user-submenu .header-user-content .header-user-top-content .all-tools .all-tools-icon {
    font-style: normal;
    line-height: 0;
    color: inherit;
    display: inline-block;
    flex-shrink: 0;
    margin-inline-start: auto;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.header-user-submenu .header-user-content .header-user-top-content .business-center .business-center-icon svg,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager .ads-manager-icon svg,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony .tiktok-symphony-icon svg,
.header-user-submenu .header-user-content .header-user-top-content .leads-center .leads-center-icon svg,
.header-user-submenu .header-user-content .header-user-top-content .app-center .app-center-icon svg,
.header-user-submenu .header-user-content .header-user-top-content .events-manager .events-manager-icon svg,
.header-user-submenu .header-user-content .header-user-top-content .all-tools .all-tools-icon svg {
    vertical-align: middle;
}

.header-user-submenu .header-user-content .header-user-top-content .business-center .business-center-text,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager .ads-manager-text,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony .tiktok-symphony-text,
.header-user-submenu .header-user-content .header-user-top-content .leads-center .leads-center-text,
.header-user-submenu .header-user-content .header-user-top-content .app-center .app-center-text,
.header-user-submenu .header-user-content .header-user-top-content .events-manager .events-manager-text,
.header-user-submenu .header-user-content .header-user-top-content .all-tools .all-tools-text {
    font-size: 14px;
    line-height: 22px;
    flex-grow: 1;
    margin-inline-start: 8px;
    word-break: break-all;
}

.header-user-submenu .header-user-content .header-user-top-content .business-center .business-center-question,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager .ads-manager-question,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony .tiktok-symphony-question,
.header-user-submenu .header-user-content .header-user-top-content .leads-center .leads-center-question,
.header-user-submenu .header-user-content .header-user-top-content .app-center .app-center-question,
.header-user-submenu .header-user-content .header-user-top-content .events-manager .events-manager-question {
    font-style: normal;
    line-height: 0;
    color: inherit;
    display: none;
    flex-shrink: 0;
    margin-inline-start: auto;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.header-user-submenu .header-user-content .header-user-top-content .business-center .business-center-question svg,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager .ads-manager-question svg,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony .tiktok-symphony-question svg,
.header-user-submenu .header-user-content .header-user-top-content .leads-center .leads-center-question svg,
.header-user-submenu .header-user-content .header-user-top-content .app-center .app-center-question svg,
.header-user-submenu .header-user-content .header-user-top-content .events-manager .events-manager-question svg {
    vertical-align: middle;
}

.header-user-submenu .header-user-content .header-user-top-content .business-center:not(.selected):hover,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager:not(.selected):hover,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony:not(.selected):hover,
.header-user-submenu .header-user-content .header-user-top-content .leads-center:not(.selected):hover,
.header-user-submenu .header-user-content .header-user-top-content .app-center:not(.selected):hover,
.header-user-submenu .header-user-content .header-user-top-content .events-manager:not(.selected):hover,
.header-user-submenu .header-user-content .header-user-top-content .all-tools:not(.selected):hover {
    background-color: rgb(242 243 243);
}

/* Maintain hover state when cursor is on submenu */
.header-user-submenu .header-user-content .header-user-top-content .business-center:not(.selected).visible,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager:not(.selected).visible,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony:not(.selected).visible,
.header-user-submenu .header-user-content .header-user-top-content .leads-center:not(.selected).visible,
.header-user-submenu .header-user-content .header-user-top-content .app-center:not(.selected).visible,
.header-user-submenu .header-user-content .header-user-top-content .events-manager:not(.selected).visible {
    background-color: rgb(242 243 243);
}

.header-user-submenu .header-user-content .header-user-top-content .business-center:hover .business-center-question,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager:hover .ads-manager-question,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony:hover .tiktok-symphony-question,
.header-user-submenu .header-user-content .header-user-top-content .leads-center:hover .leads-center-question,
.header-user-submenu .header-user-content .header-user-top-content .app-center:hover .app-center-question,
.header-user-submenu .header-user-content .header-user-top-content .events-manager:hover .events-manager-question {
    display: inline-block;
}

/* Maintain hover state when cursor is on submenu */
.header-user-submenu .header-user-content .header-user-top-content .business-center.visible .business-center-question,
.header-user-submenu .header-user-content .header-user-top-content .ads-manager.visible .ads-manager-question,
.header-user-submenu .header-user-content .header-user-top-content .tiktok-symphony.visible .tiktok-symphony-question,
.header-user-submenu .header-user-content .header-user-top-content .leads-center.visible .leads-center-question,
.header-user-submenu .header-user-content .header-user-top-content .app-center.visible .app-center-question,
.header-user-submenu .header-user-content .header-user-top-content .events-manager.visible .events-manager-question {
    display: inline-block;
}

/* ----- BOTTOM CONTENT ----- */
.header-user-submenu .header-user-content .header-user-bottom-content {
    color: rgb(108 111 113);
    display: flex;
    margin: 0;
    padding: 0 16px;
    align-items: center;
    cursor: pointer;
}

.header-user-submenu .header-user-content .header-user-bottom-content .header-user-bottom-icon {
    font-style: normal;
    line-height: 0;
    color: inherit;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.header-user-submenu .header-user-content .header-user-bottom-content .header-user-bottom-icon svg {
    vertical-align: middle;
}

.header-user-submenu .header-user-content .header-user-bottom-content .header-user-bottom-text {
    margin-inline-start: 4px;
}

/* ========================================================== HEADER USER -> BUSINESS CENTER QUESTION SUBMENU ======================================================= */
.header-user-business-center-question-submenu{
    font-size: 12px;
    line-height: 20px;
    background-color: white;
    border-radius: .375rem;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    color: rgb(18 20 21);
    width: 256px;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    padding: 8px 16px;
    transform: translate(226px, 115px);
    z-index: 13002;
}

.header-user-business-center-question-submenu .pointer{
    top: 30px;
    left: 7px;
    position: absolute;
    transform-origin: 0px 0px;
    transform: translateY(50%) rotate(90deg) translateX(-50%);
}

/* ========================================================== HEADER USER -> ADS MANAGER QUESTION SUBMENU ======================================================= */
.header-user-ads-manager-question-submenu{
    font-size: 12px;
    line-height: 20px;
    background-color: white;
    border-radius: .375rem;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    color: rgb(18 20 21);
    width: 256px;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    padding: 8px 16px;
    transform: translate(226px, 159px);
    z-index: 13002;
}

.header-user-ads-manager-question-submenu .pointer{
    top: 30px;
    left: 7px;
    position: absolute;
    transform-origin: 0px 0px;
    transform: translateY(50%) rotate(90deg) translateX(-50%);
}

/* ========================================================== HEADER USER -> TIKTOK SYMPHONY QUESTION SUBMENU ======================================================= */
.header-user-tiktok-symphony-question-submenu{
    font-size: 12px;
    line-height: 20px;
    background-color: white;
    border-radius: .375rem;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    color: rgb(18 20 21);
    width: 256px;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    padding: 8px 16px;
    transform: translate(226px, 203px);
    z-index: 13002;
}

.header-user-tiktok-symphony-question-submenu .pointer{
    top: 30px;
    left: 7px;
    position: absolute;
    transform-origin: 0px 0px;
    transform: translateY(50%) rotate(90deg) translateX(-50%);
}

/* ========================================================== HEADER USER -> LEADS CENTER QUESTION SUBMENU ======================================================= */
.header-user-leads-center-question-submenu{
    font-size: 12px;
    line-height: 20px;
    background-color: white;
    border-radius: .375rem;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    color: rgb(18 20 21);
    width: 256px;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    padding: 8px 16px;
    transform: translate(226px, 252px);
    z-index: 13002;
}

.header-user-leads-center-question-submenu .pointer{
    top: 30px;
    left: 7px;
    position: absolute;
    transform-origin: 0px 0px;
    transform: translateY(50%) rotate(90deg) translateX(-50%);
}

/* ========================================================== HEADER USER -> APP CENTER QUESTION SUBMENU ======================================================= */
.header-user-app-center-question-submenu{
    font-size: 12px;
    line-height: 20px;
    background-color: white;
    border-radius: .375rem;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    color: rgb(18 20 21);
    width: 256px;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    padding: 8px 16px;
    transform: translate(226px, 294.5px);
    z-index: 13002;
}

.header-user-app-center-question-submenu .pointer{
    top: 30px;
    left: 7px;
    position: absolute;
    transform-origin: 0px 0px;
    transform: translateY(50%) rotate(90deg) translateX(-50%);
}

/* ========================================================== HEADER USER -> EVENTS MANAGER QUESTION SUBMENU ======================================================= */
.header-user-events-manager-question-submenu{
    font-size: 12px;
    line-height: 20px;
    background-color: white;
    border-radius: .375rem;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    color: rgb(18 20 21);
    width: 256px;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    padding: 8px 16px;
    transform: translate(226px, 344px);
    z-index: 13002;
}

.header-user-events-manager-question-submenu .pointer{
    top: 30px;
    left: 7px;
    position: absolute;
    transform-origin: 0px 0px;
    transform: translateY(50%) rotate(90deg) translateX(-50%);
}

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

.header-tools-submenu .column {
    border-radius: 10px;
    width: auto;
    min-width: 180px;
    max-width: 264px;
    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 .purple-box {
    font-size: 12px;
    background: #e9ebff;
    border: none;
    border-radius: 4px;
    color: #665cd6;
    height: 26px;
    margin-left: 5px;
    padding: 2px 8px;
}

.header-tools-submenu .column .item .red-dot{
    content: "";
    background-color: #ef504b;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    top: 245px;
    left: 548px;
    position: absolute;
}
/* =========================================================================== HEADER ANALYTIC SUBMENU ================================================================== */
.header-analytic-submenu {
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    margin-top: 6px;
    transform: translate3d(555px, 63px, 0px);
    transform-origin: center top;
    z-index: 9999;
}

.header-analytic-submenu .column {
    border-radius: 10px;
    width: auto;
    max-width: 264px;
    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-analytic-submenu .column .item .red-dot{
    content: "";
    background-color: #ef504b;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    top: 126px;
    left: 138px;
    position: absolute;
}
/* =========================================================================== 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;
    top: 46px;
    left: calc(100% - 350px);
    display: none;
    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;
    top: -6px;
    left: 50%;
    display: block;
    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;
    top: 40px;
    left: calc(100% - 338px);
    display: none;
    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 {
    line-height: 32px;
    border-top: 1px solid #edf1f5;
    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;
    top: -6px;
    left: 50%;
    display: block;
    position: absolute;
    transform: translateX(-50%);
}

/* =========================================================================== DATE SUBMENU ================================================================== */
.vi-zoom-in-top-enter-active,
.vi-zoom-in-top-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center top;
}

.vi-zoom-in-top-enter {
    opacity: 0;
    transform: scaleY(0);
}

.date-submenu {
    line-height: 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    opacity: 1;
    width: 646px;
    top: 135px;
    left: 64.3%;
    position: absolute;
    margin: 5px 0;
    transform: scaleY(1);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
    transform-origin: center top;
    z-index: 2;
}

.date-submenu .compare-row {
    line-height: 28px;
    border-bottom: 1px solid #ececed;
    height: 35px;
    display: flex;
    padding: 1px 18px;
    justify-content: end;
}

.date-submenu .compare-row .compare-text {
    font-size: 14px;
    color: #121415;
    margin-right: 8px;
}

.date-submenu .compare-row .vi-switch .vi-switch__input {
    height: 100%;
    width: 100%;
    display: block;
    z-index: 1;
    cursor: pointer;
}

.data-submenu .compare-row .vi-switch .vi-switch__core {
    font-size: 14px;
    background-color: #d3d4d5;
    border: 1px solid #d3d4d5;
    border-radius: 12px;
    height: 22px;
    width: 40px;
    outline: none;
    margin: 0;
    transition: border-color .3s, background-color .3s;
    pointer-events: auto;
    cursor: pointer;
}

.data-submenu .compare-row .vi-switch .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-right: 8px;
}

.data-submenu .compare-row .on-off-dark-bg .vi-switch .vi-switch__core {
    background-color: #009995;
    border-color: #009995;
}

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

.date-content {
    height: 279px;
    position: relative;
}

.date-content .date-left {
    font-size: 12px;
    background-color: #fff;
    border-right: 1px solid #ececed;
    bottom: 0;
    color: #121415;
    width: 130px;
    top: 0;
    position: absolute;
    padding: 12px 9px;
    overflow: auto;
}

.date-content .date-left button {
    font-size: 12px;
    line-height: 20px;
    background-color: transparent;
    border: 0;
    color: #121415;
    outline: 0;
    width: 100%;
    display: block;
    padding: 8px 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.date-content .date-left button:hover {
    color: #017976;
}

:not(.TTAMMAIN-origin-scrollbar)::-webkit-scrollbar {
    background-color: transparent;
    width: 8px;
}

:not(.TTAMMAIN-origin-scrollbar)::-webkit-scrollbar-button {
    display: none;
}

:not(.TTAMMAIN-origin-scrollbar)::-webkit-scrollbar-thumb:hover {
    background-color: rgba(51, 51, 51, .5);
}

:not(.TTAMMAIN-origin-scrollbar)::-webkit-scrollbar-thumb {
    background-color: rgba(51, 51, 51, .16);
    border-radius: 4px;
}

.date-content .date-right {
    min-width: 513px;
    margin-left: 130px;
}

.date-content .date-right .nov,
.date-content .date-right .dec {
    width: 50%;
    position: relative;
    float: left;
    margin: 0;
}

.date-content .date-right .nov .nov-header,
.date-content .date-right .dec .dec-header {
    font-size: 14px;
    line-height: 38px;
    background-color: #f8f8f9;
    border-bottom: 1px solid #ececed;
    height: 38px;
    display: flex;
    position: relative;
    padding: 0 10px;
}

.date-content .date-right .nov .nov-header button:hover,
.date-content .date-right .dec .dec-header button:hover {
    color: #017976;
}

.date-content .date-right .nov .nov-header button,
.date-content .date-right .dec .dec-header button {
    font-size: 12px;
    background: 0 0;
    border: 0;
    color: #6d6e70;
    outline: 0;
    cursor: pointer;
}

.date-content .date-right .nov .nov-header .nov-txt {
    font-weight: 500;
    margin-left: 20px;
}

.date-content .date-right .dec .dec-header .dec-txt {
    font-weight: 500;
    margin-right: 20px;
}

.date-content .date-right table {
    font-size: 12px;
    border-collapse: separate;
    width: 100%;
    padding: 0 16px 8px;
    table-layout: fixed;
}

.date-content .date-right table .dayofweek th {
    font-weight: 400;
    border-bottom: 1px solid #ececed;
    color: #121415;
    padding: 2.5px;
    text-align: center;
}

.date-content .date-right table td {
    box-sizing: border-box;
    height: 24px;
    width: 24px;
    top: 4px;
}

.date-content .date-right table td span {
    line-height: 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    height: 24px;
    width: 24px;
    display: inline-flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.date-content .date-right table td span:hover {
    background-color: #ececed;
    border-color: #ececed;
    color: #121415;
}

.date-content .date-right table td .greyout {
    color: #a9abac;
}

.date-content .date-right table td .greyout:hover {
    background-color: transparent;
    border-color: transparent;
    color: #a9abac;
}

.date-content .date-right table .today {
    border-color: #009995;
    border-radius: 4px;
    color: #009995;
}

.date-content .date-right table .today:hover {
    background-color: #ececed;
    border-color: #009995;
    color: #009995;
}

.date-content .date-right table .select-date {
    background-color: #009995;
    color: white;
}

.date-content .date-right table .range-date {
    background-color: #ececed;
}

.date-submenu .date-footer {
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #ececed;
    height: 35px;
    display: flex;
    position: relative;
    padding: 0 6px;
    align-items: center;
    justify-content: end;
    text-align: right;
}

.date-submenu .date-footer button {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    background: #f2f3f3;
    border: 0 #d3d4d5;
    border-radius: 4px;
    box-sizing: border-box;
    height: 26px;
    display: inline-block;
    margin: 4px 0;
    padding: 7px 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: .1s;
}

.date-submenu .date-footer .date-cancel:hover {
    background-color: #e5e5e6;
    border-color: #009995;
}

.date-submenu .date-footer .date-apply {
    background-color: #009995;
    border-color: #009995;
    color: #fff;
    margin-left: 10px;
}

.date-submenu .date-footer .date-apply:hover {
    background: #008581;
    border-color: #008581;
}

.date-submenu .date-footer .date-apply.is-disabled {
    background-color: #c3e9e7;
    border-color: #c3e9e7;
    cursor: not-allowed;
}

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

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

/* =========================================================================== FOOTER QUESTION SUBMENU ================================================================== */
.footer-question-submenu {
    font-size: 12px;
    line-height: 20px;
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08);
    color: #121415;
    min-width: 10px;
    max-width: 400px;
    top: calc(100% - 327px);
    left: 10px;
    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;
    bottom: 1px;
    left: 108.125px;
    display: block;
    position: absolute;
    transform: translateX(-50%);
}