.mui-textfield.mui-textfield--float-label > label {
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
@keyframes mui-btn-inserted {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
.invertColor {
    filter: invert(1);
}
.mui-btn {
    animation-duration: 0.0001s;
    animation-name: mui-btn-inserted;
}
@keyframes mui-dropdown-inserted {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
[data-mui-toggle="dropdown"] {
    animation-duration: 0.0001s;
    animation-name: mui-dropdown-inserted;
}
@keyframes mui-btn-inserted
{
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
@keyframes mui-dropdown-inserted 
{
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
.mui-btn[data-mui-toggle="dropdown"] {
    animation-duration: 0.0001s;
    animation-name: mui-btn-inserted, mui-dropdown-inserted;
}
@keyframes mui-tab-inserted {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
[data-mui-toggle="tab"] {
    animation-duration: 0.0001s;
    animation-name: mui-tab-inserted;
}
@keyframes mui-textfield-inserted {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
.mui-textfield > input {
    animation-duration: 0.0001s;
    animation-name: mui-textfield-inserted;
}
@keyframes mui-textfield-inserted {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
.mui-textfield > textarea {
    animation-duration: 0.0001s;
    animation-name: mui-textfield-inserted;
}
@keyframes mui-select-inserted {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
.mui-select > select {
    animation-duration: 0.0001s;
    animation-name: mui-select-inserted;
}
@keyframes mui-node-inserted {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
.mui-select > select ~ .mui-event-trigger {
    animation-duration: 0.0001s;
    animation-name: mui-node-inserted;
}
@keyframes mui-node-disabled {
    from {
        transform: none;
    }
    to {
        transform: none;
    }
}
.mui-select > select:disabled ~ .mui-event-trigger {
    animation-duration: 0.0001s;
    animation-name: mui-node-disabled;
}

.vue-slider-dot {
    position: absolute;
    -webkit-transition: all 0s;
    transition: all 0s;
    z-index: 5
}
.vue-slider-dot:focus {
    outline: none
}
.vue-slider-dot-tooltip {
    position: absolute;
    visibility: hidden
}
.vue-slider-dot-hover:hover .vue-slider-dot-tooltip,
.vue-slider-dot-tooltip-show {
    visibility: visible
}
.vue-slider-dot-tooltip-top {
    top: -10px;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%)
}
.vue-slider-dot-tooltip-bottom {
    bottom: -10px;
    left: 50%;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%)
}
.vue-slider-dot-tooltip-left {
    left: -10px;
    top: 50%;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%)
}
.vue-slider-dot-tooltip-right {
    right: -10px;
    top: 50%;
    -webkit-transform: translate(100%, -50%);
    transform: translate(100%, -50%)
}
.vue-slider-marks {
    position: relative;
    width: 100%;
    height: 100%
}
.vue-slider-mark {
    position: absolute;
    z-index: 1
}
.vue-slider-ltr .vue-slider-mark,
.vue-slider-rtl .vue-slider-mark {
    width: 0;
    height: 100%;
    top: 50%
}
.vue-slider-ltr .vue-slider-mark-step,
.vue-slider-rtl .vue-slider-mark-step {
    top: 0
}
.vue-slider-ltr .vue-slider-mark-label,
.vue-slider-rtl .vue-slider-mark-label {
    top: 100%;
    margin-top: 10px
}
.vue-slider-ltr .vue-slider-mark {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}
.vue-slider-ltr .vue-slider-mark-step {
    left: 0
}
.vue-slider-ltr .vue-slider-mark-label {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
.vue-slider-rtl .vue-slider-mark {
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%)
}
.vue-slider-rtl .vue-slider-mark-step {
    right: 0
}
.vue-slider-rtl .vue-slider-mark-label {
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%)
}
.vue-slider-btt .vue-slider-mark,
.vue-slider-ttb .vue-slider-mark {
    width: 100%;
    height: 0;
    left: 50%
}
.vue-slider-btt .vue-slider-mark-step,
.vue-slider-ttb .vue-slider-mark-step {
    left: 0
}
.vue-slider-btt .vue-slider-mark-label,
.vue-slider-ttb .vue-slider-mark-label {
    left: 100%;
    margin-left: 10px
}
.vue-slider-btt .vue-slider-mark {
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%)
}
.vue-slider-btt .vue-slider-mark-step {
    top: 0
}
.vue-slider-btt .vue-slider-mark-label {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
.vue-slider-ttb .vue-slider-mark {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}
.vue-slider-ttb .vue-slider-mark-step {
    bottom: 0
}
.vue-slider-ttb .vue-slider-mark-label {
    bottom: 50%;
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
}
.vue-slider-mark-label,
.vue-slider-mark-step {
    position: absolute
}
.vue-slider {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.vue-slider-rail {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition-property: width, height, left, right, top, bottom;
    transition-property: width, height, left, right, top, bottom
}
.vue-slider-process {
    position: absolute;
    z-index: 1
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 350px;
    height: 350px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }