:root {
   /* Main color variants */
   --main: #d70000;
   --main-light: lightcoral;
   --main-dark: darkred;
   
   /* Contrast color variants */
   --contrast: blue;
   --contrast-light: lightblue;
   --contrast-dark: darkblue;
   
   /* Grey scale */
   --grey-100: #f8f9fa;
   --grey-200: #e9ecef;
   --grey-300: #dee2e6;
   --grey-400: #ced4da;
   --grey-500: #adb5bd;
   --grey-600: #6c757d;
   --grey-700: #495057;
   --grey-800: #343a40;
   --grey-900: #212529;
   
   /* Status colors */
   --success: #1fab2b;
   --warning: #f1c40f;
   --error: #e74c3c;
}

@keyframes rotateOnce {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
}

body, html {
   margin: 0;
   padding: 0;
}

.btn {
   border: 1px solid var(--main-dark);
   padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
   min-width: fit-content;
 }

.btn-primary {
  background-color: var(--main-dark);
  color: white;
}

.btn-secondary {
  background-color: white;
  color: var(--main-dark) !important;
}

.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.icon-rotating {
  animation: rotateOnce 0.8s ease-in-out;
}

[bind-function]:not(.lb-initialized) {
   visibility: hidden;
 }