sempli-website-lib 4.1.4 → 5.0.2

package/styles/partials/_forms.scss

@@ -1,837 +1,837 @@
-/*#############################################################################
-# FORMS AND INPUTS
-#############################################################################*/
-
-// FORM GROUPS
-.form-group-lg {
-  margin-bottom: 15px;
-}
-
-// INPUT GROUPS
-.input-group {
-  margin: 0 0 30px;
-
-  > label {
-    display: block;
-    font-weight: 900;
-    line-height: rem-calc(24px);
-    margin-bottom: 10px;
-  }
-
-  .input-wrapper {
-    margin-bottom: 10px;
-  }
-}
-
-// INPUT WRAPPER
-.input-wrapper {
-  margin: 0 0 20px;
-  position: relative;
-
-  &.no-margin {
-    margin: 0;
-  }
-
-  input {
-    width: 100%;
-  }
-
-  // Clear base styles
-  input,
-  label,
-  select,
-  button,
-  textarea {
-    margin: 0;
-    border: 0;
-    padding: 0;
-    display: inline-block;
-    vertical-align: middle;
-    white-space: normal;
-    line-height: 1;
-
-    // Browsers have different default form fonts
-    font-size: rem-calc(16px);
-    font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-
-    // Animate Transitions
-    // @extend %transition-all;
-  }
-
-  /* Remove the stupid outer glow in Webkit */
-  input:focus,
-  textarea:focus,
-  select:focus {
-    outline: 0;
-  }
-
-  /* Labels
-  -----------------------------------------------*/
-
-  label {
-    line-height: rem-calc(24px);
-    margin-bottom: 10px;
-
-    .required {
-      color: $color-alert;
-    }
-  }
-
-  /* Text Inputs
-  -----------------------------------------------*/
-
-  // To be extended
-  .general-input-styles {
-    display: block;
-    background-color: #ffffff;
-    border: 1px solid #D7D9E2;
-    color: $color-text;
-    font-weight: 400;
-    margin: 0;
-    padding: 12px 18px;
-    min-height: 46px;
-    width: 100%;
-
-    @include border-radius(4px);
-
-    // Focus
-    &:focus {
-      border-color: $color-primary;
-
-      @include box-shadow(0 0 0 3px rgba($color-primary, 0.15) inset);
-    }
-
-    // Disabled
-    &:disabled {
-      background-color: #F4F4F4;
-      border-color: #E9EAEA;
-      color: #B6B8BD;
-    }
-  }
-
-  input[type=date],
-  input[type=datetime],
-  input[type=datetime-local],
-  input[type=email],
-  input[type=month],
-  input[type=number],
-  input[type=password],
-  input[type=range],
-  input[type=search],
-  input[type=tel],
-  input[type=text],
-  input[type=time],
-  input[type=url],
-  input[type=week] {
-    @extend .general-input-styles;
-  }
-
-  /* Button Controls
-  -----------------------------------------------*/
-
-  input[type=checkbox],
-  input[type=radio] {
-    width: 15px;
-    height: 15px;
-  }
-
-
-  /* Textarea
-  -----------------------------------------------*/
-
-  textarea {
-    /* Move the label to the top */
-    vertical-align: top;
-
-    /* Turn off scroll bars in IE unless needed */
-    overflow: auto;
-
-    @extend .general-input-styles;
-  }
-
-  /* Selects
-  -----------------------------------------------*/
-
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    white-space: nowrap;
-
-    @extend .general-input-styles;
-    padding-right: 30px;
-  }
-
-  /* Placeholder
-  -----------------------------------------------*/
-
-  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: $color-secondary;
-  }
-  ::-moz-placeholder { /* Firefox 19+ */
-    color: $color-secondary;
-  }
-  :-ms-input-placeholder { /* IE 10+ */
-    color: $color-secondary;
-  }
-  :-moz-placeholder { /* Firefox 18- */
-    color: $color-secondary;
-  }
-
-  // FILTER SELECT WRAPPER
-  .select-wrapper {
-    position: relative;
-
-    &::after {
-      display: block;
-      content: "";
-
-      border-style: solid;
-      border-width: 5px 5px 0 5px;
-      border-color: #D7D9E2 transparent transparent transparent;
-      width: 0;
-      height: 0;
-
-      position: absolute;
-      top: 50%;
-      right: 13px;
-
-      @include transform(translateY(-50%));
-    }
-  }
-
-  // PREPENDS AND APPENDS
-
-  &.has-addon {
-    display: grid;
-    grid-template-rows: auto 1fr;
-
-    .input-addon {
-      background: #D7D9E2;
-      line-height: 46px;
-      height: 46px;
-      padding: 0 18px;
-      // @extend %transition-all;
-    }
-
-    label {
-      grid-column: 1/3;
-      grid-row: 1;
-    }
-
-    &.preppend {
-      grid-template-columns: auto 1fr;
-
-      .input-addon {
-        grid-column: 1;
-        grid-row: 2;
-        @include border-left-radius(4px);
-      }
-
-      input,
-      textarea,
-      select {
-        @include border-left-radius(0);
-      }
-    }
-
-    &.append {
-      grid-template-columns: 1fr auto;
-
-      .input-addon {
-        grid-column: 2;
-        grid-row: 2;
-        @include border-right-radius(4px);
-      }
-
-      input,
-      textarea,
-      select {
-        @include border-right-radius(0);
-      }
-    }
-
-    // Focus
-    input:focus + .input-addon,
-    textarea:focus + .input-addon,
-    select:focus + .input-addon {
-      background: $color-primary;
-      color: #fff;
-    }
-  }
-
-  // ERRORS
-  &.has-error {
-    // OVERWRITES
-    // to be extended
-    .error-input-styles {
-      background-color: #fff4f6;
-      border-color: $color-alert;
-      color: $color-alert;
-
-      &:focus {
-        border-color: $color-alert;
-
-        @include box-shadow(0 0 0 3px rgba($color-alert, 0.15) inset);
-      }
-    }
-
-    input[type=date],
-    input[type=datetime],
-    input[type=datetime-local],
-    input[type=email],
-    input[type=month],
-    input[type=number],
-    input[type=password],
-    input[type=range],
-    input[type=search],
-    input[type=tel],
-    input[type=text],
-    input[type=time],
-    input[type=url],
-    input[type=week],
-    textarea,
-    select {
-      @extend .error-input-styles;
-    }
-
-    .input-addon {
-      background-color: $color-alert;
-      color: #fff;
-    }
-
-    // Focus
-    input:focus + .input-addon,
-    textarea:focus + .input-addon,
-    select:focus + .input-addon {
-      background: $color-alert;
-    }
-
-    .select-wrapper {
-      &::after {
-        border-color: $color-alert transparent transparent transparent;
-      }
-    }
-
-    // Error Message
-    span.error-msg {
-      display: block;
-      grid-column: 1 / span 2;
-
-      font-size: rem-calc(10px);
-      color: $color-alert;
-    }
-  }
-
-  // IS RADIO or CHECKBOX
-  &.radio {
-    input {
-      position: absolute;
-      opacity: 0;
-
-      // Label
-      & + label {
-        cursor: pointer;
-        font-weight: 400;
-        padding: 0;
-        margin: 0;
-        position: relative;
-
-        // Circle
-        &::before {
-          content: '';
-          display: inline-block;
-          background: #fff;
-          border: 1px solid #D7D9E2;
-          margin-right: 10px;
-          vertical-align: text-top;
-          width: 20px;
-          height: 20px;
-          @include border-radius(100%);
-        }
-      }
-
-      // Circle hover
-      &:hover + label::before {
-        background: #F7F8FB;
-      }
-
-      // Circle focus
-      &:focus + label::before {
-        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
-      }
-
-      // Circle checked
-      &:checked + label::before {
-        border-color: $color-primary;
-        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
-      }
-
-      // Disabled state label
-      &:disabled + label {
-        color: #b8b8b8;
-        cursor: auto;
-
-        // Disabled Circle
-        &::before {
-          box-shadow: none;
-          background: #ddd;
-        }
-      }
-
-      // Checkmark
-      &:checked + label::after {
-        content: '';
-        background: $color-primary;
-        width: 8px;
-        height: 8px;
-        position: absolute;
-        left: 6px;
-        top: 50%;
-        @include border-radius(100%);
-        @include transform(translateY(-50%));
-      }
-    }
-  }
-
-  &.checkbox {
-    input {
-      position: absolute;
-      opacity: 0;
-
-      // Label
-      & + label {
-        cursor: pointer;
-        font-weight: 400;
-        padding: 0;
-        margin: 0;
-        position: relative;
-
-        // Box
-        &::before {
-          content: '';
-          display: inline-block;
-          background: #fff;
-          border: 1px solid #D7D9E2;
-          margin-right: 10px;
-          vertical-align: text-top;
-          width: 20px;
-          height: 20px;
-          @include border-radius(3px);
-        }
-      }
-
-      // Box hover
-      &:hover + label::before {
-        background: #F7F8FB;
-      }
-
-      // Box focus
-      &:focus + label::before {
-        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
-      }
-
-      // Box checked
-      &:checked + label::before {
-        border-color: $color-primary;
-        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
-      }
-
-      // Disabled state label
-      &:disabled + label {
-        color: #b8b8b8;
-        cursor: auto;
-
-        // Disabled box
-        &::before {
-          box-shadow: none;
-          background: #ddd;
-        }
-      }
-
-      // Checkmark
-      &:checked + label::after {
-        content: '';
-        position: absolute;
-        left: 5px;
-        top: 11px;
-        background: $color-primary;
-        width: 2px;
-        height: 2px;
-        @include box-shadow(
-          2px 0 0 $color-primary,
-          4px 0 0 $color-primary,
-          4px -2px 0 $color-primary,
-          4px -4px 0 $color-primary,
-          4px -6px 0 $color-primary,
-          4px -8px 0 $color-primary
-        );
-        @include transform(rotate(45deg));
-      }
-    }
-  }
-
-  // SMALL INPUTS
-  &.small {
-    margin-bottom: 20px;
-
-    input,
-    label,
-    select,
-    button,
-    textarea {
-      font-size: rem-calc(14px);
-    }
-
-    label {
-      margin-bottom: 5px;
-    }
-
-    input[type=date],
-    input[type=datetime],
-    input[type=datetime-local],
-    input[type=email],
-    input[type=month],
-    input[type=number],
-    input[type=password],
-    input[type=range],
-    input[type=search],
-    input[type=tel],
-    input[type=text],
-    input[type=time],
-    input[type=url],
-    input[type=week],
-    select {
-      padding: 0 14px;
-      min-height: 36px;
-    }
-
-    &.has-addon {
-      .input-addon {
-        height: 36px;
-        line-height: 36px;
-      }
-    }
-  }
-
-}
-
-// TOGGLE SWITCH
-.toggle-button-with-label {
-  display: flex;
-  justify-content: space-between;
-  padding-top: 20px;
-
-  label {
-    font-size: 14px;
-  }
-}
-
-.onoffswitch {
-  position: relative;
-  width: 40px;
-  height: 25px;
-  @include user-select(none);
-
-  &.blue {
-    .onoffswitch-inner:before {
-      background-color: $color-primary;
-    }
-  }
-
-  &.outline-alert-off {
-    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-      border: 1px solid #0504de;
-    }
-    .onoffswitch-inner{
-      &::after {
-        background-color: $color-alert;
-        color: white;
-      }
-      &::before {
-        color: $color-primary;
-        box-shadow: 0 0 0 2px $color-primary inset;
-        background: white;
-      }
-    }
-  }
-
-  &.outline-alert-on {
-    .onoffswitch-checkbox:not(:checked) + .onoffswitch-label .onoffswitch-switch {
-      border: 1px solid #0504de;
-    }
-
-    .onoffswitch-inner {
-      &::after {
-        color: $color-primary;
-        box-shadow: 0 0 0 2px $color-primary inset;
-        background: white;
-      }
-      &::before {
-        background-color: $color-alert;
-        color: white;
-      }
-    }
-
-  }
-
-
-  &.labeled {
-    width: 46px;
-
-    .onoffswitch-inner:before {
-      content: "Sí";
-      padding-left: 7px;
-    }
-    .onoffswitch-inner:after {
-      content: "No";
-      padding-right: 7px;
-    }
-    .onoffswitch-switch {
-      right: 21px;
-    }
-  }
-}
-
-.onoffswitch-checkbox {
-  display: none;
-}
-
-.onoffswitch-label {
-  display: block; overflow: hidden; cursor: pointer;
-  @include border-radius(50px)
-}
-
-.onoffswitch-inner {
-  display: block;
-  width: 200%;
-  margin-left: -100%;
-  @include transition(margin 0.2s ease-in 0s);
-}
-
-.onoffswitch-inner:before, .onoffswitch-inner:after {
-  float: left;
-  width: 50%;
-  height: 25px;
-  padding: 0;
-  line-height: 25px;
-  font-size: 9px;
-  color: white;
-  @include border-radius(50px);
-  -webkit-transform: none;
-}
-
-.onoffswitch-inner:before {
-  content: "";
-  padding-left: 9px;
-  background-color: rgba(0,0,0,.2);
-  color: #FFFFFF;
-}
-
-.onoffswitch-inner:after {
-  content: "";
-  padding-right: 9px;
-  background-color: rgba(0,0,0,.8);
-  color: #999999;
-  text-align: right;
-}
-
-.onoffswitch-switch {
-  display: block;
-  width: 21px;
-  margin: 2px;
-  background: #FFFFFF;
-  @include border-radius(50px);
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 15px;
-  @include transition( all 0.2s ease-in 0s);
-}
-
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
-  margin-left: 0;
-}
-
-.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-  right: 0px;
-}
-
-// OTP code sender
-.forwarding-actions {
-  font-size: 0.8rem;
-}
-
-.code-senders-section {
-  margin: 35px 0;
-  .whatsapp-button-container{
-    display: flex;
-    justify-content: center;
-    .whatsapp-button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: #1ebea5;
-      &:hover {
-        background-color: darken(#1ebea5, 10%);
-      }
-
-      img {
-        margin-right: 5px;
-      }
-
-      @include responsive-max($breakpoint-small) {
-        text-align: center;
-      }
-    }
-  }
-
-  .sms-button-container {
-    margin-top: 10px;
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.documents-section {
-  .upload-box {
-    .upload-box-content {
-      .drop-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: dashed 2px lightgray;
-        width: 100%;
-        height: 150px;
-        padding: 20px;
-
-        &.drag-over {
-          border: dashed 2px $color-primary;
-        }
-
-        p {
-          font-size: 16px;
-          font-weight: 400;
-          color: $color-secondary;
-        }
-
-        .upload-button {
-          display: inline-block;
-          border: none;
-          outline: none;
-          cursor: pointer;
-          font-weight: 600;
-          padding: 0 2px;
-
-          input {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .queue-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-
-      .badge {
-        display: inline-block;
-        background-color: $color-success;
-        min-width: 10px;
-        padding: 3px 7px;
-        font-size: 12px;
-        font-weight: bold;
-        line-height: 1;
-        color: #fff;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: middle;
-        border-radius: 10px;
-        margin-left: 10px;
-      }
-    }
-
-    header.queue-list {
-      display: grid;
-      grid-template-columns: 4fr 1fr 1fr 2fr 1fr;
-      grid-column-gap: 30px;
-      align-items: center;
-      border-bottom: 1px solid $color-secondary-light;
-      padding: 10px 0;
-
-      .history-header {
-        font-size: rem-calc(12px);
-        font-weight: 900;
-
-        &.last {
-          text-align: right;
-          padding-right: 12px;
-        }
-      }
-    }
-
-    ul.queue-list {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      li {
-        display: grid;
-        grid-template-columns: 4fr 1fr 1fr 2fr 1fr;
-        grid-column-gap: 30px;
-        align-items: center;
-        border-bottom: 1px solid #dadce2;
-        padding: 10px 0;
-
-        &:last-child {
-          border-bottom: none;
-        }
-
-        .file-box {
-          span {
-            display: block;
-
-            &.file-name {
-              word-break: break-all;
-              font-weight: 600;
-              font-size: rem-calc(14px);
-            }
-
-            &.size {
-              font-size: rem-calc(12px);
-            }
-          }
-
-          &.last {
-            display: grid;
-            justify-items: center;
-          }
-
-          .eta-text {
-            display: flex;
-            justify-content: flex-end;
-            font-size: rem-calc(12px);
-          }
-        }
-      }
-    }
-
-    .queue-progress-bar {
-      margin: 10px 0 20px 0;
-    }
-
-    .action-buttons {
-      display: flex;
-      justify-content: space-between;
-
-      :last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .download-box {
-    margin-bottom: 60px;
-  }
-}
+/*#############################################################################
+# FORMS AND INPUTS
+#############################################################################*/
+
+// FORM GROUPS
+.form-group-lg {
+  margin-bottom: 15px;
+}
+
+// INPUT GROUPS
+.input-group {
+  margin: 0 0 30px;
+
+  > label {
+    display: block;
+    font-weight: 900;
+    line-height: rem-calc(24px);
+    margin-bottom: 10px;
+  }
+
+  .input-wrapper {
+    margin-bottom: 10px;
+  }
+}
+
+// INPUT WRAPPER
+.input-wrapper {
+  margin: 0 0 20px;
+  position: relative;
+
+  &.no-margin {
+    margin: 0;
+  }
+
+  input {
+    width: 100%;
+  }
+
+  // Clear base styles
+  input,
+  label,
+  select,
+  button,
+  textarea {
+    margin: 0;
+    border: 0;
+    padding: 0;
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
+    line-height: 1;
+
+    // Browsers have different default form fonts
+    font-size: rem-calc(16px);
+    font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
+    // Animate Transitions
+    // @extend %transition-all;
+  }
+
+  /* Remove the stupid outer glow in Webkit */
+  input:focus,
+  textarea:focus,
+  select:focus {
+    outline: 0;
+  }
+
+  /* Labels
+  -----------------------------------------------*/
+
+  label {
+    line-height: rem-calc(24px);
+    margin-bottom: 10px;
+
+    .required {
+      color: $color-alert;
+    }
+  }
+
+  /* Text Inputs
+  -----------------------------------------------*/
+
+  // To be extended
+  .general-input-styles {
+    display: block;
+    background-color: #ffffff;
+    border: 1px solid #D7D9E2;
+    color: $color-text;
+    font-weight: 400;
+    margin: 0;
+    padding: 12px 18px;
+    min-height: 46px;
+    width: 100%;
+
+    @include border-radius(4px);
+
+    // Focus
+    &:focus {
+      border-color: $color-primary;
+
+      @include box-shadow(0 0 0 3px rgba($color-primary, 0.15) inset);
+    }
+
+    // Disabled
+    &:disabled {
+      background-color: #F4F4F4;
+      border-color: #E9EAEA;
+      color: #B6B8BD;
+    }
+  }
+
+  input[type=date],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=email],
+  input[type=month],
+  input[type=number],
+  input[type=password],
+  input[type=range],
+  input[type=search],
+  input[type=tel],
+  input[type=text],
+  input[type=time],
+  input[type=url],
+  input[type=week] {
+    @extend .general-input-styles;
+  }
+
+  /* Button Controls
+  -----------------------------------------------*/
+
+  input[type=checkbox],
+  input[type=radio] {
+    width: 15px;
+    height: 15px;
+  }
+
+
+  /* Textarea
+  -----------------------------------------------*/
+
+  textarea {
+    /* Move the label to the top */
+    vertical-align: top;
+
+    /* Turn off scroll bars in IE unless needed */
+    overflow: auto;
+
+    @extend .general-input-styles;
+  }
+
+  /* Selects
+  -----------------------------------------------*/
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    white-space: nowrap;
+
+    @extend .general-input-styles;
+    padding-right: 30px;
+  }
+
+  /* Placeholder
+  -----------------------------------------------*/
+
+  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $color-secondary;
+  }
+  ::-moz-placeholder { /* Firefox 19+ */
+    color: $color-secondary;
+  }
+  :-ms-input-placeholder { /* IE 10+ */
+    color: $color-secondary;
+  }
+  :-moz-placeholder { /* Firefox 18- */
+    color: $color-secondary;
+  }
+
+  // FILTER SELECT WRAPPER
+  .select-wrapper {
+    position: relative;
+
+    &::after {
+      display: block;
+      content: "";
+
+      border-style: solid;
+      border-width: 5px 5px 0 5px;
+      border-color: #D7D9E2 transparent transparent transparent;
+      width: 0;
+      height: 0;
+
+      position: absolute;
+      top: 50%;
+      right: 13px;
+
+      @include transform(translateY(-50%));
+    }
+  }
+
+  // PREPENDS AND APPENDS
+
+  &.has-addon {
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    .input-addon {
+      background: #D7D9E2;
+      line-height: 46px;
+      height: 46px;
+      padding: 0 18px;
+      // @extend %transition-all;
+    }
+
+    label {
+      grid-column: 1/3;
+      grid-row: 1;
+    }
+
+    &.preppend {
+      grid-template-columns: auto 1fr;
+
+      .input-addon {
+        grid-column: 1;
+        grid-row: 2;
+        @include border-left-radius(4px);
+      }
+
+      input,
+      textarea,
+      select {
+        @include border-left-radius(0);
+      }
+    }
+
+    &.append {
+      grid-template-columns: 1fr auto;
+
+      .input-addon {
+        grid-column: 2;
+        grid-row: 2;
+        @include border-right-radius(4px);
+      }
+
+      input,
+      textarea,
+      select {
+        @include border-right-radius(0);
+      }
+    }
+
+    // Focus
+    input:focus + .input-addon,
+    textarea:focus + .input-addon,
+    select:focus + .input-addon {
+      background: $color-primary;
+      color: #fff;
+    }
+  }
+
+  // ERRORS
+  &.has-error {
+    // OVERWRITES
+    // to be extended
+    .error-input-styles {
+      background-color: #fff4f6;
+      border-color: $color-alert;
+      color: $color-alert;
+
+      &:focus {
+        border-color: $color-alert;
+
+        @include box-shadow(0 0 0 3px rgba($color-alert, 0.15) inset);
+      }
+    }
+
+    input[type=date],
+    input[type=datetime],
+    input[type=datetime-local],
+    input[type=email],
+    input[type=month],
+    input[type=number],
+    input[type=password],
+    input[type=range],
+    input[type=search],
+    input[type=tel],
+    input[type=text],
+    input[type=time],
+    input[type=url],
+    input[type=week],
+    textarea,
+    select {
+      @extend .error-input-styles;
+    }
+
+    .input-addon {
+      background-color: $color-alert;
+      color: #fff;
+    }
+
+    // Focus
+    input:focus + .input-addon,
+    textarea:focus + .input-addon,
+    select:focus + .input-addon {
+      background: $color-alert;
+    }
+
+    .select-wrapper {
+      &::after {
+        border-color: $color-alert transparent transparent transparent;
+      }
+    }
+
+    // Error Message
+    span.error-msg {
+      display: block;
+      grid-column: 1 / span 2;
+
+      font-size: rem-calc(10px);
+      color: $color-alert;
+    }
+  }
+
+  // IS RADIO or CHECKBOX
+  &.radio {
+    input {
+      position: absolute;
+      opacity: 0;
+
+      // Label
+      & + label {
+        cursor: pointer;
+        font-weight: 400;
+        padding: 0;
+        margin: 0;
+        position: relative;
+
+        // Circle
+        &::before {
+          content: '';
+          display: inline-block;
+          background: #fff;
+          border: 1px solid #D7D9E2;
+          margin-right: 10px;
+          vertical-align: text-top;
+          width: 20px;
+          height: 20px;
+          @include border-radius(100%);
+        }
+      }
+
+      // Circle hover
+      &:hover + label::before {
+        background: #F7F8FB;
+      }
+
+      // Circle focus
+      &:focus + label::before {
+        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
+      }
+
+      // Circle checked
+      &:checked + label::before {
+        border-color: $color-primary;
+        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
+      }
+
+      // Disabled state label
+      &:disabled + label {
+        color: #b8b8b8;
+        cursor: auto;
+
+        // Disabled Circle
+        &::before {
+          box-shadow: none;
+          background: #ddd;
+        }
+      }
+
+      // Checkmark
+      &:checked + label::after {
+        content: '';
+        background: $color-primary;
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        left: 6px;
+        top: 50%;
+        @include border-radius(100%);
+        @include transform(translateY(-50%));
+      }
+    }
+  }
+
+  &.checkbox {
+    input {
+      position: absolute;
+      opacity: 0;
+
+      // Label
+      & + label {
+        cursor: pointer;
+        font-weight: 400;
+        padding: 0;
+        margin: 0;
+        position: relative;
+
+        // Box
+        &::before {
+          content: '';
+          display: inline-block;
+          background: #fff;
+          border: 1px solid #D7D9E2;
+          margin-right: 10px;
+          vertical-align: text-top;
+          width: 20px;
+          height: 20px;
+          @include border-radius(3px);
+        }
+      }
+
+      // Box hover
+      &:hover + label::before {
+        background: #F7F8FB;
+      }
+
+      // Box focus
+      &:focus + label::before {
+        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
+      }
+
+      // Box checked
+      &:checked + label::before {
+        border-color: $color-primary;
+        @include box-shadow(0 0 0 2px rgba($color-primary, 0.15) inset);
+      }
+
+      // Disabled state label
+      &:disabled + label {
+        color: #b8b8b8;
+        cursor: auto;
+
+        // Disabled box
+        &::before {
+          box-shadow: none;
+          background: #ddd;
+        }
+      }
+
+      // Checkmark
+      &:checked + label::after {
+        content: '';
+        position: absolute;
+        left: 5px;
+        top: 11px;
+        background: $color-primary;
+        width: 2px;
+        height: 2px;
+        @include box-shadow(
+          2px 0 0 $color-primary,
+          4px 0 0 $color-primary,
+          4px -2px 0 $color-primary,
+          4px -4px 0 $color-primary,
+          4px -6px 0 $color-primary,
+          4px -8px 0 $color-primary
+        );
+        @include transform(rotate(45deg));
+      }
+    }
+  }
+
+  // SMALL INPUTS
+  &.small {
+    margin-bottom: 20px;
+
+    input,
+    label,
+    select,
+    button,
+    textarea {
+      font-size: rem-calc(14px);
+    }
+
+    label {
+      margin-bottom: 5px;
+    }
+
+    input[type=date],
+    input[type=datetime],
+    input[type=datetime-local],
+    input[type=email],
+    input[type=month],
+    input[type=number],
+    input[type=password],
+    input[type=range],
+    input[type=search],
+    input[type=tel],
+    input[type=text],
+    input[type=time],
+    input[type=url],
+    input[type=week],
+    select {
+      padding: 0 14px;
+      min-height: 36px;
+    }
+
+    &.has-addon {
+      .input-addon {
+        height: 36px;
+        line-height: 36px;
+      }
+    }
+  }
+
+}
+
+// TOGGLE SWITCH
+.toggle-button-with-label {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 20px;
+
+  label {
+    font-size: 14px;
+  }
+}
+
+.onoffswitch {
+  position: relative;
+  width: 40px;
+  height: 25px;
+  @include user-select(none);
+
+  &.blue {
+    .onoffswitch-inner:before {
+      background-color: $color-primary;
+    }
+  }
+
+  &.outline-alert-off {
+    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+      border: 1px solid #0504de;
+    }
+    .onoffswitch-inner{
+      &::after {
+        background-color: $color-alert;
+        color: white;
+      }
+      &::before {
+        color: $color-primary;
+        box-shadow: 0 0 0 2px $color-primary inset;
+        background: white;
+      }
+    }
+  }
+
+  &.outline-alert-on {
+    .onoffswitch-checkbox:not(:checked) + .onoffswitch-label .onoffswitch-switch {
+      border: 1px solid #0504de;
+    }
+
+    .onoffswitch-inner {
+      &::after {
+        color: $color-primary;
+        box-shadow: 0 0 0 2px $color-primary inset;
+        background: white;
+      }
+      &::before {
+        background-color: $color-alert;
+        color: white;
+      }
+    }
+
+  }
+
+
+  &.labeled {
+    width: 46px;
+
+    .onoffswitch-inner:before {
+      content: "Sí";
+      padding-left: 7px;
+    }
+    .onoffswitch-inner:after {
+      content: "No";
+      padding-right: 7px;
+    }
+    .onoffswitch-switch {
+      right: 21px;
+    }
+  }
+}
+
+.onoffswitch-checkbox {
+  display: none;
+}
+
+.onoffswitch-label {
+  display: block; overflow: hidden; cursor: pointer;
+  @include border-radius(50px)
+}
+
+.onoffswitch-inner {
+  display: block;
+  width: 200%;
+  margin-left: -100%;
+  @include transition(margin 0.2s ease-in 0s);
+}
+
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+  float: left;
+  width: 50%;
+  height: 25px;
+  padding: 0;
+  line-height: 25px;
+  font-size: 9px;
+  color: white;
+  @include border-radius(50px);
+  -webkit-transform: none;
+}
+
+.onoffswitch-inner:before {
+  content: "";
+  padding-left: 9px;
+  background-color: rgba(0,0,0,.2);
+  color: #FFFFFF;
+}
+
+.onoffswitch-inner:after {
+  content: "";
+  padding-right: 9px;
+  background-color: rgba(0,0,0,.8);
+  color: #999999;
+  text-align: right;
+}
+
+.onoffswitch-switch {
+  display: block;
+  width: 21px;
+  margin: 2px;
+  background: #FFFFFF;
+  @include border-radius(50px);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 15px;
+  @include transition( all 0.2s ease-in 0s);
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+  margin-left: 0;
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+  right: 0px;
+}
+
+// OTP code sender
+.forwarding-actions {
+  font-size: 0.8rem;
+}
+
+.code-senders-section {
+  margin: 35px 0;
+  .whatsapp-button-container{
+    display: flex;
+    justify-content: center;
+    .whatsapp-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #1ebea5;
+      &:hover {
+        background-color: darken(#1ebea5, 10%);
+      }
+
+      img {
+        margin-right: 5px;
+      }
+
+      @include responsive-max($breakpoint-small) {
+        text-align: center;
+      }
+    }
+  }
+
+  .sms-button-container {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.documents-section {
+  .upload-box {
+    .upload-box-content {
+      .drop-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: dashed 2px lightgray;
+        width: 100%;
+        height: 150px;
+        padding: 20px;
+
+        &.drag-over {
+          border: dashed 2px $color-primary;
+        }
+
+        p {
+          font-size: 16px;
+          font-weight: 400;
+          color: $color-secondary;
+        }
+
+        .upload-button {
+          display: inline-block;
+          border: none;
+          outline: none;
+          cursor: pointer;
+          font-weight: 600;
+          padding: 0 2px;
+
+          input {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .queue-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+
+      .badge {
+        display: inline-block;
+        background-color: $color-success;
+        min-width: 10px;
+        padding: 3px 7px;
+        font-size: 12px;
+        font-weight: bold;
+        line-height: 1;
+        color: #fff;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        border-radius: 10px;
+        margin-left: 10px;
+      }
+    }
+
+    header.queue-list {
+      display: grid;
+      grid-template-columns: 4fr 1fr 1fr 2fr 1fr;
+      grid-column-gap: 30px;
+      align-items: center;
+      border-bottom: 1px solid $color-secondary-light;
+      padding: 10px 0;
+
+      .history-header {
+        font-size: rem-calc(12px);
+        font-weight: 900;
+
+        &.last {
+          text-align: right;
+          padding-right: 12px;
+        }
+      }
+    }
+
+    ul.queue-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        display: grid;
+        grid-template-columns: 4fr 1fr 1fr 2fr 1fr;
+        grid-column-gap: 30px;
+        align-items: center;
+        border-bottom: 1px solid #dadce2;
+        padding: 10px 0;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .file-box {
+          span {
+            display: block;
+
+            &.file-name {
+              word-break: break-all;
+              font-weight: 600;
+              font-size: rem-calc(14px);
+            }
+
+            &.size {
+              font-size: rem-calc(12px);
+            }
+          }
+
+          &.last {
+            display: grid;
+            justify-items: center;
+          }
+
+          .eta-text {
+            display: flex;
+            justify-content: flex-end;
+            font-size: rem-calc(12px);
+          }
+        }
+      }
+    }
+
+    .queue-progress-bar {
+      margin: 10px 0 20px 0;
+    }
+
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+
+      :last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .download-box {
+    margin-bottom: 60px;
+  }
+}