@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --radious: 0.3rem;
}

body {
    font-family: "Roboto", sans-serif;
    background: #2b2e3f;
    padding: 0px;
    margin: 0px;
    font-size: 14px;
    letter-spacing: 1px;
    background: #f3f4f6;
    min-height: 100vh;
    min-width: 1350px;
}

body > .row/*, .modal-body > .row*/ {
    flex-wrap: nowrap;
}

a {
    color: #858383;
    text-decoration: none;
}
a:hover {
    color: #f70982;
    text-decoration: none;
}

/*.hide{display: none!important;}*/
.hide {
    opacity: 0 !important;
}
.hide-display {
    display: none !important;
}

/********** START Customize scrollbar ******************/
/* width */
/* ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    margin: 0;
} */

/* Track */
::-webkit-scrollbar-track {
    background: #343a40;
    border-radius: 50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #b5b6b7;
    border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ed0954;
}

/********** End Customize scrollbar ******************/
/************************************************/

img {
    display: inline-block !important;
}

/**************************************************************************************************/
/*** Commom START ******************************************************************************/
/**************************************************************************************************/

.border > div {
    border: 1px solid red;
}

.bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #706e6e;
    opacity: 1; /* Firefox */
    font-size: 0.9em;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #706e6e;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #706e6e;
}

.disable-click {
    pointer-events: none;
}

.isPC .main {
    overflow: hidden;
}

.main-holder {
    width: 1920px;
    height: 1080px;
    position: relative;
}

/* Fix text selection color */
::-moz-selection {
    background: rgb(72, 190, 206) !important;
    color: #ffffff !important;
}

::selection {
    background: rgb(72, 190, 206) !important;
    color: #ffffff !important;
}

*::-moz-selection {
    background: rgb(72, 190, 206) !important;
    color: #ffffff !important;
}

*::selection {
    background: rgb(72, 190, 206) !important;
    color: #ffffff !important;
}

.value {
    font-family: "Hero-New-Medium";
    color: white;
    color: #0476d0;
    text-shadow:
        0 0 10px #1c55f2,
        0 0 20px rgba(28, 85, 242, 0.1),
        0 0 30px rgba(28, 85, 242, 0.1),
        0 0 40px rgba(28, 85, 242, 0.3),
        0 0 70px rgba(28, 85, 242, 0.3),
        0 0 100px rgba(28, 85, 242, 0.4),
        0 0 150px rgba(28, 85, 242, 0.4),
        0 0 250px rgba(28, 85, 242, 0.4);
}

.value-l {
    font-size: 3.5em;
}
.value-m {
    font-size: 3em;
}

.unit {
    color: rgba(255, 255, 255, 0.95);
    margin-left: 10px;
}

.unit-l {
    font-size: 1.6em;
}

.unit-m {
    font-size: 1.5em;
}

.label {
}

.label-l {
    font-size: 1.4em;
}

.note {
    color: rgba(255, 255, 255, 0.65);
}

label {
    color: var(--color-dk1-grey);
}

/**************************************************************************************************/
/*** LOGIN START ******************************************************************************/
/**************************************************************************************************/

body.login {
    background-color: black;
    background-image: url("../../images/bg-login.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
    display: flex;
}

.login .login-container {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.login-container.red-login {
    border: 1px solid hsl(0deg 100% 50% / 50%);
    box-shadow:
        rgba(255, 0, 0, 0.25) 0px 54px 55px,
        rgba(255, 0, 0, 0.12) 0px -12px 30px,
        rgba(255, 0, 0, 0.12) 0px 4px 6px,
        rgba(255, 0, 0, 0.17) 0px 12px 13px,
        rgba(255, 0, 0, 0.09) 0px -3px 5px;
}

.login-container.green-login {
    border: 1px solid hsl(150deg 100% 40% / 50%);
    box-shadow:
        rgba(0, 255, 150, 0.25) 0px 54px 55px,
        rgba(0, 255, 150, 0.12) 0px -12px 30px,
        rgba(0, 255, 150, 0.12) 0px 4px 6px,
        rgba(0, 255, 150, 0.17) 0px 12px 13px,
        rgba(0, 255, 150, 0.09) 0px -3px 5px;
}

.login-container.purple-login {
    border: 1px solid #6103a4;

    box-shadow:
        rgba(48, 0, 71, 0.35) 0px 54px 55px,
        rgba(97, 3, 164, 0.2) 0px -12px 30px,
        rgba(92, 3, 155, 0.2) 0px 4px 6px,
        rgba(97, 3, 164, 0.3) 0px 12px 13px,
        rgba(48, 0, 71, 0.15) 0px -3px 5px;
}

.login-container.blue-login {
    border: 1px solid #0c76d7;

    box-shadow:
        rgba(12, 118, 215, 0.35) 0px 54px 55px,
        rgba(38, 150, 190, 0.2) 0px -12px 30px,
        rgba(55, 205, 247, 0.2) 0px 4px 6px,
        rgba(0, 52, 112, 0.3) 0px 12px 13px,
        rgba(12, 118, 215, 0.15) 0px -3px 5px;
}

.login-container.gold-login {
    border: 1px solid hsl(45deg 100% 50% / 50%);
    box-shadow:
        rgba(233, 177, 6, 0.25) 0px 54px 55px,
        rgba(233, 177, 6, 0.12) 0px -12px 30px,
        rgba(233, 177, 6, 0.12) 0px 4px 6px,
        rgba(233, 177, 6, 0.17) 0px 12px 13px,
        rgba(233, 177, 6, 0.09) 0px -3px 5px;
}

.login input {
    width: 100%;
}

.login select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 35px !important;
    padding: 12px;
    width: 100%;
}

.login .ui-btn {
    background: linear-gradient(135deg, #b7950b, #f9e79f, #b7950b, #7d6608);
    box-shadow:
        inset 0 1px 4px rgba(255, 255, 255, 0.4),
        0 3px 7px rgba(0, 0, 0, 0.3);
}

.login a.ui-btn:hover {
    color: #4b2e2e;
    background: linear-gradient(135deg, #fff5c2 10%, #f1c40f 40%, #b8860b 90%);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.1),
        0 0 12px rgba(241, 196, 15, 0.6); /* glowing gold */
}

/**************************************************************************************************/
/*** Side Menu START ******************************************************************************/
/**************************************************************************************************/

.side-menu {
    width: 230px;
    padding-top: 20px;
    padding-right: 15px;
    background: #1e2331;
    background: #0c193d;
    margin: 8px;
    border-radius: 0.5rem;
    color: white;

    transition:
        width 0.3s ease,
        padding 0.3s ease;
    overflow: hidden;
    position: relative;
    background: linear-gradient(
        138deg,
        rgb(52 56 65) 0%,
        rgb(54 16 73) 50%,
        rgb(28 26 45) 100%
    );
    background: linear-gradient(
        138deg,
        #1d2e3b 0%,
        #555e70 50%,
        rgb(28 26 45) 100%
    );
    min-height: 100vh;
}
.side-menu.green-theme {
    border: 2px solid #00a86b;
    box-shadow: 10px 20px 15px 0px rgb(89 247 170 / 30%);
    box-shadow: 10px 20px 15px 0px rgb(92 195 145 / 30%);
}

.side-menu.red-theme {
    border: 2px solid #d90046;
    box-shadow: 10px 20px 15px 0px rgb(247 89 89 / 30%);
    box-shadow: 10px 20px 15px 0px rgb(195 92 92 / 30%);
}

.side-menu.purple-theme {
    border: 2px solid #800080; /* classic purple */
    box-shadow: 10px 20px 15px 0px rgba(128, 0, 128, 0.3);
    box-shadow: 10px 20px 15px 0px rgba(186, 85, 211, 0.3);
}

.side-menu.blue-theme {
    border: 2px solid #0c76d7; /* medium blue */
    box-shadow:
        10px 20px 15px 0px rgba(12, 118, 215, 0.3),
        10px 20px 15px 0px rgba(55, 205, 247, 0.3);
}

.side-menu.gold-theme {
    border: 2px solid #dc9e02;
    box-shadow:
        10px 20px 15px 0px rgb(190 93 7 / 30%),
        10px 20px 15px 0px rgb(233 177 6 / 30%);
}

.side-menu:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: -10px -5px 15px 5px rgb(251 250 250 / 90%);
    box-shadow: -1px 1px 2px 1px rgb(255 140 140 / 90%);
    border-radius: 0.5rem;
}

.side-menu .logo {
    text-align: center;
}

.side-menu .logo img {
    width: 150px;
    transition: all 0.3s ease;
}

/* Collapsed state */
.side-menu.collapsed {
    width: 60px;
    padding-left: 0;
    padding-right: 0;
}

.side-menu.collapsed .logo img {
    width: 40px;
    display: block;
    margin: 10px auto;
}

.side-menu.collapsed .menu-gp .btn-footer span,
.side-menu.collapsed .menu-gp li a span {
    display: none;
}

.side-menu.collapsed .btn-footer::after {
    display: none !important;
}

.side-menu.collapsed .menu-gp .btn-footer img,
.side-menu.collapsed .menu-gp li a img {
    margin: 0 auto;
    display: block;
}

/* Hover-expand state */
.side-menu.hover-expand {
    width: 230px !important;
}

.side-menu.hover-expand .logo img {
    width: 150px;
    transition: all 0.3s ease;
}

.side-menu.hover-expand .menu-gp .btn-footer span,
.side-menu.hover-expand .menu-gp li a span {
    display: inline;
}

.side-menu.hover-expand .btn-footer::after {
    display: inline-block;
}

/* Hide version text when sidebar is collapsed */
.side-menu.collapsed .version-text {
    display: none;
}

/* Show version text on hover-expand */
.side-menu.hover-expand .version-text {
    display: inline;
}

/* Optional: center version when collapsed */
.side-menu.collapsed .version-display {
    text-align: center;
    padding: 10px 0;
}

.accordion {
}
.accordion .menu_accor,
.accordion .menu_link {
    margin: 15px 0;
}

.accordion .menu_accor .collapse {
    visibility: visible;
}

.accordion .menu_accor.no-hover {
    margin: 0;
}
.accordion .menu_accor button.btn-footer,
.accordion .menu_link > a {
    background: #161f2c00;
    color: white;
    width: 100%;
    text-align: left;
    /*font-size: 0.8em;*/
    padding: 5px 15px;
    border: none;
    /*text-transform: uppercase;*/
    position: relative;
    font-weight: 400;
    border-left: 2px solid transparent;
}
.accordion .menu_accor .btn-footer > img,
.accordion .menu_link > a > img {
    width: 20px;

    filter: invert(97%) sepia(97%) saturate(609%) hue-rotate(314deg)
        brightness(93%) contrast(86%);
    filter: invert(85%) sepia(27%) saturate(729%) hue-rotate(341deg)
        brightness(99%) contrast(95%);
    filter: invert(99%) sepia(35%) saturate(5979%) hue-rotate(315deg)
        brightness(109%) contrast(80%);

    filter: invert(78%) sepia(26%) saturate(1812%) hue-rotate(10deg)
        brightness(102%) contrast(101%);
    filter: invert(58%) sepia(95%) saturate(2028%) hue-rotate(18deg)
        brightness(93%) contrast(91%);
    margin-right: 10px;
}
.accordion .menu_accor .btn-footer + div {
}
.accordion .menu_accor button.btn-footer::after {
    content: url(../../images/icon-arrow-dw.png);
    position: absolute;
    right: 17px;
    top: 5px;
    transform: rotate(180deg);
    transition: all 0.3s;
    filter: invert(18%) sepia(99%) saturate(7489%) hue-rotate(316deg)
        brightness(91%) contrast(102%);
    filter: invert(12%) sepia(82%) saturate(4294%) hue-rotate(302deg)
        brightness(90%) contrast(119%);
    filter: invert(68%) sepia(11%) saturate(771%) hue-rotate(181deg)
        brightness(92%) contrast(88%);
}
.accordion .menu_accor button.btn-footer:hover {
    background: linear-gradient(to right, #364c55, #474955);
    background: linear-gradient(to right, #2f4f5d, #3a404d);
    background: linear-gradient(to right, #6f561b, #3a404d);
    background: linear-gradient(to right, #4f442c, #3a404d);
    border-left: 2px solid gold;
}
.accordion .menu_accor button.btn-footer:hover > img {
    filter: invert(78%) sepia(26%) saturate(1812%) hue-rotate(10deg)
        brightness(102%) contrast(101%);
}

.accordion .menu_accor.no-hover button.btn-footer:hover {
    background: transparent;
}
.accordion .menu_accor button.btn-footer.collapsed::after {
    content: url(../../images/icon-arrow-dw.png);
    transform: rotate(360deg);
    transition: all 0.3s;
    filter: invert(18%) sepia(99%) saturate(7489%) hue-rotate(316deg)
        brightness(91%) contrast(102%);
    filter: invert(12%) sepia(82%) saturate(4294%) hue-rotate(302deg)
        brightness(90%) contrast(119%);
    filter: invert(68%) sepia(11%) saturate(771%) hue-rotate(181deg)
        brightness(92%) contrast(88%);
}

.accordion .menu_accor .modal-menu-ul-inn ul {
    list-style: none;
    padding: 0px 0px 0 12px;
}
.accordion .menu_accor .modal-menu-ul-inn ul.list-bullet {
    list-style: circle;
}
.accordion .menu_accor .modal-menu-ul-inn li {
    padding: 5px 0px;
    text-align: left;
    border-radius: 0.3rem;
    margin: 10px 0;
}

.accordion.accordian-txt .menu_accor .modal-menu-ul-inn li {
    padding: 0;
}
.accordion.accordian-txt .menu_accor .modal-menu-ul-inn li:hover {
    outline: 1px solid red;
    color: #e1da75;
}
.modal-menu-ul-inn ul li.active {
    color: #4b2e2e;
    background: linear-gradient(
        to right,
        #946736 10%,
        #d7c060 50%,
        #462f19 100%
    );
    background: linear-gradient(to right, #946736, #d7c060, #462f19);
    background: linear-gradient(to right, #656469, #d3b570, #5f607b);
    background: linear-gradient(to right, #656469, #a2a7cf, #5f607b);
    background: linear-gradient(to right, #524d59, #ef2a46, #4c415f);

    background: linear-gradient(45deg, #ffd700, #ffa500);
    background: linear-gradient(135deg, #f9e79f, #b7950b, #7d6608);
    background: linear-gradient(135deg, #b7950b, #f9e79f, #b7950b, #7d6608);

    border: 1px solid gold;
    border: 1px solid #bfa207;

    margin-right: 10px !important;
}
.modal-menu-ul-inn ul li.active a {
    color: #4b2e2e !important;
}
.accordion .menu_accor .modal-menu-ul-inn li:hover a {
    color: gold !important;
}
.accordion .menu_accor .modal-menu-ul-inn li.active:hover a {
    color: #4b2e2e !important;
}
.accordion .menu_accor .modal-menu-ul-inn li a {
    color: #c0c1be;
    padding-left: 35px;
    font-size: 0.8rem;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.modal .accordion .menu_accor button.btn-footer,
.modal .accordion .menu_link > a {
    color: black;
    background: #f6f7f7;
}

.modal .accordion .menu_accor .btn-footer > img {
    filter: none;
}

.modal .accordion .menu_accor button.btn-footer:hover {
    /* background: none;*/
    border-left: 2px solid gold;
}
.modal .accordion .menu_accor button.btn-footer:hover img {
    filter: none;
}

.modal .accordion.accordian-txt .menu_accor .modal-menu-ul-inn li:hover {
    outline: 1px solid red;
    color: #e1da75;
}

.modal .accordion .menu_accor .modal-menu-ul-inn li a {
    color: #838382;
}

.modal .modal-menu-ul-inn ul li.active {
    background: none;
}

/**************************************************************************************************/
/*** Content  START ******************************************************************************/
/**************************************************************************************************/
.icon-blue {
    filter: var(--filter-blue);
}
.content-holder {
    padding: 10px;
}

header {
    background: white;
    margin-top: 8px;
    margin-right: 8px;
    border-radius: 0.3rem;
    align-items: center;
    padding: 10px;
}

header .avatar {
    border-radius: 0.3rem;
    overflow: hidden;
    margin-right: 0px;
    margin-left: 10px;
}
header .avatar img {
    width: 35px;
}

header .marker {
    padding: 5px;
    border-radius: 15rem;
    font-size: 0.8em;
    color: white;
    text-align: center;
}

.bg-green-lg {
    background: #e7efbc !important;
}

.bg-green {
    background: #80c339;
}
.bg-blue {
    background: #08adff;
}

header .icon img {
    cursor: pointer;
    width: 25px;
    filter: invert(66%) sepia(63%) saturate(4815%) hue-rotate(358deg)
        brightness(101%) contrast(98%);
    filter: invert(99%) sepia(35%) saturate(5979%) hue-rotate(315deg)
        brightness(109%) contrast(80%);
    filter: invert(99%) sepia(35%) saturate(5979%) hue-rotate(315deg)
        brightness(109%) contrast(80%);
    filter: invert(95%) sepia(45%) saturate(788%) hue-rotate(347deg)
        brightness(98%) contrast(80%);
    filter: invert(61%) sepia(87%) saturate(596%) hue-rotate(24deg)
        brightness(96%) contrast(101%);
    filter: var(--filter-blue);
}
header .icon img:hover {
    filter: var(--filter-orange);
}

header .ui-icon-email img {
    width: 25px;
}
header .ui-icon-email.top-right span:after {
    right: -10px;
}
header .right-opt {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

header .user-info {
    position: relative;
    padding: 0 10px;
    padding-left: 20px;
}
header .user-info:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    border-right: 1px solid var(--color-divider);
}
header .user-info .txt-gp {
    margin-top: -5px;
    margin-left: 3px;
}

header .ui-marquee .horizontal-scrolling-items__item span {
    color: dimgrey;
}
header .ui-marquee i {
    color: orange;
}

.box {
    padding: 10px;
    border-radius: 0.3rem;
    background: linear-gradient(
        138deg,
        rgb(249 249 249) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 100%
    );
    border: 2px solid white;
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.1) !important;
    height: 100%;
}

.box-title {
    color: black;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.box-sub-title {
    color: black;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    margin-bottom: 10px;
}

.box-inner {
    border-radius: 0.3rem;
    padding: 15px;
    border: 1px solid #f1ecec;
    background: #fdfdfd;
    height: 100%;
}

.box-wrapper {
    background: #f1f1f1; /*#e7f1d0;*/
    border-radius: 0.3rem;
    padding: 15px;
}

/**************************************************************************************************/
/*** TABLE  START ******************************************************************************/
/**************************************************************************************************/

table .info-s .icon {
    margin-top: -3px;
}
table .dim {
    opacity: 0.4;
}
table .info-s {
    font-size: 0.9em;
}

table td.info-s > div {
    display: flex;
    flex-direction: row;
    gap: 8px;
}
table td.info-s > div.no-gap {
    gap: 0px;
}
table td.info-s > div > .itm {
    align-self: center;
    align-items: center;
}
table td.info-s > div > .itm > span {
    align-self: center;
    align-items: center;
}

.icon-btn {
    padding: 5px 10px;
    background: var(--color-grd-orange);
    border-radius: 0.3rem;
    color: white;
    display: flex;
    align-self: center;
    cursor: pointer;
}

.icon-btn:hover {
    background: linear-gradient(129deg, #ff9e0c, #fe6f07, #ff9e0c);
}

.icon-btn img {
    margin-right: 10px;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(46deg)
        brightness(103%) contrast(102%);
}
table i {
    color: white;
}
table .icon-copy {
    cursor: pointer;
    /*background: orange;
    padding: 2px;
    border-radius: var(--radious);*/
}

table .icon-copy img {
    width: 15px;
    filter: var(--filter-orange);
}

table .edit-gp {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

table .edit-gp > div {
    text-align: center;
    padding: 5px;
    background: yellow;
    background: linear-gradient(146deg, #ededed 10%, #d5d6d9 100%);
    background: linear-gradient(146deg, #f1ecf3 10%, #bccaf1 100%);
    /*background: linear-gradient(146deg, #00cde9 30%, #ffffff 100%);*/
    background: linear-gradient(146deg, #f1ecf3 10%, #b0bbd3 100%);

    border-radius: var(--radious);

    min-width: 15%;
    cursor: pointer;
    border: 1px solid #bbbbe5;
    border: 1px solid #cbcbf7;
}

table .edit-gp > div a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

table .edit-gp > div.dropdown {
    font-size: 1em;
}

table .edit-gp img {
    width: 23px;
    padding: 3px;
    display: block;
    margin-bottom: 2px; /* Add small space between icon and text */
}

table .edit-gp > div a > div {
    color: #696f9d;
    font-size: 0.7em;
    white-space: nowrap; /* Prevent text wrapping */
}

table .ui-btn > img {
    width: 17px;
    filter: invert();
}

table .icon-s {
    opacity: 0.4;
}

.user-reset-pop {
    padding: 10px;
}

.user-reset-pop .user {
    font-size: 1em;
    width: 100px;
    width: 100px;
    display: inline-block;
    background: var(--color-lg-yellow);
    padding: 2px 8px;
    border-radius: var(--radious);
}

.row-lv2 td:first-child {
    padding-left: 32px;
}
.row-lv2 td {
    background: #c9dfef !important;
}
.row-lv2 td:first-child {
    background: #b3cee1 !important;
}

.toggle-row .icon,
.toggle-all .icon {
    width: 19px;
    border: 2px solid #479cfb;
    color: #479cfb;
    text-align: center;
    border-radius: 10rem;
    font-size: 1.3em;
    line-height: 15px;
    display: inline-block;
}

.icon-collapsed {
    position: relative;
}

.icon-collapsed::before {
    content: url("../../images/icon-add.svg");
    content: "+";
    position: absolute;
    top: 0;
    left: 0;
}

.pagination-gp {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 35px;
    width: calc(100% - 280px);
    z-index: 100;
    background: #545261;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    margin-left: auto;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
    display: flex;
}

.pagination-gp .ui-btn {
    background: #ff8a50;
    border: 0;
    color: white;
    padding: 4px 5px;
}

.pagination {
    margin-bottom: 0;
}

.pagination-gp nav {
    display: inline-block;
}
.icon-to-top img {
    width: 20px;
    filter: invert();
}

.important-note {
    padding: 25px;
    background: #fdc5c5;
    border-radius: 0.3rem;
}
.important-note .msg-title {
    font-weight: 600;
}
.important-note p {
    font-size: 0.9em;
    opacity: 0.6;
}
.important-note .icon img {
    width: 50px;
}

.more-text {
    display: inline;
}

.toggle-link {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
    display: none; /* hidden until JS decides to show it */
}

.clamp-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.icon-pass-eye {
    position: absolute;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    color: rgb(156 163 175);
    top: 0px;
    bottom: 0px;
    right: 0;
}

.online-player {
    display: flex;
    gap: 10px;
    font-size: 14px;
}

.online-player > span {
    background: #ebebeb;
    padding: 5px 10px;
    border-radius: var(--radious);
}
.online-player > span itm {
    padding: 0 5px;
    align-self: center;
    color: #858282;
}
.online-player > span itm > span {
    /*margin-right: 10px;*/
}
.online-player b {
    margin-left: 10px;
    color: #292828;
}

.online-player img {
    width: 15px;
}

.amt-selection .itm > span {
    padding: 10px 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 7px;
    background: #f1f1f1;
    background: linear-gradient(146deg, #ededed 10%, #d5d6d9 100%);
    font-weight: 600;
    color: #3b3b3b;
    display: block;
    text-align: center;
    border-radius: var(--radious);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
}
.amt-selection .itm.active > span {
    background: linear-gradient(178deg, #ffc961 10%, #ffb100 100%);
    box-shadow: rgb(243 19 19 / 25%) 0px 20px 15px -15px;
    border: 1px solid rgb(237 141 106 / 50%);
    /* border: 1px solid rgb(237 106 106 / 50%); */
}

.note-msg {
    font-size: 0.9em;
    color: var(--color-dk-grey);
    position: relative;
    margin-top: 10px;
}

.games-selection .itm-row {
    margin-bottom: 12px;
}
.games-selection .row > * {
    align-self: flex-start;
}
.games-selection .icon img {
    width: 28px;
}

.games-selection .itm-gp {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.games-selection .itm-gp .itm {
    position: relative;
    background: linear-gradient(146deg, #ededed 10%, #d5d6d9 100%);
    padding: 2px 10px;
    border-radius: var(--radious);
    cursor: pointer;
}

.games-selection .itm-gp .itm.selected {
    background: linear-gradient(146deg, #00d9e9 30%, #8dfb71 100%);
    background: linear-gradient(146deg, #c5d96a 30%, #37bb35 100%);
    color: white;
    border: 1px solid #77d1c4;
    padding-right: 25px;
}
/* .games-selection .itm-gp .itm.selected:after {
    position: absolute;
    content: url(../../images/icon-tick-xs.png);
    top: 5px;
    right: 3px;
    filter: invert(1);
} */

.status-tag-gp {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 0.9em;
}
.status-tag-gp .itm {
    padding: 2px 10px;
    border-radius: var(--radious);
    background: #f5f5ec;
}
.status-tag-gp .itm.red {
    background: #fbbdbd;
}

/**************************************************************************************************/
/*** DOWNLINE START ******************************************************************************/
/**************************************************************************************************/
.tb-card {
    display: flex;
    /*   padding: 5px 8px;*/
    text-align: left;
    /*
    background-color: #fff;*/
    align-self: center;
    gap: 5px;
}
.tb-card small {
    display: inline-block;
    font-size: 1em;
    text-align: right;
    color: #878787;
    min-width: 25px;
}

.txt-number {
    color: black;
    font-weight: 600;
}

.content-holder-box {
    min-height: 300px;
    padding: 10px;
    border: 1px solid #f1f0f3;
    border: 1px solid #e3e2e5;
}
.modal-xl .content-holder-box {
    width: 1040px;
}

.content-holder-box.scroll-y {
    overflow-x: auto;
    height: calc(100vh - 250px);
    height: 65vh;
}

.scroll-y {
    overflow-x: auto;
    height: calc(100vh - 250px);
    height: 65vh;
}

.ui-mini-pop {
    padding: 10px;
    background: linear-gradient(
        138deg,
        rgb(249 245 245) 0%,
        rgb(242 248 253) 50%,
        rgba(255, 255, 255, 1) 100%
    );
}
.ui-mini-pop select {
    display: inline-block;
}
.ui-mini-pop .confirmStatus {
    margin-top: -3px;
}
.ui-mini-pop .ui-btn.btn-s {
    padding: 4px 5px !important;
}

.box-card {
    background: #ebecef;
    background: #f5f5f5;
    border-radius: var(--radious);
    padding: 15px;
    color: black;
}

.downline-setting .box-card {
    text-align: center;

    height: 100%;
}
.downline-setting .box-card .game-gp {
    color: black;
    font-weight: 600;
    margin-top: 10px;
    height: 50px;
}

.downline-setting .box-card .limit-gp {
    display: inline-block;
}

.modal table {
    background: white;
}

.input-base-setting {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.input-base-setting input[type="text"],
.input-base-setting input[type="number"],
select {
    width: 150px;
    display: block;
}

.base-info {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.user-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    /*gap:10px;*/
}
.user-list .user {
    font-weight: 600;
}

.user-list > li {
    border-bottom: 1px solid #cbced7;
    /* padding:10px 0;*/
}
.user-list > li:hover {
    background: #f9e79f;
}

.user-list > li > div {
    padding: 10px 20px;
}
.provider-gp {
    overflow: auto;
    padding: 15px;
}
.provider-gp .itm {
    margin: 12px 0;
    text-align: left;
}

.provider-gp .itm div {
    text-align: left;
}

.flip-card {
    perspective: 1000px;
    /*width: 300px;*/
    height: 400px !important;
    /*  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
}
.flip-card .ui-btn-gp {
    justify-content: center;
    margin-bottom: 15px;
}

.flip-card-inner {
    border-radius: var(--radious);
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card .flip-card-inner .cat-name {
    color: black;
    font-weight: 600;
    margin-top: 10px;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;

    padding-top: 25px;
    backface-visibility: hidden;
}

.flip-card-front {
    background: #f5f5f5;
}

.flip-card-back {
    background: #ffcd7f;
    background: #ffe992;
    transform: rotateY(180deg);
}

.add-platform-gp > .col-auto {
    width: 309px;
}

.selected-user-list {
    position: relative;
}

.btn-selected-user {
    background: var(--color-grd-orange);
    font-size: 0.85em;
    color: white;
    padding: 5px 15px;
    transform: rotate(90deg);
    transform-origin: 10%;
    position: absolute;
    top: 200px;
    z-index: 10;
    left: 0px;
    border-top-left-radius: var(--radious);
    border-top-right-radius: var(--radious);
    cursor: pointer;
}

/* Function Buttons */
.edit-gp {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.edit-gp div {
    display: flex;
    flex-direction: column;
    /* keep icon above text */
    align-items: center;
    text-align: center;
}

.edit-gp .dropdown {
    position: relative;
}

.edit-gp .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 140px;
    padding: 5px;
}

.edit-gp .dropdown-menu.show {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #6c757d;
    padding: 0 0.5rem;
}

.breadcrumb-item a {
    color: #0d6efd;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: #0a58ca;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #495057;
    font-weight: 500;
}

/* Wrapper */
.custom-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-md-grey) !important;
}

/* Each tab */
.custom-tabs .nav-link {
    padding: 10px 20px;
    cursor: pointer;
    background: var(--color-grey1);
    border: 1px solid var(--color-md-grey) !important;
    border-bottom: none !important;
    border-radius: 0.3rem 0.3rem 0 0;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
    color: inherit;
}

/* Hover */
.custom-tabs .nav-link:hover {
    background: #e9ecef;
}

/* Active tab */
.custom-tabs .nav-link.active {
    background: linear-gradient(135deg, #f9e79f, #f1c40f) !important;
    border-color: gold !important;
    color: #4b2e2e !important;
}

.custom-tabs .nav-link.active,
.custom-tabs .nav-link {
    border-bottom: none !important;
}

/* Buttons */
.btn-gold-light {
    background-color: #fff8dc;
    color: #856404 !important;
    font-weight: 500;
    border-radius: 6px;
    border: 2px solid #ffc107;
}

.btn-gold-light:hover {
    background-color: #ffebcd !important;
    color: #000 !important;
}

.btn-gold-light.selected {
    background-color: #ffe8a1 !important;
    color: #000 !important;
    border-color: #e0a800 !important;
}

/* Base reset */
input[type="range"].form-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    width: 100%;
    padding: 0;
}

/* Focus state */
input[type="range"].form-range:focus {
    outline: none;
    box-shadow: none;
}

/* Chrome, Safari, Edge track */
input[type="range"].form-range::-webkit-slider-runnable-track {
    height: 8px;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
    border: none;
}

/* Chrome, Safari, Edge thumb */
input[type="range"].form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: #f1c40f;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    border: none;
}

/* Firefox track */
input[type="range"].form-range::-moz-range-track {
    height: 8px;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
    border: none;
}

/* Firefox thumb */
input[type="range"].form-range::-moz-range-thumb {
    height: 20px;
    width: 20px;
    background: #f1c40f;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}