/* 
 * Modern UI Button Styles
 * Compatible with Bootstrap 3.3.7
 * All styles are prefixed with 'modern-ui'
 * Inspired by Material Design
 */

/* Base Button Style */
.modern-ui-btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.modern-ui-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.modern-ui-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.modern-ui-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Button Sizes */
.modern-ui-btn-xs {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 0.15rem;
}

.modern-ui-btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.modern-ui-btn-md {
  /* Base size - already defined in .modern-ui-btn */
}

.modern-ui-btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.modern-ui-btn-xl {
  padding: 1rem 2rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.35rem;
}

/* Button Shapes */
.modern-ui-btn-pill {
  border-radius: 50rem;
}

.modern-ui-btn-rounded {
  border-radius: 0.5rem;
}

.modern-ui-btn-sharp {
  border-radius: 0;
}

/* Button Colors/Themes */
.modern-ui-btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.modern-ui-btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.modern-ui-btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.modern-ui-btn-secondary:hover {
  background-color: #5c636a;
  border-color: #565e64;
}

.modern-ui-btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.modern-ui-btn-success:hover {
  background-color: #157347;
  border-color: #146c43;
}

.modern-ui-btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.modern-ui-btn-danger:hover {
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.modern-ui-btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.modern-ui-btn-warning:hover {
  background-color: #ffca2c;
  border-color: #ffc720;
}

.modern-ui-btn-info {
  color: #fff;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.modern-ui-btn-info:hover {
  background-color: #31d2f2;
  border-color: #25cff2;
}

.modern-ui-btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.modern-ui-btn-light:hover {
  background-color: #f9fafb;
  border-color: #f9fafb;
}

.modern-ui-btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.modern-ui-btn-dark:hover {
  background-color: #1c1f23;
  border-color: #1a1e21;
}

/* Tonal/Label Buttons - Inspired by Materialize */
.modern-ui-btn-tonal-primary {
  color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-primary:hover {
  background-color: rgba(13, 110, 253, 0.2);
}

.modern-ui-btn-tonal-secondary {
  color: #6c757d;
  background-color: rgba(108, 117, 125, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-secondary:hover {
  background-color: rgba(108, 117, 125, 0.2);
}

.modern-ui-btn-tonal-success {
  color: #198754;
  background-color: rgba(25, 135, 84, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-success:hover {
  background-color: rgba(25, 135, 84, 0.2);
}

.modern-ui-btn-tonal-danger {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-danger:hover {
  background-color: rgba(220, 53, 69, 0.2);
}

.modern-ui-btn-tonal-warning {
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-warning:hover {
  background-color: rgba(255, 193, 7, 0.2);
}

.modern-ui-btn-tonal-info {
  color: #0dcaf0;
  background-color: rgba(13, 202, 240, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-info:hover {
  background-color: rgba(13, 202, 240, 0.2);
}

.modern-ui-btn-tonal-light {
  color: #f8f9fa;
  background-color: rgba(248, 249, 250, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-light:hover {
  background-color: rgba(248, 249, 250, 0.2);
}

.modern-ui-btn-tonal-dark {
  color: #212529;
  background-color: rgba(33, 37, 41, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-dark:hover {
  background-color: rgba(33, 37, 41, 0.2);
}

/* Outline Buttons */
.modern-ui-btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
  background-color: transparent;
}

.modern-ui-btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
}

.modern-ui-btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
  background-color: transparent;
}

.modern-ui-btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
}

.modern-ui-btn-outline-success {
  color: #198754;
  border-color: #198754;
  background-color: transparent;
}

.modern-ui-btn-outline-success:hover {
  color: #fff;
  background-color: #198754;
}

.modern-ui-btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
  background-color: transparent;
}

.modern-ui-btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
}

.modern-ui-btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
  background-color: transparent;
}

.modern-ui-btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
}

.modern-ui-btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0;
  background-color: transparent;
}

.modern-ui-btn-outline-info:hover {
  color: #fff;
  background-color: #0dcaf0;
}

.modern-ui-btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
  background-color: transparent;
}

.modern-ui-btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
}

.modern-ui-btn-outline-dark {
  color: #212529;
  border-color: #212529;
  background-color: transparent;
}

.modern-ui-btn-outline-dark:hover {
  color: #fff;
  background-color: #212529;
}

/* Text Buttons - Inspired by Materialize */
.modern-ui-btn-text-primary {
  color: #0d6efd;
  background-color: transparent;
  border-color: transparent;
  padding: 0.375rem 0.75rem;
}

.modern-ui-btn-text-primary:hover {
  background-color: rgba(13, 110, 253, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-secondary {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
  padding: 0.375rem 0.75rem;
}

.modern-ui-btn-text-secondary:hover {
  background-color: rgba(108, 117, 125, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-success {
  color: #198754;
  background-color: transparent;
  border-color: transparent;
  padding: 0.375rem 0.75rem;
}

.modern-ui-btn-text-success:hover {
  background-color: rgba(25, 135, 84, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-danger {
  color: #dc3545;
  background-color: transparent;
  border-color: transparent;
  padding: 0.375rem 0.75rem;
}

.modern-ui-btn-text-danger:hover {
  background-color: rgba(220, 53, 69, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-warning {
  color: #ffc107;
  background-color: transparent;
  border-color: transparent;
  padding: 0.375rem 0.75rem;
}

.modern-ui-btn-text-warning:hover {
  background-color: rgba(255, 193, 7, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-info {
  color: #0dcaf0;
  background-color: transparent;
  border-color: transparent;
  padding: 0.375rem 0.75rem;
}

.modern-ui-btn-text-info:hover {
  background-color: rgba(13, 202, 240, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-dark {
  color: #212529;
  background-color: transparent;
  border-color: transparent;
  padding: 0.375rem 0.75rem;
}

.modern-ui-btn-text-dark:hover {
  background-color: rgba(33, 37, 41, 0.1);
  box-shadow: none;
  transform: none;
}

/* Button with Icons */
.modern-ui-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modern-ui-btn-icon i,
.modern-ui-btn-icon svg,
.modern-ui-btn-icon img,
.modern-ui-btn-icon span {
  margin-right: 0.5rem;
}

.modern-ui-btn-icon-right i,
.modern-ui-btn-icon-right svg,
.modern-ui-btn-icon-right img,
.modern-ui-btn-icon-right span {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Icon-only Button */
.modern-ui-btn-icon-only {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modern-ui-btn-icon-only.modern-ui-btn-xs {
  width: 1.5rem;
  height: 1.5rem;
}

.modern-ui-btn-icon-only.modern-ui-btn-sm {
  width: 2rem;
  height: 2rem;
}

.modern-ui-btn-icon-only.modern-ui-btn-lg {
  width: 3rem;
  height: 3rem;
}

.modern-ui-btn-icon-only.modern-ui-btn-xl {
  width: 3.5rem;
  height: 3.5rem;
}

/* Floating Action Button (FAB) */
.modern-ui-btn-floating {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}

.modern-ui-btn-floating:hover {
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

.modern-ui-btn-floating.modern-ui-btn-sm {
  width: 2.5rem;
  height: 2.5rem;
}

.modern-ui-btn-floating.modern-ui-btn-lg {
  width: 4.5rem;
  height: 4.5rem;
}

/* Extended FAB */
.modern-ui-btn-floating-extended {
  height: 3.5rem;
  border-radius: 1.75rem;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}

.modern-ui-btn-floating-extended:hover {
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

.modern-ui-btn-floating-extended.modern-ui-btn-sm {
  height: 2.5rem;
  border-radius: 1.25rem;
  padding: 0 1rem;
}

.modern-ui-btn-floating-extended.modern-ui-btn-lg {
  height: 4.5rem;
  border-radius: 2.25rem;
  padding: 0 2rem;
}

.modern-ui-btn-floating-extended i,
.modern-ui-btn-floating-extended svg {
  margin-right: 0.75rem;
}

.modern-ui-btn-floating-extended.modern-ui-btn-icon-right i,
.modern-ui-btn-floating-extended.modern-ui-btn-icon-right svg {
  margin-right: 0;
  margin-left: 0.75rem;
}

/* Social Buttons */
.modern-ui-btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modern-ui-btn-social i,
.modern-ui-btn-social svg {
  margin-right: 0.5rem;
}

/* Social button colors */
.modern-ui-btn-facebook {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
}

.modern-ui-btn-facebook:hover {
  background-color: #344e86;
  border-color: #344e86;
}

.modern-ui-btn-twitter {
  color: #fff;
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.modern-ui-btn-twitter:hover {
  background-color: #0d95e8;
  border-color: #0d95e8;
}

.modern-ui-btn-google {
  color: #fff;
  background-color: #dd4b39;
  border-color: #dd4b39;
}

.modern-ui-btn-google:hover {
  background-color: #c23321;
  border-color: #c23321;
}

.modern-ui-btn-linkedin {
  color: #fff;
  background-color: #0077b5;
  border-color: #0077b5;
}

.modern-ui-btn-linkedin:hover {
  background-color: #005e93;
  border-color: #005e93;
}

.modern-ui-btn-github {
  color: #fff;
  background-color: #333;
  border-color: #333;
}

.modern-ui-btn-github:hover {
  background-color: #242424;
  border-color: #242424;
}

.modern-ui-btn-instagram {
  color: #fff;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: #e1306c;
}

.modern-ui-btn-instagram:hover {
  background: linear-gradient(45deg, #e68a2d 0%, #d35b35 25%, #c9233b 50%, #b61f5c 75%, #a81577 100%);
}

.modern-ui-btn-youtube {
  color: #fff;
  background-color: #ff0000;
  border-color: #ff0000;
}

.modern-ui-btn-youtube:hover {
  background-color: #e60000;
  border-color: #e60000;
}

/* Tonal/Label social buttons */
.modern-ui-btn-tonal-facebook {
  color: #3b5998;
  background-color: rgba(59, 89, 152, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-facebook:hover {
  background-color: rgba(59, 89, 152, 0.2);
}

.modern-ui-btn-tonal-twitter {
  color: #1da1f2;
  background-color: rgba(29, 161, 242, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-twitter:hover {
  background-color: rgba(29, 161, 242, 0.2);
}

.modern-ui-btn-tonal-google {
  color: #dd4b39;
  background-color: rgba(221, 75, 57, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-google:hover {
  background-color: rgba(221, 75, 57, 0.2);
}

.modern-ui-btn-tonal-linkedin {
  color: #0077b5;
  background-color: rgba(0, 119, 181, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-linkedin:hover {
  background-color: rgba(0, 119, 181, 0.2);
}

.modern-ui-btn-tonal-github {
  color: #333;
  background-color: rgba(51, 51, 51, 0.12);
  border-color: transparent;
}

.modern-ui-btn-tonal-github:hover {
  background-color: rgba(51, 51, 51, 0.2);
}

/* Text social buttons */
.modern-ui-btn-text-facebook {
  color: #3b5998;
  background-color: transparent;
  border-color: transparent;
}

.modern-ui-btn-text-facebook:hover {
  background-color: rgba(59, 89, 152, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-twitter {
  color: #1da1f2;
  background-color: transparent;
  border-color: transparent;
}

.modern-ui-btn-text-twitter:hover {
  background-color: rgba(29, 161, 242, 0.1);
  box-shadow: none;
  transform: none;
}

.modern-ui-btn-text-linkedin {
  color: #0077b5;
  background-color: transparent;
  border-color: transparent;
}

.modern-ui-btn-text-linkedin:hover {
  background-color: rgba(0, 119, 181, 0.1);
  box-shadow: none;
  transform: none;
}

/* Block Button (full width) */
.modern-ui-btn-block {
  display: block;
  width: 100%;
}

/* Special Effect Buttons */
.modern-ui-btn-elevated {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modern-ui-btn-elevated:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.modern-ui-btn-ripple {
  position: relative;
  overflow: hidden;
}

.modern-ui-btn-ripple::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.modern-ui-btn-ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* Disabled State */
.modern-ui-btn:disabled,
.modern-ui-btn.disabled {
  opacity: 0.65;
  pointer-events: none;
  cursor: not-allowed;
}

/* Button Group */
.modern-ui-btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.modern-ui-btn-group > .modern-ui-btn {
  position: relative;
  flex: 1 1 auto;
}

.modern-ui-btn-group > .modern-ui-btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.modern-ui-btn-group > .modern-ui-btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Button Toolbar */
.modern-ui-btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
}

.modern-ui-btn-toolbar .modern-ui-btn-group {
  margin-right: 0.5rem;
}

/* Loading Button */
.modern-ui-btn-loading {
  color: transparent !important;
  position: relative;
  pointer-events: none;
}

.modern-ui-btn-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: modern-ui-btn-loading-spin 0.8s linear infinite;
}

@keyframes modern-ui-btn-loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Toggle Button */
.modern-ui-btn-toggle {
  position: relative;
}

.modern-ui-btn-toggle.active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Checkbox & Radio buttons */
.modern-ui-btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.modern-ui-btn-check:checked + .modern-ui-btn {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.modern-ui-btn-check:focus + .modern-ui-btn {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.modern-ui-btn-check:checked + .modern-ui-btn-outline-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.modern-ui-btn-check:checked + .modern-ui-btn-tonal-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Enhanced Checkbox Buttons */
.modern-ui-checkbox,
.modern-ui-radio {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  cursor: pointer;
  font-weight: normal;
}

.modern-ui-checkbox input[type="checkbox"],
.modern-ui-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Checkbox Style */
.modern-ui-checkbox-mark {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 2px solid #adb5bd;
  border-radius: 3px;
  margin-right: 8px;
  transition: all 0.2s ease-in-out;
}

.modern-ui-checkbox input:checked ~ .modern-ui-checkbox-mark {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.modern-ui-checkbox-mark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.modern-ui-checkbox input:checked ~ .modern-ui-checkbox-mark:after {
  display: block;
}

/* Checkbox Colors */
.modern-ui-checkbox-primary input:checked ~ .modern-ui-checkbox-mark {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.modern-ui-checkbox-secondary input:checked ~ .modern-ui-checkbox-mark {
  background-color: #6c757d;
  border-color: #6c757d;
}

.modern-ui-checkbox-success input:checked ~ .modern-ui-checkbox-mark {
  background-color: #198754;
  border-color: #198754;
}

.modern-ui-checkbox-danger input:checked ~ .modern-ui-checkbox-mark {
  background-color: #dc3545;
  border-color: #dc3545;
}

.modern-ui-checkbox-warning input:checked ~ .modern-ui-checkbox-mark {
  background-color: #ffc107;
  border-color: #ffc107;
}

.modern-ui-checkbox-info input:checked ~ .modern-ui-checkbox-mark {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

/* Radio Style */
.modern-ui-radio-mark {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  margin-right: 8px;
  transition: all 0.2s ease-in-out;
}

.modern-ui-radio input:checked ~ .modern-ui-radio-mark {
  border-color: #0d6efd;
}

.modern-ui-radio-mark:after {
  content: "";
  position: absolute;
  display: none;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0d6efd;
}

.modern-ui-radio input:checked ~ .modern-ui-radio-mark:after {
  display: block;
}

/* Radio Colors */
.modern-ui-radio-primary input:checked ~ .modern-ui-radio-mark {
  border-color: #0d6efd;
}
.modern-ui-radio-primary input:checked ~ .modern-ui-radio-mark:after {
  background-color: #0d6efd;
}

.modern-ui-radio-secondary input:checked ~ .modern-ui-radio-mark {
  border-color: #6c757d;
}
.modern-ui-radio-secondary input:checked ~ .modern-ui-radio-mark:after {
  background-color: #6c757d;
}

.modern-ui-radio-success input:checked ~ .modern-ui-radio-mark {
  border-color: #198754;
}
.modern-ui-radio-success input:checked ~ .modern-ui-radio-mark:after {
  background-color: #198754;
}

.modern-ui-radio-danger input:checked ~ .modern-ui-radio-mark {
  border-color: #dc3545;
}
.modern-ui-radio-danger input:checked ~ .modern-ui-radio-mark:after {
  background-color: #dc3545;
}

.modern-ui-radio-warning input:checked ~ .modern-ui-radio-mark {
  border-color: #ffc107;
}
.modern-ui-radio-warning input:checked ~ .modern-ui-radio-mark:after {
  background-color: #ffc107;
}

.modern-ui-radio-info input:checked ~ .modern-ui-radio-mark {
  border-color: #0dcaf0;
}
.modern-ui-radio-info input:checked ~ .modern-ui-radio-mark:after {
  background-color: #0dcaf0;
}

/* Switch Style */
.modern-ui-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  margin-right: 8px;
}

.modern-ui-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.modern-ui-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.modern-ui-switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.modern-ui-switch input:checked + .modern-ui-switch-slider {
  background-color: #0d6efd;
}

.modern-ui-switch input:focus + .modern-ui-switch-slider {
  box-shadow: 0 0 1px #0d6efd;
}

.modern-ui-switch input:checked + .modern-ui-switch-slider:before {
  transform: translateX(16px);
}

/* Switch Colors */
.modern-ui-switch-primary input:checked + .modern-ui-switch-slider {
  background-color: #0d6efd;
}

.modern-ui-switch-secondary input:checked + .modern-ui-switch-slider {
  background-color: #6c757d;
}

.modern-ui-switch-success input:checked + .modern-ui-switch-slider {
  background-color: #198754;
}

.modern-ui-switch-danger input:checked + .modern-ui-switch-slider {
  background-color: #dc3545;
}

.modern-ui-switch-warning input:checked + .modern-ui-switch-slider {
  background-color: #ffc107;
}

.modern-ui-switch-info input:checked + .modern-ui-switch-slider {
  background-color: #0dcaf0;
}

/* Button Checkbox/Radio Group */
.modern-ui-btn-group-check {
  display: inline-flex;
  overflow: hidden;
  border-radius: 0.25rem;
}

.modern-ui-btn-group-check label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid #ced4da;
  margin: 0;
  transition: all 0.2s ease-in-out;
}

.modern-ui-btn-group-check label:not(:first-of-type) {
  margin-left: -1px;
}

.modern-ui-btn-group-check label:first-of-type {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.modern-ui-btn-group-check label:last-of-type {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.modern-ui-btn-group-check input[type="checkbox"]:checked + label,
.modern-ui-btn-group-check input[type="radio"]:checked + label {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

/* Button Group Checkbox/Radio Colors */
.modern-ui-btn-group-check-primary input:checked + label {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.modern-ui-btn-group-check-secondary input:checked + label {
  background-color: #6c757d;
  border-color: #6c757d;
}

.modern-ui-btn-group-check-success input:checked + label {
  background-color: #198754;
  border-color: #198754;
}

.modern-ui-btn-group-check-danger input:checked + label {
  background-color: #dc3545;
  border-color: #dc3545;
}

.modern-ui-btn-group-check-warning input:checked + label {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}

.modern-ui-btn-group-check-info input:checked + label {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

/* Toggle Styles */
.modern-ui-btn-toggle {
  position: relative;
}

.modern-ui-btn-toggle.active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Dropdown buttons */
.modern-ui-dropdown {
  position: relative;
  display: inline-block;
}

.modern-ui-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

.modern-ui-dropdown-menu.show {
  display: block;
}

.modern-ui-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  text-decoration: none;
}

.modern-ui-dropdown-item:hover,
.modern-ui-dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

.modern-ui-dropdown-item.active,
.modern-ui-dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #0d6efd;
}