funuicss 3.6.15 → 3.6.17

package/css/fun.css

@@ -194,7 +194,7 @@
   --borderWidth:0.1rem;
   --border: var(--borderWidth) solid var(--borderColor);
   --inputBorder:0.12rem;
-  --input_outline_size:0.127rem;
+  --input_outline_size:0.1rem;
   --borderRadius:1rem;
   --borderRadiusSmall:0.5rem;
   --borderRadiusMax:2rem;
@@ -220,7 +220,6 @@
 
 
 
-
 :root {
   /* BUTTON VARIABLES */
   --btn-font-size: var(--text-base);
@@ -2003,141 +2002,563 @@ border-radius: var(--borderRadius);
 }
 
 
+/*inputs*/
 /*inputs*/
 .input {
   padding: var(--inputPadding);
   outline: none;
   border: var(--inputBorder) transparent;
-  border-bottom: var(--inputBorder) solid  var(--borderColor);
-  color: var(--text-color); 
+  border-bottom: var(--inputBorder) solid var(--borderColor);
+  color: var(--text-color);
   font-size: var(--minifiedFontSize);
   background-color: var(--page-bg);
   font-weight: 500;
+  transition: all 0.2s ease;
 }
+
 .smallInput {
   font-size: var(--smallFont);
 }
 
-.fileInput{
+/* Input wrapper and container */
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
   position: relative;
-  width: fit-content !important;
-  cursor: pointer;
 }
-.filedInput{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: fit-content;
-  max-width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer !important;
-  z-index: 2;
+
+.input-wrapper.full-width {
+  width: 100%;
 }
 
+.input-container-with-label {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
 
-._upload_container {
-  border: 0.17rem dashed var(--borderColor);	
-  border-radius: 16px;
-  padding: var(--space-5);
-  text-align: center;
-  transition: border-color 0.3s ease;
-  cursor: pointer;
-  margin: auto;
+/* Floating Label Styles */
+.floating-label {
+  position: absolute;
+  left: 0.8rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--minifiedFontSize);
   color: var(--text-color);
+  opacity: 0.6;
+  pointer-events: none;
+  transition: all 0.2s ease;
+  background-color: transparent;
+  padding: 0 0.25rem;
+  z-index: 1;
+  font-weight: 500;
 }
 
-._upload_container:hover {
-  border-color: var(--primary);
-  background-color: var(--lighter);
-  /* color: var(--primary800); */
+.floating-label.active {
+  top: 0.35rem;
+  left: 0.8rem;
+  font-size: 0.625rem;
+  opacity: 1;
+  background-color: transparent;
+  color: var(--primary);
+  font-weight: 600;
+  transform: translateY(0);
+  line-height: 1;
+}
+.floating-label.label-left{left: 2.5rem ;}
+/* Label status colors */
+.floating-label.label-success.active {
+  color: var(--success);
 }
 
-._upload_label {
-  display: block;
-  cursor: pointer;
+.floating-label.label-warning.active {
+  color: var(--warning);
 }
 
-._upload_icon {
-  font-size: 2.4rem;
-  color: var(--primary);
-  margin-bottom: 0.5rem;
+.floating-label.label-danger.active {
+  color: var(--danger);
 }
 
-._upload_input {
-  display: none;
+.floating-label.label-info.active {
+  color: var(--info, var(--primary));
 }
 
-.input.success-input ,
-.warning-input,
-.input.danger-input:focus
-{
-outline: none !important;
+/* For bordered inputs, adjust label positioning */
+.input.borderedInput ~ .floating-label,
+.input.borderedInput + .floating-label {
+  left: 0.8rem;
+}
+
+.input.borderedInput ~ .floating-label.active,
+.input.borderedInput + .floating-label.active {
+  left: 0.8rem;
+  top: 0.35rem;
+  background-color: transparent;
+}
+
+/* For textarea */
+textarea ~ .floating-label {
+  top: 1.2rem;
+}
+
+textarea ~ .floating-label.active {
+  top: 0.35rem;
 }
-input , select {height: var(--inputButtonHeight);   border-radius: var(--radius);}
-textarea{border-radius: var(--radius) !important; height: fit-content !important;}
-.input.flat{border-radius: 0 !important;}
+
+/* Status Input Styles */
+.input.success-input,
+.input.warning-input,
+.input.danger-input,
+.input.info-input {
+  outline: none !important;
+}
+
+.input.success-input {
+  border-bottom-color: var(--success);
+}
+
+.input.warning-input {
+  border-bottom-color: var(--warning);
+}
+
+.input.danger-input {
+  border-bottom-color: var(--danger);
+}
+
+.input.info-input {
+  border-bottom-color: var(--info, var(--primary));
+}
+
+/* Input dimensions */
+input,
+select {
+  height: var(--inputButtonHeight);
+  border-radius: var(--radius);
+  padding-top: 1.2rem;
+  padding-bottom: 0.4rem;
+}
+
+/* When no label, use normal padding */
+input:not(:placeholder-shown),
+input:focus {
+  padding-top: 1.2rem;
+  padding-bottom: 0.4rem;
+}
+
+/* Reset padding when there's no label */
+.input-container-with-label:not(:has(.floating-label)) input,
+.input-container-with-label:not(:has(.floating-label)) select {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+}
+
+textarea {
+  border-radius: var(--radius) !important;
+  height: fit-content !important;
+  min-height: 4rem;
+  padding-top: 1.4rem;
+  padding-bottom: 0.6rem;
+}
+
+/* Reset padding when there's no label for textarea */
+.input-container-with-label:not(:has(.floating-label)) textarea {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+}
+
+.input.flat {
+  border-radius: 0 !important;
+}
+
+/* Focus states */
 .input:focus {
   border-bottom: var(--inputBorder) solid var(--primary);
 }
+
+.input.success-input:focus {
+  border-bottom-color: var(--success);
+}
+
+.input.warning-input:focus {
+  border-bottom-color: var(--warning);
+}
+
+.input.danger-input:focus {
+  border-bottom-color: var(--danger);
+}
+
+.input.info-input:focus {
+  border-bottom-color: var(--info, var(--primary));
+}
+
 select:focus {
   color: var(--text-color) !important;
   background-color: var(--raiseThemes) !important;
-  backdrop-filter: var(--raiseBackdrop) !important; 
+  backdrop-filter: var(--raiseBackdrop) !important;
   outline: none;
 }
 
-.input.borderedInput ,.input.borderless{
-  padding: 0.6rem 0.8rem; 
+/* Bordered Input Styles */
+.input.borderedInput,
+.input.borderless {
+  padding: 0.6rem 0.8rem;
 }
+
 .input.borderedInput {
   border: var(--border);
-  transition: 0.1s linear;
-  padding: 0.6rem 0.5rem;
-}
-.borderless{border: none !important;outline: none !important;
-background-color: var(--light);
-}
-.borderless:focus{border: none !important;outline: none !important;
-background-color: rgba(var(--borderRgb), 0.3);
+  transition: all 0.2s ease;
+  padding: 0.6rem 0.8rem;
 }
 
+.input.borderedInput:focus {
+  outline: var(--input_outline_size) solid var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
+  border-color: var(--primary);
+}
 
- .success-input.borderedInput {
+/* Status bordered inputs */
+.input.success-input.borderedInput {
   border: var(--inputBorder) solid var(--success) !important;
+}
+
+.input.success-input.borderedInput:focus {
   outline: var(--input_outline_size) solid var(--success);
+  box-shadow: 0 0 0 3px rgba(var(--success-rgb, 34, 197, 94), 0.1);
 }
-.input.warning-input.borderedInput{
+
+.input.warning-input.borderedInput {
   border: var(--inputBorder) solid var(--warning) !important;
+}
+
+.input.warning-input.borderedInput:focus {
   outline: var(--input_outline_size) solid var(--warning);
+  box-shadow: 0 0 0 3px rgba(var(--warning-rgb, 234, 179, 8), 0.1);
 }
-.input.danger-input.borderedInput{
+
+.input.danger-input.borderedInput {
   border: var(--inputBorder) solid var(--danger) !important;
+}
+
+.input.danger-input.borderedInput:focus {
   outline: var(--input_outline_size) solid var(--danger);
+  box-shadow: 0 0 0 3px rgba(var(--danger-rgb, 239, 68, 68), 0.1);
 }
 
+.input.info-input.borderedInput {
+  border: var(--inputBorder) solid var(--info, var(--primary)) !important;
+}
 
-.input.borderedInput:focus {
-  outline: var(--input_outline_size) solid var(--primary);
-  box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
+.input.info-input.borderedInput:focus {
+  outline: var(--input_outline_size) solid var(--info, var(--primary));
+  box-shadow: 0 0 0 3px rgba(var(--info-rgb, var(--borderRgb)), 0.1);
+}
+
+/* Borderless styles */
+.input.borderless {
+  border: none !important;
+  outline: none !important;
+  background-color: var(--light);
 }
 
-.input.borderless {border: none !important;}
 .input.borderless:focus {
-  border: none;
+  border: none !important;
+  outline: none !important;
+  background-color: rgba(var(--borderRgb), 0.3);
 }
+
+/* No outline */
 .input.no-outline {
   outline: none;
 }
+
+/* Full width */
 .full-width {
   width: 100%;
 }
-.input.round,.input.rounded {
+
+/* Rounded inputs */
+.input.round,
+.input.rounded {
   border-radius: 100rem !important;
   padding: var(--inputRoundedPadding);
+}
+
+.input.rounded ~ .floating-label {
+  left: 1.2rem;
+}
+
+.input.rounded ~ .floating-label.active {
+  left: 1.2rem;
+  top: 0.35rem;
+}
+
+/* Helper Text Styles */
+.input-helper-text {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--smallFont);
+  margin-top: 0.25rem;
+  padding-left: 0.25rem;
+  color: var(--text-color);
+  opacity: 0.7;
+  animation: slideDown 0.2s ease;
+}
 
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  to {
+    opacity: 0.7;
+    transform: translateY(0);
+  }
 }
 
+.helper-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Status helper text colors */
+.input-helper-text.helper-success {
+  color: var(--success);
+  opacity: 1;
+}
+
+.input-helper-text.helper-warning {
+  color: var(--warning);
+  opacity: 1;
+}
+
+.input-helper-text.helper-danger {
+  color: var(--danger);
+  opacity: 1;
+}
+
+.input-helper-text.helper-info {
+  color: var(--info, var(--primary));
+  opacity: 1;
+}
+
+/* Icon container adjustments for labeled inputs */
+.icon-container {
+  position: relative;
+  width: 100%;
+}
+
+.icon-container > .input,
+.icon-container > input,
+.icon-container > select,
+.icon-container > textarea {
+  width: 100%;
+}
+
+.leftIcon,
+.rightIcon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 2.5rem;
+  padding: 1rem;
+  z-index: 2;
+  pointer-events: auto;
+  top: 0;
+  cursor: default;
+}
+
+.leftIcon {
+  left: 0;
+}
+
+.rightIcon {
+  right: 0;
+}
+
+/* Make icons clickable when they have interactive elements */
+.leftIcon > *,
+.rightIcon > * {
+  max-width: 1.25rem;
+  max-height: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+/* Inherit cursor from parent elements (for .pointer class) */
+.leftIcon .pointer,
+.rightIcon .pointer,
+.leftIcon [class*="pointer"],
+.rightIcon [class*="pointer"] {
+  cursor: pointer;
+}
+
+/* If icon is an SVG, apply size directly */
+.leftIcon svg,
+.rightIcon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: auto;
+}
+
+/* Adjust padding for inputs with icons and labels */
+.icon-container.has-left-icon > .input,
+.icon-container.has-left-icon > input,
+.icon-container.has-left-icon > select {
+  padding-left: 2.75rem;
+  padding-top: 1.2rem;
+  padding-bottom: 0.4rem;
+}
+
+.icon-container:has(.rightIcon) > .input,
+.icon-container:has(.rightIcon) > input,
+.icon-container:has(.rightIcon) > select {
+  padding-right: 2.75rem;
+  padding-top: 1.2rem;
+  padding-bottom: 0.4rem;
+}
+
+/* Reset padding when no label */
+.input-container-with-label:not(:has(.floating-label)) .icon-container.has-left-icon > .input,
+.input-container-with-label:not(:has(.floating-label)) .icon-container.has-left-icon > input,
+.input-container-with-label:not(:has(.floating-label)) .icon-container.has-left-icon > select {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+  padding-left: 2.75rem;
+}
+
+.input-container-with-label:not(:has(.floating-label)) .icon-container:has(.rightIcon) > .input,
+.input-container-with-label:not(:has(.floating-label)) .icon-container:has(.rightIcon) > input,
+.input-container-with-label:not(:has(.floating-label)) .icon-container:has(.rightIcon) > select {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+  padding-right: 2.75rem;
+}
+
+/* Label positioning with icons */
+.icon-container .floating-label {
+  left: 0.8rem;
+}
+
+/* When input has left icon, move the label to match where typing starts */
+.icon-container.has-left-icon .floating-label {
+  left: 3rem;
+  z-index: 3;
+}
+
+/* When active, bring label back to normal position (above the icon) */
+.icon-container .floating-label.active {
+  left: 0.8rem;
+  top: 0.35rem;
+}
+
+.icon-container.has-left-icon .floating-label.active {
+  left: 0.8rem;
+  top: 0.35rem;
+}
+
+/* Select specific adjustments */
+select.input {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.8rem center;
+  padding-right: 2.5rem;
+}
+
+/* Disabled state */
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--light);
+}
+
+.input:disabled ~ .floating-label {
+  opacity: 0.4;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .floating-label {
+    font-size: 0.875rem;
+  }
+  
+  .floating-label.active {
+    font-size: 0.563rem;
+    top: 0.3rem;
+  }
+  
+  input,
+  select {
+    padding-top: 1.1rem;
+    padding-bottom: 0.35rem;
+  }
+  
+  textarea {
+    padding-top: 1.3rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
+.fileInput{
+  position: relative;
+  width: fit-content !important;
+  cursor: pointer;
+}
+.filedInput{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: fit-content;
+  max-width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer !important;
+  z-index: 2;
+}
+
+
+._upload_container {
+  border: 0.17rem dashed var(--borderColor);	
+  border-radius: 16px;
+  padding: var(--space-5);
+  text-align: center;
+  transition: border-color 0.3s ease;
+  cursor: pointer;
+  margin: auto;
+  color: var(--text-color);
+}
+
+._upload_container:hover {
+  border-color: var(--primary);
+  background-color: var(--lighter);
+  /* color: var(--primary800); */
+}
+
+._upload_label {
+  display: block;
+  cursor: pointer;
+}
+
+._upload_icon {
+  font-size: 2.4rem;
+  color: var(--primary);
+  margin-bottom: 0.5rem;
+}
+
+._upload_input {
+  display: none;
+}
+
+
 .custom-select {
   position: relative; 
   width: 100%; 
@@ -4319,11 +4740,12 @@ background-color: rgba(0, 0, 0, 0.2);
   
   .range-slider {
     width: 100%;
-    height: 6px;
+    height: 6px !important;
     appearance: none;
     background: var(--lighter);
     border-radius: 5rem;
     outline: none;
+    padding: 0 !important;
   }
   
   .range-slider::-webkit-slider-thumb {
@@ -5059,182 +5481,41 @@ background-color: rgba(0, 0, 0, 0.2);
 
 
 /*margin*/
-.margin{margin:var(--margin)}
-.margin {
-  margin: 10px !important;
-}
-.margin-top-5 {
-  margin: 5px !important;
-}
-.margin-top-10 {
-  margin-top: 10px !important;
-}
-.margin-top-20 {
-  margin-top: 20px !important;
-}
-.margin-top-30 {
-  margin-top: 30px !important;
-}
-.margin-top-40 {
-  margin-top: 40px !important;
-}
-.margin-top-50 {
-  margin-top: 50px !important;
-}
-.margin-top-60 {
-  margin-top: 60px !important;
-}
-.margin-top-70 {
-  margin-top: 70px !important;
-}
-.margin-top-80 {
-  margin-top: 80px !important;
-}
-.margin-top-90 {
-  margin-top: 90px !important;
-}
-.margin-top-100- {
-  margin-top: -100px;
-}
-.margin-top-10- {
-  margin-top: -10px !important;
-}
-.margin-top-20- {
-  margin-top: -20px !important;
-}
-.margin-top-30- {
-  margin-top: -30px !important;
-}
-.margin-top-40- {
-  margin-top: -40px !important;
-}
-.margin-top-50- {
-  margin-top: -50px !important;
-}
-.margin-top-60- {
-  margin-top: -60px !important;
-}
-.margin-top-70- {
-  margin-top: -70px !important;
-}
-.margin-top-80- {
-  margin-top: -80px !important;
-}
-.margin-top-90- {
-  margin-top: -90px !important;
-}
-
-.margin-top-100 {
-  margin-top: 100px;
-}
-.margin-bottom-5 {
-  margin: 5px !important;
-}
-.margin-10 {
-  margin: 10px !important;
-}
-.margin-20 {
-  margin: 20px !important;
-}
-.margin-30 {
-  margin: 30px !important;
-}
-.margin-40 {
-  margin: 40px !important;
-}
-.margin-50 {
-  margin: 50px !important;
-}
-.margin-bottom-10 {
-  margin-bottom: 10px !important;
-}
-.margin-bottom-20 {
-  margin-bottom: 20px !important;
-}
-.margin-bottom-30 {
-  margin-bottom: 30px !important;
-}
-.margin-bottom-40 {
-  margin-bottom: 40px !important;
-}
-.margin-bottom-50 {
-  margin-bottom: 50px !important;
-}
-.margin-bottom-60 {
-  margin-bottom: 60px !important;
-}
-.margin-bottom-70 {
-  margin-bottom: 70px !important;
-}
-.margin-bottom-80 {
-  margin-bottom: 80px !important;
-}
-.margin-bottom-90 {
-  margin-bottom: 90px !important;
-}
-.margin-bottom-100 {
-  margin-bottom: 100px;
-}
-.margin-left-10 {
-  margin-left: 10px !important;
-}
-.margin-left-20 {
-  margin-left: 20px !important;
-}
-.margin-left-30 {
-  margin-left: 30px !important;
-}
-.margin-left-40 {
-  margin-left: 40px !important;
-}
-.margin-left-50 {
-  margin-left: 50px !important;
-}
-.margin-left-60 {
-  margin-left: 60px !important;
-}
-.margin-left-70 {
-  margin-left: 70px !important;
-}
-.margin-left-80 {
-  margin-left: 80px !important;
-}
-.margin-left-90 {
-  margin-left: 90px !important;
-}
-.margin-left-100 {
-  margin-left: 100px;
-}
-.margin-right-10 {
-  margin-right: 10px !important;
-}
-.margin-right-20 {
-  margin-right: 20px !important;
-}
-.margin-right-30 {
-  margin-right: 30px !important;
-}
-.margin-right-40 {
-  margin-right: 40px !important;
-}
-.margin-right-50 {
-  margin-right: 50px !important;
-}
-.margin-right-60 {
-  margin-right: 60px !important;
-}
-.margin-right-70 {
-  margin-right: 70px !important;
-}
-.margin-right-80 {
-  margin-right: 80px !important;
-}
-.margin-right-90 {
-  margin-right: 90px !important;
-}
-.margin-right-100 {
-  margin-bottom: 100px;
-}
+.margin , .m{margin:var(--spacingScale)}
+.mt , .margin-top{margin-top:var(--spacingScale)}
+.mb , .margin-bottom{margin-bottom:var(--spacingScale)}
+.ml , .margin-left{margin-left:var(--spacingScale)}
+.mr , .margin-right{margin-right:var(--spacingScale)}
+
+.margin-top-5{margin:5px!important}.margin-top-10{margin-top:10px!important}
+.margin-top-20{margin-top:20px!important}.margin-top-30{margin-top:30px!important}
+.margin-top-40{margin-top:40px!important}.margin-top-50{margin-top:50px!important}
+.margin-top-60{margin-top:60px!important}.margin-top-70{margin-top:70px!important}
+.margin-top-80{margin-top:80px!important}.margin-top-90{margin-top:90px!important}
+.margin-top-100-{margin-top:-100px}.margin-top-10-{margin-top:-10px!important}
+.margin-top-20-{margin-top:-20px!important}.margin-top-30-{margin-top:-30px!important}
+.margin-top-40-{margin-top:-40px!important}.margin-top-50-{margin-top:-50px!important}
+.margin-top-60-{margin-top:-60px!important}.margin-top-70-{margin-top:-70px!important}
+.margin-top-80-{margin-top:-80px!important}.margin-top-90-{margin-top:-90px!important}
+.margin-top-100{margin-top:100px}.margin-bottom-5{margin:5px!important}
+.margin-10{margin:10px!important}.margin-20{margin:20px!important}
+.margin-30{margin:30px!important}.margin-40{margin:40px!important}
+.margin-50{margin:50px!important}.margin-bottom-10{margin-bottom:10px!important}
+.margin-bottom-20{margin-bottom:20px!important}.margin-bottom-30{margin-bottom:30px!important}
+.margin-bottom-40{margin-bottom:40px!important}.margin-bottom-50{margin-bottom:50px!important}
+.margin-bottom-60{margin-bottom:60px!important}.margin-bottom-70{margin-bottom:70px!important}
+.margin-bottom-80{margin-bottom:80px!important}.margin-bottom-90{margin-bottom:90px!important}
+.margin-bottom-100{margin-bottom:100px}.margin-left-10{margin-left:10px!important}
+.margin-left-20{margin-left:20px!important}.margin-left-30{margin-left:30px!important}
+.margin-left-40{margin-left:40px!important}.margin-left-50{margin-left:50px!important}
+.margin-left-60{margin-left:60px!important}.margin-left-70{margin-left:70px!important}
+.margin-left-80{margin-left:80px!important}.margin-left-90{margin-left:90px!important}
+.margin-left-100{margin-left:100px}.margin-right-10{margin-right:10px!important}
+.margin-right-20{margin-right:20px!important}.margin-right-30{margin-right:30px!important}
+.margin-right-40{margin-right:40px!important}.margin-right-50{margin-right:50px!important}
+.margin-right-60{margin-right:60px!important}.margin-right-70{margin-right:70px!important}
+.margin-right-80{margin-right:80px!important}.margin-right-90{margin-right:90px!important}
+.margin-right-100{margin-bottom:100px}
 
 /* --------- MARGIN --------- */
 .margin , .m{margin: var(--spacingScale) !important;}
@@ -5354,11 +5635,13 @@ background-color: rgba(0, 0, 0, 0.2);
 .ml-16- { margin-left: calc(var(--space-16) * -1) !important; }
 .ml-20- { margin-left: calc(var(--space-20) * -1) !important; }
 
-
-/*padding*/
-
 /* --------- PADDING --------- */
 .padding , .p{padding:var(--spacingScale)}
+.pt{padding-top: var(--spacingScale);}
+.pr{padding-right: var(--spacingScale);}
+.pb{padding-bottom: var(--spacingScale);}
+.pl{padding-left: var(--spacingScale);}
+
 .p-0  { padding: var(--space-0) !important; }
 .p-1  { padding: var(--space-1) !important; }
 .p-2  { padding: var(--space-2) !important; }
@@ -5424,164 +5707,32 @@ background-color: rgba(0, 0, 0, 0.2);
 .pl-16 { padding-left: var(--space-16) !important; }
 .pl-20 { padding-left: var(--space-20) !important; }
 
-.padding {
-  padding: 10px !important;
-}
-.padding-5 {
-  padding: 5px !important;
-}
-.padding-top-10 {
-  padding-top: 10px !important;
-}
-.padding-top-20 {
-  padding-top: 20px !important;
-}
-.padding-top-30 {
-  padding-top: 30px !important;
-}
-.padding-top-40 {
-  padding-top: 40px !important;
-}
-.padding-top-50 {
-  padding-top: 50px !important;
-}
-.padding-top-60 {
-  padding-top: 60px !important;
-}
-.padding-top-70 {
-  padding-top: 70px !important;
-}
-.padding-top-80 {
-  padding-top: 80px !important;
-}
-.padding-top-90 {
-  padding-top: 90px !important;
-}
-.padding-top-100 {
-  padding-top: 100px;
-}
-.padding-10 {
-  padding: 10px !important;
-}
-.padding-20 {
-  padding: 20px !important;
-}
-.padding-30 {
-  padding: 30px !important;
-}
-.padding-40 {
-  padding: 40px !important;
-}
-.padding-50 {
-  padding: 50px !important;
-}
-.padding-60 {
-  padding: 60px !important;
-}
-.padding-70 {
-  padding: 70px !important;
-}
-.padding-80 {
-  padding: 80px !important;
-}
-.padding-90 {
-  padding: 90px !important;
-}
-.padding-100 {
-  padding: 100px;
-}
-.padding-bottom-10 {
-  padding-bottom: 10px !important;
-}
-.padding-bottom-20 {
-  padding-bottom: 20px !important;
-}
-.padding-bottom-30 {
-  padding-bottom: 30px !important;
-}
-.padding-bottom-40 {
-  padding-bottom: 40px !important;
-}
-.padding-bottom-50 {
-  padding-bottom: 50px !important;
-}
-.padding-bottom-60 {
-  padding-bottom: 60px !important;
-}
-.padding-bottom-70 {
-  padding-bottom: 70px !important;
-}
-.padding-bottom-80 {
-  padding-bottom: 80px !important;
-}
-.padding-bottom-90 {
-  padding-bottom: 90px !important;
-}
-.padding-bottom-100 {
-  padding-bottom: 100px;
-}
-.padding-left-10 {
-  padding-left: 10px !important;
-}
-.padding-left-20 {
-  padding-left: 20px !important;
-}
-.padding-left-30 {
-  padding-left: 30px !important;
-}
-.padding-left-40 {
-  padding-left: 40px !important;
-}
-.padding-left-50 {
-  padding-left: 50px !important;
-}
-.padding-left-60 {
-  padding-left: 60px !important;
-}
-.padding-left-70 {
-  padding-left: 70px !important;
-}
-.padding-left-80 {
-  padding-left: 80px !important;
-}
-.padding-left-90 {
-  padding-left: 90px !important;
-}
-.padding-left-100 {
-  padding-left: 100px;
-}
-.padding-right-10 {
-  padding-right: 10px !important;
-}
-.padding-right-20 {
-  padding-right: 20px !important;
-}
-.padding-right-30 {
-  padding-right: 30px !important;
-}
-.padding-right-40 {
-  padding-right: 40px !important;
-}
-.padding-right-50 {
-  padding-right: 50px !important;
-}
-.padding-right-60 {
-  padding-right: 60px !important;
-}
-.padding-right-70 {
-  padding-right: 70px !important;
-}
-.padding-right-80 {
-  padding-right: 80px !important;
-}
-.padding-right-90 {
-  padding-right: 90px !important;
-}
-.padding-right-100 {
-  padding-bottom: 100px;
-}
-
-
+.padding{padding: var(--spacingScale) !important}.padding-5{padding:5px!important}
+.padding-top-10{padding-top:10px!important}.padding-top-20{padding-top:20px!important}
+.padding-top-30{padding-top:30px!important}.padding-top-40{padding-top:40px!important}
+.padding-top-50{padding-top:50px!important}.padding-top-60{padding-top:60px!important}
+.padding-top-70{padding-top:70px!important}.padding-top-80{padding-top:80px!important}
+.padding-top-90{padding-top:90px!important}.padding-top-100{padding-top:100px}
+.padding-10{padding:10px!important}.padding-20{padding:20px!important}
+.padding-30{padding:30px!important}.padding-40{padding:40px!important}
+.padding-50{padding:50px!important}.padding-60{padding:60px!important}
+.padding-70{padding:70px!important}.padding-80{padding:80px!important}
+.padding-90{padding:90px!important}.padding-100{padding:100px}
+.padding-bottom-10{padding-bottom:10px!important}.padding-bottom-20{padding-bottom:20px!important}
+.padding-bottom-30{padding-bottom:30px!important}.padding-bottom-40{padding-bottom:40px!important}
+.padding-bottom-50{padding-bottom:50px!important}.padding-bottom-60{padding-bottom:60px!important}
+.padding-bottom-70{padding-bottom:70px!important}.padding-bottom-80{padding-bottom:80px!important}
+.padding-bottom-90{padding-bottom:90px!important}.padding-bottom-100{padding-bottom:100px}
+.padding-left-10{padding-left:10px!important}.padding-left-20{padding-left:20px!important}
+.padding-left-30{padding-left:30px!important}.padding-left-40{padding-left:40px!important}
+.padding-left-50{padding-left:50px!important}.padding-left-60{padding-left:60px!important}
+.padding-left-70{padding-left:70px!important}.padding-left-80{padding-left:80px!important}
+.padding-left-90{padding-left:90px!important}.padding-left-100{padding-left:100px}
+.padding-right-10{padding-right:10px!important}.padding-right-20{padding-right:20px!important}
+.padding-right-30{padding-right:30px!important}.padding-right-40{padding-right:40px!important}
+.padding-right-50{padding-right:50px!important}.padding-right-60{padding-right:60px!important}
+.padding-right-70{padding-right:70px!important}.padding-right-80{padding-right:80px!important}
+.padding-right-90{padding-right:90px!important}.padding-right-100{padding-bottom:100px}
 
 /* carousel */
 /* Hide scrollbar for all carousel containers */
@@ -5602,21 +5753,7 @@ background-color: rgba(0, 0, 0, 0.2);
   padding: 1rem 0;
   scroll-behavior: smooth;
 }
-
-/* Each carousel item wrapper */
-.carousel-item {
-  scroll-snap-align: start;
-  flex: 0 0 auto;
-
-}
-
-
-
-
-
-
-/* screens */
-
+.carousel-item {scroll-snap-align: start;flex: 0 0 auto;}
 
 /* small screens */
 @media only screen and (max-width: 767px) {