:root {
    /* 다크 모드 색상으로 기본 변수 변경 */
    --colB: #6e80ff; /*블루*/
    --colmain: #6e80ff; /*블루*/
    --colGr: #2a2a46; /*그레이*/
    --colG: #38d4a3; /*그린*/
    --colSky: #5fb3f9; /*스카이*/
    --colY: #f1b44c; /*엘로우*/
    --colR: #f46a6a; /*레드*/
    --colDg: #343a40; /*다크그레이*/
    --colSt: #9299af; /*다크그레이*/
    --colBl: #e2e8f0; /*블랙 -> 흰색으로 변경*/
    --colWh: #232342; /*화이트 -> 다크 배경으로 변경*/
    --comBorder: 1px solid #3e4359;

    --line_01: #555569;
    --line_02: #464663;
    --line_03: #3e3e5c;
    --line_04: #323248;

    --bg_01: #282840;
    --bg_02: #232342;
    --bg_03: #1e1e36;

    --txt_01: #e2e8f0;
    --txt_02: #b0b8c1;
    --txt_03: #8a919a;

    /* 기본 배경 및 텍스트 색상 변경 */
    --bg-primary: #1a1a2e;
    --bg-secondary: #232342;
    --text-primary: #f0f2f5;
    --text-secondary: #b0b8c1;
    --border-color: #3e4359;
    --card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
    --chart-grid: rgba(255, 255, 255, 0.15);
    --hover-bg: rgba(255, 255, 255, 0.07);
    /* --hover-bg: #fff; */
    
    /* 브랜드 색상 - 밝기 조정 */
    --blue: rgb(96, 165, 250);
    --purple: rgb(165, 129, 255);
    --pink: rgb(249, 115, 179);
    --green: rgb(52, 211, 153);
    --orange: rgb(255, 146, 64);
    --teal: rgb(45, 212, 191);
    --indigo: rgb(129, 131, 255);
    --red: rgb(248, 113, 113);
    --yellow: rgb(251, 189, 35);
    
    /* 상태 색상 */
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;

    --dim: rgba(0, 0, 0, 0.7);
    
    --: " Sans KR", "Gulim";
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/*button*/
._colB {
    color: var(--colB);
}
._colG {
    color: var(--colG);
}
._colSky {
    color: var(--colSky);
}
._colY {
    color: var(--colY);
}
._colR {
    color: var(--colR);
}
._colDg {
    color: var(--colDg);
}
._colSt {
    color: var(--colSt);
}
.popUpBtn span {
    font-weight: bold;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 32px;
}
._btn {
    line-height: 32px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
    border-radius: 3px;
    color: var(--text-primary);
    height: 32px;
    min-width: 80px;
    padding: 0 12px;
    font-weight: bold;
}
._btn._colGr {
    background-color: var(--colGr);
    color: var(--text-primary);
}
._btn._colB {
    background-color: var(--colB);
}
._btn._colG {
    background-color: var(--colG);
}
._btn._colSky {
    background-color: var(--colSky);
}
._btn._colY {
    background-color: var(--colY);
}
._btn._colR {
    background-color: var(--colR);
}
._btn._colDg {
    background-color: var(--colDg);
}
._btn._colSt {
    background-color: var(--colSt);
}
._btn._colB:hover {
    background-color: #4a66ff;
}
._btn._colG:hover {
    background-color: #35d69c;
}
._btn._colSky:hover {
    background-color: #4e9ef5;
}
._btn._colY:hover {
    background-color: #e3aa44;
}
._btn._colR:hover {
    background-color: #e65454;
}
._btn._colDg:hover {
    background-color: #181e23;
}
._btn._colSt:hover {
    background-color: #7b80a1;
}

._lineBtn {
    transition: all 0.5s;
    font-weight: bold;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    height: 32px;
    min-width: 80px;
    padding: 0 12px;
}
._lineBtn._colB:hover {
    background-color: rgba(110, 128, 255, 0.2);
}
._lineBtn._colG:hover {
    background-color: rgba(56, 212, 163, 0.2);
}
._lineBtn._colSky:hover {
    background-color: rgba(95, 179, 249, 0.2);
}
._lineBtn._colY:hover {
    background-color: rgba(241, 180, 76, 0.2);
}
._lineBtn._colR:hover {
    background-color: rgba(244, 106, 106, 0.2);
}
._lineBtn._colDg:hover {
    background-color: rgba(52, 58, 64, 0.2);
}
._lineBtn._colSt:hover {
    background-color: rgba(146, 153, 175, 0.2);
}
._roundBtn {
    border-radius: 100px;
}
/*btn size*/
.ss {
    min-width: 20px;
    height: 32px;
}
.sl {
    height: 36px;
    width: 100px;
    line-height: 36px;
}
button.delBtn {
    background-image: url(../../img/common/del_icon.png);
    font-size: 0;
    width: 32px;
    height: 16px;
    text-align: center;
    background-size: 50%;
    filter: invert(1);
}
._btn:disabled {
    background-color: #464663;
}
._btn:disabled:hover {
    background-color: #464663;
}

/*input*/
.checkLabel {
    position: relative;
}
.checkLabel input {
    width: 100%;
    position: absolute;
    opacity: 0;
    left: 0;
    cursor: pointer;
    top: 0;
    height: 100%;
    z-index: 1;
}
.checkLabel input[type="checkbox"] + label,
.checkLabel input[type="radio"] + label {
    line-height: 13px;
    display: inline-block;
    height: 100%;
    cursor: pointer;
    position: relative;
    padding-left: 20px;
}
.checkLabel input[type="checkbox"] + label:after,
.checkLabel input[type="radio"] + label:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    left: 0;
    top: 0;
    border: 1px solid var(--text-secondary);
    position: absolute;
    border-radius: 2px;
}
.checkLabel input[type="radio"] + label:after {
    border-radius: 20px;
}
.checkLabel input[type="checkbox"]:checked + label:after {
    background-color: var(--colB);
    background-image: url(../../img/common/check_icon.png);
    background-size: 80%;
    background-position: center;
    border: 1px solid var(--colB);
    background-repeat: no-repeat;
}
.checkLabel input[type="radio"]:checked + label:after {
    border: 1px solid var(--colB);
}
.checkLabel input[type="radio"]:checked + label:before {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--colB);
    content: "";
    border-radius: 8px;
    left: 3px;
    top: 3px;
}
::placeholder {
    color:var(--text-secondary);
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="search"],
/* select, */
textarea,
.form-control {
    background-color: var(--bg-primary) !important;
    /* border: 1px solid var(--border-color) !important; */
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
}
input[readonly],
input:disabled,
select:disabled,
textarea:disabled,
.form-control[readonly],
.form-control:disabled {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
    opacity: 0.8;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="search"] {
    height: 32px;
    padding: 0 16px;
}

input[type="date"] {
    width: 140px;
    padding: 0 10px;
}

select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: var(--comBorder);
    border:none;
    height: 32px;
    border-radius: 3px;
    min-width: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b0b8c1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    padding-right: 30px;
    appearance: none;
}

/*section tit search option common*/
._searchOption:after {
    content: "";
    display: block;
    clear: both;
}
._searchOption input,
._searchOption select,
._searchOption button,
._searchOption span {
    float: left;
    margin-right: 5px;
    line-height: 32px;
}
._searchOption button {
    width: 54px;
    height: 32px;
    font-weight: bold;
}
/*table search Count*/
._searchCount {
    margin-bottom: 10px;
}
._searchCount span {
    font-weight: bold;
    color: var(--colB);
}

/*table width*/
.t_Wss {
    min-width: 80px;
}
.t_Ws {
    min-width: 120px;
}
.t_Wm {
    width: ;
}
.t_Wl {
    width: 420px;
}
.t_WXl {
    min-width: 200px;
}

.marginL_5 {
    margin-left: 5px;
}
.marginR_5 {
    margin-right: 5px;
}
.marginT_3 {
    margin-top: 30px;
}
.marginB_3 {
    margin-bottom: 30px;
}
.marginB_1 {
    margin-bottom: 10px;
}
td.t__8_h,
th.t__8_h {
    width: 80px;
}
td.t_Wss,
th.t_Wss {
    width: 120px;
}
td.t_1_h,
th.t_1_h {
    width: 150px;
}
td.t_3_h,
th.t_3_h {
    width: 340px;
}
td.t_Ws,
th.t_Ws {
    width: 400px;
}
td.t_Wm,
th.t_Wm {
    width: 500px;
}
td.t_Wl,
th.t_Wl {
    width: 200px;
}
td.t_WXl,
th.t_WXl {
    width: 640px;
}
th.t_Wm,
th.t_Wm {
    width: 500px;
}
._960 {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/*table common*/
table._arL td {
    text-align: left;
}
table._arC td {
    text-align: center;
}
table._arR td {
    text-align: right;
}

table._arL td.arC {
    text-align: center;
}
table._arL td.arR {
    text-align: right;
}

table._arC td.arL {
    text-align: left;
}
table._arC td.arR {
    text-align: right;
}

table._arR td.arL {
    text-align: left;
}
table._arR td.arC {
    text-align: center;
}

table {
    width: 100%;
    border: var(--comBorder);
}
table tr {
    border: var(--comBorder);
    transition: 0.2s all;
}
table.list tr:hover {
    background-color: var(--hover-bg);
}
table tr.empty td {
    height: 500px;
    text-align: center;
    color: var(--text-secondary);
}
table tr.empty:hover {
    background: var(--bg-secondary);
}
table th {
    border: var(--comBorder);
    background-color: var(--bg-primary);
    height: 46px;
    vertical-align: middle;
    font-weight: bold;
    padding: 0 10px;
    color: var(--text-primary);
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}
table td {
    border: var(--comBorder);
    line-height: 16px;
    padding: 8px;
    color: var(--text-primary);
}
table select,
table td input[type="password"],
table td input[type="email"],
table td input[type="text"],
table td input[type="number"] {
    width: 100%;
}
table th select {
    font-weight: bold;
    padding: 0;
    background-color: transparent;
    border: 0;
    color: var(--text-primary);
}
table.set th {
    width: 180px;
    text-align: left;
}

table td .inputWrap:after {
    content: "";
    display: block;
    clear: both;
}
table td .inputWrap {
    border: var(--comBorder);
    background-color: var(--bg-secondary);
}
table td .inputWrap input {
    border: 0;
    float: left;
    min-width: calc(100% - 36px);
    min-width: calc(100% - 50px);
    width: initial;
    background-color: transparent;
    color: var(--text-primary);
}
table td .inputWrap span {
    color: var(--text-secondary);
    display: block;
    padding-right: 10px;
    text-align: right;
    float: right;
    line-height: 32px;
    max-width: 50px;
}

/*table option design*/
table td .inputBtn input {
    float: left;
    width: calc(100% - 100px);
}
table td .inputBtn button {
    float: right;
}
table td .btnWrap:after {
    content: "";
    display: block;
    clear: both;
}
table td .btnWrap button {
    width: calc((100% - 5px) / 2);
    float: left;
}
table td .btnWrap button:first-child {
    margin-right: 5px;
}
.linkBtn {
    color: var(--colB);
    border-bottom: 1px solid var(--colB);
}
.linkBtn._colR {
    color: var(--colR);
    border-bottom: 1px solid var(--colR);
}
.linkBtn._colG {
    color: var(--colG);
    border-bottom: 1px solid var(--colG);
}
table td .itemWrap:after {
    content: "";
    display: block;
    clear: both;
}
table td .itemWrap .item {
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid var(--line_03);
}
table td .itemWrap .item:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}
table td .itemWrap .checkLabel {
    float: left;
    margin-right: 20px;
}
table td .itemWrap .checkLabel:last-child {
    margin-right: 0;
}
table td .Memotextarea {
    background-color: rgba(250, 246, 217, 0.1);
}
/*table td .itemWrap input{float: left;width: calc(100% - 60px);margin-right: 10px;}*/
table td .itemWrap button {
    float: left;
}
table td .itemWrap select {
    margin-right: 5px;
    float: left;
    width: initial;
}
table td ._address:after {
    content: "";
    display: block;
    clear: both;
}
table td ._address input {
    width: calc((100% - 100px) / 2);
    margin-left: 10px;
    float: left;
}
table td ._address button {
    float: left;
}

table td._mag {
    padding-right: 30px;
}
table td._mag ._magDetail {
    transition: 0.5s all;
    position: relative;
    cursor: pointer;
    width: 240px;
}
table td._mag ._magDetail .txtpop {
    width: 100%;
    font-weight: bold;
    height: 16px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
table td._mag ._magDetail .txtpop .imgWrap {
    margin-top: 10px;
}
table td._mag ._magDetail .txtpop .imgWrap img {
    width: 50%;
}
table td._mag:hover ._magDetail .txtpop {
    /* overflow: initial;white-space:initial; */
    overflow: auto;
    max-height: 500px;
    height: initial;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    display: block;
    position: absolute;
    left: 0;
    border-radius: 5px;
    top: 0;
    border: var(--comBorder);
    padding: 20px;
    z-index: 1;
    background-color: var(--bg-secondary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
table .help {
    position: relative;
    cursor: pointer;
}
table .help .tit {
    font-weight: bold;
    position: relative;
}
table .help .tit:after {
    content: "✓";
    display: block;
    width: 15px;
    height: 15px;
    font-size: 12px;
    position: absolute;
    color: var(--text-secondary);
    right: -20px;
    top: -1px;
    border-radius: 50px;
    line-height: 15px;
    font-size: 10px;
}
table .help:hover .txt {
    display: inline-block;
}
table .help .txt {
    border: var(--comBorder);
    position: absolute;
    display: none;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    line-height: 20px;
    padding: 10px;
    z-index: 1;
    text-align: left;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 5px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
/*발송통계*/
table.send_statistics td {
    height: 22px;
    line-height: 5px;
    padding: 0 10px;
}
table.send_statistics td.bg {
    background-color: var(--bg-primary);
    font-weight: bold;
}
table.send_statistics .total:hover td {
    background-color: var(--hover-bg);
}

. {
    font-size: 14px;
}
table .textarea {
    border: var(--comBorder);
    line-height: 24px;
    vertical-align: top;
    padding: 30px;
    width: 100%;
    resize: none;
    height: 420px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
table td.site_images {
    transition: all 0.3s;
    cursor: pointer;
}
table td.site_images img {
    max-height: 80px;
    max-width: 80px;
    cursor: pointer;
    filter: brightness(0.9);
}
table td.site_images .imgReplace {
    position: relative;
    cursor: pointer;
}
table td.site_images:hover {
    background-color: var(--bg-primary);
}
table td.site_images input[type="file"] {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/*white-space*/
._shorten {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
._shorten_s {
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/*array*/
._rowCenter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.arR {
    text-align: right;
}
.arC {
    text-align: center;
}
.arL {
    text-align: left;
}
.bold {
    font-weight: bold;
}
.disabled {
    background-color: var(--bg-primary);
}
.bg_G {
    background-color: var(--bg-primary);
}
.bg_y {
    background-color: rgba(255, 250, 224, 0.1);
}
/*Txt Tab common*/

._txtTab:after {
    content: "";
    display: block;
    clear: both;
}
._txtTab button,
._txtTab a {
    float: left;
    font-size: 14px;
    margin-right: 14px;
    padding-right: 14px;
    position: relative;
    line-height: 32px;
    color: var(--text-secondary);
}
._txtTab button:after,
._txtTab a:after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 14px;
    background-color: var(--border-color);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
._txtTab button:last-child:after,
._txtTab a:last-child:after {
    display: none;
}
._txtTab button.on,
._txtTab a.on {
    color: var(--colB);
    font-weight: 500;
}

/*page nav*/
._page:after {
    content: "";
    display: block;
    clear: both;
}
._page {
    border-radius: 5px;
    margin-top: 20px;
}
._page > div {
    float: left;
    height: 34px;
    line-height: 34px;
    border: var(--comBorder);
    border-right: 0;
}
._page > div.last {
    letter-spacing: -3px;
}
._page > div.first {
    letter-spacing: -3px;
}
._page > div:first-child {
    border-radius: 5px 0 0 5px;
}
._page > div:last-child {
    border-right: 1px solid var(--border-color);
    border-radius: 0 5px 5px 0;
}
._page > div.on {
    background-color: var(--colB);
}
._page > div a {
    display: inline-block;
    height: 100%;
    padding: 0 12px;
    color: var(--text-primary);
}
._page > div.on a {
    color: var(--text-primary);
    font-weight: bold;
}

/*section common bottom Btn*/
._secComBtn {
    margin: 20px 0;
    margin-bottom: 0;
}

/*+ linkBtn*/
.txtLinkWrap .linkBtn {
    margin-left: 5px;
}

/*login*/

._login {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
._login .boxWrap {
    position: absolute;
    right: 0;
    width: 100%;
    background-color: var(--bg-primary);
    height: 100%;
}

._login .boxWrap .conBox {
    width: 460px;
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    padding: 60px 50px;
    border-radius: 10px;
    background-color: var(--bg-secondary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
._login .loginBox input {
    font-size: 14px;
    border: 0;
    padding: 0;
    border-bottom: var(--comBorder);
    background-color: transparent;
    color: var(--text-primary);
}
._login .boxWrap .conBox h1 {
    background-image: url(/images/logo.png);
    width: 100%;
    height: 82px;
    background-size: 250px;
    font-size: 0;
    filter: brightness(0.9);
}
._login .boxWrap .conBox .loginBox {
    margin-top: 50px;
    margin-bottom: 10px;
}
._login .boxWrap .conBox .loginBox input {
    width: 100%;
    height: 42px;
    transition: 0.3s all;
    margin-bottom: 10px;
}
._login .boxWrap .conBox .loginBox input:focus {
    border-bottom: 1px solid var(--text-primary);
}
._login .boxWrap .conBox .securityBox {
    margin-top: 20px;
    border: var(--comBorder);
    border-radius: 5px;
    padding: 5px;
}
._login .boxWrap .conBox .securityBox input {
    float: left;
    width: calc(100% - 140px);
    font-size: 14px;
    border: 0;
    height: 30px;
    background-color: transparent;
    color: var(--text-primary);
}
._login .boxWrap .conBox .securityBox button {
    float: right;
    height: 30px;
    width: 110px;
}
._login .boxWrap .bot {
    width: 100%;
    min-height: 60px;
    background-color: var(--bg-primary);
    margin-top: 20px;
}
._login .boxWrap .conBox button.login {
    width: 100%;
    font-size: 16px;
    margin-top: 20px;
    font-weight: initial;
    height: 50px;
}

._ip:after {
    content: "";
    display: block;
    clear: both;
}
._ip span {
    float: left;
    width: calc((100% - 48px) / 4);
    margin-right: 16px;
    position: relative;
}
._ip span:after {
    width: 5px;
    height: 5px;
    content: "";
    border-radius: 5px;
    background-color: var(--text-primary);
    position: absolute;
    bottom: 0;
    right: -10px;
}
._ip span:last-child {
    margin-right: 0;
}
._ip span:last-child:after {
    display: none;
}
._ip span input {
    width: 100%;
    text-align: center;
}

.hoverTxt {
    position: relative;
    cursor: pointer;
}
.hoverTxt div {
    position: absolute;
    display: none;
    width: 200px;
    background-color: var(--bg-secondary);
    right: 0;
    border-radius: 5px;
    text-align: left;
    border: var(--comBorder);
    padding: 20px;
    z-index: 1;
    color: var(--text-primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
.hoverTxt:hover div {
    display: block;
}

.plusBtnIcon {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary);
    height: 32px;
    border-radius: 3px;
    width: 36px;
    background-color: var(--colG);
}

/*button*/
button.colB {
    background-color: var(--colB);
    color: var(--text-primary);
}
button.colY {
    background-color: var(--colY);
    color: var(--bg-primary);
}
button.colBl {
    background-color: var(--colBl);
    color: var(--bg-primary);
}
button.colB-B {
    border: 1px solid var(--colB);
    color: var(--colB);
    background-color: transparent;
}
button.colW-G {
    background-color: var(--bg-secondary);
    border: 1px solid var(--line_03);
    color: var(--text-primary);
}
button.colW-Bl {
    background-color: var(--bg-secondary);
    border: 1px solid var(--colBl);
    color: var(--text-primary);
}
button.colDgr {
    background-color: var(--colDg);
    border: 1px solid var(--colDg);
    color: var(--text-primary);
}

button.colW-B {
    background-color: transparent;
    color: var(--colB);
    border: 1px solid var(--colB);
}
button.colLG {
    background-color: var(--bg_01);
    color: var(--text-primary);
}
button.colLg-G {
    background-color: var(--bg_02);
    border: 1px solid var(--line_03);
    color: var(--text-primary);
}
button.colG-G {
    background-color: var(--bg_01);
    color: var(--text-primary);
    border: 1px solid var(--line_02);
}

/* 상태 배지 스타일 */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.badge-primary {
    background-color: rgba(12, 133, 78, 0.2);
    color: #4adbaa;
}

.badge-success {
    background-color: rgba(12, 133, 78, 0.2);
    color: #4adbaa;
}

.badge-warning {
    background-color: rgba(219, 154, 4, 0.2);
    color: #ffcc55;
}

.badge-danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff7b85;
}
.text-muted {
    color: var(--text-secondary) !important;
}