@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.ttf');
    font-weight: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Light.ttf');
    font-weight: 300;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-SemiBold.ttf');
    font-weight: 600;
}

:root {
    --color-brand-lion: #e51425;
    --color-brand-android: #30d780;
    --color-brand-ios: #007aff;
    --slate-gray: #575e66;
    --color-danger-pastel: #f37a82;
}

.d-grid {display: grid;}

.text-xxs {font-size: .5rem;}
.text-xs {font-size: .75rem;}
.text-sm {font-size: 0.875rem;}
.text-base {font-size: 1rem;}
.text-lg {font-size: 1.125rem;}
.text-xl {font-size: 1.25rem;}
.text-2xl {font-size: 1.5rem;}
.text-3xl {font-size: 1.875rem;}
.text-4xl {font-size: 2.25rem;}
.text-5xl {font-size: 3rem;}

.text-weight-300 {font-weight: 300;}
.text-weight-400 {font-weight: 400;}
.text-weight-500 {font-weight: 500;}
.text-weight-600 {font-weight: 600;}
.text-weight-700 {font-weight: 700;}

.text-brand-lion {color: var(--color-brand-lion);}
.text-brand-android {color: var(--color-brand-android);}
.text-brand-ios {color: var(--color-brand-ios);}
.text-brand-asana{color:#f15463;}
.text-brand-facebook{color: var(--color-brand-ios);}

.text-red-9 {color: var(--red-9);}

.text-blue-8 {color: var(--blue-8);}
.text-blue-10 {color: var(--blue-10);}
.text-blue-11 {color: var(--blue-11);}

.text-gray-4 {color: var(--gray-4);}
.text-gray-5 {color: var(--gray-5);}
.text-gray-6 {color: var(--gray-6);}
.text-gray-7 {color: var(--gray-7);}
.text-gray-8 {color: var(--gray-8);}
.text-gray-9 {color: var(--gray-9);}
.text-gray-10 {color: var(--gray-10);}
.text-gray-12 {color: var(--gray-12);}
.text-gray-15 {color: var(--gray-15);}


.bg-red-2{background-color: var(--red-2);}
.bg-red-9{background-color: var(--red-9);}

.bg-gray-2{background-color: var(--gray-2);}
.bg-gray-3{background-color: var(--gray-3);}
.bg-gray-5{background-color: var(--gray-5);}
.bg-gray-8{background-color: var(--gray-8);}
.bg-gray-15{background-color: var(--gray-15);}
.bg-danger-transparent, .bg-danger-transparent td{background: rgba(250,82,94,0.1);}
.bg-info-light, .bg-info-light td{background: #d1ecf1;}

.border-gray-4 { border-color: var(--gray-4) !important; }
.border-gray-6 { border-color: var(--gray-6) !important; }

.btn-gray-3 { background-color: var(--gray-3) !important; }
.btn-gray-6 { background-color: var(--gray-6) !important; } /* use secondary */
.btn-gray-10 { background-color: var(--gray-10) !important; color: var(--white); } /* use dark */
.btn-danger-pastel {background-color: var(--color-danger-pastel); color: var(--white);}
.btn-black {background-color: #0b0c0f; color: var(--white);}

.btn-outline-gray-6 {
    border-color: var(--gray-6);
}
.btn-outline-gray-10 {
    border-color: var(--gray-10);
}

.gap-1 {gap: .25rem;}
.gap-2 {gap: .5rem;}
.gap-3 {gap: .75rem;}
.gap-4 {gap: 1rem;}

.leading-3 {line-height: .75rem;}
.leading-4 {line-height: 1rem;}
.leading-none {line-height: 1;}

.min-w-0 { min-width: 0px; }
.w-4 { width: 1rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-28 { width: 7rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-max { width: max-content; }
.w-min { width: min-content; }
.max-h-72 { max-height: 18rem; }

.rotate-90, .-rotate-90 {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 { --tw-rotate: 90deg; }
.-rotate-90 { --tw-rotate: -90deg; }
.transform { transform: var(--tw-transform); }


.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words { overflow-wrap: break-word; word-break: break-word; }

.rounded-r-none {border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;}
.rounded-l-none {border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;}
.rounded-top-none {border-top-right-radius: 0 !important; border-top-left-radius: 0 !important;}
.rounded-bottom-none {border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important;}

.box-shadow-default {box-shadow: 0 1px 6px 0 rgba(110, 116, 146, 0.25), 0 1px 2px 0 rgba(110, 116, 146, 0.1), 0 0 0 1px rgba(110, 116, 146, 0.1);}

.separate {position: relative;}
.separate:after{content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 1px;height: 70%;background: var(--gray-5);}

/* button text with icon helper class */
.btn-text-icon {display: inline-flex; align-items: center; gap: .25rem;}
.btn-text-icon.btn-sm {gap: .125rem;}
.btn-text-icon > .fl {line-height: 1; font-size: 1.5rem;}
.btn-text-icon.btn-sm > .fl {line-height: 1; font-size: 1.25rem;}
.btn-text-icon.btn-lg > .fl {line-height: 1; font-size: 1.5rem;}

/* Alert */
.alert {background-color: transparent; color: var(--gray-12); padding-left: 4rem;}
.alert:before {width: 3rem;height: 100%;content: "";position: absolute;top: 0;left: 0;}
.alert:after {width: 3rem;left: 0;top: .5rem;font-size: 1.875rem;line-height: 1;font-family: 'font-lionportal' !important;position: absolute;text-align: center;}
.alert-warning {border-color: var(--yellow-6);}
.alert-danger {border-color: var(--red-6);}
.alert-success {border-color: var(--green-6);}
.alert-primary {border-color: var(--blue-6);}
.alert-warning::before{background-color: var(--yellow-2);}
.alert-danger::before{background-color: var(--red-2);}
.alert-success::before{background-color: var(--green-2);}
.alert-primary::before{background-color: var(--blue-2);}
.alert-warning::after {content: "\f150";color: var(--yellow-9);}
.alert-danger::after {content: "\f11d";color: var(--red-9);}
.alert-success::after {content: "\f10e";color: var(--green-9);}
.alert-primary::after {content: "\f12a";color: var(--blue-9);}
.alert-info::after {content: "\f12a";color: var(--blue-9);}

/* $.notify override */
.alert.animated {background: var(--blue-9);z-index: 9999 !important;color:#fff;}

.app-icon-platform { padding-bottom: 100%;width:100%;position:relative;background:var(--gray-4);border-radius:4px;}
.app-icon-platform img {position: absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:4px;}
.app-icon-platform::before{position: absolute;content:"";top:50%;left: 50%;width: 60%;height: 60%;border:1px solid #fff;border-radius: 50%;transform: translate(-50%,-50%);background-color: var(--gray-5);}
.app-icon-platform svg {position: absolute; right: -3px; bottom: -3px; background-color: #fff; border: 1px solid #fff; border-radius: .25rem;}

.icon-circle {position: relative;display: inline-block;border-radius: 50%;cursor: pointer;}
.icon-circle i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.icon-circle.icon-circle-sm {width: 1rem; height: 1rem;}

.lp-pills { background-color: #ecf1f4; display: flex; align-items: center; border-radius: 7px; padding: .125rem; gap: .125rem;}
.lp-pills a{ padding: 0 .75rem; color: var(--gray-10);text-decoration: none;cursor: pointer;}
.lp-pills a.active, .lp-pills a:hover:not(.disabled) {padding: .25rem .75rem;background: #fff;border-radius: 7px;box-shadow: 0 1px 6px 0 rgba(110, 116, 146, 0.25), 0 1px 2px 0 rgba(110, 116, 146, 0.1), 0 0 0 1px rgba(110, 116, 146, 0.1);color: var(--red-10)}
.lp-pills a.active {font-weight: 500;}
.lp-pills a:not(.active) + a:not(.active) {border-left: 1px solid var(--gray-6);}
.lp-pills a.disabled{ opacity: .4; }
.lp-pills .page-link{background-color: transparent; border:none;}
.lp-pills.lp-pills-sm {border-radius: 4px;}
.lp-pills.lp-pills-sm a{ padding: 0 .5rem;}
.lp-pills.lp-pills-sm a.active, .lp-pills.lp-pills-sm a:hover { padding: .25rem .5rem;}
/* lp-pills variant */
.lp-pills-red {background-color: #fff; border: 1px solid var(--gray-6);}
.lp-pills-red a.active, .lp-pills-red a:hover {background-color: var(--red-9); color: #fff;}

.lp-pills.lp-pills--radio { gap:0; }
.lp-pills.lp-pills--radio input[type='radio'] { display: none; }
.lp-pills.lp-pills--radio > span { flex: 1 1 auto; display: block;}
.lp-pills.lp-pills--radio label { flex: 1 1 auto; cursor: pointer; display: block;padding: .25rem .75rem;border-radius: 7px;margin-bottom: 0;color: var(--gray-10)}
.lp-pills.lp-pills--radio input:checked + label,
.lp-pills.lp-pills--radio label:hover
 { background: #fff;border-radius: 7px;box-shadow: 0 1px 6px 0 rgba(110, 116, 146, 0.25), 0 1px 2px 0 rgba(110, 116, 146, 0.1), 0 0 0 1px rgba(110, 116, 146, 0.1);color: var(--red-10); font-weight: 500;}


.dropdown-hover:hover>.dropdown-menu {display: block;}
.dropdown-menu {z-index: 1005;}

.dropdown-icon::after {margin-left: .25rem;} /* use this for adding fl v icon after text */
.lp-dropdown::after, .dropdown-icon::after {content: "\f110";display: block;font-family: "font-lionportal" !important;transform: rotate(90deg);}
.lp-dropdown span{font-size: .75rem;color: #fff;background: var(--gray-9);padding: 0 .25rem;border-radius: 4px; }
.lp-dropdown {padding: .25rem .75rem;border-radius: 4px;position: relative;}
.lp-dropdown-gray-6 {background: var(--gray-6);border: 1px solid var(--gray-6);}
.lp-dropdown-transparent {background: transparent;}
.lp-dropdown.btn-sm {padding: .125rem .75rem;}

.lp-dropdown-spender::after, .dropdown-icon::after {content: "\f110";display: block;font-family: "font-lionportal" !important;transform: rotate(90deg);}
.lp-dropdown-spender span{}
.lp-dropdown-spender {padding: .25rem .75rem;border-radius: 4px;position: relative;}
.lp-dropdown-spender-gray-6 {background: var(--gray-6);border: 1px solid var(--gray-6);}
.lp-dropdown-spender-transparent {background: transparent;}
.lp-dropdown-spender.btn-sm {padding: .125rem .75rem;}

/* set important, to prevent overwrite by datatable */
.table-lp thead tr th {padding: .375rem 1rem .375rem 0 !important;}

.table-lp td {padding: .5rem; vertical-align: middle;}
.table-lp th:first-child {padding-left: 1rem;}
.table-lp td:first-child {padding-left: 1.5rem;}
/* .table-lp thead tr th{background: var(--slate-gray);border-color: #000;border-bottom: 0;border-top: 0;position: relative;} */
.table-lp thead tr th{background: var(--slate-gray);border: none;}
/* .table-lp thead tr th a, .table-lp thead tr th span {color: #fff;font-size: .75rem;font-weight: 600;display: inline-block;width: 100%;text-decoration: none; padding: .125rem .5rem; border-left: 1px solid #000;} */
.table-lp thead:not(.thead-pseudo-divider) tr th a, .table-lp thead:not(.thead-pseudo-divider) tr th span {color: #fff;font-size: .75rem;font-weight: 600;display: inline-block;width: 100%;text-decoration: none; padding: .125rem .5rem; border-left: 1px solid #000;}
.table-lp thead tr th a.dropdown-item {
    color: var(--gray-14);
    padding: .25rem 1.5rem;
    display: block;
}
.table-lp .th-border-divider {
    position:absolute;width:100%;height:70%;left:0;top:50%;transform:translateY(-50%);border-left:1px solid #000;
    z-index: -1;
}

/* .table-lp thead tr th:first-child:before {left: 3px;} */
/* .table-lp thead tr th::before {content: "";position: absolute;left: 0;height: 65%;width: 1px;top: 50%;transform: translateY(-50%);background: #000;} */
/* use thead-pseudo-divider for wrapping content / multiple row th. not compatible with datatable */
.table-lp thead.thead-pseudo-divider tr th { color: #fff;font-size: .75rem;font-weight: 600;padding: .5rem !important; }
.table-lp thead.thead-pseudo-divider tr th:before { content: "";position: absolute;left: 0;height: 65%;width: 1px;top: 50%;transform: translateY(-50%);background-color: #000; }
.table-lp thead.thead-pseudo-divider tr th:first-child { padding-left: 1.5rem !important; }
.table-lp thead.thead-pseudo-divider tr th:first-child::before { left: 1rem; }

/* .tableFixHead          {} */
.tableFixHead thead tr:nth-child(1) th { position: sticky !important; top: 0; z-index: 2; }
.tableFixHead thead tr:nth-child(2) th { position: sticky !important; top: 30px; z-index: 2; }

.empty-item .item {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}
.empty-item .item i {font-size: 7rem;color: var(--gray-6);}

.modal-left .modal-dialog,
.modal-right .modal-dialog {
    position: fixed;
    margin: auto;
    min-width: 320px;
    max-width: none;
    height: 100%;
}
.modal-left .modal-content,
.modal-right .modal-content {
    height: 100%;
    overflow-y: auto;
}
.modal-left .modal-dialog {left: 0;}
.modal-left .modal-content {border-top-left-radius: 0; border-bottom-left-radius: 0;}
.modal-right .modal-dialog {right: 0;}
.modal-right .modal-content {border-top-right-radius: 0; border-bottom-right-radius: 0;}

.cursor-pointer {cursor: pointer;}

/* .lp-pagination{padding:.125rem; background-color: var(--gray-3);}
.lp-pagination .page-item .page-link {color: var(--gray-10);background-color: transparent;border-top:0;border-bottom: 0;}
.lp-pagination .page-item .page-link.active {background-color: #fff;color: var(--red-10);box-shadow: 0 1px 6px 0 rgba(110, 116, 146, 0.25), 0 1px 2px 0 rgba(110, 116, 146, 0.1), 0 0 0 1px rgba(110, 116, 146, 0.1);border-radius: 4px;} */

.hover-trigger .hover-visible {visibility: hidden;}
.hover-trigger:hover .hover-visible {visibility: visible;}

/* helper class for collapse btn icon show state 
    opt 1: via js, add data-icon_target in the collapse object with value of selector to icon
        the script listen to show.bs.collapse and hide.bs.collapse to toggle .icon-rotate on .fl
        + can target specific icon
    opt 2: via css only, add .collapse-icon-rotate & .collapsed to the trigger
        bootstrap will toggle .collapsed , but .collapsed need to be added manually first
*/
.icon-rotate::before { transform: rotate(90deg); }
.collapse-icon-rotate.collapsed .fl-chevron-right::before { transform: none; }
.collapse-icon-rotate .fl-chevron-right::before { transform: rotate(90deg); }

/* override active style to blue primary color */
.active-blue.active { 
    color: #fff !important;
    background-color: var(--blue-9) !important;
    border-color: var(--blue-9) !important;
 }
 .active-blue.active .fl {
    color: #fff;
}
.active-blue.active:hover {
    background-color: #008fa7 !important;
    border-color: #00849a !important;
}

/* set --active-color & --active-text-color on inline style */
.active-color.active {
    color: var(--active-text-color) !important;
    background-color: var(--active-color) !important;
    border-color: var(--active-color) !important;
}
.active-color.active .fl {
    color: var(--active-text-color);
}
.active-color.active:hover {
    opacity: 0.8;
}

 .btn-outline-light.disabled, .btn-outline-light:disabled {
     color: #566678;
     border-color: transparent;
     opacity: .5;
 }

/* Navbar */

#navbar-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    /* margin-bottom: 50px; */
    z-index: 1005;
    transition: all .25s;
    /* overflow: auto; */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-4) var(--gray-10);
}
/* #navbar-fixed + div, */
#navbar-fixed ~ footer,
#navbar-fixed ~ main,
#navbar-fixed ~ main footer
{
    position: relative;
    top: 50px;
}

#top-filter {
    background-color: #fff;
    position: relative;
    top: 50px;
    width: 100%;
    z-index: 5;
}
/* width */
#navbar-fixed::-webkit-scrollbar {
    width: 5px;
}
/* Track */
#navbar-fixed::-webkit-scrollbar-track {
    background: var(--gray-4);
    border-radius: 10px;
}
/* Handle */
#navbar-fixed::-webkit-scrollbar-thumb {
    background: var(--gray-10);
    border-radius: 10px;
}
/* Handle on hover */
#navbar-fixed::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.navbar-brand {
    color: #e51425 !important;
    font-size: 0.875rem !important;
    font-weight: bold;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}
.navbar-brand .app-icon {
    width: 40px !important;
    height: 40px !important;
}

.navbar-nav.menu-center {
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0;
}

.navbar-expand-lg .navbar-nav.menu-center .nav-item > .nav-link {
    padding-right: 0 !important; 
    padding-left: 0 !important;
    font-weight: bold;
}
.bg-nav-dark, .bg-nav-dark .dropdown .dropdown-menu {
    background: #0b0c0f !important;
}
.bg-nav-dark .dropdown .dropdown-menu {
    border: none;
}
.bg-nav-dark ul li a {
    font-size: 0.875rem;
}
.bg-nav-dark ul li a, .bg-nav-dark ul li i{
    color: var(--gray-5) !important;
}
.bg-nav-dark ul li i {
    font-size: 20px;
}
.bg-nav-dark ul.menu-center li > a, .menu-right li > a {
    border-bottom: 3px solid #0b0c0f !important;
}
.bg-nav-dark ul.menu-center li > a:hover, .bg-nav-dark ul.menu-center li > a:hover i, 
.bg-nav-dark .nav-item.active > a, .bg-nav-dark .nav-item.active > a i {
    color: var(--red-9) !important;
}
.bg-nav-dark ul.menu-center li > a:hover, .bg-nav-dark .nav-item.active > a {
    border-bottom: 3px solid var(--red-9) !important;
}
.bg-nav-dark ul.menu-center li .border-0 {
    border-bottom: 0 !important;
}
.overlay-language {
    position: absolute;
    top: 60%;
    right: 40%;
    transform: translateY(-50%);
    font-size: 0.5rem;
    line-height: 1.25;
    background: #0b0c0f;
    text-transform: uppercase;
}
.dropdown-item.dropdown-sub-item.dropdown-toggle{
    position: relative;
}
.dropdown-item.dropdown-sub-item.dropdown-toggle::after{
    transform: rotate(-90deg);
    position: absolute;
    top: .9rem;
    right: 5px;
}
.dropdown-item.dropdown-sub-item.dropdown-toggle+.dropdown-menu {
    top:65px;
    left:165px;
}
.dropdown-item.dropdown-sub-item:hover+.dropdown-menu,
.dropdown-item.dropdown-sub-item+.dropdown-menu:hover {
    display: block;
}
.bg-nav-dark .dropdown .dropdown-item:focus, .dropdown-item:hover, .bg-nav-dark .dropdown-menu a:focus, .dropdown-menu a:hover {
    background: transparent;
    color: var(--red-9) !important;
}
.navbar-toggler-icon {
    background-color: var(--gray-5) !important;
    border-radius: 5px;
}
/* Navbar End */

/* Tooltip video thumbnail */
.img-thumbnail-video {
    max-width: 50vw;
    max-height: 50vh;
}
.tooltip-inner { /* allow tooltip wrapper to cover img thumbnail */
    white-space: nowrap;
    max-width: none;
}

/* fix datatable sort font */
table.dataTable thead th::after, table.dataTable thead th::before {
    font-family: Arial;
}

/* use border-box, for consistent grid width in table expand */
table.dataTable td, table.dataTable th {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
table.dataTable.table-sm .sorting::before,
table.dataTable.table-sm .sorting_asc::before,
table.dataTable.table-sm .sorting_desc::before,
table.dataTable.table-sm .sorting::after,
table.dataTable.table-sm .sorting_asc::after,
table.dataTable.table-sm .sorting_desc::after {
    top: unset;
    right: 5px !important;
}
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after{
    opacity: 1;
    color: #000;
    font-family:"Font Awesome 5 Free";
    font-size: .75rem;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_desc::after{
    content: "\f0d8";
    bottom: 12px !important;
}
table.dataTable thead .sorting_desc::before{
    opacity: 0;
}
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before{
    content: "\f0d7";
    bottom: 6px !important;
}
table.dataTable thead .sorting_asc::after{
    opacity: 0;
}

/* Activities Modal */

.row-warning {
    background: #ffccd1;
}
.row-warning .message {
    color: var(--red-10);
}
/* Toggle Slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-1);
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0;
    bottom: 0;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
input:checked + .slider {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
input:focus + .slider {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
input:checked + .slider::before {
    background-color: var(--red-9);
}
/* Toggle Slider End */

/* Activities Modal End */

/* Submission Step */
.lp-border-step{position: relative;}
.lp-border-step::before{content: "";height: 100%;width: 1px;background-color: var(--gray-4);position: absolute;/*right: 33.33px;*/right:2.125rem;top: 0;}
.lp-tab-bar { position: relative;}
.lp-tab-bar > div {position: relative;}
.lp-tab-bar.tab-bar > div > span {width: 80%;}
.lp-tab-bar.tab-bar .circle{background: var(--gray-5);border-color: var(--gray-5);}
.lp-tab-bar.tab-bar .circle.done{background: var(--gray-15);border-color: var(--gray-15);}
.lp-tab-bar.tab-bar .circle.active{background: var(--red-9);border-color: var(--red-9);color: #fff;}
.lp-tab-bar.tab-bar .circle.active::before{content: ''; width: 95%;position: absolute;height: 100%;left: 0;top: 50%;transform: translateY(-50%);background-image: linear-gradient(to left, rgba(229, 20, 37, 0.1), rgba(229, 20, 37, 0));}
.lp-tab-bar.tab-bar .circle.complete{background: var(--green-9);border-color: var(--green-9);color: #fff;}
.lp-tab-bar.tab-bar .circle.complete::before{content: ''; width: 95%;position: absolute;height: 100%;left: 0;top: 50%;transform: translateY(-50%);background-image: linear-gradient(to left, rgba(27, 186, 151, 0.1), rgba(27, 186, 151, 0));}
.lp-tab-bar.tab-bar .circle.read{background: var(--red-9);border-color: var(--red-9);color: #fff;}
.lp-tab-bar.tab-bar .circle.read::before{content: ''; width: 95%;position: absolute;height: 100%;left: 0;top: 50%;transform: translateY(-50%);background-image: linear-gradient(to left, rgba(229, 20, 37, 0.1), rgba(229, 20, 37, 0));}
.lp-tab-bar.tab-bar .circle.current{background: var(--gray-15);border-color: var(--gray-15);color: #fff;}
.lp-tab-bar.tab-bar .circle.current::before{content: ''; width: 95%;position: absolute;height: 100%;left: 0;top: 50%;transform: translateY(-50%);background-image: linear-gradient(to left, rgba(44, 28, 46, 0.1), rgba(44, 28, 46, 0));}
/* Submission Step End */

/* new addSet START */
.lp-tab-bar-horizontal.tab-bar > div > span {width: 80%;}
.lp-tab-bar-horizontal.tab-bar .circle{background: var(--gray-5);border-color: var(--gray-5);}
.lp-tab-bar-horizontal.tab-bar .circle::before{content: ''; width: 95%;position: absolute;height: 100%;left: .875rem;top: 50%;transform: translateY(-50%);background-image: linear-gradient(to right, rgba(156, 156, 156, 0.1), rgba(44, 28, 46, 0));}
.lp-tab-bar-horizontal.tab-bar .circle.done{background: var(--gray-15);border-color: var(--gray-15);}
.lp-tab-bar-horizontal.tab-bar .circle.complete{background: var(--green-9);border-color: var(--green-9);color: #fff;}
.lp-tab-bar-horizontal.tab-bar .circle.complete::before{content: ''; width: 95%;position: absolute;height: 100%;left: .875rem;top: 50%;transform: translateY(-50%);background-image: linear-gradient(to right, rgba(27, 186, 151, 0.1), rgba(27, 186, 151, 0));}
.lp-tab-bar-horizontal.tab-bar .circle.current{background: var(--gray-15);border-color: var(--gray-15);color: #fff;}
.lp-tab-bar-horizontal.tab-bar .circle.current::before{content: ''; width: 95%;position: absolute;height: 100%;left: .875rem;top: 50%;transform: translateY(-50%);background-image: linear-gradient(to right, rgba(44, 28, 46, 0.1), rgba(44, 28, 46, 0));}
/* new adSet END */

.table .thead-dark th {
    background-color: var(--slate-gray);
    border-color: var(--slate-gray);
}
.thead-dark th a {
    color: inherit;
}
.thead-dark th a:hover {
    color: inherit;
    text-decoration: none;
}

.ck-editor .h2,
.ck-editor .ck.ck-heading_heading2,
.content-integration .h2 {
    font-size: 1.25rem;
}
.ck-editor .h3,
.ck-editor .ck.ck-heading_heading3,
.content-integration .h3 {
    font-size: 1.115rem;
}
.ck-editor .h4,
.ck-editor .ck.ck-heading_heading4,
.content-integration .h4 {
    font-size: 1rem;
}
.guide-container h2,
.guide-container h3,
.guide-container h4 {
    color: var(--gray-15);
    font-weight: 700;
    margin-bottom: 1rem;
}
.guide-container .h2 {
    font-size: 1rem;
}
.guide-container .h3 {
    font-size: .875rem;
}
.guide-container .h4 {
    font-size: .75rem;
}

.tooltip {
    pointer-events: none;
}

#scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    transition: all .25s;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
}
#scroll-top button {
    background-color: var(--slate-gray);
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
}
#scroll-top button:hover {
    background-color: #0b0c0f;
    color: var(--red-9);
}

#notificationCenter {
    position: fixed;
    z-index: 1006;
    top: 49px;
    right: 0;
    left: auto;
    width: 1010px; /* 870px */
    height: calc(100vh - 49px);
    padding: .75rem;
    border: 1px solid var(--gray-6);
    border-radius: 4px;
    background-color: #fff;
    display: none;
}
#notificationCenterNav {
    margin: .25rem .5rem;
    display: flex;
    /* flex-wrap: wrap; */
    gap: .5rem;
}
.notificationCenterNavItem {
    color: var(--gray-12);
    position: relative;
}
.notificationCenterNavItem:hover {
    text-decoration: none;
}
.notificationCenterNavItem .notificationCenterNavItemText {
    border-radius: .2rem;
    padding: .2rem .5rem;
    white-space: nowrap;
    background-color: var(--gray-2);
}
.notificationCenterNavItem:hover .notificationCenterNavItemText,
.notificationCenterNavItem.active .notificationCenterNavItemText {
    /* border-bottom: 2px solid var(--red-9); */
    background-color: var(--red-9);
    color: var(--gray-12);
    color: #fff;
}
.notificationCenterNavItem .badge,
.btnToggleNotificationCenter .badge {
    color: #fff;
    background-color: var(--red-9);
    vertical-align: top;
}
.notificationCenterNavItem .badge {
    /* position: absolute; */
    /* left: 95%; */
    /* top: -.25rem; */
    margin-left: -.75rem;
    margin-top: -.25rem;
    border: solid 1px #fff;
}
.btnToggleNotificationCenter .badge {
    margin-left: -.5rem;
}
#notificationCenterContent {
    max-height: 95%;
    overflow-y: auto;
    border-top: 2px solid #000;
    /* padding-top: .5rem; */
}
.notif-item {
    display: flex;
    border-bottom: 1px solid #000;
}
.notif-item .notifTitle {
    /* max-width: 480px; */
    font-weight: bold;
}
.notif-item.expanded .notifTitle {color: #00b0cd;}
/* .notif-item.expanded .notifAction .fl {color: var(--gray-12);} */
#notificationCenter.show { display: block; }
.notifBadgeUnread, .notifAction {visibility: hidden;}
.notif-item[data-read="0"] .notifBadgeUnread {visibility: visible;}
/* .notif-item[data-read="0"] .notifTitle {font-weight: bold;} */
.notif-item[data-seen="0"] .notifAction {visibility: visible;}

.notif-item pre {
    max-height: 18rem;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

/* red dot notification badge */
.notification-badge {
    position:absolute;
    top:0;
    right:0;
    width:.5rem;
    height:.5rem;
    border-radius: 9999px;
    background-color:var(--red-9);
}

/* Test type (is_fake_app) badge in notification content */
.badge-test-0 {background-color: var(--blue-9); color: #fff;}
.badge-test-1 {background-color: var(--blue-9); color: #fff;}
.badge-test-2 {background-color: var(--blue-9); color: #fff;}

.custom-control-input.custom-check-red:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--red-4);
    background-color: var(--red-6);
}
.custom-control-input.custom-check-red:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(210, 210, 210, 0.25);
}

.custom-switch .custom-control-input.custom-check-red:checked ~ .custom-control-label::after {
    background-color: var(--red-9);
}

#iframe-looker_embed {
    width: 100%;
    border: 1px solid black;
    height: 70vh;
    margin-top: 0.5em;
}