@appscode/design-system 1.1.0-beta.4 → 1.1.0-beta.5

package/components/_wizard.scss

@@ -1,112 +1,112 @@
-.single-wizard-section {
-  padding: 20px;
-  background-color: $white-100;
-  border: 1px solid $primary-90;
-  border-radius: 4px;
-}
-
-.wizard-description {
-  font-family: $font-paragraph;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 13px;
-  line-height: 100%;
-  color: $primary-10;
-  margin-bottom: 10px;
-}
+// .single-wizard-section {
+//   padding: 20px;
+//   background-color: $white-100;
+//   border: 1px solid $primary-90;
+//   border-radius: 4px;
+// }
+
+// .wizard-description {
+//   font-family: $font-paragraph;
+//   font-style: normal;
+//   font-weight: normal;
+//   font-size: 13px;
+//   line-height: 100%;
+//   color: $primary-10;
+//   margin-bottom: 10px;
+// }
 
 // label action start
-.label-action {
-  align-items: center;
-  height: 21px;
-
-  .ac-single-input {
-    label {
-      margin-top: 2px;
-    }
-  }
-
-  button:not(.is-text) {
-    opacity: 0;
-    visibility: hidden;
-    transition: 0.3s ease-in-out;
-
-    img {
-      width: 15px;
-    }
-
-    &.label-icon {
-      border: none;
-      background-color: transparent;
-      cursor: pointer;
-      padding: 0;
-      transition: 0.3s ease-in-out;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  &:hover {
-    button {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  .ms-close-button,
-  .ac-modal-footer {
-    .buttons {
-      button {
-        opacity: 1;
-        visibility: visible;
-
-        &:hover {
-          opacity: 0.7;
-        }
-      }
-    }
-  }
-
-  .label-icon {
-    display: flex;
-    align-items: center;
-    margin-right: 10px;
-
-    img {
-      width: 16px;
-    }
-  }
-
-  strong {
-    font-family: $font-paragraph;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 16px;
-    color: $primary-10;
-    margin-right: 16px;
-  }
-}
+// .label-action {
+//   align-items: center;
+//   height: 21px;
+
+//   .ac-single-input {
+//     label {
+//       margin-top: 2px;
+//     }
+//   }
+
+//   button:not(.is-text) {
+//     opacity: 0;
+//     visibility: hidden;
+//     transition: 0.3s ease-in-out;
+
+//     img {
+//       width: 15px;
+//     }
+
+//     &.label-icon {
+//       border: none;
+//       background-color: transparent;
+//       cursor: pointer;
+//       padding: 0;
+//       transition: 0.3s ease-in-out;
+
+//       &:hover {
+//         opacity: 0.8;
+//       }
+//     }
+//   }
+
+//   &:hover {
+//     button {
+//       opacity: 1;
+//       visibility: visible;
+//     }
+//   }
+
+//   .ms-close-button,
+//   .ac-modal-footer {
+//     .buttons {
+//       button {
+//         opacity: 1;
+//         visibility: visible;
+
+//         &:hover {
+//           opacity: 0.7;
+//         }
+//       }
+//     }
+//   }
+
+//   .label-icon {
+//     display: flex;
+//     align-items: center;
+//     margin-right: 10px;
+
+//     img {
+//       width: 16px;
+//     }
+//   }
+
+//   strong {
+//     font-family: $font-paragraph;
+//     font-style: normal;
+//     font-weight: 500;
+//     font-size: 13px;
+//     line-height: 16px;
+//     color: $primary-10;
+//     margin-right: 16px;
+//   }
+// }
 
 // label action end
 // key-value-button start
-.key-value-button {
-  display: grid;
-  grid-template-columns: calc(50% - 83px) 10px calc(50% - 82px) 110px;
-  grid-gap: 15px;
-
-  .ac-single-input {
-    margin-bottom: 0;
-  }
-
-  .lable-colone {
-    font-size: 30px;
-    font-weight: 500;
-    line-height: 1.1;
-  }
-}
+// .key-value-button {
+//   display: grid;
+//   grid-template-columns: calc(50% - 83px) 10px calc(50% - 82px) 110px;
+//   grid-gap: 15px;
+
+//   .ac-single-input {
+//     margin-bottom: 0;
+//   }
+
+//   .lable-colone {
+//     font-size: 30px;
+//     font-weight: 500;
+//     line-height: 1.1;
+//   }
+// }
 
 // key-value-button end
 
@@ -154,9 +154,11 @@
     background-color: transparent;
     width: auto;
     margin-bottom: 0;
+
     label {
       font-weight: 400 !important;
     }
+
     &:hover {
       box-shadow: none;
       border: none;
@@ -175,15 +177,15 @@
         padding-left: 25px !important;
       }
 
-      .is-checkradio[type="checkbox"].ac-checkbox + label::before,
-      .is-checkradio[type="radio"] + label:before,
-      .is-checkradio[type="radio"] + label:after {
+      .is-checkradio[type="checkbox"].ac-checkbox+label::before,
+      .is-checkradio[type="radio"]+label:before,
+      .is-checkradio[type="radio"]+label:after {
         width: 16px;
         height: 16px;
         top: 3px;
       }
 
-      .is-checkradio[type="checkbox"].ac-checkbox + label::after {
+      .is-checkradio[type="checkbox"].ac-checkbox+label::after {
         left: 5px;
       }
     }
@@ -197,7 +199,7 @@
       }
     }
 
-    .ac-single-radio .is-checkradio[type="radio"]:checked + label {
+    .ac-single-radio .is-checkradio[type="radio"]:checked+label {
       color: $primary;
     }
 
@@ -357,7 +359,7 @@
   }
 
   .ac-single-radio {
-    .is-checkradio[type="radio"] + label {
+    .is-checkradio[type="radio"]+label {
       padding-left: 25px;
 
       &:before {
@@ -376,7 +378,7 @@
 
   .ac-single-checkbox {
     .is-checkradio[type="checkbox"] {
-      &.ac-checkbox + label {
+      &.ac-checkbox+label {
         font-family: $font-heading;
         font-style: normal;
         font-weight: 500;
@@ -391,470 +393,466 @@
 // select card end
 
 // final state start
-.ac-final-state {
-  margin-bottom: 10px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  .state-left {
-    h5 {
-      font-family: $font-paragraph;
-      font-style: normal;
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 19px;
-      color: $primary-10;
-    }
-
-    img {
-      width: 16px;
-      margin-left: 10px;
-    }
-
-    button {
-      &.ac-button {
-        opacity: 0;
-        visibility: hidden;
-        transition: 0.3s ease-in-out;
-      }
-    }
-  }
-
-  &:hover {
-    .state-left {
-      button {
-        &.ac-button {
-          opacity: 1;
-          visibility: visible;
-        }
-      }
-    }
-  }
-}
-
-.button {
-  &.ac-button {
-    &.is-hovered-underline {
-      transition: 0.3s ease-in-out;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
+// .ac-final-state {
+//   margin-bottom: 10px;
+
+//   &:last-child {
+//     margin-bottom: 0;
+//   }
+
+//   .state-left {
+//     h5 {
+//       font-family: $font-paragraph;
+//       font-style: normal;
+//       font-weight: 500;
+//       font-size: 14px;
+//       line-height: 19px;
+//       color: $primary-10;
+//     }
+
+//     img {
+//       width: 16px;
+//       margin-left: 10px;
+//     }
+
+//     button {
+//       &.ac-button {
+//         opacity: 0;
+//         visibility: hidden;
+//         transition: 0.3s ease-in-out;
+//       }
+//     }
+//   }
+
+//   &:hover {
+//     .state-left {
+//       button {
+//         &.ac-button {
+//           opacity: 1;
+//           visibility: visible;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .button {
+//   &.ac-button {
+//     &.is-hovered-underline {
+//       transition: 0.3s ease-in-out;
+
+//       &:hover {
+//         text-decoration: underline;
+//       }
+//     }
+//   }
+// }
 
 // final state end
 
-.circle-list-shape {
-  border: 3px solid $primary-10;
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  margin-right: 10px;
-  display: inline-block;
-}
-
-.ac-selected-item {
-  .selected-left {
-    .item-name {
-      font-family: $font-paragraph;
-      font-style: normal;
-      font-weight: 500;
-      font-size: 13px;
-      line-height: 16px;
-      color: $primary-10;
-    }
-
-    button {
-      &.ac-button {
-        opacity: 0;
-        visibility: hidden;
-        transition: 0.3s ease-in-out;
-      }
-    }
-  }
-
-  &:hover {
-    .selected-left {
-      button {
-        &.ac-button {
-          opacity: 1;
-          visibility: visible;
-        }
-      }
-    }
-  }
-}
+// .circle-list-shape {
+//   border: 3px solid $primary-10;
+//   border-radius: 50%;
+//   width: 10px;
+//   height: 10px;
+//   margin-right: 10px;
+//   display: inline-block;
+// }
+
+// .ac-selected-item {
+//   .selected-left {
+//     .item-name {
+//       font-family: $font-paragraph;
+//       font-style: normal;
+//       font-weight: 500;
+//       font-size: 13px;
+//       line-height: 16px;
+//       color: $primary-10;
+//     }
+
+//     button {
+//       &.ac-button {
+//         opacity: 0;
+//         visibility: hidden;
+//         transition: 0.3s ease-in-out;
+//       }
+//     }
+//   }
+
+//   &:hover {
+//     .selected-left {
+//       button {
+//         &.ac-button {
+//           opacity: 1;
+//           visibility: visible;
+//         }
+//       }
+//     }
+//   }
+// }
 
 // key button start
-.key-button {
-  display: grid;
-  grid-template-columns: calc(100% - 135px) 120px;
-  grid-gap: 15px;
-}
+// .key-button {
+//   display: grid;
+//   grid-template-columns: calc(100% - 135px) 120px;
+//   grid-gap: 15px;
+// }
 
 // key button end
 
 // certificate section start
-.ac-certificate-area {
-  box-shadow: $ac-shadow-1;
-  border-radius: 4px;
-  background-color: $white-100;
-
-  .list-items {
-    padding: 10px;
-    border-bottom: 1px solid $primary-90;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &.t-title {
-      background-color: $table-header;
-      border-radius: 4px 4px 0px 0px;
-      border-bottom: none;
-
-      li {
-        font-weight: 500;
-        color: $primary-5;
-      }
-    }
-
-    li {
-      width: 20%;
-      font-family: $font-paragraph;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 13px;
-      line-height: 16px;
-      color: $primary-10;
-      display: flex;
-      align-items: center;
-
-      &:last-child {
-        justify-content: flex-end;
-      }
-    }
-  }
-}
-
-.ac-certificate-info {
-  padding: 10px 15px;
-  background-color: $black-60;
-  border-radius: 4px;
-
-  .single-name-title {
-    margin-bottom: 25px;
-    width: calc(100% - 140px);
-
-    &.has-single-button {
-      width: calc(100% - 50px);
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    label:not(.wizard-title) {
-      font-family: $font-paragraph;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 13px;
-      line-height: 18px;
-      display: block;
-      color: $primary-10;
-      margin-bottom: 5px;
-    }
-  }
-
-  .wizard-title,
-  .wizard-title.has-line {
-    span {
-      background-color: $ac-label-text;
-    }
-  }
-
-  button.button.ac-button.is-square.is-white {
-    background-color: $white-100;
-
-    &:hover {
-      background-color: $primary-90;
-    }
-  }
-
-  .line-title {
-    span {
-      background-color: $black-60;
-    }
-  }
-}
-
-.ac-unordered-list-items {
-  li {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    strong {
-      font-family: $font-paragraph;
-      font-style: normal;
-      font-weight: 500;
-      font-size: 13px;
-      line-height: 16px;
-      display: flex;
-      align-items: center;
-
-      /* Gray 1 */
-
-      color: $primary-10;
-    }
-  }
-}
+// .ac-certificate-area {
+//   box-shadow: $ac-shadow-1;
+//   border-radius: 4px;
+//   background-color: $white-100;
+
+//   .list-items {
+//     padding: 10px;
+//     border-bottom: 1px solid $primary-90;
+
+//     &:last-child {
+//       border-bottom: none;
+//     }
+
+//     &.t-title {
+//       background-color: $table-header;
+//       border-radius: 4px 4px 0px 0px;
+//       border-bottom: none;
+
+//       li {
+//         font-weight: 500;
+//         color: $primary-5;
+//       }
+//     }
+
+//     li {
+//       width: 20%;
+//       font-family: $font-paragraph;
+//       font-style: normal;
+//       font-weight: normal;
+//       font-size: 13px;
+//       line-height: 16px;
+//       color: $primary-10;
+//       display: flex;
+//       align-items: center;
+
+//       &:last-child {
+//         justify-content: flex-end;
+//       }
+//     }
+//   }
+// }
+
+// .ac-certificate-info {
+//   padding: 10px 15px;
+//   background-color: $black-60;
+//   border-radius: 4px;
+
+//   .single-name-title {
+//     margin-bottom: 25px;
+//     width: calc(100% - 140px);
+
+//     &.has-single-button {
+//       width: calc(100% - 50px);
+//     }
+
+//     &:last-child {
+//       margin-bottom: 0;
+//     }
+
+//     label:not(.wizard-title) {
+//       font-family: $font-paragraph;
+//       font-style: normal;
+//       font-weight: normal;
+//       font-size: 13px;
+//       line-height: 18px;
+//       display: block;
+//       color: $primary-10;
+//       margin-bottom: 5px;
+//     }
+//   }
+
+//   .wizard-title,
+//   .wizard-title.has-line {
+//     span {
+//       background-color: $ac-label-text;
+//     }
+//   }
+
+//   button.button.ac-button.is-square.is-white {
+//     background-color: $white-100;
+
+//     &:hover {
+//       background-color: $primary-90;
+//     }
+//   }
+
+//   .line-title {
+//     span {
+//       background-color: $black-60;
+//     }
+//   }
+// }
+
+// .ac-unordered-list-items {
+//   li {
+//     display: flex;
+//     align-items: center;
+//     margin-bottom: 10px;
+
+//     &:last-child {
+//       margin-bottom: 0;
+//     }
+
+//     strong {
+//       font-family: $font-paragraph;
+//       font-style: normal;
+//       font-weight: 500;
+//       font-size: 13px;
+//       line-height: 16px;
+//       display: flex;
+//       align-items: center;
+
+//       /* Gray 1 */
+
+//       color: $primary-10;
+//     }
+//   }
+// }
 
 // certificate section end
 
 // wizard title start
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-label {
-  &.wizard-title {
-    margin-bottom: 15px;
-    position: relative;
-    z-index: 1;
-    display: inline-block;
-
-    &.has-line {
-      position: relative;
-      z-index: 1;
-      display: block;
-
-      span {
-        background-color: $white-100;
-        padding-right: 8px;
-      }
-
-      &:after {
-        position: absolute;
-        content: "";
-        left: 0;
-        top: 50%;
-        margin-top: -0.5px;
-        width: 100%;
-        height: 1px;
-        background-color: $info-light;
-        z-index: -1;
-      }
-    }
-
-    span.inline-description {
-      font-family: $font-paragraph;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 12px;
-      line-height: 160%;
-      color: $primary-10;
-      transform: translate(5px, -2px);
-      display: inline-block;
-    }
-
-    .is-required {
-      display: inline-block;
-      width: 10px;
-      text-align: center;
-      line-height: 4px;
-      transform: translateY(-3px);
-    }
-
-    .button {
-      &.is-information {
-        background-color: transparent;
-        padding: 0;
-        height: auto;
-        padding: 4px;
-        border: none;
-        z-index: 99;
-        height: 30px;
-        width: 30px;
-        margin-top: -4px;
-
-        &:focus {
-          box-shadow: none;
-          box-shadow: none;
-          background-color: #cbe3f8;
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-}
-
-button {
-  &.is-information {
-    padding: 4px;
-    height: 30px;
-    width: 30px;
-    margin-left: 5px;
-    margin-top: -4px;
-
-    &:focus {
-      border: none;
-      box-shadow: none;
-      background-color: #cbe3f8;
-      border-radius: 50%;
-    }
-  }
-}
-
-h5 {
-  &.wizard-title {
-    color: $primary-10;
-
-    .is-required {
-      transform: translateY(-2px);
-    }
-  }
-}
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6,
+// label {
+//   &.wizard-title {
+//     margin-bottom: 15px;
+//     position: relative;
+//     z-index: 1;
+//     display: inline-block;
+
+//     &.has-line {
+//       position: relative;
+//       z-index: 1;
+//       display: block;
+
+//       span {
+//         background-color: $white-100;
+//         padding-right: 8px;
+//       }
+
+//       &:after {
+//         position: absolute;
+//         content: "";
+//         left: 0;
+//         top: 50%;
+//         margin-top: -0.5px;
+//         width: 100%;
+//         height: 1px;
+//         background-color: $info-light;
+//         z-index: -1;
+//       }
+//     }
+
+//     span.inline-description {
+//       font-family: $font-paragraph;
+//       font-style: normal;
+//       font-weight: normal;
+//       font-size: 12px;
+//       line-height: 160%;
+//       color: $primary-10;
+//       transform: translate(5px, -2px);
+//       display: inline-block;
+//     }
+
+//     .is-required {
+//       display: inline-block;
+//       width: 10px;
+//       text-align: center;
+//       line-height: 4px;
+//       transform: translateY(-3px);
+//     }
+
+//     .button {
+//       &.is-information {
+//         background-color: transparent;
+//         padding: 0;
+//         height: auto;
+//         padding: 4px;
+//         border: none;
+//         z-index: 99;
+//         height: 30px;
+//         width: 30px;
+//         margin-top: -4px;
+
+//         &:focus {
+//           box-shadow: none;
+//           box-shadow: none;
+//           background-color: #cbe3f8;
+//           border-radius: 50%;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// button {
+//   &.is-information {
+//     padding: 4px;
+//     height: 30px;
+//     width: 30px;
+//     margin-left: 5px;
+//     margin-top: -4px;
+
+//     &:focus {
+//       border: none;
+//       box-shadow: none;
+//       background-color: #cbe3f8;
+//       border-radius: 50%;
+//     }
+//   }
+// }
+
+// h5 {
+//   &.wizard-title {
+//     color: $primary-10;
+
+//     .is-required {
+//       transform: translateY(-2px);
+//     }
+//   }
+// }
 
 // wizard title end
 
 // checkbox card start
-.card-checkbox {
-  width: 358px;
-  height: 115px;
-  border: 1px solid $ac-label-text;
-}
+// .card-checkbox {
+//   width: 358px;
+//   height: 115px;
+//   border: 1px solid $ac-label-text;
+// }
 
 // checkbox card end
 
 // card radio box start
-.multiple-radio {
-  height: auto;
-
-  h5 {
-    margin-bottom: 10px;
-    font-family: $font-paragraph;
-    font-style: normal;
-    font-weight: 500;
-    color: $primary-5;
-  }
-}
+// .multiple-radio {
+//   height: auto;
+
+//   h5 {
+//     margin-bottom: 10px;
+//     font-family: $font-paragraph;
+//     font-style: normal;
+//     font-weight: 500;
+//     color: $primary-5;
+//   }
+// }
 
 // card radio box end
 
 // Wizard Notification Area Start
-.wizard-notification-area {
-  background-color: $black-80;
-  border-radius: 10px;
-  padding: 10px;
-  width: 100%;
-
-  p {
-    font-family: $font-paragraph;
-    font-style: normal;
-    font-size: 13px;
-    line-height: 18px;
-    color: $white-100;
-    font-weight: 400;
-
-    b {
-      font-weight: 500;
-
-      &.star-dots {
-        font-family: $font-paragraph;
-        font-style: normal;
-        font-weight: bold;
-        font-size: 20px;
-        line-height: 23px;
-        letter-spacing: 8px;
-        color: $white-100;
-        margin-top: 10px;
-        display: block;
-      }
-    }
-  }
-}
+// .wizard-notification-area {
+//   background-color: $black-80;
+//   border-radius: 10px;
+//   padding: 10px;
+//   width: 100%;
+
+//   p {
+//     font-family: $font-paragraph;
+//     font-style: normal;
+//     font-size: 13px;
+//     line-height: 18px;
+//     color: $white-100;
+//     font-weight: 400;
+
+//     b {
+//       font-weight: 500;
+
+//       &.star-dots {
+//         font-family: $font-paragraph;
+//         font-style: normal;
+//         font-weight: bold;
+//         font-size: 20px;
+//         line-height: 23px;
+//         letter-spacing: 8px;
+//         color: $white-100;
+//         margin-top: 10px;
+//         display: block;
+//       }
+//     }
+//   }
+// }
 
 // Wizard Notification Area end
 
 // inline input start
-.ac-inline-input {
-  &.are-width-100 {
-    .ac-counter {
-      width: 100px;
-    }
-  }
-
-  .ac-counter {
-    border: 1px solid $primary-90;
-    padding: 10px 5px;
-    height: 40px;
-    width: 60px;
-    background-color: transparent;
-    border-radius: 4px;
-    text-align: center;
-    font-family: $font-paragraph;
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 19px;
-    color: $primary-10;
-    margin: 0 10px 10px 0;
-
-    &:focus {
-      outline: none;
-      border: 1px solid $primary;
-    }
-
-    &.is-selected {
-      border: 1px solid $primary;
-      background-color: $primary;
-      color: $white-100;
-    }
-  }
-}
+// .ac-inline-input {
+//   &.are-width-100 {
+//     .ac-counter {
+//       width: 100px;
+//     }
+//   }
+
+//   .ac-counter {
+//     border: 1px solid $primary-90;
+//     padding: 10px 5px;
+//     height: 40px;
+//     width: 60px;
+//     background-color: transparent;
+//     border-radius: 4px;
+//     text-align: center;
+//     font-family: $font-paragraph;
+//     font-weight: 500;
+//     font-size: 13px;
+//     line-height: 19px;
+//     color: $primary-10;
+//     margin: 0 10px 10px 0;
+
+//     &:focus {
+//       outline: none;
+//       border: 1px solid $primary;
+//     }
+
+//     &.is-selected {
+//       border: 1px solid $primary;
+//       background-color: $primary;
+//       color: $white-100;
+//     }
+//   }
+// }
 
 // inline input end
 
 // dark theme start
-.is-dark-theme {
-  h6.wizard-title.has-line:after {
-    --ac-blue-light: $primary-20;
-  }
+// .is-dark-theme {
+//   h6.wizard-title.has-line:after {
+//     --ac-blue-light: $primary-20;
+//   }
+
+//   .ac-certificate-info {
+//     --ac-bg-light-gray: var(--dark-bg-light);
+//   }
+// }
 
-  .ac-certificate-info {
-    --ac-bg-light-gray: var(--dark-bg-light);
-  }
-}
 // dark theme end
 /****************************************
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
+@media (max-width: 575.98px) {}
 
 // Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
+@media (min-width: 576px) and (max-width: 767.98px) {}
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
+@media (min-width: 768px) and (max-width: 991.98px) {}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
+@media (min-width: 992px) and (max-width: 1199.98px) {}
 
 // Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+@media (min-width: 1200px) {}