:root {
  /* Primary Colors */
  --mybuttons-primary: #6366f1;
  --mybuttons-primary-hover: #4f46e5;
  --mybuttons-primary-shadow: rgba(99, 102, 241, 0.3);
  --mybuttons-primary-shadow-hover: rgba(99, 102, 241, 0.4);
  
  /* Info Colors */
  --mybuttons-info: #0ea5e9;
  --mybuttons-info-hover: #0284c7;
  --mybuttons-info-shadow: rgba(14, 165, 233, 0.3);
  --mybuttons-info-shadow-hover: rgba(14, 165, 233, 0.4);
  
  /* Danger Colors */
  --mybuttons-danger: #ef4444;
  --mybuttons-danger-hover: #dc2626;
  --mybuttons-danger-shadow: rgba(239, 68, 68, 0.3);
  --mybuttons-danger-shadow-hover: rgba(239, 68, 68, 0.4);
  
  /* Warning Colors */
  --mybuttons-warning: #eab308;
  --mybuttons-warning-hover: #ca8a04;
  --mybuttons-warning-shadow: rgba(234, 179, 8, 0.3);
  --mybuttons-warning-shadow-hover: rgba(234, 179, 8, 0.4);
  
  /* Dark Warning Colors */
  --mybuttons-darkwarning: #d97706;
  --mybuttons-darkwarning-hover: #b45309;
  --mybuttons-darkwarning-shadow: rgba(217, 119, 6, 0.3);
  --mybuttons-darkwarning-shadow-hover: rgba(217, 119, 6, 0.4);
  --mybuttons-darkwarning-outline-shadow: rgba(217, 119, 6, 0.1);
  
  /* Brown Warning Colors */
  --mybuttons-brownwarning: #92400e;
  --mybuttons-brownwarning-hover: #78350f;
  --mybuttons-brownwarning-shadow: rgba(146, 64, 14, 0.3);
  --mybuttons-brownwarning-shadow-hover: rgba(146, 64, 14, 0.4);
  --mybuttons-brownwarning-outline-shadow: rgba(146, 64, 14, 0.1);
  
  /* Gold Colors */
  --mybuttons-gold: #d0a000;
  --mybuttons-gold-hover: #a67f00;
  --mybuttons-gold-shadow: rgba(208, 160, 0, 0.3);
  --mybuttons-gold-shadow-hover: rgba(208, 160, 0, 0.4);
  --mybuttons-gold-outline-shadow: rgba(208, 160, 0, 0.1);
  
  /* Default Colors */
  --mybuttons-default: #6b7280;
  --mybuttons-default-hover: #4b5563;
  --mybuttons-default-shadow: rgba(107, 114, 128, 0.3);
  --mybuttons-default-shadow-hover: rgba(107, 114, 128, 0.4);
  --mybuttons-default-outline-shadow: rgba(107, 114, 128, 0.1);
  
  /* Dark Colors */
  --mybuttons-dark: #374151;
  --mybuttons-dark-hover: #1f2937;
  --mybuttons-dark-shadow: rgba(55, 65, 81, 0.3);
  --mybuttons-dark-shadow-hover: rgba(55, 65, 81, 0.4);
  --mybuttons-dark-outline-shadow: rgba(55, 65, 81, 0.1);
  
  /* Success Colors */
  --mybuttons-success: #10b981;
  --mybuttons-success-hover: #059669;
  --mybuttons-success-shadow: rgba(16, 185, 129, 0.3);
  --mybuttons-success-shadow-hover: rgba(16, 185, 129, 0.4);
  --mybuttons-success-outline-shadow: rgba(16, 185, 129, 0.1);
  
  /* Dark Blue Colors */
  --mybuttons-darkblue: #0d6efd;
  --mybuttons-darkblue-hover: #0b5ed7;
  --mybuttons-darkblue-shadow: rgba(13, 110, 253, 0.3);
  --mybuttons-darkblue-shadow-hover: rgba(13, 110, 253, 0.4);
  --mybuttons-darkblue-outline-shadow: rgba(13, 110, 253, 0.1);
  
  /* Indigo Colors */
  --mybuttons-indigo: #3730a3;
  --mybuttons-indigo-hover: #312e81;
  --mybuttons-indigo-shadow: rgba(55, 48, 163, 0.3);
  --mybuttons-indigo-shadow-hover: rgba(55, 48, 163, 0.4);
  
  /* Text Colors */
  --mybuttons-text-white: #ffffff;
  --mybuttons-text-transparent: #fff;
}

.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background-color: var(--mybuttons-primary) !important;
    color: var(--mybuttons-text-white) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-primary-shadow) !important;
}

.es-btn:hover {
    background-color: var(--mybuttons-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px var(--mybuttons-primary-shadow-hover) !important;
}

.es-btn i {
    margin-right: 0.5rem;
    font-weight: 500 !important;
}

/*     .es-btn i {
                font-size: 1.3rem !important;
                font-weight: 400 !important;
    margin-right: 0.5rem;
}

.es-btn-lg  i {
                font-size: 1.2rem !important;
                font-weight: 500 !important;

    margin-right: 0.5rem;
}
*/
.es-table-btn i {font-size: 1.1rem !important;
    margin-right: 0.4rem;
    font-weight: 500 !important;
}



.es-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.8rem;
   margin-right: 0.4rem;
  text-decoration: none !important;
  border-radius: 7px !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  transition: all 0.2s ease !important;
}




.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.3rem;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.es-btn:hover {
    transform: translateY(-2px) !important;
}

.es-btn i {
    margin-right: 0.5rem;
}

/* Variants: Solid */

/* Primary */
.es-btn-primary {
    background-color: var(--mybuttons-primary) !important;
    border: 2px solid var(--mybuttons-primary) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 2px 4px var(--mybuttons-primary-shadow) !important;
}

.es-btn-primary:hover {
    background-color: var(--mybuttons-primary-hover) !important;
    box-shadow: 0 4px 8px var(--mybuttons-primary-shadow-hover) !important;
}

/* Info */
.es-btn-info {
    background-color: var(--mybuttons-info) !important;
    border: 2px solid var(--mybuttons-info) !important;
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-info-shadow) !important;
}

.es-btn-info:hover {
    background-color: var(--mybuttons-info-hover) !important;
    box-shadow: 0 4px 8px var(--mybuttons-info-shadow-hover) !important;
}

/* Danger */
.es-btn-danger {
    background-color: var(--mybuttons-danger) !important;
    border: 2px solid var(--mybuttons-danger) !important;
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-danger-shadow) !important;
}

.es-btn-danger:hover {
    background-color: var(--mybuttons-danger-hover) !important;
    box-shadow: 0 4px 8px var(--mybuttons-danger-shadow-hover) !important;
}

/* Warning */
.es-btn-warning {
    background-color: var(--mybuttons-warning) !important;
    border: 2px solid var(--mybuttons-warning) !important;
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-warning-shadow) !important;
}

.es-btn-warning:hover {
    background-color: var(--mybuttons-warning-hover) !important;
    box-shadow: 0 4px 8px var(--mybuttons-warning-shadow-hover) !important;
}

/* ========================= */
/* Dark Warning Variant       */
/* ========================= */

.es-btn-darkwarning {
    background-color: var(--mybuttons-darkwarning) !important; /* amber-700 */
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-darkwarning-shadow) !important;
}

.es-btn-darkwarning:hover {
    background-color: var(--mybuttons-darkwarning-hover) !important; /* amber-800 */
    box-shadow: 0 4px 8px var(--mybuttons-darkwarning-shadow-hover) !important;
}

/* Outline Dark Warning */
.es-btn-outline-darkwarning {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-darkwarning) !important;
    border: 2px solid var(--mybuttons-darkwarning) !important;
    box-shadow: 0 1px 2px var(--mybuttons-darkwarning-outline-shadow) !important;
}

.es-btn-outline-darkwarning:hover {
    background-color: var(--mybuttons-darkwarning) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-darkwarning-shadow-hover) !important;
}

/* ========================= */
/* Brown Warning Variant     */
/* ========================= */

.es-btn-brownwarning {
    background-color: var(--mybuttons-brownwarning) !important; /* deep brownish amber */
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-brownwarning-shadow) !important;
}

.es-btn-brownwarning:hover {
    background-color: var(--mybuttons-brownwarning-hover) !important; /* darker brown */
    box-shadow: 0 4px 8px var(--mybuttons-brownwarning-shadow-hover) !important;
}

/* Outline Brown Warning */
.es-btn-outline-brownwarning {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-brownwarning) !important;
    border: 2px solid var(--mybuttons-brownwarning) !important;
    box-shadow: 0 1px 2px var(--mybuttons-brownwarning-outline-shadow) !important;
}

.es-btn-outline-brownwarning:hover {
    background-color: var(--mybuttons-brownwarning) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-brownwarning-shadow-hover) !important;
}

/* ========================= */
/* Golden Brown Warning (#d0a000) */
/* ========================= */

/* Solid */
.es-btn-gold {
    background-color: var(--mybuttons-gold) !important;  /* golden brown */
    border: 2px solid var(--mybuttons-gold) !important;
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-gold-shadow) !important;
}
.es-btn-gold:hover {
    background-color: var(--mybuttons-gold-hover) !important;  /* darker shade */
    box-shadow: 0 4px 8px var(--mybuttons-gold-shadow-hover) !important;
}

/* Outline */
.es-btn-outline-gold {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-gold) !important;
    border: 2px solid var(--mybuttons-gold) !important;
    box-shadow: 0 1px 2px var(--mybuttons-gold-outline-shadow) !important;
}
.es-btn-outline-gold:hover {
    background-color: var(--mybuttons-gold) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-gold-shadow-hover) !important;
}


/* Default */
.es-btn-default {
    background-color: var(--mybuttons-default) !important;
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-default-shadow) !important;
}

.es-btn-default:hover {
    background-color: var(--mybuttons-default-hover) !important;
    box-shadow: 0 4px 8px var(--mybuttons-default-shadow-hover) !important;
}

/* Dark */
.es-btn-dark {
    background-color: var(--mybuttons-dark) !important;
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-dark-shadow) !important;
}

.es-btn-dark:hover {
    background-color: var(--mybuttons-dark-hover) !important;
    box-shadow: 0 4px 8px var(--mybuttons-dark-shadow-hover) !important;
}

/* Variants: Outline */

/* Outline Primary */
.es-btn-outline-primary {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-primary) !important;
    border: 2px solid var(--mybuttons-primary) !important;
    box-shadow: 0 1px 2px var(--mybuttons-primary-shadow) !important;
}

.es-btn-outline-primary:hover {
    background-color: var(--mybuttons-primary) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-primary-shadow-hover) !important;
}

/* Outline Info */
.es-btn-outline-info {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-info) !important;
    border: 2px solid var(--mybuttons-info) !important;
    box-shadow: 0 1px 2px var(--mybuttons-info-shadow) !important;
}

.es-btn-outline-info:hover {
    background-color: var(--mybuttons-info) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-info-shadow-hover) !important;
}

/* Outline Danger */
.es-btn-outline-danger {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-danger) !important;
    border: 2px solid var(--mybuttons-danger) !important;
    box-shadow: 0 1px 2px var(--mybuttons-danger-shadow) !important;
}

.es-btn-outline-danger:hover {
    background-color: var(--mybuttons-danger) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-danger-shadow-hover) !important;
}

/* Outline Warning */
.es-btn-outline-warning {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-warning) !important;
    border: 2px solid var(--mybuttons-warning) !important;
    box-shadow: 0 1px 2px var(--mybuttons-warning-shadow) !important;
}

.es-btn-outline-warning:hover {
    background-color: var(--mybuttons-warning) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-warning-shadow-hover) !important;
}

/* Outline Default */
.es-btn-outline-default {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-default) !important;
    border: 2px solid var(--mybuttons-default) !important;
    box-shadow: 0 1px 2px var(--mybuttons-default-outline-shadow) !important;
}

.es-btn-outline-default:hover {
    background-color: var(--mybuttons-default) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-default-shadow-hover) !important;
}

/* Outline Dark */
.es-btn-outline-dark {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-dark) !important;
    border: 2px solid var(--mybuttons-dark) !important;
    box-shadow: 0 1px 2px var(--mybuttons-dark-outline-shadow) !important;
}

.es-btn-outline-dark:hover {
    background-color: var(--mybuttons-dark) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-dark-shadow-hover) !important;
}

/* ========================= */
/* SUCCESS VARIANTS          */
/* ========================= */

/* Solid Success */
.es-btn-success {
    background-color: var(--mybuttons-success) !important; /* green-500 */
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-success-shadow) !important;
}
.es-btn-success:hover {
    background-color: var(--mybuttons-success-hover) !important; /* green-600 */
    box-shadow: 0 4px 8px var(--mybuttons-success-shadow-hover) !important;
}

/* Outline Success */
.es-btn-outline-success {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-success) !important;
    border: 2px solid var(--mybuttons-success) !important;
    box-shadow: 0 1px 2px var(--mybuttons-success-outline-shadow) !important;
}
.es-btn-outline-success:hover {
    background-color: var(--mybuttons-success) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-success-shadow-hover) !important;
}


/* ========================= */
/* DARKBLUE VARIANTS         */
/* ========================= */

/* Solid DarkBlue */
.es-btn-darkblue {
    background-color: var(--mybuttons-darkblue) !important; /* bootstrap blue */
    color: var(--mybuttons-text-white) !important;
    border: none !important;
    box-shadow: 0 2px 4px var(--mybuttons-darkblue-shadow) !important;
}
.es-btn-darkblue:hover {
    background-color: var(--mybuttons-darkblue-hover) !important;
    box-shadow: 0 4px 8px var(--mybuttons-darkblue-shadow-hover) !important;
}

/* Outline DarkBlue */
.es-btn-outline-darkblue {
    background-color: var(--mybuttons-text-transparent) !important;
    color: var(--mybuttons-darkblue) !important;
    border: 2px solid var(--mybuttons-darkblue) !important;
    box-shadow: 0 1px 2px var(--mybuttons-darkblue-outline-shadow) !important;
}
.es-btn-outline-darkblue:hover {
    background-color: var(--mybuttons-darkblue) !important;
    color: var(--mybuttons-text-white) !important;
    box-shadow: 0 4px 8px var(--mybuttons-darkblue-shadow-hover) !important;
}



 /* Dark Blue Variant (like Bootstrap) */
.es-btn-indigo {
    background-color: var(--mybuttons-indigo);
    box-shadow: 0 2px 4px var(--mybuttons-indigo-shadow);
}

.es-btn-indigo:hover {
    background-color: var(--mybuttons-indigo-hover);
    box-shadow: 0 4px 8px var(--mybuttons-indigo-shadow-hover);
}


.es-btn-outline-indigo {
    color: var(--mybuttons-indigo);
    border-color: var(--mybuttons-indigo);
}

.es-btn-outline-indigo:hover {
    background-color: var(--mybuttons-indigo);
    color: var(--mybuttons-text-white);
}

/* Sizes */

.es-btn-xs {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
}

.es-btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.es-btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1.125rem !important;
}

.es-btn-xl {
    padding: 1rem 2rem !important;
    font-size: 1.25rem !important;
}

.es-btn-submit {
    display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.3rem;
  text-decoration: none !important;
  border-radius: 6px !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
    background-color: var(--mybuttons-gold) !important;
  border: 2px solid var(--mybuttons-gold) !important;
  color: var(--mybuttons-text-white) !important;
  border: none !important;
  box-shadow: 0 2px 4px var(--mybuttons-gold-shadow) !important;
  padding: 0.7rem 3rem !important;
  font-size: 1.3rem !important;
  margin-left: 0.7rem;
}


.es-btn-close {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  xpadding: 5px 10px;
  color: #555;
  font-size: 13px;
  cursor: pointer;
}

.es-btn-submit:hover {
    background-color: var(--mybuttons-gold-hover) !important;  /* darker shade */
    box-shadow: 0 4px 8px var(--mybuttons-gold-shadow-hover) !important;
}

.es-no-border{
    margin: 2px !important;
    xpadding: 2px !important;
    border: 1px #fefefe !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    xopacity: 0.9 !important;
    font-weight: 500 !important;
}


.es-btn-m-1 {
  margin: 0px 1px 10px 5px !important; /* top, right, bottom, left */
}

.es-btn-m-2 {
  margin: 20px 0px 20px 5px !important; /* top, right, bottom, left */
}