html, body {
    height: 100%;
    margin: 0;
    background-color: #121212;
    font-family: 'Outfit', sans-serif !important;
}


.div-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.star-icon {
    height: 20px;
    width: 20px;
    color: white;
}

.fontaw-icon::before{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.container {
    flex: 1; 
}

footer {
    background-color: rgb(0,0,0); 
    color: white; 
    text-align: center; 
    padding: 20px; 
}

.footer button {
    background-color: rgb(0,191,255);
}



.app-form-input{
    border: 2px solid black;
}

.toast-success, .toast-warning {
    background-color: rgb(231, 196, 123) !important;
    color: black !important;
}

.data-table-dark {
    background: #1C1C1E;
    border: solid 1px #2F2F33;
    box-shadow: 0 4px 6px rgba(0,0,0,.05), 0 10px 25px rgba(0,0,0,.08);
    border-radius: 16px;
    padding: 20px;
}


.data-table-headers
.data-table-tds{
    color: white;
}

#app-data-table_info,
#app-data-table_filter,
.dataTables_empty
 {
    color: white !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
table.dataTable tbody td.dataTables_empty, table.dataTable thead > tr > th.sorting, table.dataTable tbody th, table.dataTable tbody td {
    color: white !important;
}

table.dataTable tbody th, table.dataTable tbody td
 {
    padding: 18px 10px;
}

.table td {
    vertical-align: middle;
}

.dataTables_wrapper:hover, .dataTables_paginate:hover, .paginate_button.current:hover{
    color: black !important;
}

.paginate_button, paginate_button.current {
    color: black !important;
    background-color: rgb(231, 196, 123) !important;
}


.dataTables_length select {
    color: black;
    background-color: #1C1C1E !important;
}

.gold-button{
    transition: background-color 0.5s, box-shadow 0.5s;
    white-space: nowrap;
    color: #111;
    background: linear-gradient(135deg, #d6b36a, #f5d38a);
    border-radius: 12px;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 10px 30px;
    background-color: black;
    border: none;
    font-weight: bold;
    margin-bottom: 20px;
}

.gold-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212,175,55,.35);
    background: linear-gradient(135deg,#f5d38a,#d6b36a);
    text-decoration: none;
    color: #111;
    font-weight: bold;
}

.data-table-title {
    color:rgb(231, 196, 123);
    font-size: 25px;
    font-weight: bold;
}

.button-container{
    display: flex;
    justify-content: center;
}

.refund-reason-select {
    background: #1C1C1E;
    border: 1px solid #2F2F33;
    border-radius: 12px;
    padding: 25px;
    margin-top: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,.05), 0 10px 25px rgba(0,0,0,.08);
}

.refund-reason-form {
    display: flex;
    flex-direction: column;
}

.refund-reason-form p {
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.reason-select {
    width: 100%;
    padding: 12px 45px 12px 16px;
    background: #252527;
    color: white;
    border: 1px solid #4b3d22;
    border-radius: 8px;
    font-size: 16px;
    transition: .25s ease;
    margin-bottom: 15px;
}

.reason-select:hover {
    border-color: rgb(231,196,123);
    cursor: pointer;
}

.reason-select:focus {
    outline: none;
    border-color: rgb(231,196,123);
    box-shadow: 0 0 12px rgba(231,196,123,.25);
}

.reason-select option {
    background: #252527;
    color: white;
}

.customReasonInput textarea {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    background: #252527;
    color: white;
    border: 1px solid #4b3d22;
    border-radius: 8px;
    resize: vertical;
    transition: .25s ease;
    margin-bottom: 15px;
}

.customReasonInput textarea::placeholder {
    color: #8b8b8b;
}

.customReasonInput textarea:focus {
    outline: none;
    border-color: rgb(231,196,123);
    box-shadow: 0 0 12px rgba(231,196,123,.25);
}

.refund-reason-form button:active {
    transform: scale(.98);
}

.product-image-table-container{
    display: flex;
    justify-content: center;
}

.product-image-table {
    width: 50px;
    height: 50px;
}

.destructive-action-button {
    background: rgba(140, 40, 50, .15);
    color: #d97b83;
    border: 1px solid rgba(170, 70, 80, .45);
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 600;
    transition: all .25s ease;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.destructive-action-button:hover {
    background: rgba(170, 55, 65, .25);
    border-color: #cf5f69;
    color: #f3a0a8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(180,40,55,.18);
    text-decoration: none;
}