/*
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Dinamika Limbo Digital (c) 2021 . D3 Development
Web     : https://limbodigital.id
Creator : d3dev@limbodigital.id
*/

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

html,
body {
  background: #eee;
}

body::before {
	content: '';
	display: block;
	height: 60px;
}

body::after {
  content: '';
  display: block;
  height: 100px;
}

body.cl-footer .cart-list .close-layer {
  display: block;
}

body.cl-footer .cart-list .cl-wrap {
  right: -20px;
}

.wrapped,
section {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0px auto;
  box-sizing: border-box;
  padding: 0px 10px;
}

/* Header */
header {
  display: block;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: white;
  -web-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
}

header .header-left {
  float: left;
}

header .header-right {
  float: right;
}

header .logo-main {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

header .logo-main img {
  display: block;
  height: 25px;
  width: auto;
}

header .but-logout {
  display: block;
  float: left;
  width: 28px;
  height: 21px;
  background-size: contain;
  background: url(../images/icons/i-logout.svg) center no-repeat;
  cursor: pointer;
  margin-left: 10px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

header .but-history {
  display: block;
  float: left;
  width: 28px;
  height: 21px;
  background-size: contain;
  background: url(../images/icons/i-history.svg) center no-repeat;
  cursor: pointer;
  margin-left: 10px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

header .but-logout:hover,
header .but-logout.active,
header .but-history:hover,
header .but-history.active {
  opacity: 0.7;
}

.header-default {
  text-align: center;
  display: block;
  height: 50px;
}

.header-default .header-left,
.header-default .header-right {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.header-back .header-left,
.header-back .header-right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.header-back .hb-back {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.header-back .hb-back a {
  display: inline-block;
  width: 25px;
  height: 40px;
  background: url(../images/icons/i-arrow-2.svg) right no-repeat;
  background-size: auto 15px;
  text-indent: -99999px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.header-back .but-cart {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/icons/i-trolly.svg) right no-repeat;
  background-size: contain;
  cursor: pointer;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.header-back .but-cart:hover {
  opacity: 0.7;
}

.header-back .but-cart.active::before {
  content: '';
  float: left;
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid white;
  background-color: #ba0101;
  margin: -1px 0 0 -2px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

/* Cart List */
.cart-list {
  display: block;
  position: fixed;
  z-index: 15;
  top: 0;
  right: 0;
}

.cart-list .close-layer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.cart-list .cl-wrap {
  display: block;
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100%;
  background: #ddd;
  overflow: auto;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.cart-list .cl-wrap .cl-head {
  display: block;
  width: 280px;
  height: 50px;
  background: white;
  position: fixed;
  z-index: 2;
  box-sizing: border-box;
  padding: 14px 0 0 10px;
}

.cart-list .cl-wrap .cl-head img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 21px;
  -webkit-filter: brightness(80%) grayscale(100%);
  filter: brightness(80%) grayscale(100%);
}

.cart-list .cl-wrap .cl-head .cl-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 500;
}

.cart-list .cl-wrap .cl-head .cl-close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px;
  float: right;
  margin-right: 30px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.cart-list .cl-wrap .cl-head .cl-close::before,
.cart-list .cl-wrap .cl-head .cl-close::after {
  content: '';
  width: 17px;
  height: 2px;
  background: #666;
  display: block;
  position: absolute;
}

.cart-list .cl-wrap .cl-head .cl-close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.cart-list .cl-wrap .cl-head .cl-close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.cart-list .cl-wrap .cl-head .cl-close:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  cursor: pointer;
}

.cart-list .cl-wrap ul {
  display: block;
  width: 260px;
  box-sizing: border-box;
  padding: 60px 10px 10px 10px;
}

.cart-list .cl-wrap ul li {
  display: block;
  height: auto;
  width: 100%;
  background: white;
  margin-bottom: 5px;
  font-size: 10px;
  box-sizing: border-box;
  padding-left: 70px;
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.cart-list .cl-wrap ul li:last-child {
  margin-bottom: 55px;
}

.cart-list .cl-wrap ul li .remove {
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  width: 18px;
  height: 18px;
  -webkit-border-radius: 0 0 0 5px;
  -moz-border-radius: 0 0 0 5px;
  -ms-border-radius: 0 0 0 5px;
  -o-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
  background: #ba0101;
}

.cart-list .cl-wrap ul li .remove::before,
.cart-list .cl-wrap ul li .remove::after {
  content: '';
  width: 10px;
  height: 0.12em;
  background: white;
  display: block;
  position: absolute;
}

.cart-list .cl-wrap ul li .remove::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.cart-list .cl-wrap ul li .remove::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.cart-list .cl-wrap ul li img {
  display: block;
  float: left;
  margin-left: -70px;
  width: 70px;
  height: 70px;
  background-color: #999;
  background-size: cover;
  -webkit-filter: brightness(1);
  filter: brightness(1);
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -ms-border-radius: 5px 0 0 5px;
  -o-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}

.cart-list .cl-wrap ul li div {
  display: block;
  padding: 8px 15px 0 15px;
  text-transform: uppercase;
  text-align: left;
}

.cart-list .cl-wrap ul li div label {
  display: block;
  font-size: 10px;
  line-height: 10px;
  font-weight: 600;
  margin-bottom: 3px;
  padding-right: 20px;
}

.cart-list .cl-wrap ul li div span {
  display: inline-block;
  font-size: 10px;
  line-height: 11px;
  min-width: 10px;
  margin-right: 5px;
  text-align: left;
  border-right: 1px solid #ddd;
  padding-right: 8px;
}

.cart-list .cl-wrap ul li div span:last-child {
  border-right: none;
  padding-right: none;
}

.cart-list .cl-wrap ul li div span::before {
  display: block;
  content: attr(data-item);
  font-size: 8px;
  vertical-align: text-top;
  font-weight: 500;
  color: #999;
}

.cart-list .cl-wrap .cl-checkout {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 45px;
  background: #ba0101;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  position: fixed;
  z-index: 2;
  bottom: 0;
  box-sizing: border-box;
  padding: 0 10px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.cart-list .cl-wrap .cl-checkout::after {
  content: '';
  display: inline-block;
  margin-left: 5px;
  width: 18px;
  height: 13px;
  background: url(../images/icons/i-arrow-1.svg) center no-repeat;
  background-size: contain;
  -webkit-filter: brightness(100);
  filter: brightness(100);
}

.cart-list .cl-wrap .cl-checkout:hover {
  background-color: #970000;
}

/* Page */
.page-title {
	display: table;
	width: 100%;
	margin-bottom: 10px;
	font-size: 18px;
	padding: 5px 0;
}

.thum-item {
  width: 100%;
  margin: 0 auto;
  max-width: 480px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.thum-item .thum-item-header {
  display: table;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 10px;
}

.thum-item .thum-item-header span {
  display: table-cell;
  font-weight: 600;
  line-height: 14px;
  vertical-align: middle;
}

.thum-item .thum-item-header a {
  display: block;
  color: #ba0101;
	text-align: right;
  text-decoration: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 400;
  margin-left: 5px;
  border-bottom: 1px solid transparent;
  margin-bottom: -4px;
}

.thum-item .thum-item-header a:hover {
  border-bottom-color: #ba0101;
}

.category-opt {
  display: block;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 25px;
  background: #fff;
  text-align: center;
  margin-bottom: 10px;
}

.category-opt label {
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 14px;
}

.category-opt p + p {
	margin-top: 20px;
}

.title {
	font-size: 18px;
	font-weight: 400;
}

.trans-list p a {
  color: #ba0101;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.trans-list p a:hover {
  border-bottom-color: #ba0101;
}


/* Alert */
.msg-popup {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  z-index: 999999;
  bottom: 0;
  left: 0;
}

.msg-popup.show {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.msg-popup .msg-wrap {
  display: table;
  width: 100%;
  box-sizing: border-box;
  padding: 25px;
  text-align: center;
  background: white;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  animation: 0.3s slideBottom ease-in-out;
}

.msg-popup .msg-wrap .sc-title {
  display: block;
  font-weight: 600;
  font-size: 18px;
  color: #ba0101;
}

.msg-popup .msg-wrap .cs-content {
  display: block;
  line-height: 14px;
  margin-bottom: 20px;
}

.msg-popup .msg-wrap .sc-but,
.msg-popup .msg-wrap a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: white;
  background: #666;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 3px 2px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.msg-popup .msg-wrap .sc-but:hover,
.msg-popup .msg-wrap a:hover {
  background-color: #ba0101;
  cursor: pointer;
}

@keyframes slideBottom {
  from {
    margin-bottom: -100vh;
  }
  to {
    margin-bottom: 0;
  }
}

.success-checkmark {
  display: inline-block;
  width: 80px;
  height: 110px;
  margin: 0 auto;
  margin-left: -5px;
}

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

.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: #FFFFFF;
  transform: rotate(-45deg);
}

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

.success-checkmark .check-icon .icon-line.line-tip {
  top: 46px;
  left: 13px;
  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 #ba0101;
  opacity: 0.2;
}

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

@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: 13px;
    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;
  }
}

.error-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.error-icon .circle {
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  border: 4px solid #ba0101;
  opacity: 0.5;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  animation: 0.5s flip ease-in-out;
  animation-delay: 0.3s;
}

.error-icon .cross-1,
.error-icon .cross-2 {
  position: absolute;
  display: block;
  width: 40px;
  height: 4px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #ba0101;
}

.error-icon .cross-1 {
  animation: 0.5s come-1 ease-in-out;
  animation-delay: 0.3s;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.error-icon .cross-2 {
  animation: 0.5s come-2 ease-in-out;
  animation-delay: 0.3s;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@keyframes flip {
  from {
    transform: rotateY(360deg);
  }
  to {
    transform: rotateY(0);
  }
}

@keyframes come-1 {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  to {
    transform: rotate(-45deg);
    opacity: 1;
  }
}

@keyframes come-2 {
  from {
    transform: rotate(0);
    opacity: 0;
  }
  to {
    transform: rotate(45deg);
    opacity: 1;
  }
}

/* Form */
.form-main .hide {
	display: none !important;
}

.form-main em {
  display: block;
  margin-bottom: 3px;
}

.form-main select,
.form-main input {
  max-height: 3.05em;
}

.form-main textarea,
.form-main select,
.form-main input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #d9d9d9;
  padding: 8px 10px;
  background-color: white;
  box-sizing: border-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.form-main textarea:hover,
.form-main select:hover,
.form-main input:hover {
  border-color: #666;
}

.form-main textarea:focus,
.form-main select:focus,
.form-main input:focus,
.form-main textarea.focus,
.form-main select.focus,
.form-main input.focus {
  border-color: white;
  -web-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.07) !important;
}

.form-main textarea:disabled,
.form-main select:disabled,
.form-main input:disabled {
  border: 1px solid #d9d9d9;
  background: #f7f7f7;
}

.form-main select {
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background-image: url(../images/icons/i-arrow-3.svg);
  background-position: right 10px bottom 14px;
  background-repeat: no-repeat;
  background-size: 10px auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-main .button-main {
  border-color: #ba0101;
  background-color: #ba0101 !important;
  color: white;
  font-weight: 600;
}

.form-main .button-main:hover {
  border-color: #ba0101;
  opacity: 0.8;
}

/* Login Page */
.login-form {
  display: block;
  padding: 15px;
  background: white;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
	border: 1px solid #eee;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.login-form .cl-bottom {
  background: #666;
  padding: 15px;
  margin: 15px -15px -15px -15px;
}

.login-form .button-main {
  margin-bottom: 0;
}

/* Footer */
footer {
  display: block;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 8;
}

footer section {
  padding: 0 5px;
}

footer .footer-place {
  display: block;
  background: #eee;
  padding-bottom: 10px;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}

footer .footer-default {
	background-color: #eee;
  display: block;
  width: 100%;
  padding-bottom: 10px;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}

footer .footer-default ul {
  display: block;
  height: 45px;
  text-align: center;
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -web-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
}

footer .footer-default ul li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  min-width: 18%;
  height: 45px;
  box-sizing: border-box;
}

footer .footer-default ul li em,
footer .footer-default ul li a {
  display: block;
  cursor: pointer;
  opacity: 0.7;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

footer .footer-default ul li em img,
footer .footer-default ul li a img {
  display: block;
  width: 28px;
  height: 21px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

footer .footer-default ul li em:hover,
footer .footer-default ul li a:hover {
  opacity: 1;
}

footer .footer-default ul li a.fd-home img {
  background-image: url(../images/icons/i-home.svg);
}

footer .footer-default ul li em.fd-help img {
  background-image: url(../images/icons/i-help.svg);
}

footer .footer-default ul li a.fd-transc img {
  background-image: url(../images/icons/i-bill.svg);
}

footer .footer-default ul li a.fd-account img {
  background-image: url(../images/icons/i-account.svg);
}

footer .footer-default ul li em.fd-help.active,
footer .footer-default ul li a.fd-help.active {
  opacity: 1;
}

footer .footer-default ul li em.fd-help.active::before,
footer .footer-default ul li a.fd-help.active::before {
  content: '';
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background: #4d4d4d;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: -17px 0 0 9px;
}

footer .footer-default ul li a.but-add-transc {
  padding: 10px;
  background: #ba0101;
  opacity: 1;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
}

footer .footer-default ul li a.but-add-transc img {
  width: 14px;
  height: 12px;
  background-image: url(../images/icons/i-add.svg);
}

footer .footer-default ul li a.but-add-transc:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

footer .footer-default ul li.active em,
footer .footer-default ul li.active a {
  opacity: 1;
}

footer .footer-default ul li.active::before {
  content: attr(data-value);
  font-size: 7px;
  background: #ba0101;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 14px;
  height: 14px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  border: 0.2em solid white;
  margin: -7px 0 0 -13px;
  text-decoration: none;
}

@-moz-document url-prefix() {
  footer .footer-default ul li.active::before {
    margin: -13px 0 0 -25px;
  }
}

footer .footer-prodet {
  display: block;
  width: 100%;
  height: 45px;
  background: white;
  box-sizing: border-box;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  -web-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
}

footer .footer-prodet .fpd-but {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 45px;
  background-color: #ba0101;
  color: white;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border: none;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

footer .footer-prodet .fpd-but:hover {
  background-color: #970000;
}

footer .footer-global-next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 45px;
  font-size: 14px;
  color: white;
  text-decoration: none;
	border: none;
  background: #ba0101;
  -web-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

footer .footer-global-next img {
  display: inline-block;
  margin-left: 10px;
  width: auto;
  height: 12px;
  -webkit-filter: brightness(100);
  filter: brightness(100);
}

footer .footer-global-next:hover {
  background-color: #970000;
}

/* Help Desk */
.help-desk {
  display: none;
  width: 100%;
  height: 100%;
  text-align: center;
  position: fixed;
  z-index: 7;
  left: 0;
  top: 0;
}

.help-desk.show {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.help-desk section {
  margin-bottom: 55px;
  position: relative;
  padding: 0 5px;
}

.help-desk .hld-container {
  display: block;
  background: #4d4d4d;
  color: #fff;
  text-align: left;
  padding: 15px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.help-desk .hld-container .hld-title {
  display: block;
  font-weight: 500;
  color: #fff;
  margin-bottom: 5px;
}

.help-desk .hld-container .link {
  display: block;
}

.help-desk .hld-container .link a {
  display: block;
  text-decoration: none;
  color: white;
  padding-left: 10px;
  background-color: #666;
  margin-bottom: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.help-desk .hld-container .link a:last-child {
  margin-bottom: none;
}

.help-desk .hld-container .link a span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 35px;
  color: white;
}

.help-desk .hld-container .link a:hover {
  background-color: #8c8c8c;
}

.help-desk .hld-sosmed {
  display: block;
}

.help-desk .hld-sosmed a {
  display: inline-block;
  margin-right: 10px;
  opacity: 0.7;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.help-desk .hld-sosmed a:last-child {
  margin-right: none;
}

.help-desk .hld-sosmed a img {
  display: block;
  width: auto;
  height: 26px;
}

.help-desk .hld-sosmed a:hover {
  opacity: 1;
}

/* Chat App */
.chat-app {
  display: table;
  width: 100%;
}

.chat-app li {
  display: block;
  width: 50%;
  box-sizing: border-box;
}

.chat-app li:first-child {
  float: left;
  padding-right: 3px;
}

.chat-app li:nth-child(2) {
  float: right;
  padding-left: 3px;
}

.chat-app li a {
  display: block;
  text-decoration: none;
  color: white;
  padding-left: 35px;
  background-color: #55D600;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
}

.chat-app li a img {
  display: block;
  float: left;
  box-sizing: border-box;
  padding: 5px;
  width: 35px;
  margin-left: -35px;
}

.chat-app li a span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 35px;
  color: white;
}

.chat-app li a:hover {
  background-color: #4bbd00;
}