/*********************************
      General style
*********************************/

.mbi-1 {
      margin-bottom: 1em !important;
}

.mb-2 {
      margin-bottom: 2em;
}

.mbi-2 {
      margin-bottom: 2em !important;
}

.mb-3 {
      margin-bottom: 3em;
}

.mb-4 {
      margin-bottom: 4em;
}

.mt-1 {
      margin-top: 1em;
}

.mt-2 {
      margin-top: 2em;
}

.mt-4 {
      margin-top: 4em;
}

.mr-1 {
      margin-right: 1em;
}

.mr-2 {
      margin-right: 2em;
}

.ml-1 {
      margin-left: 1em;
}

.ml-2 {
      margin-left: 2em;
}

.pad-1-5 {
      padding: .5em 1em;
}

.pad-t-2 {
      padding-top: 2em;
}

.hiddenDiv {
      display: none;
}

.tb-lb {
      border-left: 1px solid #DFE2E6;
}

/*********************************
      Functions
*********************************/
  
.main-logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 100px;
    width: auto;
    margin-bottom: 2.5em;;
}

/** * Extracted from: SweetAlert * Modified by: Istiak Tridip */
.success-checkmark {
      width: 80px;
      height: 115px;
      margin: 0 auto;
}

.success-checkmark .check-icon {
      width: 80px;
      height: 80px;
      position: relative;
      border-radius: 50%;
      box-sizing: content-box;
      border: 4px solid #4caf50;
}

.success-checkmark .check-icon::before {
      top: 3px;
      left: -2px;
      width: 30px;
      transform-origin: 100% 50%;
      border-radius: 100px 0 0 100px;
}

.success-checkmark .check-icon::after {
      top: 0;
      left: 30px;
      width: 60px;
      transform-origin: 0 50%;
      border-radius: 0 100px 100px 0;
      animation: rotate-circle 4.25s ease-in;
}

.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
      content: "";
      height: 100px;
      position: absolute;
      background: #fff;
      transform: rotate(-45deg);
}

.success-checkmark .check-icon .icon-line {
      height: 5px;
      background-color: #4caf50;
      display: block;
      border-radius: 2px;
      position: absolute;
      z-index: 10;
}

.success-checkmark .check-icon .icon-line.line-tip {
      top: 46px;
      left: 14px;
      width: 25px;
      transform: rotate(45deg);
      animation: icon-line-tip 0.75s;
}

.success-checkmark .check-icon .icon-line.line-long {
      top: 38px;
      right: 8px;
      width: 47px;
      transform: rotate(-45deg);
      animation: icon-line-long 0.75s;
}

.success-checkmark .check-icon .icon-circle {
      top: -4px;
      left: -4px;
      z-index: 10;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      box-sizing: content-box;
      border: 4px solid rgba(76, 175, 80, 0.5);
}

.success-checkmark .check-icon .icon-fix {
      top: 8px;
      width: 5px;
      left: 26px;
      z-index: 1;
      height: 85px;
      position: absolute;
      transform: rotate(-45deg);
      background-color: #fff;
}

@keyframes rotate-circle {
      0% {
            transform: rotate(-45deg);
     }
      5% {
            transform: rotate(-45deg);
     }
      12% {
            transform: rotate(-405deg);
     }
      100% {
            transform: rotate(-405deg);
     }
}

@keyframes icon-line-tip {
      0% {
            width: 0;
            left: 1px;
            top: 19px;
     }
      54% {
            width: 0;
            left: 1px;
            top: 19px;
     }
      70% {
            width: 50px;
            left: -8px;
            top: 37px;
     }
      84% {
            width: 17px;
            left: 21px;
            top: 48px;
     }
      100% {
            width: 25px;
            left: 14px;
            top: 45px;
     }
}

@keyframes icon-line-long {
      0% {
            width: 0;
            right: 46px;
            top: 54px;
     }
      65% {
            width: 0;
            right: 46px;
            top: 54px;
     }
      84% {
            width: 55px;
            right: 0px;
            top: 35px;
     }
      100% {
            width: 47px;
            right: 8px;
            top: 38px;
     }
}