@charset "utf-8";

/********************************************************
■ SideBar : 사이드바(모바일 메뉴)
********************************************************/

/* sidebar Box */
#nt_sidebar { 
    top: 0; 
    width: 250px; 
    height: 100%; 
    position: fixed; 
    z-index: 999; 
    background: #1a1a2e; 
    border-right: 1px solid #2a2a3e;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); 
}
#nt_sidebar .sidebar-content { 
    height: 100%; 
    overflow-y: auto; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
    color: #fff;
}

/* Icon */
.sidebar-icon i { 
    font-size: 22px; 
    line-height: 22px; 
    color: #00d4ff;
}

/* Menu */
.sidebar-list h5 { 
    padding: 0.8rem 1.5rem; 
    margin: 0; 
    font-weight: bold !important; 
    border-top: 1px solid #2a2a3e; 
    margin-top: -1px;
    color: #00d4ff;
    background: #16213e;
}
.sidebar-list ul.off { display: none; }
.sidebar-list li { position: relative; }
.sidebar-list li a { 
    display: block; 
    padding: 0.8rem 1.5rem; 
    border-bottom: 1px solid #2a2a3e; 
    overflow: hidden;
    color: #ffffff;
    transition: all 0.3s ease;
}
.sidebar-list li a:hover {
    background: #2a2a3e;
    border-left: 3px solid #00d4ff;
    color: #00d4ff;
}
.sidebar-list li .me-a { padding-right: 2.5rem; }
.sidebar-list .tree-toggle { 
    position: absolute; 
    z-index: 1; 
    top: 0rem; 
    right: 0; 
    width: 2.5rem; 
    padding: 0.8rem 0; 
    margin-top: 0.15rem;
    text-align: center; 
    cursor: pointer; 
    color: #aaa; 
}

.sidebar-list .me-ul { background: #1a1a2e; }
.sidebar-list .me-ul1 { background: #16213e; }
.sidebar-list .me-ul2 { background: #1a1a2e; }
.sidebar-list .me-li1 .me-a1,
.sidebar-list .me-li2 .me-a2 { padding-left: 2.0rem; }
.sidebar-list .me-li.active .me-a,
.sidebar-list .me-li1.active .me-a1,
.sidebar-list .me-li2.active .me-a2 { 
    font-weight: bold; 
    color: #00d4ff;
    background: #2a2a3e;
    border-left: 3px solid #00d4ff;
}
.sidebar-list .me-line1 .me-a1 { background: #2a2a3e; font-weight: bold; }
.sidebar-list .me-line2 .me-a2 { background: #2a2a3e; font-weight: bold; }

@media (min-width: 768px) {
    #nt_sidebar { right: -250px; }
}
@media (max-width: 767px) {
    #nt_sidebar { left: -250px; }
}

/* Mask */
#nt_sidebar_mask { 
    display: none; 
    position: fixed; 
    z-index: 998; 
    background: rgba(0,0,0,0.75); 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
}

/* Noti Tack */
#nt_sidebar_noti { 
    position: fixed; 
    z-index: 100; 
}
@media (min-width: 768px) {
    #nt_sidebar_noti { 
        top: 40%; 
        right: 0; 
        border-top-left-radius: 50rem !important; 
        border-bottom-left-radius: 50rem !important; 
        background: linear-gradient(135deg, #00d4ff, #0099cc);
    }
}
@media (max-width: 767px) {
    #nt_sidebar_noti { 
        left: 0; 
        bottom: 25px; 
        border-top-right-radius: 50rem !important; 
        border-bottom-right-radius: 50rem !important; 
        background: linear-gradient(135deg, #00d4ff, #0099cc);
    }
}

/* Go to Top */
#nt_sidebar_move { 
    display: none; 
    position: fixed; 
    width: 40px; 
    bottom: 20px; 
    right: 25px; 
    z-index: 2; 
}
#nt_sidebar_move span { 
    display: block; 
    color: #fff; 
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    margin: 5px 0; 
    text-align: center; 
    border-radius: 50%; 
    width: 42px; 
    height: 42px; 
    line-height: 42px !important; 
    font-size: 19px; 
    transition: all 0.3s ease;
}
#nt_sidebar_move span:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}
#nt_sidebar_move .sidebar-move-bottom { display: none; }

/* Custom styling for notification badge */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

/* Custom styling for orangered color in Biscrow theme */
.orangered {
    color: #00d4ff !important;
}

/* Custom button styling */
.btn-primary {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border: none;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}

/* Custom form control styling */
.form-control {
    background: #2a2a3e;
    border: 1px solid #3a3a5e;
    color: white;
}
.form-control:focus {
    background: #2a2a3e;
    border-color: #00d4ff;
    color: white;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
.input-group-text {
    background: #2a2a3e;
    border: 1px solid #3a3a5e;
    color: #aaa;
}