html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
[hidden],
template {
  display: none;
}
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@font-face {
  font-family: HuaweiSans;
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Regular.eot);
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Regular.eot?#iefix)
      format("embedded-opentype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Regular.svg)
      format("svg"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Regular.ttf)
      format("truetype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Regular.woff)
      format("woff"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Regular.woff2)
      format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: HuaweiSans;
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Bold.eot);
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Bold.eot?#iefix)
      format("embedded-opentype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Bold.svg)
      format("svg"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Bold.ttf)
      format("truetype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Bold.woff)
      format("woff"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/style/core/fonts/HuaweiSans-Bold.woff2)
      format("woff2");
  font-weight: 700;
  font-style: normal;
}
body {
  color: #575d6c;
}
ul {
  list-style: none;
  padding-left: 0;
}
dl,
ul {
  margin-top: 0;
  margin-bottom: 0;
}
dd {
  margin-left: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
}
a {
  text-decoration: none;
}
input,
textarea,
video {
  outline: none;
}
@font-face {
  font-family: u-icon;
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/iconFont/u-icon.eot);
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/iconFont/u-icon.eot#iefix)
      format("embedded-opentype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/iconFont/u-icon.woff2)
      format("woff2"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/iconFont/u-icon.woff)
      format("woff"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/iconFont/u-icon.ttf)
      format("truetype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/iconFont/u-icon.svg)
      format("svg");
  font-weight: 400;
  font-style: normal;
}
.u-icon {
  font-family: u-icon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}
.u-icon-add:before {
  content: "\ea01";
}
.u-icon-cancel:before {
  content: "\ea02";
}
.u-icon-confirm:before {
  content: "\ea03";
}
.u-icon-date:before {
  content: "\ea04";
}
.u-icon-download:before {
  content: "\ea05";
}
.u-icon-edit:before {
  content: "\ea06";
}
.u-icon-heart:before {
  content: "\ea07";
}
.u-icon-help:before {
  content: "\ea08";
}
.u-icon-home:before {
  content: "\ea09";
}
.u-icon-infomation:before {
  content: "\ea0a";
}
.u-icon-menu:before {
  content: "\ea0b";
}
.u-icon-minus:before {
  content: "\ea0c";
}
.u-icon-purchase:before {
  content: "\ea0d";
}
.u-icon-refresh:before {
  content: "\ea0e";
}
.u-icon-search:before {
  content: "\ea0f";
}
.u-icon-star-outline:before {
  content: "\ea10";
}
.u-icon-star:before {
  content: "\ea11";
}
.u-icon-visible:before {
  content: "\ea12";
}
.u-icon-double-down:before {
  content: "\ea13";
}
.u-icon-double-left:before {
  content: "\ea14";
}
.u-icon-double-right:before {
  content: "\ea15";
}
.u-icon-double-up:before {
  content: "\ea16";
}
.u-icon-down:before {
  content: "\ea17";
}
.u-icon-left:before {
  content: "\ea18";
}
.u-icon-more:before {
  content: "\ea19";
}
.u-icon-play:before {
  content: "\ea1a";
}
.u-icon-right:before {
  content: "\ea1b";
}
.u-icon-triangle-down:before {
  content: "\ea1c";
}
.u-icon-up:before {
  content: "\ea1d";
}
@font-face {
  font-family: por-icon;
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/por-icon/por-icon.eot);
  src: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/por-icon/por-icon.eot#iefix)
      format("embedded-opentype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/por-icon/por-icon.woff2)
      format("woff2"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/por-icon/por-icon.woff)
      format("woff"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/por-icon/por-icon.ttf)
      format("truetype"),
    url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/iconfont/fonts/por-icon/por-icon.svg)
      format("svg");
  font-weight: 400;
  font-style: normal;
}
.por-icon {
  font-family: por-icon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}
.por-icon-menu:before {
  content: "\ea01";
}
.por-icon-more:before {
  content: "\ea02";
}
.por-icon-search:before {
  content: "\ea03";
}
.por-icon-caret-down:before {
  content: "\ea04";
}
.por-icon-minus:before {
  content: "\ea05";
}
.por-icon-plus:before {
  content: "\ea06";
}
.por-icon-close:before {
  content: "\ea07";
}
.por-icon-left:before {
  content: "\ea08";
}
.por-icon-right:before {
  content: "\ea09";
}
.por-icon-first:before {
  content: "\ea0a";
}
.por-icon-last:before {
  content: "\ea0b";
}
.por-icon-down:before {
  content: "\ea0c";
}
.por-icon-up:before {
  content: "\ea0d";
}
.por-icon-msg:before {
  content: "\ea0e";
}
.por-icon-set:before {
  content: "\ea0f";
}
.por-icon-about:before {
  content: "\ea10";
}
.por-icon-delete:before {
  content: "\ea12";
}
.por-icon-add:before {
  content: "\ea13";
}
.por-icon-full-screen:before {
  content: "\ea14";
}
.por-icon-doc:before {
  content: "\ea15";
}
.por-icon-share:before {
  content: "\ea16";
}
.por-icon-like:before {
  content: "\ea17";
}
.por-icon-star:before {
  content: "\ea18";
}
.por-icon-review:before {
  content: "\ea19";
}
.por-icon-watch:before {
  content: "\ea2a";
}
.por-icon-list-card:before {
  content: "\ea2b";
}
.por-icon-list:before {
  content: "\ea2c";
}
.por-icon-change:before {
  content: "\ea2d";
}
.por-icon-filter:before {
  content: "\ea2e";
}
.por-icon-select:before {
  content: "\ea2f";
}
.por-icon-error:before {
  content: "\ea31";
}
.por-icon-warn:before {
  content: "\ea32";
}
.por-icon-prompt:before {
  content: "\ea33";
}
.por-icon-success:before {
  content: "\ea34";
}
.por-filter-btn {
  display: inline-block;
  position: relative;
}
.por-filter-btn input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.por-filter-btn span {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 30px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  color: #252b3a;
  border: 1px solid #252b3a;
}
.por-filter-btn input:checked + span,
.por-filter-btn input:hover + span {
  color: #c7000b;
  border-color: #c7000b;
}
.animated {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes porFadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes porFadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes porFadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes porFadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes porFadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes porFadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes porFadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes porFadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes porFadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}
@keyframes porFadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}
@-webkit-keyframes porFadeInRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }
}
@keyframes porFadeInRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }
}
@-webkit-keyframes porFadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes porFadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-webkit-keyframes porFadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@keyframes porFadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@-webkit-keyframes porFadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}
@keyframes porFadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}
@-webkit-keyframes porFadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
}
@keyframes porFadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
    animation-timing-function: cubic-bezier(0, 0.59, 0.375, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
}
.por-fade-in-right {
  -webkit-animation-name: porFadeInRight;
  animation-name: porFadeInRight;
  -webkit-animation: porFadeInRight 2s;
  animation: porFadeInRight 2s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.por-fade-in-up {
  -webkit-animation: porFadeInUp 1s;
  animation: porFadeInUp 1s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.por-underline-c,
.por-underline-c-out,
.por-underline-c-out-default,
.por-underline-l,
.por-underline-l-default,
.por-underline-r,
.por-underline-r-default {
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  z-index: 1;
}
.por-underline-c-out-default:before,
.por-underline-l-default:before {
  position: absolute;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background-color: #f66f6a;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.por-underline-active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.por-underline-c-out:before,
.por-underline-c:after,
.por-underline-c:before,
.por-underline-l:before,
.por-underline-r:before {
  position: absolute;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  content: "";
  display: block;
  background-color: #f66f6a;
  z-index: -1;
  height: 3px;
  width: 100%;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.por-underline-r-default:before,
.por-underline-r:before {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.por-underline-l-default:before,
.por-underline-l:before {
  right: 0;
}
.por-underline-c:before,
.por-underline-l-default:before,
.por-underline-l:before {
  bottom: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.por-underline-c:after {
  bottom: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.por-underline-c:before {
  left: 0;
}
.por-underline-c:after {
  right: 0;
}
.por-underline-c-out-default:before,
.por-underline-c-out:before {
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.por-underline-c:hover:after,
.por-underline-c:hover:before {
  -webkit-transform: scaleX(0.51);
  transform: scaleX(0.51);
}
.por-overline-c-out:hover:before,
.por-underline-c-out:hover:before,
.por-underline-l:hover:before,
.por-underline-r:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.por-micro-animation-container {
  cursor: pointer;
}
.por-micro-animation-container .por-micro-right-arrow {
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  z-index: 1;
}
.por-micro-animation-container:hover .por-micro-right-arrow {
  -webkit-transform: translate(5px);
  transform: translate(5px);
}
.por-micro-animation-page-next {
  -webkit-animation: page-next 0.8s infinite alternate;
  animation: page-next 0.8s infinite alternate;
}
@-webkit-keyframes page-next {
  0% {
    margin-bottom: -10px;
  }
  to {
    margin-bottom: 0;
  }
}
@keyframes page-next {
  0% {
    margin-bottom: -10px;
  }
  to {
    margin-bottom: 0;
  }
}
.por-bounce-b,
.por-bounce-l,
.por-bounce-r,
.por-bounce-t,
.por-fade,
.por-fade-b,
.por-fade-c-in,
.por-fade-c-out,
.por-fade-l,
.por-fade-m-in,
.por-fade-m-out,
.por-fade-r,
.por-fade-t {
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 1;
}
.por-bounce-b:before,
.por-bounce-l:before,
.por-bounce-r:before,
.por-bounce-t:before,
.por-fade-b:before,
.por-fade-c-in:after,
.por-fade-c-in:before,
.por-fade-c-out:before,
.por-fade-l:before,
.por-fade-m-in:after,
.por-fade-m-in:before,
.por-fade-m-out:before,
.por-fade-r:before,
.por-fade-t:before,
.por-fade:before {
  position: absolute;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  content: "";
  display: block;
  background: #c7000b;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.por-bounce-b:before,
.por-bounce-l:before,
.por-bounce-r:before,
.por-bounce-t:before {
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
  transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
}
.por-fade:before {
  top: 0;
  left: 0;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  opacity: 0;
}
.por-fade:hover:before {
  opacity: 1;
}
.por-bounce-l:before,
.por-fade-l:before {
  top: 0;
  right: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.por-bounce-r:before,
.por-fade-r:before {
  top: 0;
  left: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.por-bounce-t:before,
.por-fade-t:before {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.por-bounce-b:before,
.por-fade-b:before {
  top: 0;
  left: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.por-fade-m-out:before {
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.por-fade-c-out:before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.por-fade-c-out:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.por-fade-c-in:before {
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.por-fade-c-in:after {
  top: 0;
  right: 0;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.por-fade-m-in:before {
  top: 0;
  left: 0;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.por-fade-m-in:after {
  bottom: 0;
  left: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.por-bounce-b:hover,
.por-bounce-l:hover,
.por-bounce-r:hover,
.por-bounce-t:hover,
.por-fade-b:hover,
.por-fade-c-in:hover,
.por-fade-c-out:hover,
.por-fade-l:hover,
.por-fade-m-in:hover,
.por-fade-m-out:hover,
.por-fade-r:hover,
.por-fade-t:hover,
.por-fade:hover {
  color: #fff;
}
.por-fade-m-in:hover:after,
.por-fade-m-in:hover:before {
  -webkit-transform: scaleY(0.51);
  transform: scaleY(0.51);
}
.por-bounce-b:hover:before,
.por-bounce-t:hover:before,
.por-fade-b:hover:before,
.por-fade-m-out:hover:before,
.por-fade-t:hover:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
.por-fade-c-in:hover:after,
.por-fade-c-in:hover:before {
  -webkit-transform: scaleX(0.51);
  transform: scaleX(0.51);
}
.por-bounce-l:hover:before,
.por-bounce-r:hover:before,
.por-fade-c-out:hover:before,
.por-fade-l:hover:before,
.por-fade-r:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.por-animation-scale {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background-size: 100% 100%;
  background-color: transparent;
  position: relative;
}
.por-animation-scale:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  background-color: transparent;
}
.por-animation-scale:hover {
  background-size: 110% 110%;
}
.por-animation-scale:hover,
.por-animation-scale:hover:after {
  background-color: rgba(0, 0, 0, 0.4);
}
.por-animation-lightning {
  -webkit-animation: lightning 5s ease infinite;
  animation: lightning 5s ease infinite;
}
@-webkit-keyframes lightning {
  0% {
    opacity: 0.3;
  }
  5% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
@keyframes lightning {
  0% {
    opacity: 0.3;
  }
  5% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
.por-translate-container {
  cursor: pointer;
}
.por-translate-container .por-translate-move {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-translate-container .por-translate-fade-in {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  opacity: 0;
}
.por-translate-container .por-translate-fade-out {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  opacity: 1;
}
.por-translate-container .por-translate-move2 {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-translate-container:hover .por-translate-move {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-transform: translateY(-26px);
  transform: translateY(-26px);
}
.por-translate-container:hover .por-translate-fade-in {
  opacity: 1;
}
.por-translate-container:hover .por-translate-fade-out {
  opacity: 0;
}
.por-translate-container:hover .por-translate-move2 {
  -webkit-transform: translateY(-58px);
  transform: translateY(-58px);
}
.por-service-table,
.por-service-table-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.por-service-table-head {
  position: relative;
  z-index: 9;
  width: 100%;
}
.por-service-table-body {
  width: 100%;
  overflow-y: overlay;
}
.por-service-table-text-hover-show {
  display: none;
}
.por-service-table[data-cols="1"] .por-service-table-cell {
  max-width: 100%;
}
.por-service-table[data-cols="2"] .por-service-table-cell {
  max-width: 50%;
}
.por-service-table[data-cols="3"] .por-service-table-cell {
  max-width: 33.33333333%;
}
.por-service-table[data-cols="4"] .por-service-table-cell {
  max-width: 25%;
}
.por-service-table[data-cols="5"] .por-service-table-cell {
  max-width: 20%;
}
.por-service-table[data-cols="6"] .por-service-table-cell {
  max-width: 16.66666667%;
}
.por-service-table[data-cols="7"] .por-service-table-cell {
  max-width: 14.28571429%;
}
.por-service-table[data-cols="8"] .por-service-table-cell {
  max-width: 12.5%;
}
.por-service-table[data-cols="9"] .por-service-table-cell {
  max-width: 11.11111111%;
}
.por-service-table[data-cols="10"] .por-service-table-cell {
  max-width: 10%;
}
.por-service-table[data-cols="11"] .por-service-table-cell {
  max-width: 9.09090909%;
}
.por-service-table[data-cols="12"] .por-service-table-cell {
  max-width: 8.33333333%;
}
.por-service-table[data-cols="13"] .por-service-table-cell {
  max-width: 7.69230769%;
}
.por-service-table[data-cols="14"] .por-service-table-cell {
  max-width: 7.14285714%;
}
.por-service-table[data-cols="15"] .por-service-table-cell {
  max-width: 6.66666667%;
}
.por-service-table-row .por-service-table-cell {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 16px;
  padding-right: 16px;
  width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  font-size: 14px;
}
.por-service-table-head .por-service-table-cell {
  position: relative;
  background-color: #526ecc;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  color: #fff;
  height: 54px;
}
.por-service-table-head .por-service-table-cell > p {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-size: 16px;
}
.por-service-table-head .por-service-table-cell:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0;
  background-color: #526ecc;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-head .por-service-table-cell p {
  width: 100%;
}
.por-service-table-head .por-service-table-cell.active > p {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}
.por-service-table-head .por-service-table-cell.active:before {
  height: 12px;
}
.por-service-table-head .por-service-table-cell:not(:last-child) {
  margin-right: 1px;
}
.por-service-table-body .por-service-table-cell {
  padding: 12px 16px;
  background-color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  color: #575d6c;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-coltitle
  .por-service-table-body
  .por-service-table-cell:first-child
  p {
  font-weight: 700;
}
.por-service-table-body .por-service-table-cell .h {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin-bottom: 4px;
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-body .por-service-table-cell .h + .p-box {
  width: 100%;
  -webkit-transform: translateY(-13px);
  transform: translateY(-13px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-body .por-service-table-cell a {
  color: #526ecc;
}
.por-service-table-body .por-service-table-cell a:hover {
  text-decoration: underline;
}
.por-service-table-body .por-service-table-cell.active {
  background-color: #f5f5f6;
}
.por-service-table-body .por-service-table-cell.active .h {
  opacity: 0.8;
}
.por-service-table-body .por-service-table-cell.active .h + .p-box {
  -webkit-transform: translate(0);
  transform: translate(0);
}
.por-service-table-body
  .por-service-table-cell.active
  .por-service-table-text-hover-show {
  display: block;
}
.por-service-table-body .por-service-table-row:not(:last-child) {
  border-bottom: 1px solid #dfe1e6;
}
.por-service-table-column {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 8px;
  padding-right: 8px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-column .por-service-table-cell {
  padding: 12px 16px;
  background-color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  color: #575d6c;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-column .por-service-table-cell .h {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin-bottom: 4px;
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-column .por-service-table-cell .h + .p-box {
  width: 100%;
  -webkit-transform: translateY(-13px);
  transform: translateY(-13px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-column .por-service-table-cell a {
  color: #526ecc;
}
.por-service-table-column .por-service-table-cell a:hover {
  text-decoration: underline;
}
.por-service-table-column .por-service-table-cell:not(:last-child) {
  border-bottom: 1px solid #dfe1e6;
}
.por-service-table-head-cell {
  position: relative;
  padding: 16px;
  background-color: #526ecc;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
  color: #fff;
}
.por-service-table-head-cell:before,
.por-service-table-head-cell > p {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-service-table-head-cell:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0;
  background-color: #526ecc;
}
.por-service-table-column:not(:last-child) .por-service-table-head-cell {
  margin-right: 1px;
}
.por-service-table-column.active .por-service-table-head-cell > p {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}
.por-service-table-column.active .por-service-table-head-cell:before {
  height: 12px;
}
.por-service-table-column.active .por-service-table-cell {
  background-color: #f5f5f6;
}
.por-service-table-column.active .por-service-table-cell .h {
  opacity: 0.8;
}
.por-service-table-column.active .por-service-table-cell .h + .p-box {
  -webkit-transform: translate(0);
  transform: translate(0);
}
.por-service-table[data-theme="white"]
  .por-service-table-body
  .por-service-table-cell,
.por-service-table[data-theme="white"]
  .por-service-table-column
  .por-service-table-cell {
  background-color: #fff;
}
.por-service-table[data-theme="white"]
  .por-service-table-body
  .por-service-table-cell.active,
.por-service-table[data-theme="white"]
  .por-service-table-column.active
  .por-service-table-cell {
  background-color: #f5f5f6;
}
.por-service-table[data-theme="translucent"] .por-service-table-cell {
  color: #fff;
}
.por-service-table[data-theme="translucent"] .por-service-table-head {
  background: transparent;
}
.por-service-table[data-theme="translucent"]
  .por-service-table-body
  .por-service-table-cell,
.por-service-table[data-theme="translucent"]
  .por-service-table-column
  .por-service-table-cell {
  background-color: hsla(0, 0%, 100%, 0.1);
}
.por-service-table[data-theme="translucent"]
  .por-service-table-body
  .por-service-table-row:not(:last-child),
.por-service-table[data-theme="translucent"]
  .por-service-table-column
  .por-service-table-cell:not(:last-child) {
  border-bottom: 0;
  margin-bottom: 1px;
}
.por-service-table[data-theme="translucent"]
  .por-service-table-body
  .por-service-table-cell.active,
.por-service-table[data-theme="translucent"]
  .por-service-table-column.hover
  .por-service-table-cell {
  background-color: hsla(0, 0%, 100%, 0.05);
}
@media (max-width: 767px) {
  .por-service-table {
    display: none;
  }
}
@media (min-width: 768px) {
  .por-service-table-mb {
    display: none;
  }
}
.por-service-table-mb .por-collapse {
  padding: 0;
  margin: 0;
}
.por-service-table-mb
  .por-collapse-container:first-child
  .por-collapse-trigger {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.por-service-table-mb .por-collapse-container:last-child .por-collapse-trigger {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.por-service-table-mb-item {
  display: table;
  width: calc(100% - 30px);
  padding: 15px 0;
  margin: 0 14px;
  font-size: 14px;
}
.por-service-table-mb-item + .por-service-table-mb-item {
  border-top: 1px solid #dfe1e6;
}
.por-service-table-mb-item-title {
  display: table-cell;
  vertical-align: middle;
  width: 95px;
  font-weight: 700;
  color: #252b3a;
  font-size: 12px;
}
.por-service-table-mb-item-desc {
  display: table-cell;
  vertical-align: middle;
  color: #575d6c;
  font-size: 12px;
}
.por-service-table-mb-item-desc a {
  color: #526ecc;
}
.por-service-table-mb-item-desc a:hover {
  text-decoration: underline;
}
.por-service-table-mb-item-desc p {
  margin-bottom: 0 !important;
}
.por-service-table-mb .por-collapse-head-text > p {
  font-size: 14px;
  margin-bottom: 0;
}
.por-service-table-mb[data-theme="translucent"] .por-service-table-mb-item-desc,
.por-service-table-mb[data-theme="translucent"]
  .por-service-table-mb-item-title {
  color: #fff;
}
.por-anchor {
  width: 100%;
  padding: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 4px 0 rgba(128, 132, 145, 0.2);
  box-shadow: 0 1px 4px 0 rgba(128, 132, 145, 0.2);
  z-index: 99;
}
.por-anchor .por-section-body {
  position: relative;
  font-size: 0;
  text-align: center;
  white-space: nowrap;
}
.por-anchor .por-section-body .por-anchor-nav {
  position: relative;
  padding: 0 32px;
  overflow: hidden;
  text-align: center;
  font-size: 0;
}
.por-anchor .por-section-body .por-anchor-nav .por-anchor-list {
  position: relative;
  display: inline-block;
  font-size: 0;
}
.por-anchor .por-section-body a {
  position: relative;
  display: inline-block;
  max-width: 170px;
  margin-right: 56px;
  color: #252b3a;
  font-size: 14px;
  font-weight: 400;
  line-height: 48px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.por-anchor .por-section-body a:hover {
  color: #c7000b;
}
.por-anchor .por-section-body a.active {
  position: relative;
  font-weight: 700;
}
.por-anchor .por-section-body a.active:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: #c7000b;
}
.por-anchor .por-section-body a.active:hover {
  color: #252b3a;
}
.por-anchor .por-section-body .por-anchor-next,
.por-anchor .por-section-body .por-anchor-pre {
  position: absolute;
  width: 32px;
  height: 100%;
  top: 50%;
  margin-top: -24px;
  left: 0;
  background-image: none;
  background-color: #fff;
}
.por-anchor .por-section-body .por-anchor-next {
  left: auto;
  right: 0;
}
.por-anchor .por-section-body .u-icon {
  position: absolute;
  top: 18px;
  left: 5px;
  margin-top: 0;
  font-size: 12px;
  cursor: pointer;
  color: #575d6c;
}
.por-anchor .por-section-body .u-icon.por-anchor-disabled {
  display: none;
}
.por-anchor .por-section-body .u-icon.u-icon-right {
  left: auto;
  right: 5px;
}
@media (max-width: 767px) {
  .por-anchor {
    display: none;
  }
}
.pro-process-tab-container .pro-process-tab {
  margin: 0;
  padding-left: 0;
  border-bottom: 1px solid #dfe1e6;
  font-size: 0;
  text-align: center;
}
.pro-process-tab-container .pro-process-tab:after {
  content: "";
  display: table;
  clear: both;
}
.pro-process-tab-container .pro-process-item {
  display: inline-block;
  width: 20%;
  font-size: 16px;
  line-height: 20px;
  color: #252b3a;
  text-align: center;
  cursor: pointer;
  list-style: none;
  vertical-align: bottom;
}
.pro-process-tab-container .pro-process-item .pro-process-title {
  display: inline-table;
  position: relative;
  margin: 0;
  padding-left: 72px;
}
.pro-process-tab-container
  .pro-process-item:not(:last-child)
  .pro-process-title {
  padding-right: 16px;
}
.pro-process-tab-container .pro-process-item .pro-process-title span {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 88px;
}
.pro-process-tab-container .pro-process-item .pro-process-title span i {
  display: inline-block;
  font-style: normal;
}
.pro-process-tab-container .pro-process-item .pro-process-title {
  background-size: 60px;
  background-repeat: no-repeat;
  background-position: 0;
}
.pro-process-tab-container .pro-process-item:first-child .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon1.png);
}
.pro-process-tab-container .pro-process-item:nth-child(2) .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon2.png);
}
.pro-process-tab-container .pro-process-item:nth-child(3) .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon3.png);
}
.pro-process-tab-container .pro-process-item:nth-child(4) .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon4.png);
}
.pro-process-tab-container .pro-process-item:nth-child(5) .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon5.png);
}
.pro-process-tab-container .pro-process-item .pro-process-title:after {
  background: #f66f6a;
  bottom: 0;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  width: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: width 0.25s ease;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.pro-process-tab-container .pro-process-item:not(.active):hover {
  color: #c7000b;
}
.pro-process-tab-container .pro-process-item.active {
  font-weight: 700;
}
.pro-process-tab-container .pro-process-item.active .pro-process-title:after {
  width: 100%;
}
.pro-process-tab-container[data-cols="2"] .pro-process-item,
.pro-process-tab-container[data-cols="3"] .pro-process-item,
.pro-process-tab-container[data-cols="4"] .pro-process-item {
  width: 25%;
}
.pro-process-tab-container[data-cols="5"] .pro-process-item {
  width: 20%;
}
.pro-process-steps-container .pro-process-steps {
  text-align: center;
  font-size: 0;
}
.pro-process-steps-container .pro-process-steps:after {
  content: "";
  display: table;
  clear: both;
}
.pro-process-steps-container .pro-process-item {
  position: relative;
  display: inline-block;
  height: 180px;
  margin-right: 16px;
  width: calc(20% - 12.8px);
  padding-top: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  vertical-align: top;
}
.pro-process-steps-container
  .pro-process-steps[data-cols="3"]
  .pro-process-item,
.pro-process-steps-container
  .pro-process-steps[data-cols="4"]
  .pro-process-item {
  width: calc(25% - 12px);
}
.pro-process-steps-container
  .pro-process-steps[data-cols="6"]
  .pro-process-item {
  width: calc(16.66667% - 13.33333px);
}
.pro-process-steps-container
  .pro-process-steps[data-cols="6"]
  .pro-process-item
  .pro-process-dotline {
  width: 70px;
  margin-left: -30px;
}
.pro-process-steps-container .pro-process-item:last-child .pro-process-dotline {
  display: none;
}
.pro-process-steps-container .pro-process-item:last-child {
  margin-right: 0;
}
.pro-process-steps-container .pro-process-item .icon {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 16px;
}
.pro-process-steps-container .pro-process-item .icon1 {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon1.png);
}
.pro-process-steps-container .pro-process-item .icon2 {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon2.png);
}
.pro-process-steps-container .pro-process-item .icon3 {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon3.png);
}
.pro-process-steps-container .pro-process-item .icon4 {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon4.png);
}
.pro-process-steps-container .pro-process-item .icon5 {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon5.png);
}
.pro-process-steps-container .pro-process-item .icon6 {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon6.png);
}
.pro-process-steps-container .pro-process-item .tit {
  margin: 0;
  font-size: 16px;
  color: #252b3a;
  line-height: 20px;
}
.pro-process-steps-container .pro-process-item .desc {
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 0;
  color: #575d6c;
  line-height: 22px;
  font-size: 14px;
  font-style: normal;
}
.pro-process-steps-container .pro-process-dotline {
  position: absolute;
  width: 96px;
  border-bottom: 1px dashed #a0a2a8;
  z-index: 10;
  top: 60px;
  left: 100%;
  margin-left: -43px;
}
.pro-process-steps-container .pro-process-dotline:before {
  position: absolute;
  right: -6px;
  top: -2px;
  content: "";
  height: 6px;
  width: 6px;
  background: #a0a2a8;
  border-radius: 50%;
}
.pro-activity-process-container {
  width: 100%;
  padding: 0;
  background: #e9edfa;
}
.pro-activity-process-container .iconNum {
  display: inline-block;
  width: 88px;
  height: 88px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/iconNum-pc-white.png);
}
.pro-activity-process-container
  .pro-activity-process
  .pro-process-item:nth-child(2)
  .iconNum {
  background-position: -88px;
}
.pro-activity-process-container
  .pro-activity-process
  .pro-process-item:nth-child(3)
  .iconNum {
  background-position: -176px;
}
.pro-activity-process-container
  .pro-activity-process
  .pro-process-item:nth-child(4)
  .iconNum {
  background-position: -264px;
}
.pro-activity-process-container
  .pro-activity-process
  .pro-process-item:nth-child(5)
  .iconNum {
  background-position: -352px;
}
.pro-activity-process-container .pro-activity-process {
  font-size: 0;
}
.pro-activity-process-container .pro-activity-process:after {
  content: "";
  display: table;
  clear: both;
}
.pro-activity-process-container .pro-process-item {
  display: inline-block;
  position: relative;
  padding: 48px 16px;
  color: #344899;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="3"]
  .pro-process-item {
  width: calc(33.33333% - 10.66667px);
}
.pro-activity-process-container
  .pro-activity-process[data-cols="3"]
  .pro-process-item
  .step-content {
  margin-left: 32px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="3"]
  .pro-process-item
  .step-content
  .p2 {
  margin-top: 8px;
  font-size: 14px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="4"]
  .pro-process-item {
  width: calc(25% - 12px);
}
.pro-activity-process-container
  .pro-activity-process[data-cols="4"]
  .pro-process-item
  .step-content
  .p2 {
  margin-top: 8px;
  font-size: 14px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item {
  width: calc(20% - 12.8px);
}
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item {
  width: calc(16.66667% - 13.33333px);
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item,
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item {
  padding: 48px 4px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item
  .iconNum,
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item
  .iconNum {
  width: 64px;
  height: 64px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item:nth-child(2)
  .iconNum,
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item:nth-child(2)
  .iconNum {
  background-position: -64px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item:nth-child(3)
  .iconNum,
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item:nth-child(3)
  .iconNum {
  background-position: -128px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item:nth-child(4)
  .iconNum,
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item:nth-child(4)
  .iconNum {
  background-position: -192px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item:nth-child(5)
  .iconNum,
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item:nth-child(5)
  .iconNum {
  background-position: -256px;
}
.pro-activity-process-container
  .pro-activity-process[data-cols="5"]
  .pro-process-item
  .step-content
  .h5,
.pro-activity-process-container
  .pro-activity-process[data-cols="6"]
  .pro-process-item
  .step-content
  .h5 {
  font-size: 18px;
}
.pro-activity-process-container .pro-process-item + .pro-process-item {
  margin-left: 16px;
}
.pro-activity-process-container .pro-process-item-inner {
  position: relative;
  z-index: 1;
}
.pro-activity-process-container .pro-process-item i,
.pro-activity-process-container .step-content {
  float: left;
}
.pro-activity-process-container .step-content {
  width: calc(100% - 120px);
  margin-left: 16px;
}
.pro-activity-process-container .step-content .h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
.pro-activity-process-container .step-content .p2 {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 18px;
}
.pro-activity-process-container .pro-process-item.active:after,
.pro-activity-process-container .pro-process-item:hover:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #96adfa;
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}
.pro-activity-process-container .pro-process-item:not(.active):hover:after {
  opacity: 0.6;
}
.pro-process-guide-container .pro-process-guide {
  margin: 0;
  padding-left: 0;
  font-size: 0;
  text-align: center;
}
.pro-process-guide-container .pro-process-guide:after {
  content: "";
  display: table;
  clear: both;
}
.pro-process-guide-container .pro-process-item {
  position: relative;
  display: inline-block;
  padding-right: 152px;
  font-size: 14px;
  color: #8a8e99;
  text-align: center;
  cursor: pointer;
  list-style: none;
  vertical-align: bottom;
}
.pro-process-guide-container .pro-process-item:last-child {
  padding-right: 16px;
}
.pro-process-guide-container .pro-process-item.complate,
.pro-process-guide-container .pro-process-item.current {
  color: #5e7ce0;
}
.pro-process-guide-container
  .pro-process-item.complate:first-child
  .pro-process-title,
.pro-process-guide-container
  .pro-process-item.current:first-child
  .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon1.png);
}
.pro-process-guide-container
  .pro-process-item.complate:nth-child(2)
  .pro-process-title,
.pro-process-guide-container
  .pro-process-item.current:nth-child(2)
  .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon2.png);
}
.pro-process-guide-container
  .pro-process-item.complate:nth-child(3)
  .pro-process-title,
.pro-process-guide-container
  .pro-process-item.current:nth-child(3)
  .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon3.png);
}
.pro-process-guide-container .pro-process-item .pro-process-title {
  display: inline-table;
  margin: 0;
  padding-left: 64px;
  background-size: 60px;
  background-repeat: no-repeat;
  background-position: 0;
}
.pro-process-guide-container .pro-process-item:first-child .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon1-grey.png);
}
.pro-process-guide-container .pro-process-item:nth-child(2) .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon2-grey.png);
}
.pro-process-guide-container .pro-process-item:nth-child(3) .pro-process-title {
  background-image: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/experience-icon3-grey.png);
}
.pro-process-guide-container .pro-process-item:not(:last-child):before {
  background: #dfe1e6;
  bottom: 0;
  content: "";
  top: 50%;
  right: 16px;
  position: absolute;
  width: 120px;
  height: 2px;
  margin-top: -1px;
}
.pro-process-guide-container
  .pro-process-item.complate:not(:last-child)
  .pro-process-title:before {
  background: #5e7ce0;
  bottom: 0;
  content: "";
  top: 50%;
  right: 16px;
  position: absolute;
  width: 120px;
  height: 2px;
  margin-top: -1px;
}
.pro-process-guide-container .pro-process-item.complate:not(:last-child):after {
  background: #5e7ce0;
  bottom: 0;
  content: "";
  top: 50%;
  right: 12px;
  position: absolute;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 100%;
}
.pro-process-guide-container
  .pro-process-item.current:not(:last-child)
  .pro-process-title:before {
  background: #5e7ce0;
  bottom: 0;
  content: "";
  top: 50%;
  right: 76px;
  position: absolute;
  width: 60px;
  height: 2px;
  margin-top: -1px;
}
.pro-process-guide-container .pro-process-item.current:not(:last-child):after {
  background: #5e7ce0;
  bottom: 0;
  content: "";
  top: 50%;
  right: 72px;
  position: absolute;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 100%;
}
.pro-process-guide-container .pro-process-item .pro-process-title span {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 88px;
}
.pro-process-guide-container .pro-process-item .pro-process-title span i {
  display: inline-block;
  font-style: normal;
  line-height: 1.25;
  font-weight: 400;
}
.por-list > li {
  padding-left: 1em;
}
.por-list > li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.14285714em;
}
.por-list-disc > li:before {
  border: 2px solid;
  border-radius: 50%;
}
.por-list-circle > li:before,
.por-list-disc > li:before {
  margin-left: -1em;
  margin-right: 0.57142857em;
  margin-top: -0.14285714em;
}
.por-list-circle > li:before {
  border: 1px solid;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
.por-list-bar > li:before {
  width: 6px;
  border-top: 2px solid;
  margin-left: -1em;
  margin-right: 0.57142857em;
  margin-top: -0.14285714em;
}
#por-svg-sprite {
  position: fixed;
  width: 0;
  height: 0;
  top: -100px;
  left: -100px;
  opacity: 0;
}
.por-modal-img.show {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}
.por-imgViewer {
  max-width: 90%;
  max-height: 90%;
  min-width: 50%;
}
.por-imgViewer > img {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
[data-show="imgViewer"] {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.por-error-page {
  background-color: #e2eaf0;
  background-image: radial-gradient(at 37% center, #f9fbfd, #c6d2de);
}
.por-error-page .por-section {
  background-color: transparent;
}
.por-error-icon {
  display: table-cell;
  width: 42%;
  text-align: center;
  vertical-align: middle;
}
.por-error-icon img {
  width: 49%;
}
.por-error-content {
  display: table-cell;
  vertical-align: middle;
}
.por-error-content .por-text-body-t2 {
  margin-top: 10px;
}
.por-error-content .por-text-title-t6 {
  margin-top: 30px;
  font-weight: 400;
}
.por-error-form {
  position: relative;
  margin-top: 20px;
  width: 360px;
}
.por-error-form input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 32px 0 8px;
  border: 1px solid #adb0b8;
  background: #fff;
  line-height: 34px;
  border-radius: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.por-error-form input:focus,
.por-error-form input:hover {
  border-color: #575d6c;
}
.por-error-form input::-webkit-input-placeholder {
  color: #8a8e99;
  font-size: 12px;
}
.por-error-form input:-moz-placeholder,
.por-error-form input::-moz-placeholder {
  color: #8a8e99;
  font-size: 12px;
}
.por-error-form input:-ms-input-placeholder {
  color: #8a8e99;
  font-size: 12px;
}
.por-error-form button {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: #8a8e99;
  font-size: 16px;
  outline: none;
}
.por-error-form button i {
  width: 100%;
  line-height: 34px;
  cursor: pointer;
}
.por-error-recommend-list {
  margin-top: 10px;
}
.por-error-recommend-list a:not(:last-child) {
  margin-right: 12px;
}
.por-error-page .por-section-title span {
  position: relative;
  padding-left: 23px;
  padding-right: 23px;
}
.por-error-page .por-section-title span:before {
  left: 0;
}
.por-error-page .por-section-title span:after,
.por-error-page .por-section-title span:before {
  position: absolute;
  content: "";
  top: calc(50% - 1px);
  width: 13px;
  height: 2px;
  background-color: #a0a2a8;
}
.por-error-page .por-section-title span:after {
  right: 0;
}
.por-error-page .por-card-pic {
  position: absolute;
  right: 24px;
  bottom: 16px;
  width: 80px;
  height: 80px;
  text-align: center;
}
.por-error-page .por-card-pic img {
  max-width: 100%;
  max-height: 100%;
}
@media (min-width: 1024px) {
  .por-error-page .por-card {
    padding: 32px 120px 32px 32px;
  }
  .por-error-page .por-card:hover .por-text-title-t3 {
    color: #c7000b;
  }
}
@media (max-width: 1023px) {
  .por-error-icon {
    display: block;
    width: 100%;
  }
  .por-error-icon img {
    width: 37%;
  }
  .por-error-content {
    display: block;
  }
  .por-error-content .por-text-title-t3 {
    margin-top: 24px;
    font-size: 18px;
    line-height: 22px;
  }
  .por-error-content .por-text-body-t2 span {
    display: table-cell;
  }
  .por-error-content .por-text-body-t2 span:first-child:not(:last-child) {
    white-space: nowrap;
  }
  .por-error-content .por-text-title-t6 {
    margin-top: 20px;
    font-size: 14px;
    line-height: 18px;
  }
  .por-error-form {
    margin-top: 18px;
    width: 100%;
  }
  .por-error-page .por-section-title span:after,
  .por-error-page .por-section-title span:before {
    height: 1px;
  }
  .por-error-page [class^="por-col-"] {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .por-error-page [class^="por-col-"] + [class^="por-col-"] {
    margin-top: 8px;
  }
  .por-error-page .por-card-m {
    padding-right: 92px;
  }
  .por-error-page .por-card .por-card-icon span {
    width: 32px;
    height: 32px;
    font-size: 32px;
  }
  .por-error-page .por-card-align-left .por-card-icon.por-card-icon-horizontal {
    padding-right: 16px;
  }
  .por-error-page .por-card-pic {
    right: 26px;
    top: 50%;
    margin-top: -30px;
    width: 60px;
    height: 60px;
  }
}
.por-rate-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.por-rate-container .por-active-star,
.por-rate-container .por-star-icon {
  cursor: pointer;
  margin-right: 6px;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: text-top;
  position: relative;
  background: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/grey-star.svg)
    no-repeat;
}
.por-rate-container .hide {
  display: none;
}
.por-rate-container .por-active-star {
  background: url(//portal.hc-cdn.com/cnpm-baseui/3.0.16/images/red-star.svg)
    no-repeat;
}
.por-rate-container > div {
  display: inline-block;
}
.por-rate-container .por-rate-description {
  margin-left: 8px;
  max-width: calc(100% - 140px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.por-rate-container .por-star-tips {
  font-size: 12px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  color: #575d6c;
  text-align: justify;
  max-width: 300px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border-radius: 2px;
  word-break: break-all;
  background-color: #fff;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1060;
}
.por-rate-container .por-star-tips .por-tips-content {
  padding: 14px;
}
.por-rate-container .por-star-tips:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: calc(50% - 6px);
  border: 6px solid transparent;
  border-top-color: #fff;
}
html[lang="ar-MENA"] .por-rate-container .por-active-star,
html[lang="ar-MENA"] .por-rate-container .por-star-icon {
  margin-left: 6px;
  margin-right: 0;
}
.por-countdown-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.count-down {
  margin: 0 10px 0 18px;
}
.count-down .count-down-holder {
  background-color: #f8f9fa;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 24px 40px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 24px 40px 0 rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 14px 0 18px;
}
.count-down .count-down-holder .count-down-pre-content {
  font-size: 14px;
  color: #252b3a;
  letter-spacing: 1px;
  padding-right: 5px;
  font-weight: 600;
  line-height: 22px;
}
.count-down .count-down-holder .count-down-time-element {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.count-down .count-down-holder .count-down-number-class {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    to(#e3e3e3)
  );
  background-image: linear-gradient(180deg, #fff, #e3e3e3);
  padding: 3px;
  border-radius: 4px;
  text-align: center;
  color: #c7000b;
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: 550;
  margin: 0 2px;
}
.count-down .count-down-holder .count-down-date-element {
  font-size: 12px;
  color: #252b3a;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 0 5px;
  line-height: 18px;
}
.count-down
  .count-down-holder.count-down-black
  .count-down-time-element
  .count-down-number-class {
  color: #252b3a;
  border: 1px solid #cccdce;
}
.por-countdown-container.upDownLayout .count-down-holder {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: auto;
  padding: 12px 16px;
}
.por-countdown-container.upDownLayout .count-down-pre-content {
  padding: 0 0 4px;
}
.por-countdown-container.leftLayout .count-down-holder {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
:root {
  --por-border-solid-1: var(--por-base-size-1) solid;
  --por-border-solid-2: var(--por-base-size-2) solid;
  --por-border-solid-3: var(--por-base-size-3) solid;
  --por-border-dashed-1: var(--por-base-size-1) dashed;
  --por-border-dashed-2: var(--por-base-size-2) dashed;
  --por-border-dashed-3: var(--por-base-size-3) dashed;
  --por-border-dotted-1: var(--por-base-size-1) dotted;
  --por-border-dotted-2: var(--por-base-size-2) dotted;
  --por-border-dotted-3: var(--por-base-size-3) dotted;
  --por-base-color-transparent: transparent;
  --por-base-color-rgb-black: 0, 0, 0;
  --por-base-color-rgb-white: 255, 255, 255;
  --por-base-color-rgb-gray: 89, 89, 89;
  --por-base-color-gray-0: #fff;
  --por-base-color-gray-5: #fafafa;
  --por-base-color-gray-10: #f5f5f5;
  --por-base-color-gray-20: #ebebeb;
  --por-base-color-gray-30: #dbdbdb;
  --por-base-color-gray-40: #c2c2c2;
  --por-base-color-gray-50: grey;
  --por-base-color-gray-60: #595959;
  --por-base-color-gray-70: #333;
  --por-base-color-gray-80: #262626;
  --por-base-color-gray-90: #191919;
  --por-base-color-gray-100: #000;
  --por-base-color-red-20: #faa9a5;
  --por-base-color-red-40: #f76360;
  --por-base-color-red-50: #f23030;
  --por-base-color-orange-50: #f80;
  --por-base-color-lemon-50: #f7d916;
  --por-base-color-kelly-50: #5cb300;
  --por-base-color-blue-50: #1476ff;
  --por-base-color-red-50-alpha: rgba(242, 48, 48, 0.1);
  --por-base-color-orange-50-alpha: rgba(255, 136, 0, 0.1);
  --por-base-color-lemon-50-alpha: rgba(247, 217, 22, 0.1);
  --por-base-color-kelly-50-alpha: rgba(92, 179, 0, 0.1);
  --por-base-color-blue-50-alpha: rgba(20, 118, 255, 0.1);
  --por-base-color-orange-70: #a64d00;
  --por-base-color-yellow-70: #a67711;
  --por-base-color-lemon-70: #a38708;
  --por-base-color-lime-70: #728c0a;
  --por-base-color-kelly-70: #3c8001;
  --por-base-color-green-70: #01802b;
  --por-base-color-mint-70: #048c8c;
  --por-base-color-sky-70: #1075a3;
  --por-base-color-blue-70: #0845a6;
  --por-base-color-indigo-70: #27108f;
  --por-base-color-purple-70: #4c1091;
  --por-base-color-pink-70: #8f0a94;
  --por-base-color-rose-70: #940a54;
  --por-base-color-gold: #8f3c00;
  --por-base-background-color-red-50-alpha: rgba(242, 48, 48, 0.1);
  --por-base-background-color-orange-70-alpha: rgba(166, 77, 0, 0.1);
  --por-base-background-color-yellow-70-alpha: rgba(166, 119, 17, 0.1);
  --por-base-background-color-lemon-70-alpha: rgba(163, 135, 8, 0.1);
  --por-base-background-color-lime-70-alpha: rgba(114, 140, 10, 0.1);
  --por-base-background-color-kelly-70-alpha: rgba(60, 128, 1, 0.1);
  --por-base-background-color-green-70-alpha: rgba(1, 128, 43, 0.1);
  --por-base-background-color-mint-70-alpha: rgba(4, 140, 140, 0.1);
  --por-base-background-color-sky-70-alpha: rgba(16, 117, 163, 0.1);
  --por-base-background-color-blue-70-alpha: rgba(8, 69, 166, 0.1);
  --por-base-background-color-indigo-70-alpha: rgba(39, 16, 143, 0.1);
  --por-base-background-color-purple-70-alpha: rgba(76, 16, 145, 0.1);
  --por-base-background-color-pink-70-alpha: rgba(143, 10, 148, 0.1);
  --por-base-background-color-rose-70-alpha: rgba(148, 10, 84, 0.1);
  --por-base-background-color-gold: rgba(148, 10, 84, 0.1);
  --por-base-color-red-huawei: #c7000b;
  --por-base-color-brand: var(--por-base-color-gray-90);
  --por-base-color-brand-2: var(--por-base-color-blue-50);
  --por-color-text-primary: var(--por-base-color-gray-90);
  --por-color-text-secondary: var(--por-base-color-gray-60);
  --por-color-text-weak-1: var(--por-base-color-gray-40);
  --por-color-text-weak: var(--por-base-color-gray-50);
  --por-color-text-disabled: var(--por-base-color-gray-40);
  --por-color-text-white: var(--por-base-color-gray-0);
  --por-color-text-black: var(--por-base-color-gray-100);
  --por-color-text-button: var(--por-base-color-blue-50);
  --por-color-text-huawei: var(--por-base-color-red-huawei);
  --por-color-text-link-default: var(--por-base-color-gray-90);
  --por-color-text-link-active: var(--por-base-color-gray-60);
  --por-color-text-link-disabled: var(--por-base-color-gray-40);
  --por-color-text-link-white: var(--por-base-color-gray-0);
  --por-color-background-white: var(--por-base-color-gray-0);
  --por-color-background-white-1: rgba(var(--por-base-color-rgb-white), 0.3);
  --por-color-background-white-2: rgba(var(--por-base-color-rgb-white), 0.5);
  --por-color-background-white-3: rgba(var(--por-base-color-rgb-white), 0.8);
  --por-color-background-black: var(--por-base-color-gray-100);
  --por-color-background-black-1: rgba(var(--por-base-color-rgb-black), 0.8);
  --por-color-background-primary: var(--por-base-color-gray-90);
  --por-color-background-primary-active: var(--por-base-color-gray-60);
  --por-color-background-secondary: var(--por-base-color-gray-60);
  --por-color-background-gray: var(--por-base-color-gray-40);
  --por-color-background-gray-1: var(--por-base-color-gray-5);
  --por-color-background-gray-2: var(--por-base-color-gray-10);
  --por-color-background-gray-3: rgba(var(--por-base-color-rgb-black), 0.1);
  --por-color-background-gray-4: rgba(var(--por-base-color-rgb-black), 0.05);
  --por-color-background-gray-5: var(--por-base-color-gray-30);
  --por-color-background-gray-6: rgba(var(--por-base-color-rgb-black), 0.08);
  --por-color-background-gray-7: rgba(var(--por-base-color-rgb-gray), 0.1);
  --por-color-background-disabled: rgba(var(--por-base-color-rgb-black), 0.05);
  --por-color-background-transparent: var(--por-base-color-transparent);
  --por-color-background-aux: var(--por-base-color-blue-50);
  --por-color-border-primary: var(--por-base-color-gray-90);
  --por-color-border-primary-active: var(--por-base-color-gray-60);
  --por-color-border-secondary: var(--por-base-color-gray-60);
  --por-color-border-secondary-active: var(--por-base-color-gray-50);
  --por-color-border-input: var(--por-base-color-gray-40);
  --por-color-border-input-active: var(--por-base-color-gray-90);
  --por-color-border-input-disabled: var(--por-base-color-gray-30);
  --por-color-border-disabled: var(--por-base-color-gray-40);
  --por-color-border-white: var(--por-base-color-gray-0);
  --por-color-border-light-gray: var(--por-base-color-gray-50);
  --por-color-border-split-1: rgba(var(--por-base-color-rgb-black), 0.08);
  --por-color-border-split-2: rgba(var(--por-base-color-rgb-black), 0.15);
  --por-color-border-transparent: var(--por-base-color-transparent);
  --por-color-border-drop: var(--por-base-color-gray-20);
  --por-color-function-error: var(--por-base-color-red-50);
  --por-color-function-warning: var(--por-base-color-orange-50);
  --por-color-function-alarm: var(--por-base-color-lemon-50);
  --por-color-function-success: var(--por-base-color-kelly-50);
  --por-color-function-info: var(--por-base-color-blue-50);
  --por-color-function-closed: var(--por-base-color-gray-20);
  --por-color-function-error-hover: var(--por-base-color-red-40);
  --por-color-function-error-text: var(--por-base-color-red-20);
  --por-color-function-error-background: var(--por-base-color-red-50-alpha);
  --por-color-function-warning-background: var(
    --por-base-color-orange-50-alpha
  );
  --por-color-function-alarm-background: var(--por-base-color-lemon-50-alpha);
  --por-color-function-success-background: var(--por-base-color-kelly-50-alpha);
  --por-color-function-info-background: var(--por-base-color-blue-50-alpha);
  --por-base-size-percent-small: 25%;
  --por-base-size-percent-middle: 50%;
  --por-base-size-percent-large: 75%;
  --por-base-size-percent-extra-large: 100%;
  --por-base-size-0: 0px;
  --por-base-size-1: 1px;
  --por-base-size-2: 2px;
  --por-base-size-3: 3px;
  --por-base-size-4: calc(var(--por-base-size-2) * 2);
  --por-base-size-6: calc(var(--por-base-size-2) * 3);
  --por-base-size-8: calc(var(--por-base-size-2) * 4);
  --por-base-size-10: calc(var(--por-base-size-2) * 5);
  --por-base-size-12: calc(var(--por-base-size-2) * 6);
  --por-base-size-13: 13px;
  --por-base-size-14: calc(var(--por-base-size-2) * 7);
  --por-base-size-16: calc(var(--por-base-size-2) * 8);
  --por-base-size-18: calc(var(--por-base-size-2) * 9);
  --por-base-size-20: calc(var(--por-base-size-2) * 10);
  --por-base-size-22: calc(var(--por-base-size-2) * 11);
  --por-base-size-24: calc(var(--por-base-size-2) * 12);
  --por-base-size-26: calc(var(--por-base-size-2) * 13);
  --por-base-size-28: calc(var(--por-base-size-2) * 14);
  --por-base-size-30: calc(var(--por-base-size-2) * 15);
  --por-base-size-32: calc(var(--por-base-size-2) * 16);
  --por-base-size-36: calc(var(--por-base-size-2) * 18);
  --por-base-size-40: calc(var(--por-base-size-2) * 20);
  --por-base-size-42: calc(var(--por-base-size-2) * 21);
  --por-base-size-44: calc(var(--por-base-size-2) * 22);
  --por-base-size-48: calc(var(--por-base-size-2) * 24);
  --por-base-size-50: calc(var(--por-base-size-2) * 25);
  --por-base-size-52: calc(var(--por-base-size-2) * 26);
  --por-base-size-54: calc(var(--por-base-size-2) * 27);
  --por-base-size-56: calc(var(--por-base-size-2) * 28);
  --por-base-size-60: calc(var(--por-base-size-2) * 30);
  --por-base-size-64: calc(var(--por-base-size-2) * 32);
  --por-base-size-64: calc(var(--por-base-size-2) * 33);
  --por-base-size-68: calc(var(--por-base-size-2) * 34);
  --por-base-size-72: calc(var(--por-base-size-2) * 36);
  --por-base-size-76: calc(var(--por-base-size-2) * 38);
  --por-base-size-78: calc(var(--por-base-size-2) * 39);
  --por-base-size-84: calc(var(--por-base-size-2) * 42);
  --por-base-size-100: calc(var(--por-base-size-2) * 50);
  --por-base-font-family: -apple-system, HuaweiSans, Helvetica Neue, Helvetica,
    Arial, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei,
    Microsoft JhengHei, SimSun, sans-serif;
  --por-base-font-family-ja-jp: -apple-system, "メイリオ", "Meiryo",
    "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", sans-serif;
  --por-base-font-family-ar-mena: Manrope, -apple-system, HuaweiSans,
    Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, STHeiti,
    Microsoft YaHei, Microsoft JhengHei, SimSun, sans-serif;
  --por-base-font-weight-lighter: lighter;
  --por-base-font-weight-normal: normal;
  --por-base-font-weight-bold: bold;
  --por-base-font-weight-bolder: bolder;
  --por-font-size-12: var(--por-base-size-12);
  --por-font-size-14: var(--por-base-size-14);
  --por-font-size-16: var(--por-base-size-16);
  --por-font-size-18: var(--por-base-size-18);
  --por-font-size-20: var(--por-base-size-20);
  --por-font-size-22: var(--por-base-size-22);
  --por-font-size-24: var(--por-base-size-24);
  --por-font-size-26: var(--por-base-size-26);
  --por-font-size-28: var(--por-base-size-28);
  --por-font-size-30: var(--por-base-size-30);
  --por-font-size-32: var(--por-base-size-32);
  --por-font-size-36: var(--por-base-size-36);
  --por-font-size-40: var(--por-base-size-40);
  --por-font-size-44: var(--por-base-size-44);
  --por-font-size-48: var(--por-base-size-48);
  --por-font-size-50: var(--por-base-size-50);
  --por-font-size-52: var(--por-base-size-52);
  --por-font-size-60: var(--por-base-size-60);
  --por-font-size-64: var(--por-base-size-64);
  --por-font-size-68: var(--por-base-size-68);
  --por-font-size-72: var(--por-base-size-72);
  --por-font-line-height-18: var(--por-base-size-18);
  --por-font-line-height-22: var(--por-base-size-22);
  --por-font-line-height-24: var(--por-base-size-24);
  --por-font-line-height-28: var(--por-font-size-28);
  --por-font-line-height-30: var(--por-base-size-30);
  --por-font-line-height-32: var(--por-base-size-32);
  --por-font-line-height-36: var(--por-base-size-36);
  --por-font-line-height-40: var(--por-base-size-40);
  --por-font-line-height-42: var(--por-base-size-42);
  --por-font-line-height-48: var(--por-base-size-48);
  --por-font-line-height-54: var(--por-base-size-54);
  --por-font-line-height-60: var(--por-base-size-60);
  --por-font-line-height-66: var(--por-base-size-66);
  --por-font-line-height-72: var(--por-base-size-72);
  --por-font-line-height-78: var(--por-base-size-78);
  --por-font-line-height-84: var(--por-base-size-84);
  --por-font-height-18: var(--por-base-size-18);
  --por-font-height-22: var(--por-base-size-22);
  --por-font-height-24: var(--por-base-size-24);
  --por-font-height-28: var(--por-font-size-28);
  --por-font-height-30: var(--por-base-size-30);
  --por-font-height-32: var(--por-base-size-32);
  --por-font-height-36: var(--por-base-size-36);
  --por-font-height-40: var(--por-base-size-40);
  --por-font-height-42: var(--por-base-size-42);
  --por-font-height-48: var(--por-base-size-48);
  --por-font-height-72: var(--por-base-size-72);
  --por-font-height-78: var(--por-base-size-78);
  --por-font-height-84: var(--por-base-size-84);
  --por-radius-xs: var(--por-base-size-0);
  --por-radius-s: var(--por-base-size-2);
  --por-radius-m: var(--por-base-size-4);
  --por-radius-l: var(--por-base-size-6);
  --por-radius-l-1: var(--por-base-size-8);
  --por-radius-l-2: var(--por-base-size-12);
  --por-radius-xl: var(--por-base-size-16);
  --por-radius-xl-1: var(--por-base-size-24);
  --por-radius-xxl: var(--por-base-size-32);
  --por-radius-xxxl: var(--por-base-size-48);
  --por-radius-xxxxl: var(--por-base-size-100);
  --por-radius-circle: var(--por-base-size-percent-middle);
  --por-base-box-shadow-none: none;
  --por-base-box-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.08);
  --por-base-box-shadow-normal: 0 2px 12px rgba(0, 0, 0, 0.08);
  --por-base-box-shadow-dark: 0 4px 22px rgba(0, 0, 0, 0.08);
  --por-shadow-card-normal: var(--por-base-box-shadow-none);
  --por-shadow-card-active: var(--por-base-box-shadow-normal);
  --por-shadow-tips: var(--por-base-box-shadow-normal);
  --por-shadow-dropdown: var(--por-base-box-shadow-normal);
  --por-shadow-modal: var(--por-base-box-shadow-dark);
  --por-shadow-input: var(--por-base-box-shadow-light);
  --por-base-zindex-negative: -1;
  --por-base-zindex-content: 1;
  --por-base-zindex-dropdown: 1000;
  --por-base-zindex-sticky: 1020;
  --por-base-zindex-fixed: 1030;
  --por-base-zindex-mask: 1040;
  --por-base-zindex-modal: 1050;
  --por-base-zindex-tooltip: 1060;
}
body {
  font-family: -apple-system, HuaweiSans, Helvetica Neue, Helvetica, Arial,
    PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, Microsoft JhengHei,
    SimSun, sans-serif;
  font-family: var(--por-base-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: #595959;
  color: var(--por-color-text-secondary);
  background-color: #fff;
  background-color: var(--por-color-background-white);
}
html[lang="ar-MENA"] body {
  font-family: Manrope, -apple-system, HuaweiSans, Helvetica Neue, Helvetica,
    Arial, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei,
    Microsoft JhengHei, SimSun, sans-serif;
  font-family: var(--por-base-font-family-ar-mena);
}
html[lang="ja-JP"] body {
  font-family: -apple-system, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic,
    ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, sans-serif;
  font-family: var(--por-base-font-family-ja-jp);
}
.u-icon.u-icon-left,
.u-icon.u-icon-right {
  font-family: por-icon !important;
}
.u-icon.u-icon-left:before {
  content: "\ea08";
}
.u-icon.u-icon-right:before {
  content: "\ea09";
}
.por-border {
  border: 1px solid !important;
  border: var(--por-border-solid-1) !important;
}
.por-border-0 {
  border: 0 !important;
}
.radius_border_XS {
  border-radius: 0 !important;
  border-radius: var(--por-radius-xs) !important;
}
.radius_border_S {
  border-radius: 2px !important;
  border-radius: var(--por-radius-s) !important;
}
.radius_border_M {
  border-radius: 4px !important;
  border-radius: var(--por-radius-m) !important;
}
.radius_border_L {
  border-radius: 6px !important;
  border-radius: var(--por-radius-l) !important;
}
.radius_border_XL {
  border-radius: 16px !important;
  border-radius: var(--por-radius-xl) !important;
}
.radius_border_XXL {
  border-radius: 32px !important;
  border-radius: var(--por-radius-xxl) !important;
}
.radius_border_XXXL {
  border-radius: 50% !important;
  border-radius: var(--por-radius-circle) !important;
}
.color_bg_dark {
  background-color: #191919 !important;
  background-color: var(--por-color-background-primary) !important;
}
.color_bg_white {
  background-color: #fff !important;
  background-color: var(--por-color-background-white) !important;
}
.color_bg_grey {
  background-color: #f5f5f5 !important;
  background-color: var(--por-color-background-gray-2) !important;
}
.color_bg_gray,
.color_bg_hover {
  background-color: #fafafa !important;
  background-color: var(--por-color-background-gray-1) !important;
}
.color_bg_disabled {
  background-color: rgba(0, 0, 0, 0.05) !important;
  background-color: var(--por-color-background-disabled) !important;
}
.color_bg_transparent {
  background-color: transparent !important;
  background-color: var(--por-base-color-transparent) !important;
}
.color_text_primary_dark {
  color: #191919 !important;
  color: var(--por-color-text-primary) !important;
}
.color_text_secondary_dark {
  color: #595959 !important;
  color: var(--por-color-text-secondary) !important;
}
.color_text_weaken_dark {
  color: grey !important;
  color: var(--por-color-text-weak) !important;
}
.color_text_primary_light {
  color: #595959 !important;
  color: var(--por-color-text-secondary) !important;
}
.color_text_accent {
  color: #191919 !important;
  color: var(--por-color-text-primary) !important;
}
.color_text_disabled {
  color: #c2c2c2 !important;
  color: var(--por-color-text-disabled) !important;
}
.color_text_white {
  color: #fff !important;
  color: var(--por-color-text-white) !important;
}
.color_text_button {
  color: #1476ff !important;
  color: var(--por-color-text-button) !important;
}
.color_border_secondary {
  border-color: #595959 !important;
  border-color: var(--por-color-border-secondary) !important;
}
.color_border_secondary_active {
  border-color: grey !important;
  border-color: var(--por-color-border-secondary-active) !important;
}
.color_border_input {
  border-color: #c2c2c2 !important;
  border-color: var(--por-color-border-input) !important;
}
.color_border_input_active {
  border-color: #191919 !important;
  border-color: var(--por-color-border-input-active) !important;
}
.color_border_input_disabled {
  border-color: #dbdbdb !important;
  border-color: var(--por-color-border-input-disabled) !important;
}
.color_border_split_1 {
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-color: var(--por-color-border-split-1) !important;
}
.color_border_split_2 {
  border-color: rgba(0, 0, 0, 0.15) !important;
  border-color: var(--por-color-border-split-2) !important;
}
.por-stretched:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.shadow_card_normal {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: var(--por-shadow-card-normal) !important;
  box-shadow: var(--por-shadow-card-normal) !important;
}
.shadow_card_hover {
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  -webkit-box-shadow: var(--por-shadow-card-active) !important;
  box-shadow: var(--por-shadow-card-active) !important;
}
.shadow_tips {
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  -webkit-box-shadow: var(--por-shadow-tips) !important;
  box-shadow: var(--por-shadow-tips) !important;
}
.shadow_dropdown {
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  -webkit-box-shadow: var(--por-shadow-dropdown) !important;
  box-shadow: var(--por-shadow-dropdown) !important;
}
.shadow_modal {
  -webkit-box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08) !important;
  -webkit-box-shadow: var(--por-shadow-modal) !important;
  box-shadow: var(--por-shadow-modal) !important;
}
[class*="por-btn"] {
  --por-button-size-height-large: var(--por-base-size-48);
  --por-button-size-height-medium: var(--por-base-size-40);
  --por-button-size-height-default: var(--por-base-size-32);
  --por-button-size-height-small: var(--por-base-size-24);
  --por-button-size-line-height-large: var(--por-base-size-22);
  --por-button-size-line-height-medium: var(--por-base-size-22);
  --por-button-size-line-height-default: var(--por-base-size-22);
  --por-button-size-line-height-small: var(--por-base-size-18);
  --por-button-size-padding-large: var(--por-base-size-48);
  --por-button-size-padding-medium: var(--por-base-size-32);
  --por-button-size-padding-default: var(--por-base-size-24);
  --por-button-size-padding-small: var(--por-base-size-16);
  --por-button-size-padding-top-large: var(--por-base-size-12);
  --por-button-size-padding-top-medium: var(--por-base-size-8);
  --por-button-size-padding-top-default: var(--por-base-size-4);
  --por-button-size-padding-top-small: var(--por-base-size-2);
  --por-button-size-radius-large: var(--por-base-size-48);
  --por-button-size-radius-medium: var(--por-base-size-40);
  --por-button-size-radius-default: var(--por-base-size-32);
  --por-button-size-radius-small: var(--por-base-size-24);
  --por-button-font-size-large: var(--por-base-size-14);
  --por-button-font-size-medium: var(--por-base-size-14);
  --por-button-font-size-default: var(--por-base-size-14);
  --por-button-font-size-small: var(--por-base-size-12);
  --por-button-icon-size-large: var(--por-base-size-16);
  --por-button-icon-size-medium: var(--por-base-size-16);
  --por-button-icon-size-default: var(--por-base-size-12);
  --por-button-icon-size-small: var(--por-base-size-12);
  --por-button-icon-margin-large: var(--por-base-size-8);
  --por-button-icon-margin-medium: var(--por-base-size-8);
  --por-button-icon-margin-default: var(--por-base-size-4);
  --por-button-icon-margin-small: var(--por-base-size-4);
  --por-button-border-color-primary: var(--por-color-border-primary);
  --por-button-border-color-secondary: var(--por-color-border-secondary);
  --por-button-border-color-loading: var(--por-color-border-secondary);
  --por-button-border-color-danger: var(--por-color-function-error);
  --por-button-text-color-primary: var(--por-color-text-white);
  --por-button-text-color-secondary: var(--por-color-text-primary);
  --por-button-text-color-disabled: var(--por-color-text-disabled);
  --por-button-text-color-danger: var(--por-color-function-error);
  --por-button-background-color-primary: var(--por-color-background-primary);
  --por-button-background-color-secondary: var(
    --por-color-background-transparent
  );
  --por-button-background-color-disabled: var(--por-color-background-disabled);
  --por-button-background-color-danger: var(--por-color-background-white);
  --por-button-border-color-primary-hover: var(
    --por-color-border-primary-active
  );
  --por-button-border-color-secondary-hover: var(
    --por-color-border-secondary-active
  );
  --por-button-border-color-danger-hover: var(--por-color-function-error-hover);
  --por-button-text-color-primary-hover: var(--por-color-text-white);
  --por-button-text-color-secondary-hover: var(--por-color-text-primary);
  --por-button-text-color-danger-hover: var(--por-color-function-error-text);
  --por-button-background-color-primary-hover: var(
    --por-color-background-secondary
  );
  --por-button-background-color-secondary-hover: var(
    --por-color-background-transparent
  );
  --por-button-background-color-danger-hover: var(--por-color-background-white);
  --por-button-border-color-primary-disabled: var(
    --por-color-background-disabled
  );
  --por-button-border-color-secondary-disabled: var(
    --por-color-background-disabled
  );
  --por-button-border-color-danger-disabled: var(
    --por-color-background-disabled
  );
  --por-button-border-color-primary-light: var(--por-color-border-white);
  --por-button-border-color-secondary-light: var(--por-color-border-white);
  --por-button-border-color-light-disabled: rgba(
    var(--por-base-color-rgb-white),
    0.2
  );
  --por-button-text-color-primary-light: var(--por-color-text-black);
  --por-button-text-color-secondary-light: var(--por-color-text-white);
  --por-button-text-color-light-disabled: rgba(
    var(--por-base-color-rgb-white),
    0.6
  );
  --por-button-background-color-primary-light: var(
    --por-color-background-white
  );
  --por-button-background-color-secondary-light: var(
    --por-base-color-transparent
  );
  --por-button-background-color-light-disabled: rgba(
    var(--por-base-color-rgb-white),
    0.2
  );
  --por-button-border-color-primary-light-hover: rgba(
    var(--por-base-color-rgb-white),
    0.8
  );
  --por-button-border-color-secondary-light-hover: rgba(
    var(--por-base-color-rgb-white),
    0.6
  );
  --por-button-text-color-primary-light-hover: var(--por-color-text-black);
  --por-button-text-color-secondary-light-hover: var(--por-color-text-white);
  --por-button-background-color-primary-light-hover: rgba(
    var(--por-base-color-rgb-white),
    0.8
  );
  --por-button-background-color-secondary-light-hover: var(
    --por-base-color-transparent
  );
}
.por-btn {
  background: transparent;
  background: var(--por-base-color-transparent);
  border: 1px solid transparent;
  border: var(--por-border-solid-1) var(--por-base-color-transparent);
  outline: none;
  font-weight: 400;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
  font-size: var(--por-button-font-size-default);
  line-height: 22px;
  border-radius: var(--por-button-size-radius-default);
  padding: var(--por-button-size-padding-top-default)
    var(--por-button-size-padding-default);
}
.por-btn,
.por-btn .por-btn-icon {
  display: inline-block;
  vertical-align: middle;
  height: auto;
}
.por-btn .por-btn-icon {
  width: var(--por-button-icon-size-default);
  margin-right: var(--por-button-icon-margin-default);
  font-size: var(--por-button-icon-size-default);
}
.por-btn[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}
.por-btn-small {
  height: auto;
  font-size: var(--por-button-font-size-small);
  line-height: 18px;
  border-radius: var(--por-button-size-radius-small);
  padding: var(--por-button-size-padding-top-small)
    var(--por-button-size-padding-small);
}
.por-btn-middle {
  height: auto;
  font-size: var(--por-button-font-size-medium);
  line-height: 22px;
  border-radius: var(--por-button-size-radius-medium);
  padding: var(--por-button-size-padding-top-medium)
    var(--por-button-size-padding-medium);
}
.por-btn-large {
  height: auto;
  font-size: var(--por-button-font-size-large);
  line-height: 22px;
  border-radius: var(--por-button-size-radius-large);
  padding: var(--por-button-size-padding-top-large)
    var(--por-button-size-padding-large);
}
@media (max-width: 1600px) {
  .por-btn-lg-small {
    height: auto;
    font-size: var(--por-button-font-size-small);
    line-height: 18px;
    border-radius: var(--por-button-size-radius-small);
    padding: var(--por-button-size-padding-top-small)
      var(--por-button-size-padding-small);
  }
  .por-btn-lg-middle {
    height: auto;
    font-size: var(--por-button-font-size-medium);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-medium);
    padding: var(--por-button-size-padding-top-medium)
      var(--por-button-size-padding-medium);
  }
  .por-btn-lg-default {
    height: auto;
    font-size: var(--por-button-font-size-default);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-default);
    padding: var(--por-button-size-padding-top-default)
      var(--por-button-size-padding-default);
  }
  .por-btn-lg-large {
    height: auto;
    font-size: var(--por-button-font-size-large);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-large);
    padding: var(--por-button-size-padding-top-large)
      var(--por-button-size-padding-large);
  }
}
@media (max-width: 1280px) {
  .por-btn-md-small {
    height: auto;
    font-size: var(--por-button-font-size-small);
    line-height: 18px;
    border-radius: var(--por-button-size-radius-small);
    padding: var(--por-button-size-padding-top-small)
      var(--por-button-size-padding-small);
  }
  .por-btn-md-middle {
    height: auto;
    font-size: var(--por-button-font-size-medium);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-medium);
    padding: var(--por-button-size-padding-top-medium)
      var(--por-button-size-padding-medium);
  }
  .por-btn-md-default {
    height: auto;
    font-size: var(--por-button-font-size-default);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-default);
    padding: var(--por-button-size-padding-top-default)
      var(--por-button-size-padding-default);
  }
  .por-btn-md-large {
    height: auto;
    font-size: var(--por-button-font-size-large);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-large);
    padding: var(--por-button-size-padding-top-large)
      var(--por-button-size-padding-large);
  }
}
@media (max-width: 979px) {
  .por-btn-sm-small {
    height: auto;
    font-size: var(--por-button-font-size-small);
    line-height: 18px;
    border-radius: var(--por-button-size-radius-small);
    padding: var(--por-button-size-padding-top-small)
      var(--por-button-size-padding-small);
  }
  .por-btn-sm-middle {
    height: auto;
    font-size: var(--por-button-font-size-medium);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-medium);
    padding: var(--por-button-size-padding-top-medium)
      var(--por-button-size-padding-medium);
  }
  .por-btn-sm-default {
    height: auto;
    font-size: var(--por-button-font-size-default);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-default);
    padding: var(--por-button-size-padding-top-default)
      var(--por-button-size-padding-default);
  }
  .por-btn-sm-large {
    height: auto;
    font-size: var(--por-button-font-size-large);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-large);
    padding: var(--por-button-size-padding-top-large)
      var(--por-button-size-padding-large);
  }
}
@media (max-width: 768px) {
  .por-btn-xs-small {
    height: auto;
    font-size: var(--por-button-font-size-small);
    line-height: 18px;
    border-radius: var(--por-button-size-radius-small);
    padding: var(--por-button-size-padding-top-small)
      var(--por-button-size-padding-small);
  }
  .por-btn-xs-middle {
    height: auto;
    font-size: var(--por-button-font-size-medium);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-medium);
    padding: var(--por-button-size-padding-top-medium)
      var(--por-button-size-padding-medium);
  }
  .por-btn-xs-default {
    height: auto;
    font-size: var(--por-button-font-size-default);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-default);
    padding: var(--por-button-size-padding-top-default)
      var(--por-button-size-padding-default);
  }
  .por-btn-xs-large {
    height: auto;
    font-size: var(--por-button-font-size-large);
    line-height: 22px;
    border-radius: var(--por-button-size-radius-large);
    padding: var(--por-button-size-padding-top-large)
      var(--por-button-size-padding-large);
  }
}
.por-btn-primary {
  background-color: var(--por-button-background-color-primary);
  border-color: var(--por-button-border-color-primary);
  color: var(--por-button-text-color-primary);
}
.por-btn-primary:hover {
  background-color: var(--por-button-background-color-primary-hover);
  border-color: var(--por-button-border-color-primary-hover);
  color: var(--por-button-text-color-primary-hover);
}
.por-btn-primary.por-btn-disabled,
.por-btn-primary[disabled] {
  background-color: var(--por-button-background-color-disabled);
  border-color: var(--por-button-border-color-primary-disabled);
  color: var(--por-button-text-color-disabled);
}
.por-btn-danger {
  background-color: var(--por-button-background-color-danger);
  border-color: var(--por-button-border-color-danger);
  color: var(--por-button-text-color-danger);
}
.por-btn-danger:hover {
  background-color: var(--por-button-background-color-danger-hover);
  border-color: var(--por-button-border-color-danger-hover);
  color: var(--por-button-text-color-danger-hover);
}
.por-btn-danger.por-btn-disabled,
.por-btn-danger[disabled] {
  background-color: var(--por-button-background-color-disabled);
  border-color: var(--por-button-border-color-danger-disabled);
  color: var(--por-button-text-color-disabled);
}
.por-btn-primary-light {
  background-color: var(--por-button-background-color-primary-light);
  border-color: var(--por-button-border-color-primary-light);
  color: var(--por-button-text-color-primary-light);
}
.por-btn-primary-light:hover {
  background-color: var(--por-button-background-color-primary-light-hover);
  border-color: var(--por-button-border-color-primary-light-hover);
  color: var(--por-button-text-color-primary-light-hover);
}
.por-btn-primary-light.por-btn-disabled,
.por-btn-primary-light[disabled] {
  background-color: var(--por-button-background-color-light-disabled);
  border-color: var(--por-button-border-color-light-disabled);
  color: var(--por-button-text-color-light-disabled);
}
.por-btn-secondary {
  background-color: var(--por-button-background-color-secondary);
  border-color: var(--por-button-border-color-secondary);
  color: var(--por-button-text-color-secondary);
}
.por-btn-secondary:hover {
  background-color: var(--por-button-background-color-secondary-hover);
  border-color: var(--por-button-border-color-secondary-hover);
  color: var(--por-button-text-color-secondary-hover);
}
.por-btn-secondary.por-btn-disabled,
.por-btn-secondary[disabled] {
  background-color: var(--por-button-background-color-disabled);
  border-color: var(--por-button-border-color-secondary-disabled);
  color: var(--por-button-text-color-disabled);
}
.por-btn-dark {
  border-color: var(--por-button-border-color-primary);
  color: #191919;
  color: var(--por-color-text-primary);
}
.por-btn-dark,
.por-btn-dark:hover {
  background-color: transparent;
  background-color: var(--por-base-color-transparent);
}
.por-btn-dark:hover {
  border-color: var(--por-button-border-color-secondary-hover);
  color: var(--por-button-text-color-secondary-hover);
}
.por-btn-dark.por-btn-disabled,
.por-btn-dark[disabled] {
  background-color: var(--por-button-background-color-disabled);
  border-color: var(--por-button-border-color-danger-disabled);
  color: var(--por-button-text-color-disabled);
}
.por-btn-light {
  border-color: var(--por-button-border-color-secondary-light);
  color: var(--por-button-text-color-secondary-light);
  background-color: var(--por-button-background-color-secondary-light);
}
.por-btn-light:hover {
  background-color: var(--por-button-background-color-secondary-light-hover);
  border-color: var(--por-button-border-color-secondary-light-hover);
  color: var(--por-button-text-color-secondary-light-hover);
}
.por-btn-light.por-btn-disabled,
.por-btn-light[disabled] {
  background-color: var(--por-button-background-color-light-disabled);
  border-color: var(--por-button-border-color-light-disabled);
  color: var(--por-button-text-color-light-disabled);
}
.por-icon-btn-primary {
  display: inline-block;
  background: transparent;
  background: var(--por-base-color-transparent);
  border: 1px solid transparent;
  border: var(--por-border-solid-1) var(--por-base-color-transparent);
  outline: none;
  font-weight: 400;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
  background-color: transparent;
  background-color: var(--por-base-color-transparent);
  border-color: var(--por-button-border-color-primary);
  color: #191919;
  color: var(--por-color-text-primary);
  padding-left: var(--por-button-icon-size-medium);
  padding-right: var(--por-button-icon-size-medium);
}
.por-icon-btn-primary:hover {
  background-color: transparent;
  background-color: var(--por-base-color-transparent);
  border-color: var(--por-button-border-color-secondary-hover);
  color: var(--por-button-text-color-secondary-hover);
}
.por-icon-btn-primary.por-btn-large {
  padding-left: var(--por-button-icon-size-large);
  padding-right: var(--por-button-icon-size-large);
}
.por-icon-btn-light {
  display: inline-block;
  background: transparent;
  background: var(--por-base-color-transparent);
  border: 1px solid transparent;
  border: var(--por-border-solid-1) var(--por-base-color-transparent);
  outline: none;
  font-weight: 400;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
  border-color: var(--por-button-border-color-secondary-light);
  color: var(--por-button-text-color-secondary-light);
  background-color: var(--por-button-background-color-secondary-light);
  padding-left: var(--por-button-icon-size-medium);
  padding-right: var(--por-button-icon-size-medium);
}
.por-icon-btn-light:hover {
  background-color: var(--por-button-background-color-secondary-light-hover);
  border-color: var(--por-button-border-color-secondary-light-hover);
  color: var(--por-button-text-color-secondary-light-hover);
}
.por-icon-btn-light.por-btn-large {
  padding-left: var(--por-button-icon-size-large);
  padding-right: var(--por-button-icon-size-large);
}
.por-btn-block {
  display: block;
}
html[lang="ar-MENA"] .por-btn .por-btn-icon {
  margin-right: 0;
  margin-left: var(--por-button-icon-margin-default);
}
.por-section-subtitle a,
.por-section-title a,
[class*="por-link"] {
  --por-link-icon-size: 16px;
  --por-link-font-color-primary: var(--por-color-text-primary);
  --por-link-font-color-secondary: var(--por-color-text-secondary);
  --por-link-font-color-light: var(--por-color-text-link-white);
  --por-link-font-color-blue: var(--por-color-text-button);
  --por-link-font-color-primary-hover: var(--por-color-text-primary);
  --por-link-font-color-secondary-hover: var(--por-color-text-primary);
  --por-link-font-color-light-hover: var(--por-color-text-link-white);
  --por-link-font-color-disabled: var(--por-color-text-link-disabled);
  --por-link-text-decoration: none;
  --por-link-text-decoration-hover: underline;
  --por-link-font-size: 14px;
  --por-link-font-weight: var(--por-base-font-weight-normal);
  --por-link-font-weight-hover: var(--por-base-font-weight-bold);
}
.por-link {
  color: var(--por-link-font-color-primary);
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
}
.por-link [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
.por-link .por-link-icon-right {
  margin-left: 4px;
}
.por-link .por-link-icon-left {
  margin-right: 4px;
}
.por-link:hover {
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
  font-weight: var(--por-link-font-weight-hover);
}
.por-link.por-link-disabled {
  color: var(--por-link-font-color-disabled);
  font-weight: var(--por-link-font-weight);
}
.por-link.por-link-disabled,
p .por-link {
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
}
p .por-link {
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  color: var(--por-link-font-color-primary);
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
}
p .por-link [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
p .por-link .por-link-icon-right {
  margin-left: 4px;
}
p .por-link .por-link-icon-left {
  margin-right: 4px;
}
p .por-link:hover {
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
}
p .por-link.por-link-disabled {
  color: var(--por-link-font-color-disabled);
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
p .por-link:hover {
  font-weight: var(--por-link-font-weight-hover);
}
[data-bg="blue"] p .por-link,
[data-bg="dark"] p .por-link,
[data-bg="transWhite"] p .por-link {
  color: var(--por-link-font-color-primary);
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  color: var(--por-link-font-color-light);
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
}
[data-bg="blue"] p .por-link [class|="por-link-icon"],
[data-bg="dark"] p .por-link [class|="por-link-icon"],
[data-bg="transWhite"] p .por-link [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
[data-bg="blue"] p .por-link .por-link-icon-right,
[data-bg="dark"] p .por-link .por-link-icon-right,
[data-bg="transWhite"] p .por-link .por-link-icon-right {
  margin-left: 4px;
}
[data-bg="blue"] p .por-link .por-link-icon-left,
[data-bg="dark"] p .por-link .por-link-icon-left,
[data-bg="transWhite"] p .por-link .por-link-icon-left {
  margin-right: 4px;
}
[data-bg="blue"] p .por-link:hover,
[data-bg="dark"] p .por-link:hover,
[data-bg="transWhite"] p .por-link:hover {
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
}
[data-bg="blue"] p .por-link.por-link-disabled,
[data-bg="dark"] p .por-link.por-link-disabled,
[data-bg="transWhite"] p .por-link.por-link-disabled {
  color: var(--por-link-font-color-disabled);
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
[data-bg="blue"] p .por-link:hover,
[data-bg="dark"] p .por-link:hover,
[data-bg="transWhite"] p .por-link:hover {
  font-weight: var(--por-link-font-weight-hover);
}
.por-link-secondary {
  color: var(--por-link-font-color-primary);
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  color: var(--por-link-font-color-secondary);
}
.por-link-secondary [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
.por-link-secondary .por-link-icon-right {
  margin-left: 4px;
}
.por-link-secondary .por-link-icon-left {
  margin-right: 4px;
}
.por-link-secondary:hover {
  font-weight: var(--por-link-font-weight-hover);
}
.por-link-secondary.por-link-disabled {
  color: var(--por-link-font-color-disabled);
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
.por-link-secondary:hover {
  color: var(--por-link-font-color-secondary-hover);
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
  font-weight: var(--por-link-font-weight);
}
.por-link-subtitle {
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  color: var(--por-link-font-color-primary);
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
}
.por-link-subtitle [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
.por-link-subtitle .por-link-icon-right {
  margin-left: 4px;
}
.por-link-subtitle .por-link-icon-left {
  margin-right: 4px;
}
.por-link-subtitle:hover {
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
  font-weight: var(--por-link-font-weight-hover);
}
.por-link-subtitle.por-link-disabled {
  color: var(--por-link-font-color-disabled);
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
.por-link-subtitle:hover {
  color: var(--por-link-font-color-primary);
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-link-disabled {
  color: var(--por-link-font-color-primary);
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  color: var(--por-link-font-color-disabled);
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
  cursor: default;
}
.por-link-disabled [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
.por-link-disabled .por-link-icon-right {
  margin-left: 4px;
}
.por-link-disabled .por-link-icon-left {
  margin-right: 4px;
}
.por-link-disabled:hover {
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
  font-weight: var(--por-link-font-weight-hover);
}
.por-link-disabled.por-link-disabled {
  color: var(--por-link-font-color-disabled);
}
.por-link-blue,
.por-link-disabled.por-link-disabled {
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
.por-link-blue {
  color: var(--por-link-font-color-primary);
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  color: var(--por-link-font-color-blue);
}
.por-link-blue [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
.por-link-blue .por-link-icon-right {
  margin-left: 4px;
}
.por-link-blue .por-link-icon-left {
  margin-right: 4px;
}
.por-link-blue:hover {
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
  font-weight: var(--por-link-font-weight-hover);
}
.por-link-blue.por-link-disabled {
  color: var(--por-link-font-color-disabled);
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
.por-link-blue:hover {
  font-weight: var(--por-base-font-weight);
}
.por-link-light {
  color: var(--por-link-font-color-primary);
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  color: var(--por-link-font-color-light);
  font-weight: var(--por-link-font-weight);
}
.por-link-light [class|="por-link-icon"] {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  margin-top: -2px;
}
.por-link-light .por-link-icon-right {
  margin-left: 4px;
}
.por-link-light .por-link-icon-left {
  margin-right: 4px;
}
.por-link-light:hover {
  font-weight: var(--por-link-font-weight-hover);
}
.por-link-light.por-link-disabled {
  color: var(--por-link-font-color-disabled);
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
.por-link-light:hover {
  color: var(--por-link-font-color-light-hover);
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
  font-weight: var(--por-link-font-weight);
}
.por-link-more {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.por-link-more:hover {
  font-weight: 400;
  font-weight: var(--por-base-font-weight-normal);
}
.por-link-more:hover .por-icon {
  -webkit-transform: translate(4px);
  transform: translate(4px);
}
.por-link-change:hover,
.por-link-more:hover .por-icon {
  -webkit-text-decoration: var(--por-link-text-decoration);
  text-decoration: var(--por-link-text-decoration);
  font-weight: var(--por-link-font-weight);
}
.por-link-change .por-icon {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.por-link-expend .por-link-expend-text {
  display: inline;
}
.por-link-expend .por-link-expend-text + .por-link-expend-text {
  display: none;
}
.por-link-expend .por-icon {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.por-link-expend.expended .por-link-expend-text {
  display: none;
}
.por-link-expend.expended .por-link-expend-text + .por-link-expend-text {
  display: inline;
}
.por-link-expend.expended .por-icon {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
html[lang="ar-MENA"] .por-link-light .por-link-icon-right,
html[lang="ar-MENA"] .por-link .por-link-icon-right {
  margin-right: 4px;
  margin-left: 0;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
html[lang="ar-MENA"] .por-link-more:hover .por-icon {
  -webkit-transform: translate(-4px) rotateY(180deg);
  transform: translate(-4px) rotateY(180deg);
}
html[lang="ar-MENA"] .por-section-subtitle a {
  display: inline-block;
  margin-right: 8px;
  margin-left: 0;
}
.por-text-title-t1 {
  font-size: 60px;
  font-size: var(--por-font-size-60);
  line-height: 84px;
  line-height: var(--por-font-line-height-84);
}
.por-text-title-t1,
.por-text-title-t2 {
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-text-title-t2 {
  font-size: 48px;
  font-size: var(--por-font-size-48);
  line-height: 72px;
  line-height: var(--por-font-line-height-72);
}
.por-text-title-t2-s {
  font-size: 44px;
  font-size: var(--por-font-size-44);
  line-height: var(--por-base-size-66);
  line-height: var(--por-font-line-height-66);
}
.por-text-title-t2-s,
.por-text-title-t3 {
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-text-title-t3 {
  font-size: 40px;
  font-size: var(--por-font-size-40);
  line-height: 60px;
  line-height: var(--por-font-line-height-60);
}
.por-text-title-t4 {
  font-size: 36px;
  font-size: var(--por-font-size-36);
  line-height: 54px;
  line-height: var(--por-font-line-height-54);
}
.por-text-title-t4,
.por-text-title-t5 {
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-text-title-t5 {
  font-size: 32px;
  font-size: var(--por-font-size-32);
  line-height: 48px;
  line-height: var(--por-font-line-height-48);
}
.por-text-title-t6 {
  font-size: 28px;
  font-size: var(--por-font-size-28);
  line-height: 42px;
  line-height: var(--por-font-line-height-42);
}
.por-text-title-t6,
.por-text-title-t7 {
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-text-title-t7 {
  font-size: 24px;
  font-size: var(--por-font-size-24);
  line-height: 36px;
  line-height: var(--por-font-line-height-36);
}
.por-text-title-t8 {
  font-size: 20px;
  font-size: var(--por-font-size-20);
  line-height: 30px;
  line-height: var(--por-font-line-height-30);
}
.por-text-title-t8,
.por-text-title-t9 {
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-text-title-t9 {
  font-size: 18px;
  font-size: var(--por-font-size-18);
  line-height: 28px;
  line-height: var(--por-font-line-height-28);
}
.por-text-subtitle-t1 {
  font-size: 32px;
  font-size: var(--por-font-size-32);
  line-height: 48px;
  line-height: var(--por-font-line-height-48);
}
.por-text-subtitle-t2 {
  font-size: 20px;
  font-size: var(--por-font-size-20);
  line-height: 30px;
  line-height: var(--por-font-line-height-30);
}
.por-text-subtitle-t3 {
  font-size: 18px;
  font-size: var(--por-font-size-18);
  line-height: 28px;
  line-height: var(--por-font-line-height-28);
}
.por-text-subtitle-t4 {
  font-size: 16px;
  font-size: var(--por-font-size-16);
  line-height: 24px;
  line-height: var(--por-font-line-height-24);
}
.por-text-subtitle-t5 {
  font-size: 14px;
  font-size: var(--por-font-size-14);
  line-height: 22px;
  line-height: var(--por-font-line-height-22);
}
.por-text-subtitle-t6 {
  font-size: 12px;
  font-size: var(--por-font-size-12);
  line-height: 18px;
  line-height: var(--por-font-line-height-18);
}
.por-text-body-t1 {
  font-size: 18px;
  font-size: var(--por-font-size-18);
  line-height: 28px;
  line-height: var(--por-font-line-height-28);
}
.por-text-body-t2 {
  font-size: 16px;
  font-size: var(--por-font-size-16);
  line-height: 24px;
  line-height: var(--por-font-line-height-24);
}
.por-text-body-t3 {
  font-size: 14px;
  font-size: var(--por-font-size-14);
  line-height: 22px;
  line-height: var(--por-font-line-height-22);
}
.por-text-body-t4 {
  font-size: 12px;
  font-size: var(--por-font-size-12);
  line-height: 18px;
  line-height: var(--por-font-line-height-18);
}
[class*="por-tab"] {
  --por-tab-icon-size: var(--por-font-size-12);
  --por-tab-text-color: var(--por-color-text-secondary);
  --por-tab-text-color-disabled: var(--por-color-text-disabled);
  --por-tab-font-size: var(--por-font-size-18);
  --por-tab-arrow-font-size: var(--por-font-size-22);
  --por-tab-line-height: var(--por-font-line-height-28);
  --por-tab-font-weight: var(--por-base-font-weight-normal);
  --por-tab-background-color: var(--por-color-background-white);
  --por-tab-background-color-gray: var(--por-color-background-gray-2);
  --por-tab-background-color-transparent: var(
    --por-color-background-transparent
  );
  --por-tab-icon-background-color: var(--por-color-background-white);
  --por-tab-drop-background-color: var(--por-color-text-white);
  --por-tab-drop-border-color: var(--por-color-border-drop);
  --por-tab-text-color-light: var(--por-color-background-white-3);
  --por-tab-drop-background-color-light: var(--por-color-text-white);
  --por-tab-text-color-light-hover: var(--por-color-text-white);
  --por-tab-drop-border-color-light: var(--por-color-border-drop);
  --por-tab-text-color-hover: var(--por-color-text-primary);
  --por-tab-font-weight-hover: var(--por-base-font-weight-bold);
  --por-tab-text-color-active: var(--por-color-text-primary);
  --por-tab-font-weight-active: var(--por-base-font-weight-bold);
  --por-tab-tips-font-size: var(--por-font-size-12);
  --por-tab-tips-text-color: var(--por-color-text-primary);
  --por-tab-tips-background-color: var(--por-color-text-white);
  --por-tab-tips-radius: var(--por-radius-m);
  --por-tab-tips-shadow: var(--por-shadow-tips);
}
.por-tab-scroll .u-icon {
  display: inline;
  position: absolute;
  right: 0;
  cursor: pointer;
  top: 0;
  height: 100%;
  z-index: 1;
  margin-top: 0;
  color: var(--por-tab-text-color);
  font-size: var(--por-tab-font-size);
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(80%, var(--por-tab-background-color)),
    to(transparent)
  );
  background: linear-gradient(
    270deg,
    var(--por-tab-background-color) 80%,
    transparent
  );
  width: 80px;
}
.por-tab-scroll .u-icon.u-icon-left {
  left: 0;
  right: auto;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(80%, var(--por-tab-background-color)),
    to(transparent)
  );
  background: linear-gradient(
    90deg,
    var(--por-tab-background-color) 80%,
    transparent
  );
}
.por-tab-scroll .u-icon.disabled {
  color: var(--por-tab-text-color-disabled);
}
.por-tab-scroll .u-icon:before {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% + 9px);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.por-tab-scroll .u-icon.u-icon-left:before {
  left: calc(50% - 9px);
}
.por-tab-scroll .u-icon:not(.disabled) {
  color: var(--por-tab-text-color-hover);
}
[data-bg="grey"] .por-tab-scroll .u-icon {
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(80%, var(--por-tab-background-color-gray)),
    to(hsla(0, 0%, 97%, 0))
  );
  background: linear-gradient(
    270deg,
    var(--por-tab-background-color-gray) 80%,
    hsla(0, 0%, 97%, 0)
  );
}
[data-bg="grey"] .por-tab-scroll .u-icon.u-icon-left {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(80%, var(--por-tab-background-color-gray)),
    to(hsla(0, 0%, 97%, 0))
  );
  background: linear-gradient(
    90deg,
    var(--por-tab-background-color-gray) 80%,
    hsla(0, 0%, 97%, 0)
  );
}
[data-bg="dark"] .por-tab-scroll .u-icon,
[data-bg="transWhite"] .por-tab-scroll .u-icon {
  color: var(--por-tab-text-color-light);
}
[data-bg="dark"] .por-tab-scroll .u-icon,
[data-bg="dark"] .por-tab-scroll .u-icon.u-icon-left,
[data-bg="transBlack"] .por-tab-scroll .u-icon,
[data-bg="transBlack"] .por-tab-scroll .u-icon.u-icon-left,
[data-bg="transWhite"] .por-tab-scroll .u-icon,
[data-bg="transWhite"] .por-tab-scroll .u-icon.u-icon-left {
  background: transparent;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
}
.por-tab {
  position: relative;
  font-size: 0;
  text-align: center;
  border-bottom: none;
}
.por-tab > ul:not(.por-tab-drop) {
  position: relative;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}
.por-tab > ul:not(.por-tab-drop) > li {
  display: inline-block;
  padding: 0 40px;
  vertical-align: middle;
  text-align: center;
  white-space: normal;
  width: auto !important;
  max-width: 336px;
}
.por-tab a {
  display: inline-block;
  position: relative;
  font-size: 0;
  color: var(--por-tab-text-color);
  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  pointer-events: auto;
  padding: 0 0 10px;
  line-height: 1;
  height: auto;
}
.por-tab a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 2px;
  margin: auto;
  background-color: var(--por-tab-text-color-active);
  opacity: 0;
  -webkit-transition: width 0.2s, opacity 0s 0.2s;
  transition: width 0.2s, opacity 0s 0.2s;
}
.por-tab a:hover {
  color: var(--por-tab-text-color-hover);
  font-weight: var(--por-tab-font-weight-hover);
}
.por-tab > ul > li.active a {
  font-weight: var(--por-tab-font-weight-active);
  color: var(--por-tab-text-color-active);
}
.por-tab > ul > li.active a:after {
  width: 100%;
  opacity: 1;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
}
.por-tab.por-tab-scroll {
  padding-left: 40px;
  padding-right: 40px;
  overflow: hidden;
}
.por-tab.por-tab-scroll > ul {
  width: auto;
  overflow: hidden;
  text-align: left;
  display: inline-block;
}
.por-tab.por-tab-scroll > ul > li {
  width: auto;
}
.por-tab-text,
.por-tab.por-tab-scroll .u-icon-right {
  display: inline;
}
.por-tab-text {
  vertical-align: middle;
  min-width: 48px;
  max-height: 100%;
  font-size: 18px;
  font-size: var(--por-font-size-18);
  line-height: 28px;
  line-height: var(--por-font-line-height-28);
}
.por-tab-font-s .por-tab-text {
  font-size: 16px;
  font-size: var(--por-font-size-16);
  line-height: 24px;
  line-height: var(--por-font-line-height-24);
}
.por-tab-font-xs .por-tab-text {
  font-size: 14px;
  font-size: var(--por-font-size-14);
  line-height: 22px;
  line-height: var(--por-font-line-height-22);
}
.por-tab + .por-tab-wrapper {
  padding-top: 24px;
}
.por-tab-content:not(.active) {
  display: none;
}
.por-tab-tip {
  position: absolute;
  max-width: 321px;
  padding: 12px 16px;
  color: var(--por-tab-tips-text-color);
  font-size: var(--por-tab-tips-font-size);
  border-radius: var(--por-tab-tips-radius);
  -webkit-box-shadow: var(--por-tab-tips-shadow);
  box-shadow: var(--por-tab-tips-shadow);
  background-color: var(--por-tab-tips-background-color);
  z-index: 10;
}
.por-tab-left {
  text-align: left;
  color: #595959;
  color: var(--por-color-text-secondary);
}
.por-tab-left > ul > li {
  width: auto !important;
}
.por-tab-left > ul > li,
.por-tab-left > ul > li > a {
  padding-left: 0;
  padding-right: 0;
}
.por-tab-left > ul > li.active > a:after {
  width: 100%;
}
.por-tab-left .por-tab-text {
  font-size: 14px;
  font-size: var(--por-font-size-14);
  line-height: 22px;
  line-height: var(--por-font-line-height-22);
  max-width: 200px;
  min-width: 0;
}
.por-tab-left .por-icon {
  display: none;
}
.por-tab-left.por-tab-left-scroll {
  padding-right: 20px;
}
.por-tab-left.por-tab-left-scroll .por-icon {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -12px;
  display: block;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-tab-left.por-tab-left-scroll .por-icon.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.por-tab-light .por-tab > ul > li a:after {
  background-color: #fff;
  background-color: var(--por-color-background-white);
}
.por-tab-light .por-tab > ul > li a,
.por-tab-light .por-tab a:hover {
  color: #fff;
  color: var(--por-color-text-white);
}
[data-bg="dark"] .por-tab a,
[data-bg="transWhite"] .por-tab a {
  color: var(--por-tab-text-color-light);
}
[data-bg="dark"] .por-tab > ul > li.active a,
[data-bg="dark"] .por-tab a:hover,
[data-bg="transWhite"] .por-tab > ul > li.active a,
[data-bg="transWhite"] .por-tab a:hover {
  color: var(--por-tab-text-color-light-hover);
}
[data-bg="dark"] .por-tab a:after,
[data-bg="transWhite"] .por-tab a:after {
  background-color: var(--por-tab-text-color-light-hover);
}
[data-bg="dark"] .por-tab-scroll .u-icon:hover,
[data-bg="transWhite"] .por-tab-scroll .u-icon:hover {
  color: var(--por-tab-text-color-light-hover);
}
@media (max-width: 1600px) {
  .por-tab-text {
    font-size: 16px;
    font-size: var(--por-font-size-16);
    line-height: 24px;
    line-height: var(--por-font-line-height-24);
  }
  .por-tab-font-s .por-tab-text {
    font-size: 14px;
    font-size: var(--por-font-size-14);
    line-height: 22px;
    line-height: var(--por-font-line-height-22);
  }
  .por-tab a {
    padding-bottom: 8px;
  }
  .por-tab > ul:not(.por-tab-drop) > li {
    padding: 0 32px;
  }
  .por-tab.por-tab-scroll {
    padding-left: 32px;
    padding-right: 32px;
  }
  .por-tab-scroll .u-icon {
    width: 64px;
  }
}
@media (max-width: 1280px) {
  .por-tab-text {
    font-size: 14px;
    font-size: var(--por-font-size-14);
    line-height: 22px;
    line-height: var(--por-font-line-height-22);
  }
  .por-tab-font-s .por-tab-text {
    font-size: 12px;
    font-size: var(--por-font-size-12);
    line-height: 18px;
    line-height: var(--por-font-line-height-18);
  }
  .por-tab a {
    padding-bottom: 6px;
  }
  .por-tab > ul:not(.por-tab-drop) > li {
    padding: 0 26px;
  }
  .por-tab.por-tab-scroll {
    padding-left: 26px;
    padding-right: 26px;
  }
  .por-tab-scroll .u-icon {
    width: 52px;
  }
  .por-tab-scroll .u-icon:before {
    top: calc(50% - 3px);
  }
}
@media (max-width: 768px) {
  .por-tab-text {
    font-size: 12px;
    font-size: var(--por-font-size-12);
    line-height: 18px;
    line-height: var(--por-font-line-height-18);
    min-width: auto;
  }
  .por-tab a {
    padding-bottom: 4px;
  }
  .por-tab > ul:not(.por-tab-drop) > li {
    padding: 0 14px;
    max-width: 136px;
  }
  .por-tab:not(.por-tab-collapse).por-tab-scroll {
    padding-left: 14px;
    padding-right: 14px;
  }
  .por-tab:not(.por-tab-collapse) .u-icon-left,
  .por-tab:not(.por-tab-collapse) .u-icon-right {
    width: 28px;
    display: none;
  }
  .por-tab:not(.por-tab-collapse) .u-icon-left:before,
  .por-tab:not(.por-tab-collapse) .u-icon-right:before {
    display: none;
  }
  .por-tab:not(.por-tab-collapse) > ul {
    overflow-x: scroll;
  }
  .por-tab:not(.por-tab-collapse) > ul::-webkit-scrollbar,
  .por-tab:not(.por-tab-collapse) > ul::-webkit-scrollbar-thumb {
    display: none;
    width: 0;
    height: 0;
    opacity: 0;
  }
  .por-tab.por-tab-collapse {
    border-bottom: none;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: var(--por-base-box-shadow-light);
    box-shadow: var(--por-base-box-shadow-light);
  }
  .por-tab.por-tab-collapse .u-icon-left,
  .por-tab.por-tab-collapse .u-icon-right {
    display: none !important;
  }
  .por-tab.por-tab-collapse
    ul:not([data-cols="2"]):not([data-cols="3"]):not(.por-tab-drop) {
    margin-right: 44px;
  }
  .por-tab.por-tab-collapse .por-tab-expand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 44px;
    position: absolute;
    right: 0;
    cursor: pointer;
    top: 0;
    color: var(--por-tab-text-color);
    font-size: 24px;
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: var(--por-base-box-shadow-normal);
    box-shadow: var(--por-base-box-shadow-normal);
    z-index: 210;
  }
  .por-tab.por-tab-collapse .por-tab-expand,
  .por-tab.por-tab-collapse .por-tab-expand i {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .por-tab.por-tab-collapse .por-tab-expand i.expand {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .por-tab.por-tab-collapse .por-tab-drop {
    position: absolute;
    top: 100%;
    width: 100%;
    border-radius: 0 0 16px 16px;
    border-radius: 0 0 var(--por-radius-xl) var(--por-radius-xl);
    z-index: 1;
  }
  .por-tab.por-tab-collapse > ul:not(.por-tab-drop) {
    position: static;
    padding: 0;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .por-tab.por-tab-collapse > ul:not(.por-tab-drop) li {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0;
    width: 100%;
  }
  .por-tab.por-tab-collapse > ul:not(.por-tab-drop) li + li {
    margin-left: 0;
  }
  .por-tab.por-tab-collapse > ul:not(.por-tab-drop) a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: auto;
    height: 100%;
    min-height: 44px;
    max-height: 56px;
    line-height: 20px;
    padding: 10px 0;
    margin: 0 12px;
  }
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop):not([data-cols="2"]):not([data-cols="3"]):not(
      [data-cols="4"]
    ) {
    text-align: left;
    overflow-x: auto;
  }
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop):not([data-cols="2"]):not([data-cols="3"]):not(
      [data-cols="4"]
    )::-webkit-scrollbar,
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop):not([data-cols="2"]):not([data-cols="3"]):not(
      [data-cols="4"]
    )::-webkit-scrollbar-thumb {
    display: none;
    width: 0;
    height: 0;
    opacity: 0;
  }
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop):not([data-cols="2"]):not([data-cols="3"]):not(
      [data-cols="4"]
    ):after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    height: 2px;
    width: 0;
    right: 40px;
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: var(--por-base-box-shadow-normal);
    box-shadow: var(--por-base-box-shadow-normal);
  }
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop):not([data-cols="2"]):not([data-cols="3"]):not(
      [data-cols="4"]
    )
    > li {
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop):not([data-cols="2"]):not([data-cols="3"]):not(
      [data-cols="4"]
    )
    > li.active
    a:after {
    width: 100%;
  }
  .por-tab.por-tab-collapse > ul:not(.por-tab-drop).por-tab-adaption-ul {
    text-align: left;
    overflow-x: auto;
  }
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop).por-tab-adaption-ul::-webkit-scrollbar,
  .por-tab.por-tab-collapse
    > ul:not(.por-tab-drop).por-tab-adaption-ul::-webkit-scrollbar-thumb {
    display: none;
    width: 0;
    height: 0;
    opacity: 0;
  }
  .por-tab.por-tab-collapse > ul:not(.por-tab-drop).por-tab-adaption-ul:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    height: 100%;
    width: 0;
    right: 40px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: var(--por-base-box-shadow-light);
    box-shadow: var(--por-base-box-shadow-light);
  }
  .por-tab.por-tab-collapse .por-tab-drop-nav {
    position: absolute;
    background-color: var(--por-tab-drop-background-color);
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 15px;
    height: 100%;
    width: 100%;
    z-index: 200;
    color: var(--por-tab-text-color);
    font-size: 14px;
    text-align: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .por-tab.por-tab-collapse .por-tab-drop {
    background: var(--por-tab-drop-background-color);
    padding: 0 20px 20px;
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: var(--por-base-box-shadow-normal);
    box-shadow: var(--por-base-box-shadow-normal);
    border-top: 1px solid var(--por-tab-drop-border-color);
  }
  .por-tab.por-tab-collapse .por-tab-drop li {
    width: 50%;
    float: left;
    text-align: left;
    margin-top: 20px;
  }
  .por-tab.por-tab-collapse .por-tab-drop li:nth-child(2n) {
    padding-left: 10px;
  }
  .por-tab.por-tab-collapse .por-tab-drop li:nth-child(odd) {
    padding-right: 10px;
  }
  .por-tab.por-tab-collapse .por-tab-drop li > a {
    height: 36px;
    line-height: 18px;
    padding: 0;
    width: auto;
  }
  .por-tab.por-tab-collapse .por-tab-drop li > a .por-tab-text {
    font-size: 12px;
  }
  .por-tab.por-tab-collapse .por-tab-drop li > a:after {
    display: none;
  }
  .por-tab.por-tab-collapse .por-tab-drop li.active a {
    font-weight: var(--por-tab-font-weight-active);
    color: var(--por-tab-text-color-active);
  }
  .por-tab.por-tab-collapse .por-tab-text {
    min-width: auto;
    font-size: 14px;
    max-width: 200px;
    line-height: 20px;
  }
  .por-tab.por-tab-collapse .por-tab-text,
  .por-tab.por-tab-collapse .por-tab-text p {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .por-tab .por-tab-container.por-tab-light.por-tab a {
    color: var(--por-tab-text-color-light);
  }
  .por-tab .por-tab-container.por-tab-light.por-tab a.active {
    background-color: var(--por-tab-background-color-transparent);
  }
  .por-tab .por-tab-container.por-tab-light .por-tab-wrapper {
    background-color: #575d6c;
  }
  .por-tab .por-tab-container.por-tab-light .por-tab-wrapper .por-tab-content {
    color: var(--por-tab-text-color-light);
  }
  .por-tab .por-tab-container.por-tab-light ul:not(.por-tab-drop),
  .por-tab .por-tab-container.por-tab-light ul:not(.por-tab-drop) > li.active {
    background-color: var(--por-tab-background-color-transparent);
  }
  .por-tab
    .por-tab-container.por-tab-light
    ul:not(.por-tab-drop)
    > li.active
    a {
    color: var(--por-tab-text-color-light);
  }
  .por-tab
    .por-tab-container.por-tab-light
    ul:not(.por-tab-drop)
    > li.active
    a:after {
    background-color: var(--por-tab-text-color-light);
  }
  .por-tab .por-tab-container.por-tab-light .por-tab-expand {
    background: #616570;
  }
  .por-tab .por-tab-container.por-tab-light .por-tab-expand .por-icon {
    color: var(--por-tab-text-color-light);
  }
  .por-tab .por-tab-container.por-tab-light .por-tab-drop-nav {
    background-color: #747881;
    color: var(--por-tab-text-color-light);
  }
  .por-tab .por-tab-container.por-tab-light .por-tab-drop {
    border-top: 1px solid rgba(223, 225, 230, 0.8);
    background-color: #5c606b;
  }
  .por-tab .por-tab-container.por-tab-light .por-tab-drop li.active a {
    color: var(--por-tab-text-color-light);
  }
  .por-tab .por-tab > ul:not(.por-tab-drop) > li.active {
    background-color: var(--por-tab-background-color);
  }
  .por-tab .por-tab > ul:not(.por-tab-drop) > li.active a {
    font-weight: var(--por-tab-font-weight-active);
  }
  .por-tab .por-tab.por-tab-scroll {
    padding-left: 0;
    padding-right: 0;
  }
  .por-tab .por-tab-wrapper-light {
    background-color: #575d6c;
  }
  .por-tab .por-tab-wrapper-light .por-tab-content {
    color: #fff;
  }
}
@media (max-width: 768px) {
  html[lang="ar-MENA"] .por-tab.por-tab-collapse .por-tab-expand {
    left: 0;
    right: auto;
  }
  html[lang="ar-MENA"]
    .por-tab.por-tab-collapse
    ul:not([data-cols="2"]):not([data-cols="3"]):not(.por-tab-drop) {
    margin-right: 0;
    margin-left: 40px;
  }
  html[lang="ar-MENA"] .por-tab .por-tab-drop li {
    float: right;
    text-align: right;
  }
}
html[lang="ar-MENA"] .por-tab.por-tab-scroll .u-icon-left {
  display: inline;
}
html[lang="ar-MENA"] .por-tab.por-tab-scroll .u-icon-right {
  display: none;
}
html[lang="ar-MENA"] .por-tab > ul:not(.por-tab-drop) > li:first-child {
  padding-left: 40px;
  padding-right: 0;
}
[class*="por-modal"] {
  --por-modal-mask-color-background: var(--por-color-background-black);
  --por-modal-color-background: var(--por-color-background-white);
  --por-modal-radius: var(--por-radius-l-1);
  --por-modal-shadow: var(--por-shadow-modal);
  --por-modal-icon-color-success: var(--por-color-function-success);
  --por-modal-icon-color-error: var(--por-color-function-error);
  --por-modal-icon-color-warning: var(--por-color-function-warning);
  --por-modal-icon-color-tip: var(--por-color-function-info);
  --por-modal-title-font-size: 20px;
  --por-modal-title-line-height: 30px;
  --por-modal-title-color: var(--por-color-text-primary);
  --por-modal-content-font-size: 14px;
  --por-modal-content-line-height: 22px;
  --por-modal-content-color: var(--por-color-text-secondary);
  --por-modal-close-size: 16px;
  --por-modal-close-color: var(--por-color-border-secondary);
  --por-modal-close-color-hover: var(--por-color-border-secondary-active);
}
.por-modal-open {
  overflow: hidden !important;
}
.por-modal-backdrop {
  position: fixed;
  z-index: 1040;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--por-modal-mask-color-background);
  opacity: 0;
  -webkit-transition: 0.35s;
  transition: 0.35s;
}
.por-modal-backdrop.show {
  opacity: 0.2;
}
.por-modal {
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  z-index: 1050;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  -webkit-transition: 0.35s;
  transition: 0.35s;
  opacity: 0;
}
.por-modal.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}
.por-modal-dialog {
  position: relative;
  width: 550px;
  background-color: var(--por-modal-color-background);
  -webkit-box-shadow: var(--por-modal-shadow);
  box-shadow: var(--por-modal-shadow);
  text-align: left;
  border-radius: var(--por-modal-radius);
}
.por-modal-dialog-small {
  width: 400px;
}
.por-modal-dialog-middle {
  width: 550px;
}
.por-modal-dialog-large {
  width: 700px;
}
.por-modal-dialog-xlarge {
  width: 900px;
}
.por-modal-inner {
  padding: 32px;
}
.por-modal-head {
  font-size: 0;
  margin-bottom: 12px;
}
.por-modal-icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  font-size: 24px;
  margin: 0 8px 0 0;
}
.por-modal-icon.por-icon-prompt {
  color: var(--por-modal-icon-color-tip);
}
.por-modal-icon.por-icon-success {
  color: var(--por-modal-icon-color-success);
}
.por-modal-icon.por-icon-warn {
  color: var(--por-modal-icon-color-warning);
}
.por-modal-icon.por-icon-error {
  color: var(--por-modal-icon-color-error);
}
.por-modal-title {
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
  font-size: var(--por-modal-title-font-size);
  line-height: var(--por-modal-title-line-height);
  color: var(--por-modal-title-color);
}
.por-modal-icon + .por-modal-title {
  width: calc(100% - 32px);
}
.por-modal-body {
  font-size: var(--por-modal-content-font-size);
  line-height: var(--por-modal-content-line-height);
  color: var(--por-modal-content-color);
  max-height: 50vh;
  overflow: auto;
}
.por-modal-body::-webkit-scrollbar,
.por-modal-body::-webkit-scrollbar-thumb {
  width: 4px;
  width: var(--por-scrollbar-size-width-s);
  height: 4px;
  height: var(--por-scrollbar-size-width-s);
}
.por-modal-body::-webkit-scrollbar-thumb {
  border-radius: 2px;
  border-radius: var(--por-scrollbar-radius-s);
}
.por-modal-body::-webkit-scrollbar {
  background: transparent;
  background: var(--por-scrollbar-background-color);
}
.por-modal-body::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  background-color: var(--por-scrollbar-thumb-background-color);
}
.por-modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #c2c2c2;
  background-color: var(--por-scrollbar-thumb-background-color-hover);
}
.por-modal-footer {
  padding-top: 28px;
  text-align: center;
}
.por-modal-footer .por-btn + .por-btn {
  margin-left: 8px;
}
.por-modal-table {
  margin-top: 12px;
  position: relative;
  min-width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
  display: block;
  overflow-x: auto;
}
.por-modal-table tbody {
  display: table;
  width: 100%;
}
.por-modal-table::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.por-modal-table tr {
  line-height: 20px;
  display: table-row;
}
.por-modal-table tbody tr:first-child td {
  background-color: #eef0f5;
  border-bottom: none;
  border-left: 1px solid #fff;
  color: #575d6c;
  white-space: nowrap;
}
.por-modal-table tbody tr:first-child td:first-child,
.por-modal-table th:first-child {
  text-align: left;
  border-left: none;
}
.por-modal-table th:first-child {
  min-width: 240px;
}
.por-modal-table td {
  padding: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #252b3a;
  border: inherit;
  text-align: left;
  border-bottom: 1px solid #dfe1e6;
  display: table-cell;
}
.por-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  cursor: pointer;
}
.por-modal-close .u-icon {
  font-size: var(--por-modal-close-size);
  color: var(--por-modal-close-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-modal-close:hover .u-icon {
  color: var(--por-modal-close-color-hover);
}
@media (max-width: 767px) {
  .por-modal-dialog {
    width: 345px;
  }
}
html[lang="ar-MENA"] .por-modal-icon {
  margin-left: 8px;
  margin-right: 0;
}
html[lang="ar-MENA"] .por-modal-body,
html[lang="ar-MENA"] .por-modal-head {
  text-align: right;
}
html[lang="ar-MENA"] .por-modal-close {
  left: 10px;
  right: auto;
}
[class*="por-section"] {
  --por-section-background-color: var(--por-color-background-white);
  --por-section-background-gray: var(--por-color-background-gray-2);
  --por-section-background-dark: var(--por-color-background-primary);
  --por-section-background-transparent: var(--por-color-background-transparent);
  --por-section-padding-top-pc-l: var(--por-base-size-76);
  --por-section-padding-bottom-pc-l: var(--por-base-size-76);
  --por-section-head-padding-bottom-pc-l: var(--por-base-size-40);
  --por-section-subtitle-margin-top-pc-l: var(--por-base-size-12);
  --por-section-subtitle-margin-bottom-pc-l: calc(var(--por-base-size-8) * -1);
  --por-section-title-font-size-pc-l: var(--por-font-size-36);
  --por-section-subtitle-font-size-pc-l: var(--por-font-size-24);
  --por-section-padding-top-pc: var(--por-base-size-60);
  --por-section-padding-bottom-pc: var(--por-base-size-60);
  --por-section-head-padding-bottom-pc: var(--por-base-size-32);
  --por-section-subtitle-margin-top-pc: var(--por-base-size-10);
  --por-section-subtitle-margin-bottom-pc: calc(var(--por-base-size-8) * -1);
  --por-section-padding-top-pad: var(--por-base-size-52);
  --por-section-padding-bottom-pad: var(--por-base-size-52);
  --por-section-head-padding-bottom-pad: var(--por-base-size-28);
  --por-section-subtitle-margin-top-pad: var(--por-base-size-8);
  --por-section-subtitle-margin-bottom-pad: calc(var(--por-base-size-4) * -1);
  --por-section-padding-top-mb: var(--por-base-size-44);
  --por-section-padding-bottom-mb: var(--por-base-size-44);
  --por-section-head-padding-bottom-mb: var(--por-base-size-20);
  --por-section-subtitle-margin-top-mb: var(--por-base-size-4);
  --por-section-subtitle-margin-bottom-mb: calc(var(--por-base-size-8) * -1);
  --por-section-title-color: var(--por-color-text-primary);
  --por-section-subtitle-color: var(--por-color-text-secondary);
}
.por-section {
  padding-top: var(--por-section-padding-top-pc-l);
  padding-bottom: var(--por-section-padding-bottom-pc-l);
}
.por-section[data-bg="light"],
.por-section[data-bg="white"] {
  background-color: var(--por-section-background-color);
}
.por-section[data-bg="grey"] {
  background-color: var(--por-section-background-gray);
}
.por-section[data-bg="transBlack"],
.por-section[data-bg="transWhite"] {
  background-color: var(--por-section-background-transparent);
}
.por-section[data-bg="blue"],
.por-section[data-bg="dark"] {
  background-color: var(--por-section-background-dark);
}
.por-section.por-section-merge-spacing,
.por-section.por-section-merge-spacing-top {
  padding-top: 0;
}
.por-section.por-section-merge-spacing-bottom {
  padding-bottom: 0;
}
.por-section-head {
  padding-bottom: var(--por-section-head-padding-bottom-pc-l);
  font-size: 0;
  text-align: center;
}
.por-section-title {
  display: inline-block;
  position: relative;
  padding-left: 42px;
  padding-right: 42px;
  width: 100%;
  color: var(--por-section-title-color);
  font-size: 36px;
  font-size: var(--por-font-size-36);
  line-height: 54px;
  line-height: var(--por-font-line-height-54);
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-section-title .por-section-title-ornament-left,
.por-section-title .por-section-title-ornament-right {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background-size: cover;
}
.por-section-title .por-section-title-ornament-left {
  left: 0;
}
.por-section-title .por-section-title-ornament-right {
  right: 0;
}
.por-section-subtitle {
  font-size: 16px;
  font-size: var(--por-font-size-16);
  line-height: 24px;
  line-height: var(--por-font-line-height-24);
  color: var(--por-section-subtitle-color);
  width: 100%;
}
.por-section-subtitle a {
  color: var(--por-link-font-color-primary);
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
  font-size: inherit;
  margin-left: 8px;
}
.por-section-subtitle a:hover {
  color: var(--por-link-font-color-primary);
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-section-title + .por-section-subtitle {
  margin-top: var(--por-section-subtitle-margin-top-pc-l);
  margin-bottom: var(--por-section-subtitle-margin-bottom-pc-l);
}
.por-section-head[data-theme="light"] .por-section-subtitle,
.por-section-head[data-theme="light"] .por-section-title {
  color: #fff;
}
.por-section-head[data-theme="light"] .por-section-subtitle a,
.por-section-head[data-theme="light"] .por-section-title a {
  color: var(--por-link-font-color-light);
  -webkit-text-decoration: var(--por-link-text-decoration-hover);
  text-decoration: var(--por-link-text-decoration-hover);
}
.por-section-head[data-theme="light"] .por-section-subtitle a:hover,
.por-section-head[data-theme="light"] .por-section-title a:hover {
  color: var(--por-link-font-color-light);
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
.por-section-title-left .por-section-head {
  text-align: left;
}
.por-section-title-left .por-section-title {
  padding: 0;
}
@media (max-width: 1600px) {
  .por-section {
    padding-top: var(--por-section-padding-top-pc);
    padding-bottom: var(--por-section-padding-bottom-pc);
  }
  .por-section-head {
    padding-bottom: var(--por-section-head-padding-bottom-pc);
  }
  .por-section-title {
    font-size: 32px;
    font-size: var(--por-font-size-32);
    line-height: 48px;
    line-height: var(--por-font-line-height-48);
    font-weight: 700;
    font-weight: var(--por-base-font-weight-bold);
    padding-left: 27px;
    padding-right: 27px;
    white-space: normal;
  }
  .por-section-title .por-section-title-ornament-left,
  .por-section-title .por-section-title-ornament-right {
    width: 22px;
    height: 22px;
    margin-top: -11px;
  }
  .por-section-subtitle {
    width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .por-section-subtitle > p {
    white-space: normal;
  }
  .por-section-subtitle,
  .por-section-subtitle a {
    font-size: 16px;
    font-size: var(--por-font-size-16);
    line-height: 24px;
    line-height: var(--por-font-line-height-24);
  }
  .por-section-title + .por-section-subtitle {
    margin-top: var(--por-section-subtitle-margin-top-pc);
    margin-bottom: var(--por-section-subtitle-margin-bottom-pc);
  }
  .por-section-title-left .por-section-head,
  .por-section.por-section-title-left .por-section-head {
    text-align: left;
  }
  .por-section-title-left .por-section-title,
  .por-section.por-section-title-left .por-section-title {
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
  }
  .por-section-title-left .por-section-title + .por-section-subtitle,
  .por-section.por-section-title-left
    .por-section-title
    + .por-section-subtitle {
    margin-top: 8px;
    margin-bottom: 0;
  }
}
@media (max-width: 1280px) {
  .por-section {
    padding-top: var(--por-section-padding-top-pad);
    padding-bottom: var(--por-section-padding-bottom-pad);
  }
  .por-section-head {
    padding-bottom: var(--por-section-head-padding-bottom-pad);
  }
  .por-section-title + .por-section-subtitle {
    margin-top: var(--por-section-subtitle-margin-top-pad);
    margin-bottom: var(--por-section-subtitle-margin-bottom-pad);
  }
  .por-section-title {
    font-size: 28px;
    font-size: var(--por-font-size-28);
    line-height: 42px;
    line-height: var(--por-font-line-height-42);
    font-weight: 700;
    font-weight: var(--por-base-font-weight-bold);
  }
  .por-section-subtitle,
  .por-section-subtitle a {
    font-size: 14px;
    font-size: var(--por-font-size-14);
    line-height: 22px;
    line-height: var(--por-font-line-height-22);
  }
}
@media (max-width: 768px) {
  .por-section {
    padding-top: var(--por-section-padding-top-mb);
    padding-bottom: var(--por-section-padding-bottom-mb);
  }
  .por-section-head {
    padding-bottom: var(--por-section-head-padding-bottom-mb);
  }
  .por-section-title + .por-section-subtitle {
    margin-top: var(--por-section-subtitle-margin-top-mb);
    margin-bottom: var(--por-section-subtitle-margin-bottom-mb);
  }
  .por-section-title {
    font-size: 18px;
    font-size: var(--por-font-size-18);
    line-height: 28px;
    line-height: var(--por-font-line-height-28);
    font-weight: 700;
    font-weight: var(--por-base-font-weight-bold);
  }
  .por-section-subtitle,
  .por-section-subtitle a {
    font-size: 12px;
    font-size: var(--por-font-size-12);
    line-height: 18px;
    line-height: var(--por-font-line-height-18);
  }
}
html[lang="ar-MENA"] .por-section-title-left .por-section-head {
  text-align: right;
}
[class*="por-mb-select"],
[class*="por-select"] {
  --por-select-text-color: var(--por-color-text-primary);
  --por-select-text-color-hover: var(--por-color-text-primary);
  --por-select-text-color-selected: var(--por-color-text-primary);
  --por-select-text-color-disabled: var(--por-color-text-disabled);
  --por-select-text-color-placeholder: var(--por-color-text-weak);
  --por-select-background-color: var(--por-color-background-white);
  --por-select-background-color-hover: var(--por-color-background-gray-4);
  --por-select-background-color-selected: var(--por-color-background-white);
  --por-select-background-color-disabled: var(--por-color-background-disabled);
  --por-select-border-color: var(--por-base-color-gray-40);
  --por-select-border-color-open: var(--por-base-color-gray-90);
  --por-select-border-color-hover: var(--por-base-color-gray-50);
  --por-select-border-color-selected: var(--por-base-color-gray-50);
  --por-select-border-color-disabled: var(--por-base-color-gray-30);
  --por-select-border-radius: var(--por-radius-l);
  --por-select-height: var(--por-base-size-32);
  --por-select-line-height: var(--por-base-size-30);
  --por-select-font-size: var(--por-base-size-14);
  --por-select-font-weight: var(--por-base-font-weight-normal);
  --por-select-font-weight-hover: var(--por-base-font-weight-normal);
  --por-select-font-weight-selected: var(--por-base-font-weight-bold);
  --por-select-font-weight-disabled: var(--por-base-font-weight-normal);
  --por-select-shadow-open: var(--por-base-box-shadow-none);
  --por-select-options-shadow: var(--por-shadow-dropdown);
  --por-select-options-background-color: var(--por-color-background-white);
  --por-select-options-border: none;
  --por-select-searchbox-background-color: var(--por-color-background-white);
}
.por-select {
  display: inline-block;
  position: relative;
  min-width: 200px;
  max-width: 270px;
  height: var(--por-select-height);
  border: 1px solid var(--por-select-border-color);
  border-radius: var(--por-select-border-radius);
  background: var(--por-select-background-color);
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.por-select,
.por-select:after {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-select:after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -2px;
  border-top: 1px solid #191919;
  border-right: 1px solid #191919;
  width: 4px;
  height: 4px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.por-select select {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  padding-left: 12px;
  padding-right: 28px;
  background: transparent;
  font-size: var(--por-select-font-size);
  color: var(--por-select-text-color);
  line-height: var(--por-select-line-height);
  text-overflow: ellipsis;
  cursor: pointer;
}
.por-select select::-ms-expand {
  display: none;
}
.por-select select:disabled {
  cursor: default;
}
.por-select.disabled {
  background-color: var(--por-select-background-color-disabled);
  border-color: var(--por-select-border-color-disabled);
  cursor: default;
}
.por-select.disabled select {
  color: var(--por-select-text-color-disabled);
}
.por-select.disabled:after {
  border-color: var(--por-select-text-color-disabled);
}
.por-select-trigger {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-left: 12px;
  padding-right: 28px;
  background: transparent;
  background: var(--por-base-color-transparent);
  font-size: 0;
}
.por-select-trigger span {
  display: inline-block;
  position: relative;
  max-width: 100%;
  font-size: var(--por-select-font-size);
  color: var(--por-select-text-color);
  line-height: var(--por-select-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-select-trigger ~ select {
  opacity: 0;
  visibility: hidden;
  right: 20000px;
}
.por-select-options-wrapper {
  display: none;
  position: absolute;
  z-index: 9;
  top: 100%;
  left: -1px;
  min-width: calc(100% + 2px);
  max-width: 448px;
  background-color: var(--por-select-options-background-color);
  overflow: hidden;
  border: var(--por-select-options-border);
  border-radius: var(--por-select-border-radius);
  -webkit-box-shadow: var(--por-select-options-shadow);
  box-shadow: var(--por-select-options-shadow);
  padding: 0;
  margin: 4px -99999px 0 0;
}
@media (max-width: 768px) {
  .por-select-options-wrapper {
    max-width: 100%;
  }
}
.por-select-search-box {
  margin: 16px 16px 0;
  padding: 5px 12px 5px 32px;
  background-color: var(--por-select-searchbox-background-color);
  border-radius: var(--por-select-border-radius);
  border: 1px solid var(--por-select-border-color);
  position: relative;
}
.por-select-search-box:after,
.por-select-search-box:before {
  content: " ";
  display: table;
}
.por-select-search-box:after {
  clear: both;
}
.por-select-search-box input {
  float: left;
  width: calc(100% - 32px);
  height: calc(var(--por-select-font-size) * 1.5);
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: var(--por-select-font-size);
  color: var(--por-select-text-color);
}
.por-select-search-box input::-ms-clear {
  display: none;
}
.por-select-search-box input ::-webkit-input-placeholder {
  color: var(--por-select-text-color-placeholder);
}
.por-select-search-box input ::-moz-placeholder {
  color: var(--por-select-text-color-placeholder);
}
.por-select-search-box input :-ms-input-placeholder {
  color: var(--por-select-text-color-placeholder);
}
.por-select-search-box input ::-ms-input-placeholder {
  color: var(--por-select-text-color-placeholder);
}
.por-select-search-box input ::placeholder {
  color: var(--por-select-text-color-placeholder);
}
.por-select-search-box .u-icon {
  font-size: var(--por-select-font-size);
}
.por-select-search-box .u-icon-search {
  position: absolute;
  left: 14px;
  top: calc(50% - 8px);
  margin-top: 0;
}
.por-select-search-box .u-icon-cancel {
  display: none;
  position: absolute;
  right: 12px;
  top: calc(50% - 8px);
}
.por-select-search-box .u-icon-cancel.show {
  display: block;
}
.por-select-search-box ~ .por-select-option-list {
  padding-top: 8px;
}
.por-select-option-list {
  max-height: 160px;
  overflow: auto;
  padding: 5px 0;
}
.por-select-option-list li {
  padding: 0 16px;
  font-size: var(--por-select-font-size);
  line-height: var(--por-select-line-height);
  color: var(--por-select-text-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-weight: var(--por-select-font-weight);
}
.por-select-option-list li.triggerHover,
.por-select-option-list li:hover {
  background: var(--por-select-background-color-hover);
  color: var(--por-select-text-color-hover);
  font-weight: var(--por-select-font-weight-hover);
}
.por-select-option-list li.triggerHover .u-icon,
.por-select-option-list li:hover .u-icon {
  color: var(--por-select-border-color-hover);
}
.por-select-option-list li.triggerHover .u-icon:hover,
.por-select-option-list li:hover .u-icon:hover {
  color: var(--por-select-text-color-hover);
}
.por-select-option-list li.selected {
  background: var(--por-select-background-color-selected);
  color: var(--por-select-text-color-selected);
  font-weight: var(--por-select-font-weight-selected);
}
.por-select-option-list li.disabled {
  background: var(--por-select-background-color-disabled);
  color: var(--por-select-text-color-disabled);
  border-color: var(--por-select-border-color-disabled);
  font-weight: var(--por-select-font-weight-disabled);
  cursor: default;
}
.por-select:not(.open):not(.disabled):hover {
  border-color: var(--por-select-border-color-hover);
}
.por-select.open {
  border-color: var(--por-select-border-color-open);
  border-radius: var(--por-select-border-radius);
  -webkit-box-shadow: var(--por-select-shadow-open);
  box-shadow: var(--por-select-shadow-open);
}
.por-select.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.por-select.open .por-select-options-wrapper {
  display: block;
}
.por-select-block {
  display: block;
  min-width: 0;
  max-width: none;
}
.por-select-inline {
  min-width: 0;
}
.por-select.por-select-menu {
  border: none;
  width: 50px;
  min-width: 65px;
}
.por-select.por-select-menu .por-select-option-list {
  width: 50px;
  min-width: 65px;
}
.por-select.por-select-menu.open .por-select-trigger {
  border: none;
}
.por-select.por-select-menu.open {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.por-select-text {
  border-color: transparent;
}
.por-select-text:after {
  right: 4px;
}
.por-select-text:not(.open):not(.disabled):hover {
  border-color: transparent !important;
}
.por-select-text .por-select-trigger,
.por-select-text select {
  padding-left: 4px;
  padding-right: 16px;
}
.por-select-text .por-select-option-list li {
  padding-left: 3px;
  padding-right: 3px;
}
.por-mb-select-group {
  text-align: center;
  padding: 8px 0 7px;
  border-bottom: 1px solid var(--por-select-border-color);
}
html[lang="ar-MENA"] .por-select select {
  padding-right: 12px;
  padding-left: 28px;
}
html[lang="ar-MENA"] .por-select:after {
  position: absolute;
  left: 10px;
  right: auto;
}
html[lang="ar-MENA"] .por-select-search-box .u-icon-cancel {
  left: 12px;
  right: auto;
}
html[lang="ar-MENA"] .por-select-search-box .u-icon-search {
  right: 14px;
  left: auto;
}
html[lang="ar-MENA"] .por-select-trigger {
  padding-left: 28px;
  padding-right: 12px;
}
html[lang="ar-MENA"] .por-select-options-wrapper {
  right: -1px;
  left: auto;
  margin: 4px 0 0 -99999px;
}
html[lang="ar-MENA"] .por-select-text .por-select-trigger,
html[lang="ar-MENA"] .por-select-text select {
  padding-left: 16px;
  padding-right: 4px;
}
html[lang="ar-MENA"] .por-select-text:after {
  right: auto;
  left: 4px;
}
:root {
  --por-scrollbar-size-width: var(--por-base-size-8);
  --por-scrollbar-size-width-s: var(--por-base-size-4);
  --por-scrollbar-radius: var(--por-base-size-4);
  --por-scrollbar-radius-s: var(--por-base-size-2);
  --por-scrollbar-background-color: var(--por-color-background-transparent);
  --por-scrollbar-thumb-background-color: var(--por-color-background-gray-5);
  --por-scrollbar-thumb-background-color-hover: var(
    --por-color-background-gray
  );
}
.por-scrollbar-s::-webkit-scrollbar,
.por-scrollbar-s::-webkit-scrollbar-thumb {
  width: 4px;
  width: var(--por-scrollbar-size-width-s);
  height: 4px;
  height: var(--por-scrollbar-size-width-s);
}
.por-scrollbar-s::-webkit-scrollbar-thumb {
  border-radius: 2px;
  border-radius: var(--por-scrollbar-radius-s);
}
.por-scrollbar-s::-webkit-scrollbar {
  background: transparent;
  background: var(--por-scrollbar-background-color);
}
.por-scrollbar-s::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  background-color: var(--por-scrollbar-thumb-background-color);
}
.por-scrollbar-s::-webkit-scrollbar-thumb:hover {
  background-color: #c2c2c2;
  background-color: var(--por-scrollbar-thumb-background-color-hover);
}
.por-scrollbar-m::-webkit-scrollbar,
.por-scrollbar-m::-webkit-scrollbar-thumb {
  width: 8px;
  width: var(--por-scrollbar-size-width);
  height: 8px;
  height: var(--por-scrollbar-size-width);
}
.por-scrollbar-m::-webkit-scrollbar-thumb {
  border-radius: 4px;
  border-radius: var(--por-scrollbar-radius);
}
.por-scrollbar-m::-webkit-scrollbar {
  background: transparent;
  background: var(--por-scrollbar-background-color);
}
.por-scrollbar-m::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  background-color: var(--por-scrollbar-thumb-background-color);
}
.por-scrollbar-m::-webkit-scrollbar-thumb:hover {
  background-color: #c2c2c2;
  background-color: var(--por-scrollbar-thumb-background-color-hover);
}
.por-scrollbar-dark::-webkit-scrollbar {
  background: transparent;
  background: var(--por-scrollbar-background-color);
}
.por-scrollbar-dark::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  background-color: var(--por-scrollbar-thumb-background-color);
}
.por-scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background-color: #c2c2c2;
  background-color: var(--por-scrollbar-thumb-background-color-hover);
}
body::-webkit-scrollbar,
body::-webkit-scrollbar-thumb {
  width: 8px;
  width: var(--por-scrollbar-size-width);
  height: 8px;
  height: var(--por-scrollbar-size-width);
}
body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  border-radius: var(--por-scrollbar-radius);
}
body::-webkit-scrollbar {
  background: transparent;
  background: var(--por-scrollbar-background-color);
}
body::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  background-color: var(--por-scrollbar-thumb-background-color);
}
body::-webkit-scrollbar-thumb:hover {
  background-color: #c2c2c2;
  background-color: var(--por-scrollbar-thumb-background-color-hover);
}
[class*="por-tip"],
[class*="por-title-tips"],
[class*="por-tooltip"] {
  --por-tips-icon-width: var(--por-base-size-16);
  --por-tips-zindex: var(--por-base-zindex-tooltip);
  --por-tips-icon-background-color: var(--por-color-background-white);
  --por-tips-icon-background-color-info: var(--por-color-function-info);
  --por-tips-icon-background-color-warning: var(--por-color-function-warning);
  --por-tips-icon-background-color-error: var(--por-color-function-error);
  --por-tips-icon-background-color-success: var(--por-color-function-success);
  --por-tips-icon-background-color-color: var(--por-color-background-white);
  --por-tips-background-color-info: var(--por-color-function-info-background);
  --por-tips-background-color-warning: var(
    --por-color-function-warning-background
  );
  --por-tips-background-color-error: var(--por-color-function-error-background);
  --por-tips-background-color-success: var(
    --por-color-function-success-background
  );
  --por-tips-border-color-info: var(--por-color-function-info-background);
  --por-tips-border-color-warning: var(--por-color-function-warning-background);
  --por-tips-border-color-error: var(--por-color-function-error-background);
  --por-tips-border-color-success: var(--por-color-function-success-background);
  --por-tips-font-size: var(--por-font-size-14);
  --por-tips-line-height: var(--por-base-size-22);
  --por-tips-font-weight: var(--por-base-font-weight-normal);
  --por-tips-radius: var(--por-radius-s);
  --por-tips-radius-circle: var(--por-radius-circle);
  --por-tips-font-size-notice: var(--por-font-size-18);
  --por-tips-line-height-notice: var(--por-base-size-28);
  --por-tips-font-size-notice-mb: var(--por-font-size-16);
  --por-tips-line-height-notice-mb: var(--por-base-size-24);
  --por-tips-color: var(--por-color-text-primary);
  --por-tips-background-color: var(--por-color-background-white);
  --por-tips-color-dark: var(--por-color-text-white);
  --por-tips-background-color-dark: var(--por-color-background-primary);
}
@-webkit-keyframes TipNoticeMovePc {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  60% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate(-50%, -50%) translateY(-30px);
    transform: translate(-50%, -50%) translateY(-30px);
    opacity: 0;
  }
}
@keyframes TipNoticeMovePc {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  60% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate(-50%, -50%) translateY(-30px);
    transform: translate(-50%, -50%) translateY(-30px);
    opacity: 0;
  }
}
@-webkit-keyframes TipNoticeMoveMb {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  60% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate(-50%, -50%) translateY(-20px);
    transform: translate(-50%, -50%) translateY(-20px);
    opacity: 0;
  }
}
@keyframes TipNoticeMoveMb {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  60% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate(-50%, -50%) translateY(-20px);
    transform: translate(-50%, -50%) translateY(-20px);
    opacity: 0;
  }
}
.por-tooltip {
  position: absolute;
  display: none;
  z-index: var(--por-tips-zindex);
}
.por-tooltip,
.por-tooltip .por-tooltip-content {
  line-height: normal;
  font-weight: var(--por-tips-font-weight);
  background-color: var(--por-tips-background-color);
}
.por-tooltip .por-tooltip-content {
  display: inline-block;
  padding: 8px 16px;
  color: var(--por-tips-color);
  border-radius: var(--por-tips-radius);
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: var(--por-shadow-tips);
  box-shadow: var(--por-shadow-tips);
  font-size: var(--por-tips-font-size);
  word-break: break-all;
}
.por-tooltip .por-tooltip-sqr {
  position: absolute;
  border: 6px solid transparent;
}
.por-tooltip[class^="top"] .por-tooltip-sqr {
  border-top-color: var(--por-tips-background-color);
}
.por-tooltip[class^="left"] .por-tooltip-sqr {
  border-left-color: var(--por-tips-background-color);
}
.por-tooltip[class^="bottom"] .por-tooltip-sqr {
  border-bottom-color: var(--por-tips-background-color);
}
.por-tooltip[class^="right"] .por-tooltip-sqr {
  border-right-color: var(--por-tips-background-color);
}
.por-tooltip.dark[class^="top"] .por-tooltip-sqr {
  border-top-color: var(--por-tips-background-color-dark);
}
.por-tooltip.dark[class^="left"] .por-tooltip-sqr {
  border-left-color: var(--por-tips-background-color-dark);
}
.por-tooltip.dark[class^="bottom"] .por-tooltip-sqr {
  border-bottom-color: var(--por-tips-background-color-dark);
}
.por-tooltip.dark[class^="right"] .por-tooltip-sqr {
  border-right-color: var(--por-tips-background-color-dark);
}
.por-tooltip.dark .por-tooltip-content {
  background-color: var(--por-tips-background-color-dark);
  color: var(--por-tips-color-dark);
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: var(--por-shadow-tips);
  box-shadow: var(--por-shadow-tips);
}
.por-tooltip.dark .por-tooltip-sqr {
  border-width: 6px;
  border-style: solid;
  position: absolute;
}
.por-title-tips {
  color: var(--por-tips-color);
  font-size: var(--por-tips-font-size);
  font-weight: var(--por-tips-font-weight);
  line-height: var(--por-tips-line-height);
  padding: 8px 16px;
  max-width: 224px;
  background-color: var(--por-tips-background-color);
  border-radius: var(--por-tips-radius);
  z-index: var(--por-tips-zindex);
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: var(--por-shadow-tips);
  box-shadow: var(--por-shadow-tips);
}
[class*="por-tip"].error i {
  color: var(--por-tips-icon-background-color-error);
}
[class*="por-tip"].success i {
  color: var(--por-tips-icon-background-color-success);
}
[class*="por-tip"].warning i {
  color: var(--por-tips-icon-background-color-warning);
}
[class*="por-tip"].info i {
  color: var(--por-tips-icon-background-color-info);
}
.por-tip {
  margin: auto auto 20px;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.por-tip .por-tip-content {
  background: var(--por-tips-background-color-info);
  border: 1px solid var(--por-tips-border-color-info);
  border-radius: var(--por-tips-radius);
  position: relative;
}
.por-tip .por-tip-content i {
  left: 15px;
}
.por-tip .por-tip-content i,
.por-tip .por-tip-remove {
  position: absolute;
  top: 14px;
  font-size: var(--por-tips-icon-width);
}
.por-tip .por-tip-remove {
  cursor: pointer;
  right: 15px;
}
.por-tip .por-tip-wenzi {
  margin-left: 40px;
  padding: 12px 40px 12px 0;
  font-size: var(--por-tips-font-size);
  color: var(--por-tips-color);
  letter-spacing: 0;
  line-height: var(--por-tips-line-height);
}
.por-tip .por-tip-wenzi a {
  font-size: inherit;
  line-height: inherit;
}
.por-tip.error .por-tip-content {
  background: var(--por-tips-background-color-error);
  border: 1px solid var(--por-tips-border-color-error);
}
.por-tip.warning .por-tip-content {
  background: var(--por-tips-background-color-warning);
  border: 1px solid var(--por-tips-border-color-warning);
}
.por-tip.success .por-tip-content {
  background: var(--por-tips-background-color-success);
  border: 1px solid var(--por-tips-border-color-success);
}
.por-tip-notice-outContainer {
  position: fixed;
  top: calc(50% - 25px);
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 1060;
}
.por-tip-notice {
  margin: auto;
  width: auto;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: TipNoticeMovePc 1.2s cubic-bezier(0, 0, 0.2, 1) forwards;
  -webkit-animation: TipNoticeMovePc 1.2s cubic-bezier(0, 0, 0.2, 1) forwards;
  -ms-animation: TipNoticeMovePc 1.2s cubic-bezier(0, 0, 0.2, 1) forwards;
}
.por-tip-notice .por-tip-notice-text {
  font-size: var(--por-tips-font-size-notice);
  line-height: var(--por-tips-line-height-notice);
  color: var(--por-tips-color);
  margin-left: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  letter-spacing: 1px;
  padding-right: 16px;
}
.por-tip-notice .por-tip-notice-content {
  background: var(--por-tips-background-color);
  border-radius: var(--por-tips-radius);
  position: relative;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: var(--por-shadow-tips);
  box-shadow: var(--por-shadow-tips);
}
.por-tip-notice .por-tip-notice-content i {
  font-size: var(--por-tips-font-size-notice);
  position: absolute;
  top: calc(50% - var(--por-tips-font-size-notice) / 2);
  left: 15px;
}
@media (max-width: 768px) {
  .por-tip-notice-outContainer {
    position: fixed;
    top: calc(50% - 23px);
    height: 46px;
  }
  .por-tip-notice {
    animation: TipNoticeMoveMb 0.8s cubic-bezier(0, 0, 0.2, 1) forwards;
    -webkit-animation: TipNoticeMoveMb 0.8s cubic-bezier(0, 0, 0.2, 1) forwards;
    -ms-animation: TipNoticeMoveMb 0.8s cubic-bezier(0, 0, 0.2, 1) forwards;
  }
  .por-tip-notice .por-tip-notice-content:before {
    top: 14px;
    height: 20px;
    width: 20px;
  }
  .por-tip-notice .por-tip-notice-text {
    letter-spacing: 1px;
    font-size: var(--por-tips-font-size-notice-mb);
    line-height: var(--por-tips-line-height-notice-mb);
  }
}
html[lang="ar-MENA"] .por-tip .por-tip-remove {
  right: auto;
  left: 15px;
}
html[lang="ar-MENA"] .por-tip-notice .por-tip-notice-content i,
html[lang="ar-MENA"] .por-tip .por-tip-content i {
  left: auto;
  right: 15px;
}
html[lang="ar-MENA"] .por-tip-notice .por-tip-notice-text {
  margin-right: 48px;
  margin-left: 0;
  padding-left: 16px;
  padding-right: 0;
}
[class*="por-carousel"] {
  --por-carousel-bullet-width: var(--por-base-size-8);
  --por-carousel-bullet-width-active: var(--por-base-size-20);
  --por-carousel-bullet-height: var(--por-base-size-8);
  --por-carousel-bullet-height-active: var(--por-base-size-8);
  --por-carousel-bullet-margin: var(--por-base-size-12);
  --por-carousel-bullet-radius: var(--por-base-size-8);
  --por-carousel-bullet-radius-active: var(--por-base-size-8);
  --por-carousel-bullet-background-color: var(--por-color-background-gray-3);
  --por-carousel-bullet-background-color-hover: var(
    --por-color-background-gray-6
  );
  --por-carousel-bullet-background-color-active: var(
    --por-color-background-black-1
  );
  --por-carousel-prev-background-color: var(--por-color-background-gray-4);
  --por-carousel-prev-background-color-hover: var(
    --por-color-background-gray-6
  );
  --por-carousel-prev-background-color-disabled: var(
    --por-color-background-gray-4
  );
  --por-carousel-prev-icon-color: var(--por-color-text-weak);
  --por-carousel-prev-icon-color-hover: var(--por-color-text-primary);
  --por-carousel-prev-icon-color-disabled: var(--por-color-text-disabled);
  --por-carousel-bullet-background-color-light: rgba(
    var(--por-base-color-rgb-white),
    0.2
  );
  --por-carousel-bullet-background-color-light-hover: rgba(
    var(--por-base-color-rgb-white),
    0.8
  );
  --por-carousel-bullet-background-color-light-active: rgba(
    var(--por-base-color-rgb-white),
    0.8
  );
  --por-carousel-prev-background-color-light: rgba(
    var(--por-base-color-rgb-white),
    0.3
  );
  --por-carousel-prev-background-color-light-hover: rgba(
    var(--por-base-color-rgb-white),
    0.5
  );
  --por-carousel-prev-background-color-light-disabled: rgba(
    var(--por-base-color-rgb-white),
    0.1
  );
  --por-carousel-prev-icon-color-light: rgba(
    var(--por-base-color-rgb-white),
    0.7
  );
  --por-carousel-prev-icon-color-light-hover: var(--por-color-text-white);
  --por-carousel-prev-icon-color-light-disabled: rgba(
    var(--por-base-color-rgb-white),
    0.2
  );
  --por-carousel-prev-height: var(--por-base-size-40);
  --por-carousel-prev-width: var(--por-base-size-40);
  --por-carousel-prev-radius: var(--por-radius-circle);
  --por-carousel-prev-icon-font-size: var(--por-base-size-20);
}
.por-carousel {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.por-carousel-progress {
  position: absolute;
  top: -1000px;
  left: -1000px;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  width: 100px;
  height: 2px;
  opacity: 0;
}
.por-carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.por-carousel-slide {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}
.por-carousel-pagination {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.por-carousel-bullet {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: var(--por-carousel-bullet-height);
  width: var(--por-carousel-bullet-width);
  border-radius: var(--por-carousel-bullet-radius);
  background-color: var(--por-carousel-bullet-background-color);
  background-clip: padding-box;
  border: none;
  margin: 0 6px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  opacity: 1;
}
.por-carousel-bullet:hover {
  background-color: var(--por-carousel-bullet-background-color-hover);
}
.por-carousel-bullet.active {
  background-color: var(--por-carousel-bullet-background-color-active);
  width: var(--por-carousel-bullet-width-active);
}
.por-carousel[data-bg="dark"] .por-carousel-bullet {
  background-color: var(--por-carousel-bullet-background-color-light);
  opacity: 1;
}
.por-carousel[data-bg="dark"] .por-carousel-bullet:hover {
  background-color: var(--por-carousel-bullet-background-color-light-hover);
  opacity: 1;
}
.por-carousel[data-bg="dark"] .por-carousel-bullet.active {
  background-color: var(--por-carousel-bullet-background-color-light-active);
  opacity: 1;
}
.por-carousel-next,
.por-carousel-prev {
  position: absolute;
  top: 50%;
  width: var(--por-carousel-prev-width);
  height: var(--por-carousel-prev-height);
  margin-top: -20px;
  background-color: var(--por-carousel-prev-background-color);
  border-radius: var(--por-carousel-prev-radius);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-family: u-icon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-size: var(--por-carousel-prev-icon-font-size);
  color: var(--por-carousel-prev-icon-color);
}
.por-carousel-next:before,
.por-carousel-prev:before {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.por-carousel-next.disabled,
.por-carousel-prev.disabled {
  color: var(--por-carousel-prev-icon-color-disabled);
  background-color: var(--por-carousel-prev-background-color-disabled);
}
.por-carousel-next:not(.disabled),
.por-carousel-prev:not(.disabled) {
  cursor: pointer;
}
.por-carousel-next:not(.disabled):hover,
.por-carousel-prev:not(.disabled):hover {
  color: var(--por-carousel-prev-icon-color-hover);
  background-color: var(--por-carousel-prev-background-color-hover);
}
.por-carousel[data-bg="dark"] .por-carousel-next,
.por-carousel[data-bg="dark"] .por-carousel-prev,
.por-carousel[data-bg="transWhite"] .por-carousel-next,
.por-carousel[data-bg="transWhite"] .por-carousel-prev,
[data-bg="dark"] .por-carousel-next,
[data-bg="dark"] .por-carousel-prev,
[data-bg="transWhite"] .por-carousel-next,
[data-bg="transWhite"] .por-carousel-prev {
  background-color: var(--por-carousel-prev-background-color-light);
  color: var(--por-carousel-prev-icon-color-light);
}
.por-carousel[data-bg="dark"] .por-carousel-next.disabled,
.por-carousel[data-bg="dark"] .por-carousel-prev.disabled,
.por-carousel[data-bg="transWhite"] .por-carousel-next.disabled,
.por-carousel[data-bg="transWhite"] .por-carousel-prev.disabled,
[data-bg="dark"] .por-carousel-next.disabled,
[data-bg="dark"] .por-carousel-prev.disabled,
[data-bg="transWhite"] .por-carousel-next.disabled,
[data-bg="transWhite"] .por-carousel-prev.disabled {
  color: var(--por-carousel-prev-icon-color-light-disabled);
  background-color: var(--por-carousel-prev-background-color-light-disabled);
}
.por-carousel[data-bg="dark"] .por-carousel-next:not(.disabled),
.por-carousel[data-bg="dark"] .por-carousel-prev:not(.disabled),
.por-carousel[data-bg="transWhite"] .por-carousel-next:not(.disabled),
.por-carousel[data-bg="transWhite"] .por-carousel-prev:not(.disabled),
[data-bg="dark"] .por-carousel-next:not(.disabled),
[data-bg="dark"] .por-carousel-prev:not(.disabled),
[data-bg="transWhite"] .por-carousel-next:not(.disabled),
[data-bg="transWhite"] .por-carousel-prev:not(.disabled) {
  cursor: pointer;
}
.por-carousel[data-bg="dark"] .por-carousel-next:not(.disabled):hover,
.por-carousel[data-bg="dark"] .por-carousel-prev:not(.disabled):hover,
.por-carousel[data-bg="transWhite"] .por-carousel-next:not(.disabled):hover,
.por-carousel[data-bg="transWhite"] .por-carousel-prev:not(.disabled):hover,
[data-bg="dark"] .por-carousel-next:not(.disabled):hover,
[data-bg="dark"] .por-carousel-prev:not(.disabled):hover,
[data-bg="transWhite"] .por-carousel-next:not(.disabled):hover,
[data-bg="transWhite"] .por-carousel-prev:not(.disabled):hover {
  color: var(--por-carousel-prev-icon-color-light-hover);
  background-color: var(--por-carousel-prev-background-color-light-hover);
}
.por-carousel-prev {
  left: 20px;
}
.por-carousel-prev:before {
  content: "\ea18";
}
.por-carousel-next {
  right: 20px;
}
.por-carousel-next:before {
  content: "\ea1b";
}
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
.por-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.por-col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
@media (max-width: 1600px) {
  .por-col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
}
@media (max-width: 1280px) {
  .por-col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
}
@media (max-width: 979px) {
  .por-col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .por-col-xs {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
}
.por-col,
[class*="por-col-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 8px;
  padding-right: 8px;
}
.por-col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 4.16666667%;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.16666667%;
    flex: 0 0 4.16666667%;
    max-width: 4.16666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.16666667%;
    flex: 0 0 4.16666667%;
    max-width: 4.16666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.16666667%;
    flex: 0 0 4.16666667%;
    max-width: 4.16666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.16666667%;
    flex: 0 0 4.16666667%;
    max-width: 4.16666667%;
  }
}
.por-col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.33333333%;
  flex: 0 0 8.33333333%;
  max-width: 8.33333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333333%;
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
}
.por-col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 12.5%;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
@media (max-width: 1600px) {
  .por-col-lg-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
}
.por-col-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.66666667%;
  flex: 0 0 16.66666667%;
  max-width: 16.66666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666667%;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
}
.por-col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20.83333333%;
  flex: 0 0 20.83333333%;
  max-width: 20.83333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20.83333333%;
    flex: 0 0 20.83333333%;
    max-width: 20.83333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20.83333333%;
    flex: 0 0 20.83333333%;
    max-width: 20.83333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20.83333333%;
    flex: 0 0 20.83333333%;
    max-width: 20.83333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20.83333333%;
    flex: 0 0 20.83333333%;
    max-width: 20.83333333%;
  }
}
.por-col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
@media (max-width: 1600px) {
  .por-col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
.por-col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 29.16666667%;
  flex: 0 0 29.16666667%;
  max-width: 29.16666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 29.16666667%;
    flex: 0 0 29.16666667%;
    max-width: 29.16666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 29.16666667%;
    flex: 0 0 29.16666667%;
    max-width: 29.16666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 29.16666667%;
    flex: 0 0 29.16666667%;
    max-width: 29.16666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 29.16666667%;
    flex: 0 0 29.16666667%;
    max-width: 29.16666667%;
  }
}
.por-col-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.33333333%;
  flex: 0 0 33.33333333%;
  max-width: 33.33333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
}
.por-col-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 37.5%;
  flex: 0 0 37.5%;
  max-width: 37.5%;
}
@media (max-width: 1600px) {
  .por-col-lg-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 37.5%;
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 37.5%;
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 37.5%;
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 37.5%;
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
}
.por-col-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.66666667%;
  flex: 0 0 41.66666667%;
  max-width: 41.66666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66666667%;
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
}
.por-col-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 45.83333333%;
  flex: 0 0 45.83333333%;
  max-width: 45.83333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45.83333333%;
    flex: 0 0 45.83333333%;
    max-width: 45.83333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45.83333333%;
    flex: 0 0 45.83333333%;
    max-width: 45.83333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45.83333333%;
    flex: 0 0 45.83333333%;
    max-width: 45.83333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45.83333333%;
    flex: 0 0 45.83333333%;
    max-width: 45.83333333%;
  }
}
.por-col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
@media (max-width: 1600px) {
  .por-col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.por-col-13 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 54.16666667%;
  flex: 0 0 54.16666667%;
  max-width: 54.16666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-13 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 54.16666667%;
    flex: 0 0 54.16666667%;
    max-width: 54.16666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-13 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 54.16666667%;
    flex: 0 0 54.16666667%;
    max-width: 54.16666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-13 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 54.16666667%;
    flex: 0 0 54.16666667%;
    max-width: 54.16666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-13 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 54.16666667%;
    flex: 0 0 54.16666667%;
    max-width: 54.16666667%;
  }
}
.por-col-14 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.33333333%;
  flex: 0 0 58.33333333%;
  max-width: 58.33333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-14 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-14 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-14 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-14 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333333%;
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
}
.por-col-15 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 62.5%;
  flex: 0 0 62.5%;
  max-width: 62.5%;
}
@media (max-width: 1600px) {
  .por-col-lg-15 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-15 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-15 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-15 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
}
.por-col-16 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.66666667%;
  flex: 0 0 66.66666667%;
  max-width: 66.66666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-16 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-16 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-16 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-16 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66666667%;
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
}
.por-col-17 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 70.83333333%;
  flex: 0 0 70.83333333%;
  max-width: 70.83333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-17 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70.83333333%;
    flex: 0 0 70.83333333%;
    max-width: 70.83333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-17 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70.83333333%;
    flex: 0 0 70.83333333%;
    max-width: 70.83333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-17 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70.83333333%;
    flex: 0 0 70.83333333%;
    max-width: 70.83333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-17 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70.83333333%;
    flex: 0 0 70.83333333%;
    max-width: 70.83333333%;
  }
}
.por-col-18 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
@media (max-width: 1600px) {
  .por-col-lg-18 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-18 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-18 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-18 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
}
.por-col-19 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 79.16666667%;
  flex: 0 0 79.16666667%;
  max-width: 79.16666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-19 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 79.16666667%;
    flex: 0 0 79.16666667%;
    max-width: 79.16666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-19 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 79.16666667%;
    flex: 0 0 79.16666667%;
    max-width: 79.16666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-19 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 79.16666667%;
    flex: 0 0 79.16666667%;
    max-width: 79.16666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-19 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 79.16666667%;
    flex: 0 0 79.16666667%;
    max-width: 79.16666667%;
  }
}
.por-col-20 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83.33333333%;
  flex: 0 0 83.33333333%;
  max-width: 83.33333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333333%;
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
}
.por-col-21 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 87.5%;
  flex: 0 0 87.5%;
  max-width: 87.5%;
}
@media (max-width: 1600px) {
  .por-col-lg-21 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 87.5%;
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-21 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 87.5%;
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-21 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 87.5%;
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-21 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 87.5%;
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
}
.por-col-22 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.66666667%;
  flex: 0 0 91.66666667%;
  max-width: 91.66666667%;
}
@media (max-width: 1600px) {
  .por-col-lg-22 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-22 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-22 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-22 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66666667%;
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
}
.por-col-23 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 95.83333333%;
  flex: 0 0 95.83333333%;
  max-width: 95.83333333%;
}
@media (max-width: 1600px) {
  .por-col-lg-23 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 95.83333333%;
    flex: 0 0 95.83333333%;
    max-width: 95.83333333%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-23 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 95.83333333%;
    flex: 0 0 95.83333333%;
    max-width: 95.83333333%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-23 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 95.83333333%;
    flex: 0 0 95.83333333%;
    max-width: 95.83333333%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-23 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 95.83333333%;
    flex: 0 0 95.83333333%;
    max-width: 95.83333333%;
  }
}
.por-col-24 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 1600px) {
  .por-col-lg-24 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 1280px) {
  .por-col-md-24 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 979px) {
  .por-col-sm-24 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .por-col-xs-24 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
[class*="por-label"] {
  --por-label-line-height: 22px;
  --por-label-height: 24px;
  --por-label-padding: 8px;
  --por-label-font-size: 14px;
  --por-label-radius: var(--por-radius-m);
  --por-label-right-icon-margin: 0 -4px 0 4px;
  --por-label-left-icon-margin: 0 4px 0 0;
  --por-label-border-color: var(--por-color-border-transparent);
  --por-label-line-height-s: 16px;
  --por-label-height-s: 18px;
  --por-label-padding-s: 4px;
  --por-label-font-size-s: 12px;
  --por-label-radius-s: var(--por-radius-s);
  --por-label-right-icon-margin-s: 0 -2px 0 2px;
  --por-label-left-icon-margin-s: 0 4px 0 0;
  --por-label-line-height-l: 30px;
  --por-label-height-l: 32px;
  --por-label-padding-l: 12px;
  --por-label-font-size-l: 14px;
  --por-label-radius-l: var(--por-radius-l);
  --por-label-right-icon-margin-l: 0 -4px 0 8px;
  --por-label-left-icon-margin-l: 0 4px 0 0;
  --por-label-font-weight: var(--por-base-font-weight-normal);
  --por-label-font-color: var(--por-color-text-secondary);
  --por-label-background-color: var(--por-color-background-gray-7);
  --por-label-font-color-disabled: var(--por-color-text-disabled);
  --por-label-background-color-disabled: var(--por-color-background-disabled);
  --por-label-font-color-red: var(--por-base-color-red-50);
  --por-label-font-color-orange: var(--por-base-color-orange-70);
  --por-label-font-color-yellow: var(--por-base-color-yellow-70);
  --por-label-font-color-lemon: var(--por-base-color-lemon-70);
  --por-label-font-color-lime: var(--por-base-color-lime-70);
  --por-label-font-color-kelly: var(--por-base-color-kelly-70);
  --por-label-font-color-green: var(--por-base-color-green-70);
  --por-label-font-color-mint: var(--por-base-color-mint-70);
  --por-label-font-color-sky: var(--por-base-color-sky-70);
  --por-label-font-color-blue: var(--por-base-color-blue-70);
  --por-label-font-color-indigo: var(--por-base-color-indigo-70);
  --por-label-font-color-purple: var(--por-base-color-purple-70);
  --por-label-font-color-pink: var(--por-base-color-pink-70);
  --por-label-font-color-rose: var(--por-base-color-rose-70);
  --por-label-font-color-glod: var(--por-base-color-gold);
  --por-label-font-color-glod2: var(--por-base-color-gold);
  --por-label-background-color-red: var(
    --por-base-background-color-red-50-alpha
  );
  --por-label-background-color-orange: var(
    --por-base-background-color-orange-70-alpha
  );
  --por-label-background-color-yellow: var(
    --por-base-background-color-yellow-70-alpha
  );
  --por-label-background-color-lemon: var(
    --por-base-background-color-lemon-70-alpha
  );
  --por-label-background-color-lime: var(
    --por-base-background-color-lime-70-alpha
  );
  --por-label-background-color-kelly: var(
    --por-base-background-color-kelly-70-alpha
  );
  --por-label-background-color-green: var(
    --por-base-background-color-green-70-alpha
  );
  --por-label-background-color-mint: var(
    --por-base-background-color-mint-70-alpha
  );
  --por-label-background-color-sky: var(
    --por-base-background-color-sky-70-alpha
  );
  --por-label-background-color-blue: var(
    --por-base-background-color-blue-70-alpha
  );
  --por-label-background-color-indigo: var(
    --por-base-background-color-indigo-70-alpha
  );
  --por-label-background-color-purple: var(
    --por-base-background-color-purple-70-alpha
  );
  --por-label-background-color-pink: var(
    --por-base-background-color-pink-70-alpha
  );
  --por-label-background-color-rose: var(
    --por-base-background-color-rose-70-alpha
  );
  --por-label-background-color-gold: var(--por-color-border-transparent);
  --por-label-background-color-gold2: var(--por-color-border-transparent);
  --por-label-border-color-red: var(--por-color-border-transparent);
  --por-label-border-color-orange: var(--por-color-border-transparent);
  --por-label-border-color-yellow: var(--por-color-border-transparent);
  --por-label-border-color-lemon: var(--por-color-border-transparent);
  --por-label-border-color-lime: var(--por-color-border-transparent);
  --por-label-border-color-kelly: var(--por-color-border-transparent);
  --por-label-border-color-green: var(--por-color-border-transparent);
  --por-label-border-color-mint: var(--por-color-border-transparent);
  --por-label-border-color-sky: var(--por-color-border-transparent);
  --por-label-border-color-blue: var(--por-color-border-transparent);
  --por-label-border-color-indigo: var(--por-color-border-transparent);
  --por-label-border-color-purple: var(--por-color-border-transparent);
  --por-label-border-color-pink: var(--por-color-border-transparent);
  --por-label-border-color-rose: var(--por-color-border-transparent);
  --por-label-border-color-gold: var(--por-color-border-transparent);
  --por-label-border-color-gold2: var(--por-color-border-transparent);
  --por-label-background-image-gold: linear-gradient(
    90deg,
    #e8cda4 3%,
    #f8eddb
  );
}
.por-label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: var(--por-label-padding);
  padding-right: var(--por-label-padding);
  border: 1px solid var(--por-label-border-color);
  font-size: var(--por-label-font-size);
  font-weight: var(--por-label-font-weight);
  line-height: var(--por-label-line-height);
  height: var(--por-label-height);
  color: var(--por-label-font-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: var(--por-label-radius);
  background-color: var(--por-label-background-color);
}
.por-label .por-icon {
  font-size: inherit;
  margin: var(--por-label-left-icon-margin);
}
.por-label .por-icon.por-icon-close {
  cursor: pointer;
  margin: var(--por-label-right-icon-margin);
}
.por-label.por-label-s {
  padding-left: var(--por-label-padding-s);
  padding-right: var(--por-label-padding-s);
  font-size: var(--por-label-font-size-s);
  line-height: var(--por-label-line-height-s);
  height: var(--por-label-height-s);
}
.por-label.por-label-s .por-icon {
  margin: var(--por-label-left-icon-margin-s);
}
.por-label.por-label-s .por-icon.por-icon-close {
  margin: var(--por-label-right-icon-margin-s);
}
.por-label.por-label-l {
  padding-left: var(--por-label-padding-l);
  padding-right: var(--por-label-padding-l);
  font-size: var(--por-label-font-size-l);
  line-height: var(--por-label-line-height-l);
  height: var(--por-label-height-l);
}
.por-label.por-label-l .por-icon {
  margin: var(--por-label-left-icon-margin-l);
}
.por-label.por-label-l .por-icon.por-icon-close {
  margin: var(--por-label-right-icon-margin-l);
}
.por-label.por-label-disabled {
  background-color: var(--por-label-background-color-disabled);
  color: var(--por-label-font-color-disabled);
}
.por-label.por-label-disabled .por-icon.por-icon-close {
  cursor: default;
}
.por-label-red {
  background-color: var(--por-label-background-color-red);
  border-color: var(--por-label-border-color-red);
  color: var(--por-label-font-color-red);
}
.por-label-orange {
  background-color: var(--por-label-background-color-orange);
  border-color: var(--por-label-border-color-orange);
  color: var(--por-label-font-color-orange);
}
.por-label-yellow {
  background-color: var(--por-label-background-color-yellow);
  border-color: var(--por-label-border-color-yellow);
  color: var(--por-label-font-color-yellow);
}
.por-label-lemon {
  background-color: var(--por-label-background-color-lemon);
  border-color: var(--por-label-border-color-lemon);
  color: var(--por-label-font-color-lemon);
}
.por-label-lime {
  background-color: var(--por-label-background-color-lime);
  border-color: var(--por-label-border-color-lime);
  color: var(--por-label-font-color-lime);
}
.por-label-kelly {
  background-color: var(--por-label-background-color-kelly);
  border-color: var(--por-label-border-color-kelly);
  color: var(--por-label-font-color-kelly);
}
.por-label-green {
  background-color: var(--por-label-background-color-green);
  border-color: var(--por-label-border-color-green);
  color: var(--por-label-font-color-green);
}
.por-label-mint {
  background-color: var(--por-label-background-color-mint);
  border-color: var(--por-label-border-color-mint);
  color: var(--por-label-font-color-mint);
}
.por-label-sky {
  background-color: var(--por-label-background-color-sky);
  border-color: var(--por-label-border-color-sky);
  color: var(--por-label-font-color-sky);
}
.por-label-blue {
  background-color: var(--por-label-background-color-blue);
  border-color: var(--por-label-border-color-blue);
  color: var(--por-label-font-color-blue);
}
.por-label-indigo {
  background-color: var(--por-label-background-color-indigo);
  border-color: var(--por-label-border-color-indigo);
  color: var(--por-label-font-color-indigo);
}
.por-label-purple {
  background-color: var(--por-label-background-color-purple);
  border-color: var(--por-label-border-color-purple);
  color: var(--por-label-font-color-purple);
}
.por-label-pink {
  background-color: var(--por-label-background-color-pink);
  border-color: var(--por-label-border-color-pink);
  color: var(--por-label-font-color-pink);
}
.por-label-rose {
  background-color: var(--por-label-background-color-rose);
  border-color: var(--por-label-border-color-rose);
  color: var(--por-label-font-color-rose);
}
.por-label-gold,
.por-label-gold2 {
  background-color: var(--por-label-background-color-gold);
  color: var(--por-label-font-color-glod);
  border-radius: var(--por-label-radius-s);
  background-image: var(--por-label-background-image-gold);
  border: none;
}
.por-label-gold2 {
  font-weight: 700;
  font-weight: var(--por-base-font-weight-bold);
}
html[lang="ar-MENA"] [class*="por-label"] {
  --por-label-right-icon-margin-l: 0 8px 0 -4px;
  --por-label-left-icon-margin-l: 0 0 0 4px;
  --por-label-right-icon-margin-s: 0 2px 0 -2px;
  --por-label-left-icon-margin-s: 0 0 0 4px;
  --por-label-right-icon-margin: 0 4px 0 -4px;
  --por-label-left-icon-margin: 0 0 0 4px;
}
[class*="por-price"] {
  --por-price-font-size-symbol: var(--por-font-size-24);
  --por-price-font-size: var(--por-font-size-24);
  --por-price-font-size-unit: var(--por-font-size-14);
  --por-price-font-size-symbol-s: var(--por-font-size-18);
  --por-price-font-size-s: var(--por-font-size-18);
  --por-price-font-size-unit-s: var(--por-font-size-14);
  --por-price-font-size-symbol-l: var(--por-font-size-32);
  --por-price-font-size-l: var(--por-font-size-32);
  --por-price-font-size-unit-l: var(--por-font-size-14);
  --por-price-line-height: var(--por-base-size-30);
  --por-price-height: var(--por-base-size-30);
  --por-price-line-height-s: var(--por-base-size-30);
  --por-price-height-s: var(--por-base-size-30);
  --por-price-line-height-l: var(--por-base-size-40);
  --por-price-height-l: var(--por-base-size-40);
  --por-price-font-color-symbol: var(--por-color-text-primary);
  --por-price-font-color: var(--por-color-text-primary);
  --por-price-font-color-unit: var(--por-color-text-primary);
  --por-price-font-weight-symbol: var(--por-base-font-weight-bold);
  --por-price-font-weight: var(--por-base-font-weight-bold);
  --por-price-font-weight-unit: var(--por-base-font-weight-bold);
  --por-price-background-color: var(--por-color-background-transparent);
}
.por-price {
  display: inline-block;
  font-size: 0;
}
.por-price i {
  font-style: normal;
}
.por-price .por-current-price {
  display: inline-block;
  line-height: var(--por-price-line-height);
  height: var(--por-price-height);
  background-color: var(--por-price-background-color);
}
.por-price .por-current-price .por-price-symbol {
  font-size: var(--por-price-font-size-symbol);
  color: var(--por-price-font-color-symbol);
}
.por-price .por-current-price span {
  font-size: var(--por-price-font-size);
  color: var(--por-price-font-color);
}
.por-price .por-current-price .por-price-unit {
  font-size: var(--por-price-font-size-unit);
  color: var(--por-price-font-color-unit);
}
.por-price-s .por-current-price {
  line-height: var(--por-price-line-height-s);
  height: var(--por-price-height-s);
}
.por-price-s .por-current-price .por-price-symbol {
  font-size: var(--por-price-font-size-symbol-s);
}
.por-price-s .por-current-price span {
  font-size: var(--por-price-font-size-s);
}
.por-price-s .por-current-price .por-price-unit {
  font-size: var(--por-price-font-size-unit-s);
}
.por-price-l .por-current-price {
  line-height: var(--por-price-line-height-l);
  height: var(--por-price-height-l);
}
.por-price-l .por-current-price .por-price-symbol {
  font-size: var(--por-price-font-size-symbol-l);
}
.por-price-l .por-current-price span {
  font-size: var(--por-price-font-size-l);
}
.por-price-l .por-current-price .por-price-unit {
  font-size: var(--por-price-font-size-unit-l);
}
.por-input-option-list,
.por-text-wrap,
.por-textarea-wrap,
input,
textarea {
  --por-input-border-color: var(--por-color-border-input);
  --por-input-border-color-active: var(--por-color-border-input-active);
  --por-input-border-color-disabled: var(--por-color-border-input-disabled);
  --por-input-border-color-error: var(--por-color-function-error);
  --por-input-background-color: var(--por-color-background-white);
  --por-input-background-color-disabled: var(--por-color-background-disabled);
  --por-input-background-color-error: var(
    --por-color-function-error-background
  );
  --por-input-text-color: var(--por-color-text-primary);
  --por-input-placeholder-color: var(--por-color-text-weak);
  --por-input-font-size: var(--por-font-size-14);
  --por-input-line-height: var(--por-font-line-height-32);
  --por-input-height: var(--por-font-height-32);
  --por-input-line-height-l: var(--por-font-line-height-40);
  --por-input-height-l: var(--por-font-height-40);
  --por-input-radius: var(--por-radius-l);
  --por-input-padding: 0 var(--por-base-size-12);
  --por-input-options-shadow: var(--por-shadow-dropdown);
  --por-input-options-border-color: var(--por-color-border-transparent);
  --por-input-options-background-color: var(--por-color-background-white);
  --por-input-options-background-color-hover: var(
    --por-color-background-gray-4
  );
  --por-input-options-background-color-selected: var(
    --por-color-background-white
  );
  --por-input-options-background-color-disabled: var(
    --por-color-background-disabled
  );
  --por-input-options-text-color: var(--por-color-text-primary);
  --por-input-options-text-color-hover: var(--por-color-text-primary);
  --por-input-options-text-color-selected: var(--por-color-text-primary);
  --por-input-options-text-color-disabled: var(--por-color-text-disabled);
  --por-input-options-font-weight-selected: var(--por-base-font-weight-bold);
  --por-textarea-min-height: 88px;
  --por-textarea-padding: var(--por-base-size-8) var(--por-base-size-12);
  --por-textarea-line-height: var(--por-font-line-height-22);
  --por-textarea-wrap-text-color: var(--por-color-text-primary);
  --por-textarea-wrap-text-color-total: var(--por-color-text-weak);
  --por-textarea-wrap-text-color-error: var(--por-color-function-error);
  --por-textarea-wrap-text-color-warning: var(--por-color-function-warning);
}
.por-text-input,
.por-text-input-l {
  display: inline-block;
  min-width: 200px;
  height: var(--por-input-line-height);
  padding: var(--por-input-padding);
  font-size: var(--por-input-font-size);
  line-height: var(--por-input-height);
  color: var(--por-input-text-color);
  background-color: var(--por-input-background-color);
  background-image: none;
  border: 1px solid var(--por-input-border-color);
  border-radius: var(--por-input-radius);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.por-text-input-l:focus,
.por-text-input-l:hover,
.por-text-input:focus,
.por-text-input:hover {
  border-color: var(--por-input-border-color-active);
}
.por-text-input-l:focus,
.por-text-input:focus {
  outline: 0;
}
.por-text-input-l[disabled],
.por-text-input[disabled] {
  cursor: not-allowed;
  background-color: var(--por-input-background-color-disabled);
  border-color: var(--por-input-border-color-disabled);
  color: var(--por-input-placeholder-color);
  opacity: 1;
}
.por-text-input-l::-webkit-input-placeholder,
.por-text-input::-webkit-input-placeholder {
  color: var(--por-input-placeholder-color);
}
.por-text-input-l:-moz-placeholder,
.por-text-input-l::-moz-placeholder,
.por-text-input:-moz-placeholder,
.por-text-input::-moz-placeholder {
  color: var(--por-input-placeholder-color);
  opacity: 1;
}
.por-text-input-l::-ms-input-placeholder,
.por-text-input::-ms-input-placeholder {
  color: var(--por-input-placeholder-color);
}
.por-text-input-l {
  height: var(--por-input-height-l);
  line-height: var(--por-input-line-height-l);
}
.por-textarea {
  display: inline-block;
  min-width: 200px;
  min-height: var(--por-textarea-min-height);
  padding: var(--por-textarea-padding);
  font-size: var(--por-input-font-size);
  line-height: var(--por-textarea-line-height);
  color: var(--por-input-text-color);
  background-color: var(--por-input-background-color);
  background-image: none;
  border: 1px solid var(--por-input-border-color);
  border-radius: var(--por-input-radius);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.por-textarea:focus {
  outline: 0;
}
.por-textarea[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  background-color: var(--por-input-background-color-disabled);
  border-color: var(--por-input-border-color-disabled);
  color: var(--por-input-placeholder-color);
  opacity: 1;
}
.por-textarea:focus,
.por-textarea:hover {
  border-color: var(--por-input-border-color-active);
}
.por-textarea-wrap {
  display: inline-block;
}
.por-textarea-wrap .por-textarea-wordwrap {
  display: block;
  text-align: right;
  color: var(--por-input-placeholder-color);
  font-size: var(--por-input-font-size);
}
.por-textarea-wrap .por-textarea-wordwrap .por-textarea-word {
  font-style: normal;
  color: var(--por-textarea-wrap-text-color);
}
.por-textarea-wrap
  .por-textarea-wordwrap
  .por-textarea-word.por-textarea-word-warn {
  color: var(--por-textarea-wrap-text-color-warning);
}
.por-textarea-wrap
  .por-textarea-wordwrap
  .por-textarea-word.por-textarea-word-error {
  color: var(--por-textarea-wrap-text-color-error);
}
.por-has-disabled .por-textarea-wordwrap .por-textarea-word {
  color: var(--por-input-placeholder-color);
}
.por-help-block {
  display: none;
  margin-top: 8px;
  color: var(--por-textarea-wrap-text-color-error);
  font-size: var(--por-input-font-size);
}
.por-help-block .por-icon {
  font-size: calc(var(--por-input-font-size) + 2px);
  margin-right: 4px;
  vertical-align: -3px;
}
.por-has-error .por-text-input {
  background-color: var(--por-input-background-color-error);
  border-color: var(--por-input-border-color-error);
  color: var(--por-input-text-color);
}
.por-has-error .por-help-block {
  display: block;
}
.por-has-error .por-textarea {
  background-color: var(--por-input-background-color-error);
  border-color: var(--por-input-border-color-error);
}
.por-input-option-list {
  display: none;
  position: absolute;
  z-index: 9;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  max-height: 151px;
  margin-top: 4px;
  margin-bottom: 0;
  overflow: auto;
  border: 1px solid var(--por-input-options-border-color);
  border-radius: var(--por-input-radius);
  -webkit-box-shadow: var(--por-input-options-shadow);
  box-shadow: var(--por-input-options-shadow);
  background: var(--por-input-options-background-color);
  padding: 8px 0;
}
.por-input-option-list li {
  font-size: var(--por-input-font-size);
  line-height: var(--por-input-line-height);
  padding: 0 16px;
  height: var(--por-input-height);
  color: var(--por-input-options-text-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}
.por-input-option-list li.selected {
  background: var(--por-input-options-background-color-selected);
  color: var(--por-input-options-text-color-selected);
  font-weight: var(--por-input-options-font-weight-selected);
}
.por-input-option-list li:hover {
  background: var(--por-input-options-background-color-hover);
  color: var(--por-input-options-text-color-hover);
}
.por-input-option-list li.disabled {
  background: var(--por-input-options-background-color-disabled);
  color: var(--por-input-options-text-color-disabled);
  cursor: default;
}
.por-input-dropdown {
  display: inline-block;
  position: relative;
}
.por-input-dropdown input {
  width: 400px;
}
.por-input-dropdown.open {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.por-input-dropdown.open .por-text-input {
  border-color: var(--por-input-border-color-active);
}
.por-input-dropdown.open .por-input-option-list {
  display: block;
}
html[lang="ar-MENA"] .por-textarea-wrap .por-textarea-wordwrap {
  text-align: left;
}
[class*="por-breadcrumb"] {
  --por-breadcrumb-content: "/";
  --por-breadcrumb-text-color: var(--por-color-text-primary);
  --por-breadcrumb-text-color-hover: var(--por-color-text-primary);
  --por-breadcrumb-text-color-current: var(--por-color-text-primary);
  --por-breadcrumb-split-color: var(--por-color-border-light-gray);
  --por-breadcrumb-font-weight-current: var(--por-base-font-weight-bold);
  --por-breadcrumb-font-weight-hover: var(--por-base-font-weight-normal);
  --por-breadcrumb-font-size: var(--por-font-size-14);
  --por-breadcrumb-line-height: var(--por-font-height-22);
}
.por-breadcrumb {
  padding: 24px 0;
  overflow: hidden;
}
.por-breadcrumb-item {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--por-breadcrumb-font-size);
  line-height: var(--por-breadcrumb-line-height);
}
.por-breadcrumb-item + .por-breadcrumb-item:before {
  content: var(--por-breadcrumb-content);
  display: inline-block;
  width: 16px;
  margin: 0 4px;
  text-align: center;
  color: var(--por-breadcrumb-split-color);
}
.por-breadcrumb-item:last-child {
  color: #252b3a;
  font-weight: var(--por-breadcrumb-font-weight-current);
}
.por-breadcrumb-item a {
  display: inline-block;
  font-size: inherit;
}
.por-breadcrumb-item a:hover {
  font-weight: var(--por-breadcrumb-font-weight-hover);
}
.por-breadcrumb-light .por-breadcrumb-item {
  color: #fff;
}
.por-breadcrumb-light .por-breadcrumb-item:before {
  color: inherit;
}
html[lang="ar-MENA"] .por-breadcrumb-item {
  float: right;
}
[class*="por-checkbox"],
[class*="por-radio"] {
  --por-radio-font-size: var(--por-font-size-14);
  --por-radio-border-color: var(--por-color-border-input);
  --por-radio-border-color-hover: var(--por-color-border-input-active);
  --por-radio-border-color-active: var(--por-color-border-input-active);
  --por-radio-border-color-disabled: var(--por-color-border-input-disabled);
  --por-radio-background-color: var(--por-color-background-white);
  --por-radio-background-color-disabled: var(--por-color-background-disabled);
  --por-radio-text-color: var(--por-color-text-primary);
  --por-radio-text-color-disabled: var(--por-color-text-disabled);
  --por-radio-radius: var(--por-radius-circle);
  --por-checkbox-border-color: var(--por-color-border-input);
  --por-checkbox-border-color-hover: var(--por-color-border-input-active);
  --por-checkbox-border-color-active: var(--por-color-border-input-active);
  --por-checkbox-border-color-disabled: var(--por-color-border-input-disabled);
  --por-checkbox-background-color: var(--por-color-background-white);
  --por-checkbox-background-color-active: var(--por-color-background-primary);
  --por-checkbox-background-color-disabled: var(
    --por-color-background-disabled
  );
  --por-checkbox-background-color-disabled-checked: var(
    --por-color-background-gray-5
  );
  --por-checkbox-text-color: var(--por-color-text-primary);
  --por-checkbox-text-color-disabled: var(--por-color-text-disabled);
  --por-checkbox-radius: var(--por-radius-m);
  --por-radio-button-padding: 0 var(--por-base-size-24);
  --por-radio-button-margin-right: var(--por-base-size-8);
  --por-radio-button-margin-top: var(--por-base-size-8);
  --por-checkbox-icon-color: var(--por-color-text-white);
  --por-checkbox-icon-color-disabled: var(--por-color-text-white);
  --por-radio-button-height: var(--por-font-height-32);
  --por-radio-button-line-height: var(--por-font-line-height-30);
  --por-radio-button-radius: var(--por-radius-l);
  --por-radio-button-text-color: var(--por-color-text-secondary);
  --por-radio-button-border-color: var(--por-color-border-input);
  --por-radio-button-background-color: var(--por-color-background-white);
  --por-radio-button-text-color-active: var(--por-color-text-primary);
  --por-radio-button-border-color-active: var(--por-color-border-primary);
  --por-radio-button-background-color-active: var(--por-color-background-white);
  --por-radio-button-text-color-hover: var(--por-color-text-primary);
  --por-radio-button-border-color-hover: var(--por-color-border-input);
  --por-radio-button-background-color-hover: var(--por-color-background-white);
  --por-radio-button-text-color-disabled: var(--por-color-text-disabled);
  --por-radio-button-border-color-disabled: var(--por-color-border-disabled);
  --por-radio-button-background-color-disabled: var(
    --por-color-background-disabled
  );
  --por-checkbox-button-radius: var(--por-radius-l);
  --por-checkbox-button-height: var(--por-font-height-32);
  --por-checkbox-button-line-height: var(--por-font-line-height-30);
  --por-checkbox-button-padding: 0 var(--por-base-size-24);
  --por-checkbox-button-text-color: var(--por-color-text-secondary);
  --por-checkbox-button-border-color: var(--por-color-border-input);
  --por-checkbox-button-background-color: var(--por-color-background-white);
  --por-checkbox-button-text-color-active: var(--por-color-text-primary);
  --por-checkbox-button-border-color-active: var(--por-color-border-primary);
  --por-checkbox-button-background-color-active: var(
    --por-color-background-white
  );
  --por-checkbox-button-text-color-hover: var(--por-color-text-primary);
  --por-checkbox-button-border-color-hover: var(--por-color-border-input);
  --por-checkbox-button-background-color-hover: var(
    --por-color-background-white
  );
  --por-checkbox-button-text-color-disabled: var(--por-color-text-disabled);
  --por-checkbox-button-border-color-disabled: var(--por-color-border-disabled);
  --por-checkbox-button-background-color-disabled: var(
    --por-color-background-disabled
  );
}
.por-radio {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 0;
  line-height: 0;
  vertical-align: -3px;
  background-color: var(--por-radio-background-color);
}
.por-radio + label {
  color: var(--por-radio-text-color);
}
.por-radio input[type="radio"] {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  cursor: pointer;
}
.por-radio input[type="radio"] + span {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid var(--por-radio-border-color);
  border-radius: var(--por-radio-radius);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-radio input[type="radio"] + span:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--por-radio-radius);
  margin: 3px;
  background-color: var(--por-radio-border-color);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-radio input[type="radio"]:focus + span,
.por-radio input[type="radio"]:hover + span {
  border-color: var(--por-radio-border-color-hover);
}
.por-radio input[type="radio"]:checked + span {
  border-color: var(--por-radio-border-color-active);
}
.por-radio input[type="radio"]:checked + span:before {
  content: "";
  -webkit-transform: scale(1);
  transform: scale(1);
  background-color: var(--por-radio-border-color-active);
}
.por-radio input[type="radio"]:active + span {
  background-color: transparent;
}
.por-radio input[type="radio"]:disabled {
  cursor: default;
}
.por-radio input[type="radio"]:disabled:checked + span:before {
  content: "";
  -webkit-transform: scale(1);
  transform: scale(1);
  background-color: var(--por-radio-border-color-disabled);
}
.por-radio input[type="radio"]:disabled + span {
  border-color: var(--por-radio-border-color-disabled);
}
.por-radio input[type="radio"]:disabled + span:before {
  content: "";
  background-color: var(--por-radio-border-color-disabled);
}
.por-radio input[type="radio"]:disabled:active + span {
  background-color: var(--por-radio-background-color-disabled);
}
.por-checkbox {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 0;
  line-height: 0;
  vertical-align: -3px;
  background-color: var(--por-checkbox-background-color);
}
.por-checkbox input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  cursor: pointer;
}
.por-checkbox input[type="checkbox"] + span {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid var(--por-checkbox-border-color);
  border-radius: var(--por-checkbox-radius);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-checkbox input[type="checkbox"] + span i {
  margin: 1px;
  font-size: 12px;
  color: var(--por-checkbox-icon-color);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-checkbox input[type="checkbox"]:checked + span,
.por-checkbox input[type="checkbox"]:focus + span,
.por-checkbox input[type="checkbox"]:hover + span {
  border-color: var(--por-checkbox-border-color-hover);
}
.por-checkbox input[type="checkbox"]:checked + span {
  background-color: var(--por-checkbox-background-color-active);
}
.por-checkbox input[type="checkbox"]:checked + span i {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.por-checkbox input[type="checkbox"]:disabled {
  cursor: default;
}
.por-checkbox input[type="checkbox"]:disabled + span,
.por-checkbox input[type="checkbox"]:disabled:hover + span {
  border-color: var(--por-checkbox-border-color-disabled);
  background-color: var(--por-checkbox-background-color-disabled);
}
.por-checkbox input[type="checkbox"]:disabled + span i,
.por-checkbox input[type="checkbox"]:disabled:hover + span i {
  color: var(--por-checkbox-icon-color-disabled);
}
.por-checkbox input[type="checkbox"]:disabled:checked + span {
  background-color: var(--por-checkbox-background-color-disabled-checked);
}
.por-checkbox-group {
  font-size: 0;
}
.por-checkbox-inline {
  display: inline-block;
}
.por-checkbox-inline + .por-checkbox-inline {
  margin-left: 20px;
}
.por-checkbox-inline .por-checkbox,
.por-checkbox-inline .por-radio {
  margin-right: 10px;
}
.por-checkbox-inline label {
  font-size: 14px;
  line-height: 22px;
}
.por-radio-btn-group {
  display: inline-block;
  font-size: 0;
  line-height: 0;
}
.por-radio-btn-group
  .por-radio-btn
  + .por-radio-btn
  input[type="radio"]
  + span {
  margin-left: -1px;
}
.por-radio-btn-group
  .por-radio-btn
  + .por-radio-btn
  input[type="radio"]:disabled
  + span {
  margin-left: 0;
}
.por-radio-btn-group-justify {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.por-radio-btn-group-justify .por-radio-btn {
  display: table-cell;
}
.por-radio-btn-group-justify .por-radio-btn input[type="radio"] + span {
  display: block;
  text-align: center;
}
.por-radio-card {
  display: inline-block;
  height: var(--por-radio-button-height);
  font-size: 0;
  line-height: 0;
}
.por-radio-card input[type="radio"] {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin-bottom: calc(var(--por-radio-button-height) * -1);
  cursor: pointer;
  opacity: 0;
}
.por-radio-card input[type="radio"] + span {
  position: relative;
  display: inline-block;
  line-height: var(--por-radio-button-line-height);
  padding: var(--por-radio-button-padding);
  text-align: center;
  border: 1px solid var(--por-radio-button-border-color);
  font-size: var(--por-radio-font-size);
  color: var(--por-radio-button-text-color);
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: var(--por-radio-button-radius);
}
.por-radio-card input[type="radio"]:hover + span {
  color: var(--por-radio-button-text-color-hover);
  border-color: var(--por-radio-button-border-color-hover);
  background-color: var(--por-radio-button-background-color-hover);
}
.por-radio-card input[type="radio"]:checked + span {
  color: var(--por-radio-button-text-color-active);
  border-color: var(--por-radio-button-border-color-active);
  background-color: var(--por-radio-button-background-color-active);
}
.por-radio-card input[type="radio"]:disabled + span {
  color: var(--por-radio-button-text-color-disabled);
  border-color: var(--por-radio-button-border-color-disabled);
  background-color: var(--por-radio-button-background-color-disabled);
  cursor: default;
}
.por-checkbox-card {
  display: inline-block;
  height: var(--por-checkbox-button-height);
  font-size: 0;
  line-height: 0;
}
.por-checkbox-card input[type="checkbox"] {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin-bottom: calc(var(--por-checkbox-button-height) * -1);
  cursor: pointer;
  opacity: 0;
}
.por-checkbox-card input[type="checkbox"] + span {
  position: relative;
  display: inline-block;
  line-height: var(--por-checkbox-button-line-height);
  padding: var(--por-checkbox-button-padding);
  text-align: center;
  border: 1px solid var(--por-checkbox-button-border-color);
  font-size: var(--por-radio-font-size);
  color: var(--por-checkbox-button-text-color);
  background-color: var(--por-checkbox-button-background-color);
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: var(--por-checkbox-button-radius);
}
.por-checkbox-card input[type="checkbox"] + span:before {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--por-checkbox-button-border-color-active);
  border-top: 10px solid var(--por-checkbox-button-border-color-active);
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  border-radius: 0 var(--por-checkbox-button-radius) 0 0;
}
.por-checkbox-card input[type="checkbox"] + span:after {
  content: "\ea03";
  font-family: u-icon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: -4px;
  top: -6px;
  bottom: 0;
  font-size: 16px;
  color: #fff;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.por-checkbox-card input[type="checkbox"]:hover + span {
  border-color: var(--por-checkbox-button-border-color-hover);
  background-color: var(--por-checkbox-button-background-color-hover);
  color: var(--por-checkbox-button-text-color-hover);
}
.por-checkbox-card input[type="checkbox"]:checked + span {
  border-color: var(--por-checkbox-button-border-color-active);
  background-color: var(--por-checkbox-button-background-color-active);
  color: var(--por-checkbox-button-text-color-active);
}
.por-checkbox-card input[type="checkbox"]:checked + span:after,
.por-checkbox-card input[type="checkbox"]:checked + span:before {
  opacity: 1;
}
.por-checkbox-card input[type="checkbox"]:disabled + span {
  border-color: var(--por-checkbox-button-border-color-disabled);
  background-color: var(--por-checkbox-button-background-color-disabled);
  color: var(--por-checkbox-button-text-color-disabled);
  cursor: default;
}
.por-checkbox-card-group {
  position: relative;
  font-size: 0;
}
.por-checkbox-card-group-more {
  display: none;
  position: absolute;
  top: 0;
  right: 4px;
  width: var(--por-checkbox-button-height);
  height: var(--por-checkbox-button-height);
  font-size: 12px;
  text-align: center;
  line-height: var(--por-checkbox-button-height);
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-checkbox-card-group-collapse .por-checkbox-card-group-more {
  display: block;
}
.open .por-checkbox-card-group-more {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.por-checkbox-card-group-more:hover {
  color: var(--por-radio-button-text-color-hover);
}
.por-checkbox-card-group-inner {
  overflow: hidden;
}
.por-checkbox-card-group-collapse .por-checkbox-card-group-inner {
  max-height: var(--por-checkbox-button-height);
}
.open .por-checkbox-card-group-inner {
  max-height: calc(var(--por-checkbox-button-height) * 7);
  overflow-y: auto;
}
.por-checkbox-card-group-more + .por-checkbox-card-group-inner {
  padding-right: calc(8px + var(--por-checkbox-button-height));
}
.por-checkbox-card-group-content {
  margin-top: calc(var(--por-radio-button-margin-top) * -1);
  margin-right: calc(var(--por-radio-button-margin-right) * -1);
}
.por-checkbox-card-group-content .por-checkbox-card,
.por-checkbox-card-group-content .por-radio-card {
  margin-right: var(--por-radio-button-margin-right);
  margin-top: var(--por-radio-button-margin-top);
}
.por-checkbox-card-pane {
  display: table;
  width: 100%;
  font-size: 0;
}
.por-checkbox-card-pane .por-checkbox-card-group,
.por-checkbox-card-pane .por-checkbox-card-pane-title {
  display: table-cell;
}
.por-checkbox-card-pane .por-checkbox-card-pane-title {
  width: 0;
  white-space: nowrap;
}
.por-checkbox-card-pane .por-checkbox-card-group {
  width: 100%;
  padding-left: 4px;
}
.por-checkbox-card-pane-title {
  font-size: var(--por-radio-font-size);
  color: var(--por-checkbox-button-text-color);
}
html[lang="ar-MENA"] .por-checkbox-inline .por-checkbox,
html[lang="ar-MENA"] .por-checkbox-inline .por-radio {
  margin-left: 10px;
  margin-right: 0;
}
html[lang="ar-MENA"] .por-checkbox-inline + .por-checkbox-inline {
  margin-left: 0;
  margin-right: 20px;
}
html[lang="ar-MENA"] .por-checkbox-card input[type="checkbox"] + span:before {
  left: -1px;
  right: auto;
  border-left-color: var(--por-checkbox-button-border-color-active);
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: var(--por-checkbox-button-border-color-active);
  border-radius: var(--por-checkbox-button-radius) 0 0 0;
}
html[lang="ar-MENA"] .por-checkbox-card input[type="checkbox"] + span:after {
  left: -4px;
  right: auto;
}
.por-card {
  display: block;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.por-card .por-card-icon {
  margin-bottom: 24px;
  text-align: center;
}
.por-card .por-card-icon span {
  display: inline-block;
  width: 60px;
  height: 60px;
  font-size: 60px;
  color: #252b3a;
}
.por-card .por-card-bg {
  width: 100%;
}
.por-card .por-card-content {
  vertical-align: top;
}
.por-card .por-card-content .por-text-title-t3 {
  position: relative;
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 22px;
  text-align: center;
  font-size: 18px;
  color: #252b3a;
  font-weight: 700;
}
.por-card .por-card-content .por-text-title-t3:after {
  position: absolute;
  content: "";
  width: 32px;
  height: 2px;
  left: 50%;
  bottom: -16px;
  margin-left: -16px;
  background-color: #8a8e99;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  display: none;
}
.por-card .por-card-content .por-text-body-t1 {
  padding-top: 16px;
  line-height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: #575d6c;
}
.por-card .por-card-content .por-text-body-t1 .por-text-list {
  margin: 0;
  padding-left: 0;
}
.por-card .por-card-content .por-text-body-t1.por-text-body-t1-textOverflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.por-card .por-card-content .por-text-body-t1.por-text-body-t1-center {
  text-align: center;
}
.por-card:hover {
  -webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
}
.por-card:hover .por-card-content .por-text-title-t3:after {
  width: 40px;
  margin-left: -20px;
  background-color: #c7000b;
}
.por-card-xl {
  padding: 56px 40px;
}
.por-card-l {
  padding: 32px;
}
.por-card-m {
  padding: 24px;
}
.por-card-m .por-card-content .por-text-title-t3 {
  margin-bottom: 8px;
}
.por-card-m .por-card-content .por-text-title-t3:after {
  width: 0;
}
.por-card-m .por-card-content .por-text-body-t1 {
  padding-top: 0;
}
.por-card-m:hover .por-card-content .por-text-title-t3:after {
  width: 0;
}
.por-card-align-left .por-card-icon.por-card-icon-left {
  text-align: left;
}
.por-card-align-left .por-card-icon.por-card-icon-horizontal {
  display: table-cell;
  padding-right: 24px;
}
.por-card-align-left .por-card-content {
  display: table-cell;
}
.por-card-align-left .por-card-content .por-text-title-t3 {
  text-align: left;
}
.por-card-align-left .por-card-content .por-text-title-t3:after,
.por-card-align-left:hover .por-card-content .por-text-title-t3:after {
  left: 0;
  margin-left: 0;
}
.por-card-panel .por-card-content-graphic {
  display: block;
}
.por-card-panel .por-card-content-graphic .por-text-body-t1 {
  padding: 16px 24px;
}
.por-card-panel .por-card-content-graphic .por-text-body-t1 .por-text-list li {
  list-style: none;
  font-size: 14px;
}
.por-card-panel
  .por-card-content-graphic
  .por-text-body-t1
  .por-text-list
  li
  + li {
  margin-top: 16px;
}
.por-card-panel .por-card-content-graphic .por-text-title-t3 {
  font-size: 18px;
  text-align: left;
  margin-bottom: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.por-card-panel .por-card-content-graphic .por-text-title-desc {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  color: #575d6c;
}
.por-card-panel .por-card-content {
  display: block;
}
.por-card-panel .por-card-content .por-text-title-t3 {
  text-align: left;
  margin-bottom: 0;
  padding: 16px 24px;
  border-bottom: 1px solid #dfe1e6;
}
.por-card-panel .por-card-content .por-text-title-t3:after {
  width: 0;
}
.por-card-panel .por-card-content .por-text-title-t3 .por-text-title-desc {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  color: #575d6c;
}
.por-card-panel .por-card-content .por-text-body-t1 {
  padding: 16px 24px;
}
.por-card-panel .por-card-content .por-text-body-t1 .por-text-list li {
  list-style: none;
  font-size: 14px;
}
.por-card-panel .por-card-content .por-text-body-t1 .por-text-list li + li {
  margin-top: 16px;
}
.por-card-panel:hover .por-card-content .por-text-title-t3:after {
  width: 0;
}
.por-card-light-dark {
  background-color: #252b3a;
}
.por-card-light-dark .por-card-icon span,
.por-card-light-dark .por-text-body-t1,
.por-card-light-dark .por-text-title-t3 {
  color: #fff !important;
}
.por-card-light-dark:hover {
  background-color: #252b3a;
}
.por-card-light-transparent {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.por-card-light-transparent .por-card-icon span,
.por-card-light-transparent .por-text-body-t1,
.por-card-light-transparent .por-text-title-t3 {
  color: #fff !important;
}
.por-card-light-transparent:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}
[class^="por-col"] > .por-card {
  height: 100%;
}
html[lang="ar-MENA"] .por-card-align-left .por-card-content .por-text-title-t3,
html[lang="ar-MENA"] .por-card-align-left .por-card-icon.por-card-icon-left,
html[lang="ar-MENA"]
  .por-card-panel
  .por-card-content-graphic
  .por-text-title-t3,
html[lang="ar-MENA"] .por-card-panel .por-card-content .por-text-title-t3 {
  text-align: right;
}
html[lang="ar-MENA"]
  .por-card-align-left
  .por-card-icon.por-card-icon-horizontal {
  padding-left: 24px;
  padding-right: 0;
}
.por-container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1775px) {
  .por-container {
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media (max-width: 1024px) {
  .por-container {
    padding-left: 3%;
    padding-right: 3%;
  }
}
@media (max-width: 768px) {
  .por-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 375px) {
  .por-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.por-collapse-container {
  border: 1px solid #dfe1e6;
}
.por-collapse-container + .por-collapse-container {
  margin-top: -1px;
}
.por-collapse-trigger {
  display: block;
  position: relative;
  padding: 14px 40px 14px 14px;
  border-bottom: 1px solid #dfe1e6;
  margin-bottom: -1px;
  cursor: pointer;
}
.por-collapse-trigger .por-icon-down,
.por-collapse-trigger .u-icon-down {
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -6px;
  font-size: 12px;
  color: #575d6c;
  -webkit-transition: 0.35s;
  transition: 0.35s;
}
.por-collapse-trigger .u-icon-down {
  color: #adb0b8;
}
.por-collapse-trigger.expended .por-icon-down,
.por-collapse-trigger.expended .u-icon-down {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.por-collapse-head-text {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #252b3a;
}
.por-collapse:not(.show) {
  display: none;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}
.por-collapse-foot {
  padding-top: 32px;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
}
.por-collapse-light-transparent {
  border: none;
  background-color: hsla(0, 0%, 100%, 0.05);
  color: #fff;
}
.por-collapse-light-transparent .por-collapse-trigger {
  background-color: hsla(0, 0%, 100%, 0.2);
  border-bottom: none;
}
.por-collapse-light-transparent .por-collapse-head-text {
  color: #fff;
}
.por-collapse-light-transparent .por-icon-down {
  color: #bbb;
}
.por-collapse-dark-transparent {
  background-color: transparent;
  color: #252b3a;
}
.por-collapse-dark-transparent .por-collapse-head-text {
  color: #252b3a;
}
@media (max-width: 767px) {
  .por-collapse-container,
  .por-collapse-container:not(:last-child) {
    margin-bottom: 4px;
  }
  .por-collapse-trigger .por-icon-down {
    font-size: 24px;
    margin-top: -12px;
  }
  .por-collapse-trigger .por-icon-down:before {
    content: "\ea0c";
  }
}
html[lang="ar-MENA"] .por-collapse-trigger {
  padding: 14px 14px 14px 40px;
}
html[lang="ar-MENA"] .por-collapse-trigger .por-icon-down,
html[lang="ar-MENA"] .por-collapse-trigger .u-icon-down {
  position: absolute;
  right: auto;
  left: 14px;
}
[class*="por-fixed-table"] {
  --por-table-border: var(--por-color-border-split-1);
  --por-table-background-color-header: var(--por-color-background-gray-4);
  --por-table-background-color-body: var(--por-color-background-white);
  --por-table-background-color-body-odd: var(--por-color-background-white);
  --por-table-text-color-header: var(--por-color-text-primary);
  --por-table-text-color-body: var(--por-color-text-secondary);
  --por-table-background-color-header-light: var(--por-color-background-gray-4);
  --por-table-background-color-body-light: var(--por-color-background-white);
  --por-table-background-color-body-odd-light: var(
    --por-color-background-white
  );
  --por-table-text-color-header-light: var(--por-color-text-primary);
  --por-table-text-color-body-light: var(--por-color-text-secondary);
  --por-table-font-size-header: var(--por-font-size-14);
  --por-table-font-size-body: var(--por-font-size-14);
  --por-table-font-weight-header: var(--por-base-font-weight-normal);
  --por-table-font-weight-body: var(--por-base-font-weight-normal);
  --por-table-line-height-header: var(--por-font-line-height-22);
  --por-table-line-height-body: var(--por-font-line-height-22);
}
.por-fixed-table-container {
  position: relative;
  clear: both;
  border: 1px solid var(--por-table-border);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
.por-fixed-table-header {
  background-color: var(--por-table-background-color-header);
  overflow: hidden;
}
.por-fixed-table-body {
  overflow-x: auto;
  overflow-y: auto;
  background-color: var(--por-table-background-color-body);
}
.por-fixed-table-body .u-icon {
  color: var(--por-table-background-color-body);
}
.por-fixed-table {
  position: relative;
  min-width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
}
.por-fixed-table td,
.por-fixed-table th {
  padding: 0;
  vertical-align: middle;
  text-align: center;
  border-left: 1px solid var(--por-table-border);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.por-fixed-table th {
  background-color: var(--por-table-background-color-header);
  font-size: 14px;
  font-size: var(--por-font-size-14);
  font-weight: var(--por-table-font-weight-header);
  color: var(--por-table-text-color-header);
  padding: 5px 12px;
  line-height: var(--por-table-line-height-header);
}
.por-fixed-table td:first-child,
.por-fixed-table th:first-child {
  text-align: left;
  border-left: none;
}
.por-fixed-table th:first-child {
  min-width: 240px;
}
.por-fixed-table td {
  padding: 9px 12px;
  font-size: var(--por-table-font-size-body);
  font-weight: var(--por-table-font-weight-body);
  color: var(--por-table-text-color-body);
  border-left: 1px solid var(--por-table-border);
  border-top: 1px solid var(--por-table-border);
}
.por-fixed-table.por-fixed-table-stripes
  tbody
  tr:nth-child(odd):not(.por-compute-tr)
  td {
  background-color: var(--por-table-background-color-body-odd);
}
.por-fixed-table.por-fixed-table-stripes
  tbody
  tr:nth-child(2n):not(.por-compute-tr)
  td {
  background-color: var(--por-table-background-color-body);
}
.por-fixed-table.por-fixed-table-border tr:not(:last-child) td {
  border-bottom: 1px solid var(--por-table-border);
}
.por-fixed-table.por-fixed-table-small tbody tr.por-compute-tr td,
.por-fixed-table.por-fixed-table-small td,
.por-fixed-table.por-fixed-table-small th {
  padding: 9px 12px;
}
.por-fixed-table tbody tr.por-compute-tr td {
  background-color: #eef0f5;
  padding: 9px 12px;
}
.por-dropdown-container {
  position: relative;
  float: right;
}
.por-dropdown-container .por-dropdown-btn {
  padding: 0 8px;
  cursor: pointer;
}
.por-dropdown-container .por-dropdown-btn .u-icon {
  margin-left: 7px;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.por-dropdown-menu {
  display: none;
  position: absolute;
  z-index: 9;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  max-height: 151px;
  overflow: auto;
  border: 1px solid #adb0b8;
  border-radius: 0 0 2px 2px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.por-dropdown-menu li {
  padding: 4px 9px;
  background: #fff;
  font-size: 14px;
  line-height: 20px;
  color: #252b3a;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-weight: 400;
}
.por-dropdown-menu li:hover {
  background: #eef0f5;
  color: #c7000b;
}
.por-dropdown-menu li.selected {
  background: #c7000b;
  color: #fff;
}
.por-dropdown-container.open .por-dropdown-menu {
  display: block;
}
p.fixed-table-scroll-inner {
  width: 100%;
  height: 200px;
}
div.fixed-table-scroll-outer {
  top: 0;
  left: 0;
  visibility: hidden;
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.por-fixed-table-container[data-theme="dark"] {
  border-color: transparent;
}
.por-fixed-table-container[data-theme="dark"] .por-fixed-table-header,
.por-fixed-table-container[data-theme="dark"] .por-fixed-table th {
  background-color: var(--por-table-background-color-header-light);
}
.por-fixed-table-container[data-theme="dark"] .por-fixed-table td {
  color: var(--por-table-text-color-header-light);
}
.por-fixed-table-container[data-theme="dark"] .por-fixed-table td,
.por-fixed-table-container[data-theme="dark"] .por-fixed-table th {
  border-left-color: #1a2f5b;
}
.por-fixed-table-container[data-theme="dark"]
  .por-fixed-table
  tbody
  tr.por-compute-tr
  td {
  background-color: hsla(0, 0%, 100%, 0.05);
}
.por-fixed-table-container[data-theme="dark"]
  .por-fixed-table.por-fixed-table-stripes
  tbody
  tr:nth-child(2n):not(.por-compute-tr)
  td {
  background-color: hsla(0, 0%, 100%, 0.1);
}
.por-fixed-table-container[data-theme="dark"]
  .por-fixed-table.por-fixed-table-stripes
  tbody
  tr:nth-child(odd):not(.por-compute-tr)
  td {
  background-color: hsla(0, 0%, 100%, 0.15);
}
.por-fixed-table-container[data-theme="dark"] .por-fixed-table-body .u-icon {
  color: inherit;
}
[class*="por-player"] {
  --por-video-background: var(--por-color-background-primary);
  --por-video-background-light: var(--por-color-background-white);
  --por-video-ratio: 9/16;
  --por-video-player-background: var(--por-color-background-white-1);
  --por-video-player-background-close: var(--por-color-background-white-2);
  --por-video-player-background-hover: var(--por-color-background-white-2);
  --por-video-player-color: var(--por-color-background-white);
}
.por-player {
  display: inline-block;
  position: relative;
  background-color: var(--por-video-background);
  width: 960px;
}
.por-player:before {
  content: "";
  display: block;
  padding-top: calc(var(--por-video-ratio) * 100%);
}
.por-player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
}
.por-player-block {
  display: block;
  width: auto;
}
.por-modal .por-player {
  width: 700px;
  height: 500px;
}
.por-player-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.por-player-close:after,
.por-player-close:before {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  background-color: var(--por-video-player-color);
  border-radius: 1px;
  margin-left: auto;
  margin-right: auto;
}
.por-player-close:before {
  margin-top: 11px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.por-player-close:after {
  margin-top: -2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.por-player-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--por-video-player-background);
  color: var(--por-video-player-color);
  font-family: u-icon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.por-player-btn:before {
  content: "\ea1a";
}
.por-player-btn:hover {
  background-color: var(--por-video-player-background-hover);
}
.por-player-btn-large {
  width: 60px;
  height: 60px;
  font-size: 28px;
  line-height: 60px;
}
@media (max-width: 768px) {
  .por-modal-player .por-player {
    width: 100%;
    height: 71.42857143vw;
  }
  .por-modal-player .por-player-close {
    width: 32px;
    height: 32px;
    top: auto;
    right: auto;
    bottom: -50px;
    left: calc(50% - 16px);
    border-radius: 50%;
    border-radius: var(--por-radius-circle);
    background-color: var(--por-video-player-background-close);
  }
  .por-modal-player .por-player-close:before {
    margin-top: 15px;
  }
}
html[lang="ar-MENA"] .por-player-btn {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
[class*="por-pagination"] {
  --por-pagination-text-total-color: var(--por-color-text-primary);
  --por-pagination-text-color: var(--por-color-text-secondary);
  --por-pagination-text-color-active: var(--por-color-text-primary);
  --por-pagination-text-color-disabled: var(--por-color-text-disabled);
  --por-pagination-bg-color-active: var(--por-color-background-gray-4);
  --por-pagination-border-color: var(--por-color-border-input);
  --por-pagination-border-color-active: var(--por-color-border-input-active);
}
.por-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 32px;
}
.por-page-total {
  font-size: 14px;
  color: var(--por-pagination-text-total-color);
  line-height: 32px;
  margin-right: 16px;
}
.por-page-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.por-page-link {
  display: block;
  min-width: 32px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--por-pagination-text-color);
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
.por-page-link:active,
.por-page-link:hover {
  color: var(--por-pagination-text-color-active);
  background: var(--por-pagination-bg-color-active);
  border-radius: 20px;
}
.por-page-item + .por-page-item {
  margin-left: 4px;
}
.por-page-item.active .por-page-link:not(:hover) {
  color: var(--por-pagination-text-color-active);
  background: var(--por-pagination-bg-color-active);
  border-radius: 20px;
  font-weight: 700;
}
.por-page-item.disabled .por-page-link {
  cursor: default;
  color: var(--por-pagination-text-color-disabled);
  background-color: transparent;
}
.por-page-item-first,
.por-page-item-last {
  display: none;
}
.por-page-item-next .por-page-link,
.por-page-item-prev .por-page-link {
  width: 24px;
  font-size: 18px;
}
.por-page-ellipsis {
  display: block;
  min-width: 18px;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
}
.por-page-btn,
.por-page-to {
  height: 32px;
  border: 1px solid var(--por-pagination-border-color);
  font-size: 14px;
  color: var(--por-pagination-text-total-color);
  line-height: 30px;
  text-align: center;
}
.por-page-to {
  border-radius: 6px 0 0 6px;
  width: 40px;
  margin-left: 12px;
}
.por-page-btn {
  min-width: 40px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 0 6px 6px 0;
  margin-left: -1px;
  cursor: pointer;
}
.por-page-btn:hover {
  color: var(--por-pagination-text-color-active);
  font-weight: 700;
}
.por-pagination-simple .por-page-btn,
.por-pagination-simple .por-page-to {
  display: none;
}
.por-page-select {
  height: 32px;
}
.por-page-select .por-select-trigger span,
.por-page-select select {
  font-size: 14px;
  line-height: 30px;
}
.por-page-item-m-to {
  display: none;
}
@media (max-width: 767px) {
  .por-pagination {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .por-page-item + .por-page-item {
    margin-left: 8px;
  }
  .por-page-btn,
  .por-page-item,
  .por-page-to {
    display: none;
  }
  .por-page-item-first,
  .por-page-item-last,
  .por-page-item-next,
  .por-page-item-prev {
    display: block;
  }
  .por-page-item-first .por-page-link,
  .por-page-item-last .por-page-link,
  .por-page-item-next .por-page-link,
  .por-page-item-prev .por-page-link {
    width: 32px;
    border-radius: 20px;
    background: var(--por-pagination-bg-color-active);
  }
  .por-page-item-first .por-page-link:active,
  .por-page-item-last .por-page-link:active,
  .por-page-item-next .por-page-link:active,
  .por-page-item-prev .por-page-link:active {
    background: var(--por-pagination-bg-color-active);
  }
  .por-page-item-first.disabled .por-page-link,
  .por-page-item-last.disabled .por-page-link,
  .por-page-item-next.disabled .por-page-link,
  .por-page-item-prev.disabled .por-page-link {
    background-color: var(--por-pagination-bg-color-active);
  }
  .por-page-item-m-to {
    display: block;
    font-size: 14px;
  }
  .por-page-item-m-to > form {
    position: relative;
  }
  .por-page-item-m-to > form span {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 32px;
    text-align: left;
  }
  .por-page-item-m-to > form span,
  .por-page-m-go {
    line-height: 32px;
    color: var(--por-pagination-text-total-color);
  }
  .por-page-m-go {
    position: relative;
    z-index: 1;
    display: block;
    width: 56px;
    height: 32px;
    padding-right: 32px;
    background-color: transparent;
    border: 1px solid var(--por-pagination-border-color);
    border-radius: 6px;
    text-align: right;
  }
  .por-page-m-go:focus {
    border-color: var(--por-pagination-border-color-active);
  }
}
html[lang="ar-MENA"] .por-page-item-next .por-page-link,
html[lang="ar-MENA"] .por-page-item-prev .por-page-link {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
html[lang="ar-MENA"] .por-page-to {
  margin-left: 0;
  margin-right: 12px;
  border-radius: 0 6px 6px 0;
}
html[lang="ar-MENA"] .por-page-btn {
  border-radius: 6px 0 0 6px;
}