/* media size */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* Firefox */
input[type=number] {
  -moz-appearance: textfield; }

button:active {
  transform: translateY(1px); }

.btn:focus {
  box-shadow: none; }

a {
  text-decoration: none !important; }

::-webkit-scrollbar {
  display: none; }

#backtop {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  color: #f14448;
  cursor: pointer;
  /* Add a mouse pointer on hover */
  font-size: 18px;
  /* Increase font size */
  background: transparent;
  border: 0;
  width: 50px; }
  @media (min-width: 768px) and (max-width: 1023px) {
    #backtop {
      right: 15px; } }
  @media (min-width: 320px) and (max-width: 479px) {
    #backtop {
      bottom: 70px;
      right: 10px; } }

#backtop:hover {
  color: #00558E;
  /* Add a dark-grey background on hover */ }

.slick-slider .slick-prev:before, .slick-slider .slick-next:before {
  line-height: 1;
  color: white;
  opacity: 0.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.slick-slider .slick-prev, .slick-slider .slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  top: -10px;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: black;
  margin-top: -10px;
  padding: 0;
  border: none;
  outline: none;
  transform: translateY(-100%); }
  .slick-slider .slick-prev:focus, .slick-slider .slick-next:focus {
    outline: none; }
  .slick-slider .slick-prev.slick-disabled:before, .slick-slider .slick-next.slick-disabled:before {
    opacity: 0.25; }

.slick-slider .slick-prev {
  left: auto;
  right: 25px !important;
  background-size: 100% 100%; }
  @media (min-width: 320px) and (max-width: 479px) {
    .slick-slider .slick-prev {
      left: auto;
      right: 25px !important;
      width: 20px;
      height: 20px; } }

.slick-slider .slick-next {
  right: 0 !important;
  background-size: 100% 100%; }
  @media (min-width: 320px) and (max-width: 479px) {
    .slick-slider .slick-next {
      right: 0px;
      width: 20px;
      height: 20px; } }

@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px); }
  50% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px); }
  100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px); } }

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px); }
  50% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px); }
  100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px); } }

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px); } }

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px); } }

.floating {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate; }

.cur-point {
  cursor: pointer; }

.text-border {
  text-shadow: #01070a 3px 0px 0px, #01070a 0.5403px 0.84147px 0px, #01070a -0.41615px 0.9093px 0px, #01070a -0.98999px 0.14112px 0px, #01070a -0.65364px -0.7568px 0px, #01070a 0.28366px -0.95892px 0px, #01070a 0.96017px -0.27942px 0px; }

body {
  color: #718096;
  background: #1b1e31;
  font-size: 16px;
  margin: 0; }
  @media (min-width: 320px) and (max-width: 479px) {
    body {
      font-size: 14px; } }

.dropdown-menu {
  border: 0px;
  box-shadow: rgba(113, 128, 150, 0.2) 9.72603px 14.589px 48.6301px;
  border-radius: 15.5616px; }

.navbar-toggler:focus {
  box-shadow: none; }

.img-logo {
  width: 150px; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .img-logo {
      width: 40px; } }
  @media (min-width: 320px) and (max-width: 479px) {
    .img-logo {
      width: 30px; } }

.policy-icon {
  width: 23px; }

.logo-logo {
  width: 150px; }

.daterangepicker {
  background-color: #14235B;
  color: #F2F2F2; }
  .daterangepicker .calendar-table {
    background: transparent; }
    .daterangepicker .calendar-table td {
      height: 32px; }
    .daterangepicker .calendar-table .monthselect, .daterangepicker .calendar-table .yearselect {
      background-color: #14235B;
      color: #F2F2F2; }
  .daterangepicker .drp-buttons {
    display: none !important; }
  .daterangepicker td.available:hover {
    border-radius: 100% !important;
    background-color: #0075ff !important; }
  .daterangepicker td.off {
    color: #565e64;
    background-color: transparent !important; }
  .daterangepicker td.active {
    border-radius: 100% !important;
    background: linear-gradient(89.33deg, #0075ff 0.58%, #00d1ff 104.03%) !important; }

.table-responsive {
  width: 100%;
  overflow-x: scroll; }
  .table-responsive .table {
    font-weight: lighter; }
    .table-responsive .table th {
      font-weight: lighter !important; }
    @media (min-width: 320px) and (max-width: 479px) {
      .table-responsive .table {
        width: 1000px; } }

#menu-btn {
  position: absolute;
  top: 50%;
  left: 0; }

.text-gray {
  color: #718096; }

.text-pink {
  color: #f14448; }

.setting-block .divide-line {
  width: 2px;
  height: 40px;
  background-color: #f1f2f4; }

.setting-block .balance-box {
  background: #303449;
  color: white; }
  .setting-block .balance-box:hover p {
    color: #f14448; }

.account-bg .name-block {
  background: linear-gradient(112.77deg, #002b16 14.65%, #54ce93 87.93%);
  padding: 16px 24px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.5); }
  .account-bg .name-block small {
    font-size: 10px !important; }

.account-bg .nav-pills .nav-item .nav-link {
  color: #a0aec0;
  border: 1px solid rgba(207, 219, 213, 0.7);
  background: #eeeff2; }

.account-bg .nav-pills .nav-item .active {
  background: #f14448;
  color: white; }

.account-bg .account-block {
  height: calc(100vh - 160px); }

.text-green {
  color: #86d7b0; }

.btn-submit {
  background: #f14448;
  color: white;
  border: 0; }
  .btn-submit:hover, .btn-submit:focus {
    background: #f14448;
    color: white; }

/* .offcanvas-bottom {
  min-height: 60%;
  height: auto !important;
  border-radius: 32px 32px 0 0; } */

  .offcanvas-bottom {
    max-height: 60vh !important;
    height: auto !important;
    border-radius: 32px 32px 0 0; }
    @media (min-width: 320px) and (max-width: 479px) {
      .offcanvas-bottom {
        max-height: 100% !important; } }

.bg-blue-dard {
  background-color: #1b1e31; }

.btn-blue-dark {
  background: #1b1e31;
  color: white; }

section {
  height: 100vh; }
  section .wrapper {
    height: 100%;
    /* for main section */ }
    @media (min-width: 320px) and (max-width: 479px) {
      section .wrapper .menu-bg {
        width: 250px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      section .wrapper .menu-bg {
        width: 250px; } }
    section .wrapper .menu-bg .menu-block {
      height: calc(100% - 170px);
      overflow-y: scroll;
      transition: 0.3s; }
      @media (min-width: 320px) and (max-width: 479px) {
        section .wrapper .menu-bg .menu-block {
          height: calc(100% - 190px); } }
      section .wrapper .menu-bg .menu-block .icon-menu {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center; }
      section .wrapper .menu-bg .menu-block .block-bg {
        border-radius: 10px;
        border: 1px solid #ffffff;
        position: relative; }
      section .wrapper .menu-bg .menu-block .nav-link {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        color: #718096;
        overflow-x: hidden;
        width: 240px; }
        @media (min-width: 320px) and (max-width: 479px) {
          section .wrapper .menu-bg .menu-block .nav-link {
            width: 100%; } }
    section .wrapper .menu-bg .footer-bar .bottom-banner {
      height: 80px;
      position: relative;
      color: #718096; }
      section .wrapper .menu-bg .footer-bar .bottom-banner .question-logo {
        position: absolute;
        top: 0;
        left: 50%;
        width: 35px; }
      section .wrapper .menu-bg .footer-bar .bottom-banner .btn-help {
        background: #323b49;
        color: #718096; }
    section .wrapper .side-navbar {
      width: 60px;
      height: 100%;
      position: fixed;
      overflow-x: hidden;
      background: #1b1e31; }
      section .wrapper .side-navbar .logo {
        height: 56px; }
      section .wrapper .side-navbar .navbar-brand, section .wrapper .side-navbar .footer-bar {
        display: none; }
      @media (min-width: 320px) and (max-width: 479px) {
        section .wrapper .side-navbar {
          display: none !important; } }
    section .wrapper .nav-header {
      width: 250px !important;
      margin-right: 0px; }
    section .wrapper .navbar-brand-2 {
      display: block; }
    section .wrapper .nav-link:active .nav-text, section .wrapper .nav-link:active .icon,
    section .wrapper .nav-link:focus .nav-text,
    section .wrapper .nav-link:focus .icon,
    section .wrapper .nav-link:hover .nav-text,
    section .wrapper .nav-link:hover .icon {
      color: #f14448;
      font-weight: 700; }
    section .wrapper .nav-link {
      color: #718096;
      font-size: 14px; }
      section .wrapper .nav-link .icon {
        font-size: 20px; }
    section .wrapper .active .nav-text, section .wrapper .active .icon {
      color: #f14448;
      font-weight: 700; }
    section .wrapper .nav-text {
      display: none;
      font-weight: 500; }
    section .wrapper .active-cont {
      margin-left: 250px !important; }
      @media (min-width: 320px) and (max-width: 479px) {
        section .wrapper .active-cont {
          margin-left: 0px !important; } }
      @media (min-width: 768px) and (max-width: 1023px) {
        section .wrapper .active-cont {
          margin-left: 0px !important; } }
    section .wrapper .active-nav {
      width: 250px;
      margin-left: 0; }
      section .wrapper .active-nav .navbar-brand, section .wrapper .active-nav .footer-bar {
        display: block; }
      section .wrapper .active-nav .navbar-brand-2 {
        display: none; }
      section .wrapper .active-nav .nav-text {
        display: block; }
      section .wrapper .active-nav .menu-block {
        height: calc(100% - 145px); }
    section .wrapper .main {
      height: 100%;
      margin-left: 60px;
      transition: 0.3s;
      background: #1b1e31; }
      section .wrapper .main header {
        background: white; }
        section .wrapper .main header .top-navbar {
          background: #1b1e31; }
          section .wrapper .main header .top-navbar .user-avt {
            width: 40px;
            border-radius: 100%; }
          section .wrapper .main header .top-navbar .text-menu {
            color: white;
            transition: 0.3s ease-in-out; }
            section .wrapper .main header .top-navbar .text-menu:hover {
              color: #f14448; }
          section .wrapper .main header .top-navbar .dropdown-menu {
            width: 230px; }
            section .wrapper .main header .top-navbar .dropdown-menu .dropdown-item {
              text-align: center;
              padding-top: 10px;
              padding-bottom: 10px;
              color: #040E2E; }
              section .wrapper .main header .top-navbar .dropdown-menu .dropdown-item:hover {
                color: black; }
      section .wrapper .main .content {
        height: calc(100% - 82px);
        overflow-y: scroll;
        background: #f4f4f4;
        padding-bottom: 55px;
        -webkit-border-top-left-radius: 40px;
        -moz-border-radius-topleft: 40px;
        border-top-left-radius: 40px; }
        @media (min-width: 320px) and (max-width: 479px) {
          section .wrapper .main .content {
            -webkit-border-top-left-radius: 20px;
            -webkit-border-top-right-radius: 20px;
            -moz-border-radius-topleft: 20px;
            -moz-border-radius-topright: 20px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px; } }
      section .wrapper .main .footer {
        width: 100%;
        background: #ffffff; }
        section .wrapper .main .footer .menu-bottom .nav-link {
          width: auto !important; }
  section .dashboard .switch-block {
    width: 100px; }
    section .dashboard .switch-block .form-check-input {
      margin: 0 !important; }
  section .dashboard .header-ds {
    position: relative;
    background: linear-gradient(90.21deg, #009d78 3.09%, #0c0c0c 88.88%);
    border-radius: 16px;
    margin-bottom: 62px; }
    section .dashboard .header-ds .text-header {
      font-weight: 700;
      font-size: 24px;
      line-height: 150%;
      color: white;
      margin-bottom: 24px;
      z-index: 2;
      position: relative; }
      @media (min-width: 320px) and (max-width: 479px) {
        section .dashboard .header-ds .text-header {
          font-size: 20px; } }
    section .dashboard .header-ds .side-img {
      position: absolute;
      right: -38px;
      bottom: -55px; }
      @media (min-width: 320px) and (max-width: 479px) {
        section .dashboard .header-ds .side-img {
          right: -55px;
          bottom: -65px;
          z-index: 1;
          width: 262px; } }
  section .dashboard .main-ds {
    width: 100%;
    overflow-x: scroll; }
    section .dashboard .main-ds .ds-title {
      background: -webkit-linear-gradient(#DBF535, #7FD362, #177346);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: bold;
      font-size: 24px;
      line-height: 130%; }
      section .dashboard .main-ds .ds-title .star {
        color: #7FD362;
        transform: rotate(30deg) translateY(-30%); }

@keyframes switch {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  50% {
    -webkit-transform: translateX(-4px);
    transform: translateX(-4px); }
  100% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px); } }
    section .dashboard .main-ds .btn-switch {
      animation-name: switch;
      animation-duration: 0.8s;
      animation-iteration-count: infinite; }
    section .dashboard .main-ds .main-block .main-content {
      position: relative;
      height: 196px;
      background: linear-gradient(#edf0f4, transparent 60%);
      font-size: 12px; }
      section .dashboard .main-ds .main-block .main-content .logo-rank {
        position: absolute;
        width: 40px;
        top: 0;
        left: 50%; }
      section .dashboard .main-ds .main-block .main-content .rank-block {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 0;
        left: 50%;
        background: #a0aec0;
        color: white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center; }
    section .dashboard .main-ds .main-block .rank-1 {
      background: linear-gradient(rgba(255, 190, 63, 0.5) 0%, rgba(255, 202, 98, 0) 40%); }
    section .dashboard .main-ds .main-block .rank-3 {
      background: linear-gradient(rgba(13, 151, 110, 0.5) 0%, rgba(255, 202, 98, 0) 40%); }
    section .dashboard .main-ds .leaderboard .leader-rank .rank-block {
      background: linear-gradient(272.63deg, rgba(194, 194, 194, 0.1), rgba(79, 86, 112, 0.1) 90%);
      height: 223px;
      border-radius: 20px 20px 0px 0px; }
      section .dashboard .main-ds .leaderboard .leader-rank .rank-block .avt-block {
        position: relative;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 3px solid #a0aec0;
        background: white;
        padding: 1px;
        color: #8a9dc6; }
        section .dashboard .main-ds .leaderboard .leader-rank .rank-block .avt-block .avt-rank {
          position: absolute;
          top: 100%;
          left: 50%;
          width: 36px; }
    section .dashboard .main-ds .leaderboard .leader-rank .rank-block-1st {
      background: linear-gradient(92.33deg, rgba(216, 146, 41, 0.8), rgba(165, 138, 0, 0.1) 90%);
      color: #ca8c31;
      height: 268px; }
      section .dashboard .main-ds .leaderboard .leader-rank .rank-block-1st .avt-block {
        border: 3px solid #ca8c31; }
        section .dashboard .main-ds .leaderboard .leader-rank .rank-block-1st .avt-block .crown {
          position: absolute;
          top: 0;
          left: 50%;
          width: 36px;
          transform: translateY(-80%) translateX(-50%); }
    section .dashboard .main-ds .leaderboard .leader-rank .rank-block-3th {
      background: linear-gradient(92.33deg, rgba(7, 200, 140, 0.8), rgba(53, 214, 202, 0.4) 90%);
      color: #0d946d; }
      section .dashboard .main-ds .leaderboard .leader-rank .rank-block-3th .avt-block {
        border: 3px solid #0d946d; }
    section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block {
      background: linear-gradient(272.63deg, rgba(194, 194, 194, 0.1), rgba(79, 86, 112, 0.1) 90%);
      border-radius: 20px; }
      section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block .avt-block {
        position: relative;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 3px solid #a0aec0;
        background: white;
        padding: 1px;
        color: #8a9dc6; }
        section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block .avt-block .crown {
          position: absolute;
          top: 0;
          left: 50%;
          width: 36px;
          transform: translateY(-80%) translateX(-50%); }
        section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block .avt-block .avt-rank {
          position: absolute;
          top: 100%;
          left: 50%;
          width: 36px; }
    section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block-1st {
      background: linear-gradient(92.33deg, rgba(216, 146, 41, 0.8), rgba(165, 138, 0, 0.1) 90%);
      color: #ca8c31; }
      section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block-1st .avt-block {
        border: 3px solid #ca8c31; }
        section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block-1st .avt-block .crown {
          position: absolute;
          top: 0;
          left: 50%;
          width: 36px;
          transform: translateY(-80%) translateX(-50%); }
    section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block-3th {
      background: linear-gradient(92.33deg, rgba(7, 200, 140, 0.8), rgba(53, 214, 202, 0.4) 90%);
      color: #0d946d; }
      section .dashboard .main-ds .leaderboard .leader-rank-mb .rank-block-3th .avt-block {
        border: 3px solid #0d946d; }
    section .dashboard .main-ds .leaderboard .rank-list .avt-block {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #0d946d;
      padding: 1px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center; }
  section .dashboard .right-block {
    color: black;
    font-size: 16px;
    font-weight: 700; }
    section .dashboard .right-block .block-title {
      font-size: 20px; }
    section .dashboard .right-block .block-content {
      position: relative;
      z-index: 2;
      background: white;
      margin-top: -25px;
      border-radius: 0px 0px 20px 20px; }
  section .portfolio .nav-pills .nav-link {
    background: transparent;
    border: 1px solid #eeeff2;
    color: #718096; }
    section .portfolio .nav-pills .nav-link .value {
      color: #000000; }
  section .portfolio .nav-pills .active {
    background: #1b1e31;
    color: rgba(255, 255, 255, 0.8); }
  section .portfolio .information-bg {
    background: url(../images/infor-bg.png) no-repeat;
    background-size: 100% 100%;
    color: white; }
  section .tags-coin {
    background: #1b1e31; }
    section .tags-coin .img-coin {
      height: 25px; }
    section .tags-coin .nav-coin .nav-item .nav-link {
      background: transparent;
      color: white;
      border-bottom: 2px solid transparent;
      border-radius: 0; }
    section .tags-coin .nav-coin .nav-item .active {
      background: transparent;
      color: #f14448;
      border-color: #f14448; }
  section .budget small {
    font-size: 12px; }
  section .budget .coin-block {
    background-color: #1b1e31;
    background-image: url(../images/coin-block.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: white; }
    @media (min-width: 320px) and (max-width: 479px) {
      section .budget .coin-block {
        background-size: 100% 100%; } }
  section .budget .wallet-block {
    background: linear-gradient(to bottom, #202757 0%, #1b1e32 52%, #1a1d2f 100%); }
  section .manual {
    background: url(../images/manual-bg.png) no-repeat;
    background-size: 100% auto;
    padding-top: 65px; }
    section .manual .manual-tag {
      background-color: #55c790;
      border-radius: 14px;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.6;
      padding: 4px 16px; }
    section .manual .page-des-1 {
      font-size: 48px;
      margin-bottom: 28px; }
  section .referral .refer-infor {
    background: linear-gradient(to bottom, #202757 0%, #1b1e32 52%, #1a1d2f 100%); }
  section .trade .trade-block {
    position: relative;
    overflow: hidden; }
    section .trade .trade-block .account-type {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      height: 36px;
      padding: 6px;
      position: absolute;
      right: -40px;
      text-align: center;
      top: 10px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      width: 140px;
      background: linear-gradient(90.21deg, #009d78 3.09%, #0c0c0c 88.88%); }
  section .trade .statistic .statistic-box {
    font-size: 10px; }
    section .trade .statistic .statistic-box .value {
      color: black; }
  section .trade .candle .candle-block {
    width: 130px; }
    section .trade .candle .candle-block .candle-title {
      font-size: 12px;
      color: black; }
    section .trade .candle .candle-block .candle-item {
      width: 18px;
      height: 18px;
      border-radius: 100%;
      background: #d9d9d9;
      margin: 4px; }
  section .trade .order-history .history-block {
    border-radius: 16px;
    border: 1px solid #ffc107;
    padding: 16px 16px; }
    section .trade .order-history .history-block small {
      font-size: 12px; }
  section .login {
    height: calc(100vh - 55px);
    background-color: #1b1e31;
    background-image: url(../images/shape-1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow-y: scroll; }
    section .login .leftbg {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background-image: url(../images/shape-2.png);
      background-repeat: no-repeat;
      background-size: 100% 100%; }
    section .login .form-control, section .login .input-group-text {
      background: #fafafa;
      padding: 16px;
      border: 0px; }
      section .login .form-control:focus, section .login .input-group-text:focus {
        box-shadow: none; }
    section .login .form-select {
      background: #fafafa;
      border: 0px; }
    section .login .title-login {
      color: #f14448; }
    section .login .login-left {
      height: 100%; }
      section .login .login-left .login-block {
        width: 665px;
        height: 100%;
        position: relative;
        z-index: 3; }
        @media (min-width: 320px) and (max-width: 479px) {
          section .login .login-left .login-block {
            width: 100%; } }
        section .login .login-left .login-block .login-main {
          height: 100%; }
          section .login .login-left .login-block .login-main .login-box {
            background: #303449;
            border-radius: 20px;
            font-weight: lighter; }
    section .login .login-right {
      background: #f14448;
      height: 100%; }
    section .login .card {
      background: #303449;
      font-weight: lighter;
      border-radius: 20px; }
      section .login .card .form-check-input:checked {
        background-color: #f14448;
        border-color: #f14448; }
        section .login .card .form-check-input:checked:focus {
          box-shadow: none; }
    section .login .step .step1, section .login .step .step2, section .login .step .step3 {
      position: relative;
      box-sizing: content-box;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 0.5rem 0.75rem; }
      section .login .step .step1 .number, section .login .step .step2 .number, section .login .step .step3 .number {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.75rem;
        height: 1.75rem;
        color: #000000;
        background-color: #EAEAEA;
        border: 2px solid #EAEAEA;
        border-radius: 100%;
        font-weight: bold;
        z-index: 9; }
      section .login .step .step1 .step-text, section .login .step .step2 .step-text, section .login .step .step3 .step-text {
        color: white;
        font-weight: bold; }
    section .login .step .step1:after {
      position: absolute;
      content: "";
      display: block;
      top: 21px;
      left: 50%;
      width: 50%;
      height: 3px;
      color: white;
      background-color: #EAEAEA;
      z-index: 1; }
    section .login .step .step2:after {
      position: absolute;
      content: "";
      display: block;
      top: 21px;
      left: 0px;
      width: 100%;
      height: 3px;
      color: white;
      background-color: #EAEAEA;
      z-index: 1; }
    section .login .step .step3:after {
      position: absolute;
      content: "";
      display: block;
      top: 21px;
      left: 0;
      width: 50%;
      height: 3px;
      color: white;
      background-color: #EAEAEA;
      z-index: 1; }
    section .login .step .active:after {
      background-color: #f14448; }
    section .login .step .active .number {
      color: #ffffff;
      background-color: #f14448;
      border-color: #f14448; }
    section .login .step .active .step-text {
      color: #f14448; }